diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-03-07 12:01:36 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-03-07 12:01:36 +0000 |
commit | b9f9e6fa4e7a54d6caee81799ed88ee40dfb645b (patch) | |
tree | 4712d8131339bb67cf1bb824ea9c915c8ac75090 | |
parent | 2b8e9add859f66f32c76948ed7b95f783188695c (diff) | |
download | gitlab-ce-b9f9e6fa4e7a54d6caee81799ed88ee40dfb645b.tar.gz |
Removes UJS from reset cache button
Uses loading button for better UX
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 @@ <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" diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue index 6e5ee68eeb1..e0a7284124d 100644 --- a/app/assets/javascripts/pipelines/components/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines.vue @@ -1,6 +1,7 @@ <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> 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'); + }); + }); }); |