Merge branch '37229-mr-widget-status-icon' into 'master'
improve merge request widget status icon UX Closes #37229 See merge request gitlab-org/gitlab-ce!14200
This commit is contained in:
commit
8921af39e7
|
@ -38,24 +38,40 @@ export default {
|
||||||
|
|
||||||
return this.useCommitMessageWithDescription ? withoutDesc : withDesc;
|
return this.useCommitMessageWithDescription ? withoutDesc : withDesc;
|
||||||
},
|
},
|
||||||
|
status() {
|
||||||
|
const { pipeline, isPipelineActive, isPipelineFailed, hasCI, ciStatus } = this.mr;
|
||||||
|
|
||||||
|
if (hasCI && !ciStatus) {
|
||||||
|
return 'failed';
|
||||||
|
} else if (!pipeline) {
|
||||||
|
return 'success';
|
||||||
|
} else if (isPipelineActive) {
|
||||||
|
return 'pending';
|
||||||
|
} else if (isPipelineFailed) {
|
||||||
|
return 'failed';
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'success';
|
||||||
|
},
|
||||||
mergeButtonClass() {
|
mergeButtonClass() {
|
||||||
const defaultClass = 'btn btn-sm btn-success accept-merge-request';
|
const defaultClass = 'btn btn-sm btn-success accept-merge-request';
|
||||||
const failedClass = `${defaultClass} btn-danger`;
|
const failedClass = `${defaultClass} btn-danger`;
|
||||||
const inActionClass = `${defaultClass} btn-info`;
|
const inActionClass = `${defaultClass} btn-info`;
|
||||||
const { pipeline, isPipelineActive, isPipelineFailed, hasCI, ciStatus } = this.mr;
|
|
||||||
|
|
||||||
if (hasCI && !ciStatus) {
|
if (this.status === 'failed') {
|
||||||
return failedClass;
|
return failedClass;
|
||||||
} else if (!pipeline) {
|
} else if (this.status === 'pending') {
|
||||||
return defaultClass;
|
|
||||||
} else if (isPipelineActive) {
|
|
||||||
return inActionClass;
|
return inActionClass;
|
||||||
} else if (isPipelineFailed) {
|
|
||||||
return failedClass;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return defaultClass;
|
return defaultClass;
|
||||||
},
|
},
|
||||||
|
iconClass() {
|
||||||
|
if (this.status === 'failed' || !this.commitMessage.length || !this.isMergeAllowed() || this.mr.preventMerge) {
|
||||||
|
return 'failed';
|
||||||
|
}
|
||||||
|
return 'success';
|
||||||
|
},
|
||||||
mergeButtonText() {
|
mergeButtonText() {
|
||||||
if (this.isMergingImmediately) {
|
if (this.isMergingImmediately) {
|
||||||
return 'Merge in progress';
|
return 'Merge in progress';
|
||||||
|
@ -209,7 +225,7 @@ export default {
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<div class="mr-widget-body media">
|
<div class="mr-widget-body media">
|
||||||
<status-icon status="success" />
|
<status-icon :status="iconClass" />
|
||||||
<div class="media-body">
|
<div class="media-body">
|
||||||
<div class="mr-widget-body-controls media space-children">
|
<div class="mr-widget-body-controls media space-children">
|
||||||
<span class="btn-group append-bottom-5">
|
<span class="btn-group append-bottom-5">
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: fix merge request widget status icon for failed CI
|
||||||
|
merge_request:
|
||||||
|
author:
|
||||||
|
type: fixed
|
|
@ -95,38 +95,87 @@ describe('MRWidgetReadyToMerge', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('status', () => {
|
||||||
|
it('defaults to success', () => {
|
||||||
|
vm.mr.pipeline = true;
|
||||||
|
expect(vm.status).toEqual('success');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns failed when MR has CI but also has an unknown status', () => {
|
||||||
|
vm.mr.hasCI = true;
|
||||||
|
expect(vm.status).toEqual('failed');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns default when MR has no pipeline', () => {
|
||||||
|
expect(vm.status).toEqual('success');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns pending when pipeline is active', () => {
|
||||||
|
vm.mr.pipeline = {};
|
||||||
|
vm.mr.isPipelineActive = true;
|
||||||
|
expect(vm.status).toEqual('pending');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns failed when pipeline is failed', () => {
|
||||||
|
vm.mr.pipeline = {};
|
||||||
|
vm.mr.isPipelineFailed = true;
|
||||||
|
expect(vm.status).toEqual('failed');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('mergeButtonClass', () => {
|
describe('mergeButtonClass', () => {
|
||||||
const defaultClass = 'btn btn-sm btn-success accept-merge-request';
|
const defaultClass = 'btn btn-sm btn-success accept-merge-request';
|
||||||
const failedClass = `${defaultClass} btn-danger`;
|
const failedClass = `${defaultClass} btn-danger`;
|
||||||
const inActionClass = `${defaultClass} btn-info`;
|
const inActionClass = `${defaultClass} btn-info`;
|
||||||
|
|
||||||
it('should return default class', () => {
|
it('defaults to success class', () => {
|
||||||
|
expect(vm.mergeButtonClass).toEqual(defaultClass);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns success class for success status', () => {
|
||||||
vm.mr.pipeline = true;
|
vm.mr.pipeline = true;
|
||||||
expect(vm.mergeButtonClass).toEqual(defaultClass);
|
expect(vm.mergeButtonClass).toEqual(defaultClass);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return failed class when MR has CI but also has an unknown status', () => {
|
it('returns info class for pending status', () => {
|
||||||
vm.mr.hasCI = true;
|
|
||||||
expect(vm.mergeButtonClass).toEqual(failedClass);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should return default class when MR has no pipeline', () => {
|
|
||||||
expect(vm.mergeButtonClass).toEqual(defaultClass);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should return in action class when pipeline is active', () => {
|
|
||||||
vm.mr.pipeline = {};
|
vm.mr.pipeline = {};
|
||||||
vm.mr.isPipelineActive = true;
|
vm.mr.isPipelineActive = true;
|
||||||
expect(vm.mergeButtonClass).toEqual(inActionClass);
|
expect(vm.mergeButtonClass).toEqual(inActionClass);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return failed class when pipeline is failed', () => {
|
it('returns failed class for failed status', () => {
|
||||||
vm.mr.pipeline = {};
|
vm.mr.hasCI = true;
|
||||||
vm.mr.isPipelineFailed = true;
|
|
||||||
expect(vm.mergeButtonClass).toEqual(failedClass);
|
expect(vm.mergeButtonClass).toEqual(failedClass);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('status icon', () => {
|
||||||
|
it('defaults to tick icon', () => {
|
||||||
|
expect(vm.iconClass).toEqual('success');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows tick for success status', () => {
|
||||||
|
vm.mr.pipeline = true;
|
||||||
|
expect(vm.iconClass).toEqual('success');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows tick for pending status', () => {
|
||||||
|
vm.mr.pipeline = {};
|
||||||
|
vm.mr.isPipelineActive = true;
|
||||||
|
expect(vm.iconClass).toEqual('success');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows x for failed status', () => {
|
||||||
|
vm.mr.hasCI = true;
|
||||||
|
expect(vm.iconClass).toEqual('failed');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows x for merge not allowed', () => {
|
||||||
|
vm.mr.hasCI = true;
|
||||||
|
expect(vm.iconClass).toEqual('failed');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('mergeButtonText', () => {
|
describe('mergeButtonText', () => {
|
||||||
it('should return Merge', () => {
|
it('should return Merge', () => {
|
||||||
expect(vm.mergeButtonText).toEqual('Merge');
|
expect(vm.mergeButtonText).toEqual('Merge');
|
||||||
|
@ -177,7 +226,7 @@ describe('MRWidgetReadyToMerge', () => {
|
||||||
expect(vm.isMergeButtonDisabled).toBeTruthy();
|
expect(vm.isMergeButtonDisabled).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return true when there vm instance is making request', () => {
|
it('should return true when the vm instance is making request', () => {
|
||||||
vm.isMakingRequest = true;
|
vm.isMakingRequest = true;
|
||||||
expect(vm.isMergeButtonDisabled).toBeTruthy();
|
expect(vm.isMergeButtonDisabled).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue