Merge branch '43770-change-clear-runners-cache-ujs-action-to-an-axios-request' into 'master'

Resolve "Change Clear Runners cache UJS action to an API request"

Closes #43770

See merge request gitlab-org/gitlab-ce!17466

app/assets/javascripts/pipelines/components/nav_controls.vue

 <script>
+  import LoadingButton from '../../vue_shared/components/loading_button.vue';
+
   export default {
     name: 'PipelineNavControls',
+    components: {
+      LoadingButton,
+    },
     props: {
       newPipelinePath: {
         type: String,
@@ -19,6 +24,17 @@
         required: false,
         default: null,
       },
+
+      isResetCacheButtonLoading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    methods: {
+      onClickResetCache() {
+        this.$emit('resetRunnersCache', this.resetCachePath);
+      },
     },
   };
 </script>
@@ -32,14 +48,13 @@
       {{ s__('Pipelines|Run Pipeline') }}
     </a>
 
-    <a
+    <loading-button
       v-if="resetCachePath"
-      data-method="post"
-      :href="resetCachePath"
+      @click="onClickResetCache"
+      :loading="isResetCacheButtonLoading"
       class="btn btn-default js-clear-cache"
-    >
-      {{ s__('Pipelines|Clear Runner Caches') }}
-    </a>
+      :label="s__('Pipelines|Clear Runner Caches')"
+    />
 
     <a
       v-if="ciLintPath"

app/assets/javascripts/pipelines/components/pipelines.vue

 <script>
   import _ from 'underscore';
   import { __, sprintf, s__ } from '../../locale';
+  import createFlash from '../../flash';
   import PipelinesService from '../services/pipelines_service';
   import pipelinesMixin from '../mixins/pipelines';
   import TablePagination from '../../vue_shared/components/table_pagination.vue';
@@ -92,6 +93,7 @@
         scope: getParameterByName('scope') || 'all',
         page: getParameterByName('page') || '1',
         requestData: {},
+        isResetCacheButtonLoading: false,
       };
     },
     stateMap: {
@@ -265,6 +267,23 @@
             this.poll.restart({ data: this.requestData });
           });
       },
+
+      handleResetRunnersCache(endpoint) {
+        this.isResetCacheButtonLoading = true;
+
+        this.service.postAction(endpoint)
+          .then(() => {
+            this.isResetCacheButtonLoading = false;
+            createFlash(
+              s__('Pipelines|Project cache successfully reset.'),
+              'notice',
+            );
+          })
+          .catch(() => {
+            this.isResetCacheButtonLoading = false;
+            createFlash(s__('Pipelines|Something went wrong while cleaning runners cache.'));
+          });
+      },
     },
   };
 </script>
@@ -301,6 +320,8 @@
         :new-pipeline-path="newPipelinePath"
         :reset-cache-path="resetCachePath"
         :ci-lint-path="ciLintPath"
+        @resetRunnersCache="handleResetRunnersCache"
+        :is-reset-cache-button-loading="isResetCacheButtonLoading"
       />
     </div>
 

app/assets/javascripts/pipelines/mixins/pipelines.js

@@ -51,12 +51,10 @@ export default {
       }
     });
 
-    eventHub.$on('refreshPipelines', this.fetchPipelines);
     eventHub.$on('postAction', this.postAction);
   },
   beforeDestroy() {
-    eventHub.$off('refreshPipelines');
-    eventHub.$on('postAction', this.postAction);
+    eventHub.$off('postAction', this.postAction);
   },
   destroyed() {
     this.poll.stop();
@@ -92,7 +90,7 @@ export default {
     },
     postAction(endpoint) {
       this.service.postAction(endpoint)
-        .then(() => eventHub.$emit('refreshPipelines'))
+        .then(() => this.fetchPipelines())
         .catch(() => Flash(__('An error occurred while making the request.')));
     },
   },

app/controllers/projects/settings/ci_cd_controller.rb

@@ -13,12 +13,14 @@ module Projects
 
       def reset_cache
         if ResetProjectCacheService.new(@project, current_user).execute
-          flash[:notice] = _("Project cache successfully reset.")
+          respond_to do |format|
+            format.json { head :ok }
+          end
         else
-          flash[:error] = _("Unable to reset project cache.")
+          respond_to do |format|
+            format.json { head :bad_request }
+          end
         end
-
-        redirect_to project_pipelines_path(@project)
       end
 
       private

spec/controllers/projects/settings/ci_cd_controller_spec.rb

@@ -27,7 +27,7 @@ describe Projects::Settings::CiCdController do
       allow(ResetProjectCacheService).to receive_message_chain(:new, :execute).and_return(true)
     end
 
-    subject { post :reset_cache, namespace_id: project.namespace, project_id: project }
+    subject { post :reset_cache, namespace_id: project.namespace, project_id: project, format: :json }
 
     it 'calls reset project cache service' do
       expect(ResetProjectCacheService).to receive_message_chain(:new, :execute)
@@ -35,19 +35,11 @@ describe Projects::Settings::CiCdController do
       subject
     end
 
-    it 'redirects to project pipelines path' do
-      subject
-
-      expect(response).to have_gitlab_http_status(:redirect)
-      expect(response).to redirect_to(project_pipelines_path(project))
-    end
-
     context 'when service returns successfully' do
-      it 'sets the flash notice variable' do
+      it 'returns a success header' do
         subject
 
-        expect(controller).to set_flash[:notice]
-        expect(controller).not_to set_flash[:error]
+        expect(response).to have_gitlab_http_status(:ok)
       end
     end
 
@@ -56,11 +48,10 @@ describe Projects::Settings::CiCdController do
         allow(ResetProjectCacheService).to receive_message_chain(:new, :execute).and_return(false)
       end
 
-      it 'sets the flash error variable' do
+      it 'returns an error header' do
         subject
 
-        expect(controller).not_to set_flash[:notice]
-        expect(controller).to set_flash[:error]
+        expect(response).to have_gitlab_http_status(:bad_request)
       end
     end
   end

spec/features/projects/pipelines/pipelines_spec.rb

@@ -557,7 +557,7 @@ describe 'Pipelines', :js do
       end
 
       it 'has a clear caches button' do
-        expect(page).to have_link 'Clear Runner Caches'
+        expect(page).to have_button 'Clear Runner Caches'
       end
 
       describe 'user clicks the button' do
@@ -567,14 +567,16 @@ describe 'Pipelines', :js do
           end
 
           it 'increments jobs_cache_index' do
-            click_link 'Clear Runner Caches'
+            click_button 'Clear Runner Caches'
+            wait_for_requests
             expect(page.find('.flash-notice')).to have_content 'Project cache successfully reset.'
           end
         end
 
         context 'when project does not have jobs_cache_index' do
           it 'sets jobs_cache_index to 1' do
-            click_link 'Clear Runner Caches'
+            click_button 'Clear Runner Caches'
+            wait_for_requests
             expect(page.find('.flash-notice')).to have_content 'Project cache successfully reset.'
           end
         end

spec/javascripts/pipelines/nav_controls_spec.js

@@ -39,19 +39,6 @@ describe('Pipelines Nav Controls', () => {
     expect(component.$el.querySelector('.js-run-pipeline')).toEqual(null);
   });
 
-  it('should render link for resetting runner caches', () => {
-    const mockData = {
-      newPipelinePath: 'foo',
-      ciLintPath: 'foo',
-      resetCachePath: 'foo',
-    };
-
-    component = mountComponent(NavControlsComponent, mockData);
-
-    expect(component.$el.querySelector('.js-clear-cache').textContent.trim()).toContain('Clear Runner Caches');
-    expect(component.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(mockData.resetCachePath);
-  });
-
   it('should render link for CI lint', () => {
     const mockData = {
       newPipelinePath: 'foo',
@@ -65,4 +52,28 @@ describe('Pipelines Nav Controls', () => {
     expect(component.$el.querySelector('.js-ci-lint').textContent.trim()).toContain('CI Lint');
     expect(component.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(mockData.ciLintPath);
   });
+
+  describe('Reset Runners Cache', () => {
+    beforeEach(() => {
+      const mockData = {
+        newPipelinePath: 'foo',
+        ciLintPath: 'foo',
+        resetCachePath: 'foo',
+      };
+
+      component = mountComponent(NavControlsComponent, mockData);
+    });
+
+    it('should render button for resetting runner caches', () => {
+      expect(component.$el.querySelector('.js-clear-cache').textContent.trim()).toContain('Clear Runner Caches');
+    });
+
+    it('should emit postAction event when reset runner cache button is clicked', () => {
+      spyOn(component, '$emit');
+
+      component.$el.querySelector('.js-clear-cache').click();
+
+      expect(component.$emit).toHaveBeenCalledWith('resetRunnersCache', 'foo');
+    });
+  });
 });

spec/javascripts/pipelines/pipelines_spec.js

@@ -95,16 +95,16 @@ describe('Pipelines', () => {
         expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
       });
 
-      it('renders Run Pipeline button', () => {
+      it('renders Run Pipeline link', () => {
         expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath);
       });
 
-      it('renders CI Lint button', () => {
+      it('renders CI Lint link', () => {
         expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath);
       });
 
       it('renders Clear Runner Cache button', () => {
-        expect(vm.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(paths.resetCachePath);
+        expect(vm.$el.querySelector('.js-clear-cache').textContent.trim()).toEqual('Clear Runner Caches');
       });
 
       it('renders pipelines table', () => {
@@ -139,16 +139,16 @@ describe('Pipelines', () => {
         expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
       });
 
-      it('renders Run Pipeline button', () => {
+      it('renders Run Pipeline link', () => {
         expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath);
       });
 
-      it('renders CI Lint button', () => {
+      it('renders CI Lint link', () => {
         expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath);
       });
 
       it('renders Clear Runner Cache button', () => {
-        expect(vm.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(paths.resetCachePath);
+        expect(vm.$el.querySelector('.js-clear-cache').textContent.trim()).toEqual('Clear Runner Caches');
       });
 
       it('renders tab empty state', () => {
@@ -218,7 +218,7 @@ describe('Pipelines', () => {
       it('renders buttons', () => {
         expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath);
         expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath);
-        expect(vm.$el.querySelector('.js-clear-cache').getAttribute('href')).toEqual(paths.resetCachePath);
+        expect(vm.$el.querySelector('.js-clear-cache').textContent.trim()).toEqual('Clear Runner Caches');
       });
 
       it('renders error state', () => {