Commit f4aced6f authored by Filipa Lacerda's avatar Filipa Lacerda

Reloads pipeline table when dropdown action is clicked and closes the dropdown in the MR widget

parent a55da0a9
...@@ -5,7 +5,6 @@ import { dasherize } from '~/lib/utils/text_utility'; ...@@ -5,7 +5,6 @@ import { dasherize } from '~/lib/utils/text_utility';
import { __ } from '~/locale'; import { __ } from '~/locale';
import createFlash from '~/flash'; import createFlash from '~/flash';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
/** /**
...@@ -21,7 +20,6 @@ import Icon from '~/vue_shared/components/icon.vue'; ...@@ -21,7 +20,6 @@ import Icon from '~/vue_shared/components/icon.vue';
export default { export default {
components: { components: {
Icon, Icon,
LoadingIcon,
}, },
directives: { directives: {
...@@ -47,7 +45,7 @@ export default { ...@@ -47,7 +45,7 @@ export default {
}, },
data() { data() {
return { return {
isLoading: false, isDisabled: false,
}; };
}, },
...@@ -67,15 +65,15 @@ export default { ...@@ -67,15 +65,15 @@ export default {
onClickAction() { onClickAction() {
$(this.$el).tooltip('hide'); $(this.$el).tooltip('hide');
this.isLoading = true; this.isDisabled = true;
axios.post(`${this.link}.json`) axios.post(`${this.link}.json`)
.then(() => { .then(() => {
this.isLoading = false; this.isDisabled = false;
this.$emit('pipelineActionRequestComplete'); this.$emit('pipelineActionRequestComplete');
}) })
.catch(() => { .catch(() => {
this.isLoading = false; this.isDisabled = false;
createFlash(__('An error occurred while making the request.')); createFlash(__('An error occurred while making the request.'));
}); });
...@@ -93,12 +91,8 @@ export default { ...@@ -93,12 +91,8 @@ export default {
btn-transparent ci-action-icon-container ci-action-icon-wrapper" btn-transparent ci-action-icon-container ci-action-icon-wrapper"
:class="cssClass" :class="cssClass"
data-container="body" data-container="body"
:disabled="isLoading" :disabled="isDisabled"
> >
<icon <icon :name="actionIcon"/>
v-if="!isLoading"
:name="actionIcon"
/>
<loading-icon v-else />
</button> </button>
</template> </template>
...@@ -143,10 +143,10 @@ export default { ...@@ -143,10 +143,10 @@ export default {
pipelineActionRequestComplete() { pipelineActionRequestComplete() {
if (this.type === 'PIPELINES_TABLE') { if (this.type === 'PIPELINES_TABLE') {
// warn the table to update // warn the table to update
eventHub.$emit('clickedDropdown'); eventHub.$emit('refreshPipelinesTable');
} else { } else {
// refresh the content // close the dropdown in mr widget
this.fetchJobs(); $(this.$refs.dropdown).dropdown('toggle');
} }
}, },
}, },
...@@ -167,6 +167,7 @@ export default { ...@@ -167,6 +167,7 @@ export default {
id="stageDropdown" id="stageDropdown"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
ref="dropdown"
> >
<span <span
......
...@@ -55,11 +55,13 @@ export default { ...@@ -55,11 +55,13 @@ export default {
eventHub.$on('postAction', this.postAction); eventHub.$on('postAction', this.postAction);
eventHub.$on('retryPipeline', this.postAction); eventHub.$on('retryPipeline', this.postAction);
eventHub.$on('clickedDropdown', this.updateTable); eventHub.$on('clickedDropdown', this.updateTable);
eventHub.$on('refreshPipelinesTable', this.fetchPipelines);
}, },
beforeDestroy() { beforeDestroy() {
eventHub.$off('postAction', this.postAction); eventHub.$off('postAction', this.postAction);
eventHub.$off('retryPipeline', this.postAction); eventHub.$off('retryPipeline', this.postAction);
eventHub.$off('clickedDropdown', this.updateTable); eventHub.$off('clickedDropdown', this.updateTable);
eventHub.$off('refreshPipelinesTable', this.fetchPipelines);
}, },
destroyed() { destroyed() {
this.poll.stop(); this.poll.stop();
......
...@@ -48,23 +48,11 @@ describe('pipeline graph action component', () => { ...@@ -48,23 +48,11 @@ describe('pipeline graph action component', () => {
expect(component.$el.querySelector('svg')).toBeDefined(); 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', () => { describe('on click', () => {
it('emits `pipelineActionRequestComplete` after a successfull request', done => { it('emits `pipelineActionRequestComplete` after a successfull request', done => {
spyOn(component, '$emit'); spyOn(component, '$emit');
component.$el.click(); component.$el.click();
expect(component.isLoading).toEqual(true);
component.$nextTick() component.$nextTick()
.then(() => { .then(() => {
......
...@@ -111,7 +111,7 @@ describe('Pipelines stage component', () => { ...@@ -111,7 +111,7 @@ describe('Pipelines stage component', () => {
}); });
describe('within pipeline table', () => { 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'); spyOn(eventHub, '$emit');
component.type = 'PIPELINES_TABLE'; component.type = 'PIPELINES_TABLE';
...@@ -121,29 +121,7 @@ describe('Pipelines stage component', () => { ...@@ -121,29 +121,7 @@ describe('Pipelines stage component', () => {
component.$el.querySelector('.js-ci-action').click(); component.$el.querySelector('.js-ci-action').click();
component.$nextTick() component.$nextTick()
.then(() => { .then(() => {
expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown'); expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
expect(eventHub.$emit).toHaveBeenCalledTimes(2);
})
.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) .then(done)
.catch(done.fail); .catch(done.fail);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment