From b9f9e6fa4e7a54d6caee81799ed88ee40dfb645b Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 7 Mar 2018 12:01:36 +0000 Subject: [PATCH] Removes UJS from reset cache button Uses loading button for better UX --- .../pipelines/components/nav_controls.vue | 27 +++++++++++--- .../pipelines/components/pipelines.vue | 21 +++++++++++ .../javascripts/pipelines/mixins/pipelines.js | 6 +-- .../projects/pipelines/pipelines_spec.rb | 8 ++-- .../pipelines/nav_controls_spec.js | 37 ++++++++++++------- 5 files changed, 73 insertions(+), 26 deletions(-) diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue index 383ab51fe56..eba5678e3e5 100644 --- a/app/assets/javascripts/pipelines/components/nav_controls.vue +++ b/app/assets/javascripts/pipelines/components/nav_controls.vue @@ -1,6 +1,11 @@ @@ -32,14 +48,13 @@ {{ s__('Pipelines|Run Pipeline') }} - - {{ s__('Pipelines|Clear Runner Caches') }} - + :label="s__('Pipelines|Clear Runner Caches')" + /> 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.')); + }); + }, }, }; @@ -301,6 +320,8 @@ :new-pipeline-path="newPipelinePath" :reset-cache-path="resetCachePath" :ci-lint-path="ciLintPath" + @resetRunnersCache="handleResetRunnersCache" + :is-reset-cache-button-loading="isResetCacheButtonLoading" /> diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js index 9fcc07abee5..522a4277bd7 100644 --- a/app/assets/javascripts/pipelines/mixins/pipelines.js +++ b/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.'))); }, }, diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb index 849d85061df..33ad59abfdf 100644 --- a/spec/features/projects/pipelines/pipelines_spec.rb +++ b/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 diff --git a/spec/javascripts/pipelines/nav_controls_spec.js b/spec/javascripts/pipelines/nav_controls_spec.js index 77c5258f74c..f4cdc1d21ae 100644 --- a/spec/javascripts/pipelines/nav_controls_spec.js +++ b/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, '$on'); + + component.$el.querySelector('.js-clear-cache').click(); + + expect(component.$on).toHaveBeenCalledWith('postAction', 'foo'); + }); + }); });