Hides loading spinner after request
In the pipeline's actions, moves the request to the component to allow to manage the inner state properly
This commit is contained in:
parent
32d89f07f5
commit
48b93f7aee
|
@ -1,9 +1,11 @@
|
|||
<script>
|
||||
import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
|
||||
import { s__, sprintf } from '~/locale';
|
||||
import axios from '~/lib/utils/axios_utils';
|
||||
import flash from '~/flash';
|
||||
import { s__, __, sprintf } from '~/locale';
|
||||
import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
|
||||
import Icon from '~/vue_shared/components/icon.vue';
|
||||
import eventHub from '../event_hub';
|
||||
import Icon from '../../vue_shared/components/icon.vue';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
|
@ -44,7 +46,24 @@ export default {
|
|||
|
||||
this.isLoading = true;
|
||||
|
||||
eventHub.$emit('postAction', action.path);
|
||||
/**
|
||||
* Ideally, the component would not make an api call directly.
|
||||
* However, in order to use the eventhub and know when to
|
||||
* toggle back the `isLoading` property we'd need an ID
|
||||
* to track the request with a wacther - since this component
|
||||
* is rendered at least 20 times in the same page, moving the
|
||||
* api call directly here is the most performant solution
|
||||
*/
|
||||
axios
|
||||
.post(`${action.path}.json`)
|
||||
.then(() => {
|
||||
this.isLoading = false;
|
||||
eventHub.$emit('updateTable');
|
||||
})
|
||||
.catch(() => {
|
||||
this.isLoading = false;
|
||||
flash(__('An error occurred while making the request.'));
|
||||
});
|
||||
},
|
||||
|
||||
isActionDisabled(action) {
|
||||
|
|
|
@ -60,12 +60,14 @@ export default {
|
|||
eventHub.$on('postAction', this.postAction);
|
||||
eventHub.$on('retryPipeline', this.postAction);
|
||||
eventHub.$on('clickedDropdown', this.updateTable);
|
||||
eventHub.$on('updateTable', 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('updateTable', this.updateTable);
|
||||
eventHub.$off('refreshPipelinesTable', this.fetchPipelines);
|
||||
},
|
||||
destroyed() {
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Hides loading spinner in pipelines actions after request has been fullfiled
|
||||
merge_request:
|
||||
author:
|
||||
type: fixed
|
|
@ -1,5 +1,6 @@
|
|||
import Vue from 'vue';
|
||||
import eventHub from '~/pipelines/event_hub';
|
||||
import MockAdapter from 'axios-mock-adapter';
|
||||
import axios from '~/lib/utils/axios_utils';
|
||||
import PipelinesActions from '~/pipelines/components/pipelines_actions.vue';
|
||||
import mountComponent from 'spec/helpers/vue_mount_component_helper';
|
||||
import { TEST_HOST } from 'spec/test_constants';
|
||||
|
@ -7,9 +8,15 @@ import { TEST_HOST } from 'spec/test_constants';
|
|||
describe('Pipelines Actions dropdown', () => {
|
||||
const Component = Vue.extend(PipelinesActions);
|
||||
let vm;
|
||||
let mock;
|
||||
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
mock.restore();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
mock = new MockAdapter(axios);
|
||||
});
|
||||
|
||||
describe('manual actions', () => {
|
||||
|
@ -40,6 +47,22 @@ describe('Pipelines Actions dropdown', () => {
|
|||
|
||||
expect(dropdownItem).toBeDisabled();
|
||||
});
|
||||
|
||||
describe('on click', () => {
|
||||
it('makes a request and toggles the loading state', done => {
|
||||
mock.onPost(actions.path).reply(200);
|
||||
|
||||
vm.$el.querySelector('.dropdown-menu li button').click();
|
||||
|
||||
expect(vm.isLoading).toEqual(true);
|
||||
|
||||
setTimeout(() => {
|
||||
expect(vm.isLoading).toEqual(false);
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('scheduled jobs', () => {
|
||||
|
@ -71,26 +94,27 @@ describe('Pipelines Actions dropdown', () => {
|
|||
.catch(done.fail);
|
||||
});
|
||||
|
||||
it('emits postAction event after confirming', () => {
|
||||
const emitSpy = jasmine.createSpy('emit');
|
||||
eventHub.$on('postAction', emitSpy);
|
||||
it('makes post request after confirming', done => {
|
||||
mock.onPost(scheduledJobAction.path).reply(200);
|
||||
spyOn(window, 'confirm').and.callFake(() => true);
|
||||
|
||||
findDropdownItem(scheduledJobAction).click();
|
||||
|
||||
expect(window.confirm).toHaveBeenCalled();
|
||||
expect(emitSpy).toHaveBeenCalledWith(scheduledJobAction.path);
|
||||
setTimeout(() => {
|
||||
expect(mock.history.post.length).toBe(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('does not emit postAction event if confirmation is cancelled', () => {
|
||||
const emitSpy = jasmine.createSpy('emit');
|
||||
eventHub.$on('postAction', emitSpy);
|
||||
it('does not make post request if confirmation is cancelled', () => {
|
||||
mock.onPost(scheduledJobAction.path).reply(200);
|
||||
spyOn(window, 'confirm').and.callFake(() => false);
|
||||
|
||||
findDropdownItem(scheduledJobAction).click();
|
||||
|
||||
expect(window.confirm).toHaveBeenCalled();
|
||||
expect(emitSpy).not.toHaveBeenCalled();
|
||||
expect(mock.history.post.length).toBe(0);
|
||||
});
|
||||
|
||||
it('displays the remaining time in the dropdown', () => {
|
||||
|
|
Loading…
Reference in New Issue