Merge branch 'fl-loading-icon' into 'master'
Show loading icon only when making the request See merge request gitlab-org/gitlab-ce!19116
This commit is contained in:
commit
942fe5fe79
3 changed files with 22 additions and 4 deletions
|
@ -37,6 +37,7 @@
|
||||||
return {
|
return {
|
||||||
pipelineId: '',
|
pipelineId: '',
|
||||||
endpoint: '',
|
endpoint: '',
|
||||||
|
cancelingPipeline: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -64,6 +65,7 @@
|
||||||
},
|
},
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
eventHub.$emit('postAction', this.endpoint);
|
eventHub.$emit('postAction', this.endpoint);
|
||||||
|
this.cancelingPipeline = this.pipelineId;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -106,6 +108,7 @@
|
||||||
:update-graph-dropdown="updateGraphDropdown"
|
:update-graph-dropdown="updateGraphDropdown"
|
||||||
:auto-devops-help-path="autoDevopsHelpPath"
|
:auto-devops-help-path="autoDevopsHelpPath"
|
||||||
:view-type="viewType"
|
:view-type="viewType"
|
||||||
|
:canceling-pipeline="cancelingPipeline"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<modal
|
<modal
|
||||||
|
|
|
@ -46,12 +46,16 @@
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
cancelingPipeline: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
pipelinesTable: PIPELINES_TABLE,
|
pipelinesTable: PIPELINES_TABLE,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isRetrying: false,
|
isRetrying: false,
|
||||||
isCancelling: false,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -227,12 +231,14 @@
|
||||||
isChildView() {
|
isChildView() {
|
||||||
return this.viewType === 'child';
|
return this.viewType === 'child';
|
||||||
},
|
},
|
||||||
|
|
||||||
|
isCancelling() {
|
||||||
|
return this.cancelingPipeline === this.pipeline.id;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleCancelClick() {
|
handleCancelClick() {
|
||||||
this.isCancelling = true;
|
|
||||||
|
|
||||||
eventHub.$emit('openConfirmationModal', {
|
eventHub.$emit('openConfirmationModal', {
|
||||||
pipelineId: this.pipeline.id,
|
pipelineId: this.pipeline.id,
|
||||||
endpoint: this.pipeline.cancel_path,
|
endpoint: this.pipeline.cancel_path,
|
||||||
|
|
|
@ -182,7 +182,16 @@ describe('Pipelines Table Row', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
component.$el.querySelector('.js-pipelines-cancel-button').click();
|
component.$el.querySelector('.js-pipelines-cancel-button').click();
|
||||||
expect(component.isCancelling).toEqual(true);
|
});
|
||||||
|
|
||||||
|
it('renders a loading icon when `cancelingPipeline` matches pipeline id', done => {
|
||||||
|
component.cancelingPipeline = pipeline.id;
|
||||||
|
component.$nextTick()
|
||||||
|
.then(() => {
|
||||||
|
expect(component.isCancelling).toEqual(true);
|
||||||
|
})
|
||||||
|
.then(done)
|
||||||
|
.catch(done.fail);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue