Reloads pipeline table when dropdown action is clicked and closes the dropdown in the MR widget
This commit is contained in:
parent
a55da0a95a
commit
f4aced6f6d
|
@ -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,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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue