diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-05-16 12:24:59 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-05-16 13:20:29 +0100 |
commit | f4aced6f6d7419f17fcaeacaab623edc8205baed (patch) | |
tree | 7d78639f78b5483b5fe219e6b8562aa9b7cec080 | |
parent | a55da0a95a7d38caed4070006f611e9eaea3e387 (diff) | |
download | gitlab-ce-f4aced6f6d7419f17fcaeacaab623edc8205baed.tar.gz |
Reloads pipeline table when dropdown action is clicked and closes the dropdown in the MR widget
5 files changed, 14 insertions, 51 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue index 11a8bcb0772..82b4ce083fb 100644 --- a/app/assets/javascripts/pipelines/components/graph/action_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue @@ -5,7 +5,6 @@ import { dasherize } from '~/lib/utils/text_utility'; import { __ } from '~/locale'; import createFlash from '~/flash'; import tooltip from '~/vue_shared/directives/tooltip'; -import LoadingIcon from '~/vue_shared/components/loading_icon.vue'; import Icon from '~/vue_shared/components/icon.vue'; /** @@ -21,7 +20,6 @@ import Icon from '~/vue_shared/components/icon.vue'; export default { components: { Icon, - LoadingIcon, }, directives: { @@ -47,7 +45,7 @@ export default { }, data() { return { - isLoading: false, + isDisabled: false, }; }, @@ -67,15 +65,15 @@ export default { onClickAction() { $(this.$el).tooltip('hide'); - this.isLoading = true; + this.isDisabled = true; axios.post(`${this.link}.json`) .then(() => { - this.isLoading = false; + this.isDisabled = false; this.$emit('pipelineActionRequestComplete'); }) .catch(() => { - this.isLoading = false; + this.isDisabled = false; createFlash(__('An error occurred while making the request.')); }); @@ -93,12 +91,8 @@ export default { btn-transparent ci-action-icon-container ci-action-icon-wrapper" :class="cssClass" data-container="body" - :disabled="isLoading" + :disabled="isDisabled" > - <icon - v-if="!isLoading" - :name="actionIcon" - /> - <loading-icon v-else /> + <icon :name="actionIcon"/> </button> </template> diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue index 8e7430bf69e..61cf7c1b665 100644 --- a/app/assets/javascripts/pipelines/components/stage.vue +++ b/app/assets/javascripts/pipelines/components/stage.vue @@ -143,10 +143,10 @@ export default { pipelineActionRequestComplete() { if (this.type === 'PIPELINES_TABLE') { // warn the table to update - eventHub.$emit('clickedDropdown'); + eventHub.$emit('refreshPipelinesTable'); } else { - // refresh the content - this.fetchJobs(); + // close the dropdown in mr widget + $(this.$refs.dropdown).dropdown('toggle'); } }, }, @@ -167,6 +167,7 @@ export default { id="stageDropdown" aria-haspopup="true" aria-expanded="false" + ref="dropdown" > <span diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js index de0faf181e5..30b1eee186d 100644 --- a/app/assets/javascripts/pipelines/mixins/pipelines.js +++ b/app/assets/javascripts/pipelines/mixins/pipelines.js @@ -55,11 +55,13 @@ export default { eventHub.$on('postAction', this.postAction); eventHub.$on('retryPipeline', this.postAction); eventHub.$on('clickedDropdown', this.updateTable); + eventHub.$on('refreshPipelinesTable', this.fetchPipelines); }, beforeDestroy() { eventHub.$off('postAction', this.postAction); eventHub.$off('retryPipeline', this.postAction); eventHub.$off('clickedDropdown', this.updateTable); + eventHub.$off('refreshPipelinesTable', this.fetchPipelines); }, destroyed() { this.poll.stop(); diff --git a/spec/javascripts/pipelines/graph/action_component_spec.js b/spec/javascripts/pipelines/graph/action_component_spec.js index 97f8ae3cd89..568e679abe9 100644 --- a/spec/javascripts/pipelines/graph/action_component_spec.js +++ b/spec/javascripts/pipelines/graph/action_component_spec.js @@ -48,23 +48,11 @@ describe('pipeline graph action component', () => { expect(component.$el.querySelector('svg')).toBeDefined(); }); - it('renders a loading icon while component is loading', done => { - component.isLoading = true; - - component.$nextTick() - .then(() => { - expect(component.$el.querySelector('.fa-spin')).not.toBeNull(); - }) - .then(done) - .catch(done.fail); - }); - describe('on click', () => { it('emits `pipelineActionRequestComplete` after a successfull request', done => { spyOn(component, '$emit'); component.$el.click(); - expect(component.isLoading).toEqual(true); component.$nextTick() .then(() => { diff --git a/spec/javascripts/pipelines/stage_spec.js b/spec/javascripts/pipelines/stage_spec.js index 2ba5ecf92e7..16f6db39d6a 100644 --- a/spec/javascripts/pipelines/stage_spec.js +++ b/spec/javascripts/pipelines/stage_spec.js @@ -111,7 +111,7 @@ describe('Pipelines stage component', () => { }); describe('within pipeline table', () => { - it('emits `clickedDropdown` event when `pipelineActionRequestComplete` is triggered', done => { + it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', done => { spyOn(eventHub, '$emit'); component.type = 'PIPELINES_TABLE'; @@ -121,34 +121,12 @@ describe('Pipelines stage component', () => { component.$el.querySelector('.js-ci-action').click(); component.$nextTick() .then(() => { - expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown'); - - expect(eventHub.$emit).toHaveBeenCalledTimes(2); + expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable'); }) .then(done) .catch(done.fail); }, 0); }); }); - - describe('without a type', () => { - it('fetches dropdown content again', done => { - spyOn(component, 'fetchJobs').and.callThrough(); - - component.$el.querySelector('button').click(); - - expect(component.fetchJobs).toHaveBeenCalledTimes(1); - - setTimeout(() => { - component.$el.querySelector('.js-ci-action').click(); - component.$nextTick() - .then(() => { - expect(component.fetchJobs).toHaveBeenCalledTimes(2); - }) - .then(done) - .catch(done.fail); - }, 0); - }); - }); }); }); |