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';
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>
......@@ -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
......
......@@ -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();
......
......@@ -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(() => {
......
......@@ -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,29 +121,7 @@ describe('Pipelines stage component', () => {
component.$el.querySelector('.js-ci-action').click();
component.$nextTick()
.then(() => {
expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
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);
expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
})
.then(done)
.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