Commit 8921af39 authored by Jacob Schatz's avatar Jacob Schatz

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
parents 283e13b8 ff043cba
...@@ -38,24 +38,40 @@ export default { ...@@ -38,24 +38,40 @@ export default {
return this.useCommitMessageWithDescription ? withoutDesc : withDesc; return this.useCommitMessageWithDescription ? withoutDesc : withDesc;
}, },
mergeButtonClass() { status() {
const defaultClass = 'btn btn-sm btn-success accept-merge-request';
const failedClass = `${defaultClass} btn-danger`;
const inActionClass = `${defaultClass} btn-info`;
const { pipeline, isPipelineActive, isPipelineFailed, hasCI, ciStatus } = this.mr; const { pipeline, isPipelineActive, isPipelineFailed, hasCI, ciStatus } = this.mr;
if (hasCI && !ciStatus) { if (hasCI && !ciStatus) {
return failedClass; return 'failed';
} else if (!pipeline) { } else if (!pipeline) {
return defaultClass; return 'success';
} else if (isPipelineActive) { } else if (isPipelineActive) {
return inActionClass; return 'pending';
} else if (isPipelineFailed) { } else if (isPipelineFailed) {
return 'failed';
}
return 'success';
},
mergeButtonClass() {
const defaultClass = 'btn btn-sm btn-success accept-merge-request';
const failedClass = `${defaultClass} btn-danger`;
const inActionClass = `${defaultClass} btn-info`;
if (this.status === 'failed') {
return failedClass; return failedClass;
} else if (this.status === 'pending') {
return inActionClass;
} }
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 { ...@@ -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">
......
---
title: fix merge request widget status icon for failed CI
merge_request:
author:
type: fixed
...@@ -95,35 +95,84 @@ describe('MRWidgetReadyToMerge', () => { ...@@ -95,35 +95,84 @@ 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.pipeline = {};
vm.mr.isPipelineActive = true;
expect(vm.mergeButtonClass).toEqual(inActionClass);
});
it('returns failed class for failed status', () => {
vm.mr.hasCI = true; vm.mr.hasCI = true;
expect(vm.mergeButtonClass).toEqual(failedClass); expect(vm.mergeButtonClass).toEqual(failedClass);
}); });
});
it('should return default class when MR has no pipeline', () => { describe('status icon', () => {
expect(vm.mergeButtonClass).toEqual(defaultClass); it('defaults to tick icon', () => {
expect(vm.iconClass).toEqual('success');
}); });
it('should return in action class when pipeline is active', () => { 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.pipeline = {};
vm.mr.isPipelineActive = true; vm.mr.isPipelineActive = true;
expect(vm.mergeButtonClass).toEqual(inActionClass); expect(vm.iconClass).toEqual('success');
}); });
it('should return failed class when pipeline is failed', () => { it('shows x for failed status', () => {
vm.mr.pipeline = {}; vm.mr.hasCI = true;
vm.mr.isPipelineFailed = true; expect(vm.iconClass).toEqual('failed');
expect(vm.mergeButtonClass).toEqual(failedClass); });
it('shows x for merge not allowed', () => {
vm.mr.hasCI = true;
expect(vm.iconClass).toEqual('failed');
}); });
}); });
...@@ -177,7 +226,7 @@ describe('MRWidgetReadyToMerge', () => { ...@@ -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();
}); });
......
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