BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Unverified Commit 3d89a03e by Filipa Lacerda
Options

Moves widget header into a vue file

parent 1533cf10
Showing with 340 additions and 201 deletions
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js → app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
import tooltip from '../../vue_shared/directives/tooltip';
import { pluralize } from '../../lib/utils/text_utility';
import icon from '../../vue_shared/components/icon.vue';
<script>
import tooltip from '~/vue_shared/directives/tooltip';
import { n__ } from '~/locale';
import icon from '~/vue_shared/components/icon.vue';
import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
export default {
name: 'MRWidgetHeader',
props: {
mr: { type: Object, required: true },
},
directives: {
tooltip,
},
components: {
icon,
},
computed: {
shouldShowCommitsBehindText() {
return this.mr.divergedCommitsCount > 0;
export default {
name: 'MRWidgetHeader',
directives: {
tooltip,
},
commitsText() {
return pluralize('commit', this.mr.divergedCommitsCount);
components: {
icon,
clipboardButton,
},
branchNameClipboardData() {
// This supports code in app/assets/javascripts/copy_to_clipboard.js that
// works around ClipboardJS limitations to allow the context-specific
// copy/pasting of plain text or GFM.
return JSON.stringify({
text: this.mr.sourceBranch,
gfm: `\`${this.mr.sourceBranch}\``,
});
props: {
mr: {
type: Object,
required: true,
},
},
},
methods: {
isBranchTitleLong(branchTitle) {
return branchTitle.length > 32;
computed: {
shouldShowCommitsBehindText() {
return this.mr.divergedCommitsCount > 0;
},
commitsText() {
return n__('commit behind', 'commits behind', this.mr.divergedCommitsCount);
},
branchNameClipboardData() {
// This supports code in app/assets/javascripts/copy_to_clipboard.js that
// works around ClipboardJS limitations to allow the context-specific
// copy/pasting of plain text or GFM.
return JSON.stringify({
text: this.mr.sourceBranch,
gfm: `\`${this.mr.sourceBranch}\``,
});
},
},
},
template: `
<div class="mr-source-target">
<div class="normal">
<strong>
Request to merge
<span
class="label-branch"
:class="{'label-truncated': isBranchTitleLong(mr.sourceBranch)}"
:title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
data-placement="bottom"
:v-tooltip="isBranchTitleLong(mr.sourceBranch)"
v-html="mr.sourceBranchLink"></span>
<button
v-tooltip
class="btn btn-transparent btn-clipboard"
data-title="Copy branch name to clipboard"
:data-clipboard-text="branchNameClipboardData">
<i
aria-hidden="true"
class="fa fa-clipboard"></i>
</button>
into
<span
class="label-branch"
:v-tooltip="isBranchTitleLong(mr.sourceBranch)"
:class="{'label-truncatedtooltip': isBranchTitleLong(mr.targetBranch)}"
:title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
data-placement="bottom">
<a :href="mr.targetBranchTreePath">{{mr.targetBranch}}</a>
</span>
</strong>
methods: {
isBranchTitleLong(branchTitle) {
return branchTitle.length > 32;
},
},
};
</script>
<template>
<div class="mr-source-target">
<div class="normal">
<strong>
{{ s__("mrWidget|Request to merge") }}
<span
v-if="shouldShowCommitsBehindText"
class="diverged-commits-count">
(<a :href="mr.targetBranchPath">{{mr.divergedCommitsCount}} {{commitsText}} behind</a>)
class="label-branch js-source-branch"
:class="{ 'label-truncated': isBranchTitleLong(mr.sourceBranch) }"
:title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
data-placement="bottom"
:v-tooltip="isBranchTitleLong(mr.sourceBranch)"
v-html="mr.sourceBranchLink"
>
</span>
</div>
<div v-if="mr.isOpen">
<a
href="#modal_merge_info"
data-toggle="modal"
:disabled="mr.sourceBranchRemoved"
class="btn btn-sm inline">
Check out branch
</a>
<span class="dropdown prepend-left-10">
<clipboardButton
:text="branchNameClipboardData"
:title="__('Copy branch name to clipboard')"
/>
{{ s__("mrWidget|into") }}
<span
class="label-branch"
:v-tooltip="isBranchTitleLong(mr.sourceBranch)"
:class="{ 'label-truncatedtooltip': isBranchTitleLong(mr.targetBranch) }"
:title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
data-placement="bottom"
>
<a
class="btn btn-sm inline dropdown-toggle"
data-toggle="dropdown"
aria-label="Download as"
role="button">
<icon
name="download">
</icon>
<i
class="fa fa-caret-down"
aria-hidden="true">
</i>
:href="mr.targetBranchTreePath"
class="js-target-branch"
>
{{ mr.targetBranch }}
</a>
<ul class="dropdown-menu dropdown-menu-align-right">
<li>
<a
:href="mr.emailPatchesPath"
download>
Email patches
</a>
</li>
<li>
<a
:href="mr.plainDiffPath"
download>
Plain diff
</a>
</li>
</ul>
</span>
</div>
</strong>
<span
v-if="shouldShowCommitsBehindText"
class="diverged-commits-count"
>
(<a :href="mr.targetBranchPath">{{ mr.divergedCommitsCount }} {{ commitsText }}</a>)
</span>
</div>
<div v-if="mr.isOpen">
<button
data-target="#modal_merge_info"
data-toggle="modal"
:disabled="mr.sourceBranchRemoved"
class="btn btn-sm inline js-check-out-branch"
type="button"
>
{{ s__("mrWidget|Check out branch") }}
</button>
<span class="dropdown prepend-left-10">
<button
type="button"
class="btn btn-sm inline dropdown-toggle"
data-toggle="dropdown"
aria-label="Download as"
aria-haspopup="true"
aria-expanded="false"
>
<icon name="download" />
<i
class="fa fa-caret-down"
aria-hidden="true">
</i>
</button>
<ul class="dropdown-menu dropdown-menu-align-right">
<li>
<a
class="js-download-email-patches"
:href="mr.emailPatchesPath"
download
>
{{ s__("mrWidget|Email patches") }}
</a>
</li>
<li>
<a
class="js-download-plain-diff"
:href="mr.plainDiffPath"
download
>
{{ s__("mrWidget|Plain diff") }}
</a>
</li>
</ul>
</span>
</div>
`,
};
</div>
</template>
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
......@@ -7,14 +7,14 @@
missingBranch: {
type: String,
required: false,
default: ''
default: '',
},
},
computed: {
missingBranchInfo() {
return sprintf(
s__('mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the'),
{ branch: this.missingBranch }
{ branch: this.missingBranch },
);
},
},
......
app/assets/javascripts/vue_merge_request_widget/dependencies.js
......@@ -11,7 +11,7 @@
export { default as Vue } from 'vue';
export { default as SmartInterval } from '~/smart_interval';
export { default as WidgetHeader } from './components/mr_widget_header';
export { default as WidgetHeader } from './components/mr_widget_header.vue';
export { default as WidgetMergeHelp } from './components/mr_widget_merge_help.vue';
export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
export { default as WidgetDeployment } from './components/mr_widget_deployment';
......
spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
import Vue from 'vue';
import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header';
const createComponent = (mr) => {
const Component = Vue.extend(headerComponent);
return new Component({
el: document.createElement('div'),
propsData: { mr },
});
};
import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('MRWidgetHeader', () => {
describe('props', () => {
it('should have props', () => {
const { mr } = headerComponent.props;
let vm;
let Component;
expect(mr.type instanceof Object).toBeTruthy();
expect(mr.required).toBeTruthy();
});
beforeEach(() => {
Component = Vue.extend(headerComponent);
});
afterEach(() => {
vm.$destroy();
});
describe('computed', () => {
let vm;
beforeEach(() => {
vm = createComponent({
divergedCommitsCount: 12,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: '/foo/bar/mr-widget-refactor',
targetBranch: 'master',
describe('shouldShowCommitsBehindText', () => {
it('return true when there are divergedCommitsCount', () => {
vm = mountComponent(Component, { mr: {
divergedCommitsCount: 12,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
targetBranch: 'master',
} });
expect(vm.shouldShowCommitsBehindText).toEqual(true);
});
it('returns false where there are no divergedComits count', () => {
vm = mountComponent(Component, { mr: {
divergedCommitsCount: 0,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
targetBranch: 'master',
} });
expect(vm.shouldShowCommitsBehindText).toEqual(false);
});
});
it('shouldShowCommitsBehindText', () => {
expect(vm.shouldShowCommitsBehindText).toBeTruthy();
describe('commitsText', () => {
it('returns singular when there is one commit', () => {
vm = mountComponent(Component, { mr: {
divergedCommitsCount: 1,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
targetBranch: 'master',
} });
vm.mr.divergedCommitsCount = 0;
expect(vm.shouldShowCommitsBehindText).toBeFalsy();
});
expect(vm.commitsText).toEqual('commit behind');
});
it('commitsText', () => {
expect(vm.commitsText).toEqual('commits');
it('returns plural when there is more than one commit', () => {
vm = mountComponent(Component, { mr: {
divergedCommitsCount: 2,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
targetBranch: 'master',
} });
vm.mr.divergedCommitsCount = 1;
expect(vm.commitsText).toEqual('commit');
expect(vm.commitsText).toEqual('commits behind');
});
});
});
describe('template', () => {
let vm;
let el;
let mr;
const sourceBranchPath = '/foo/bar/mr-widget-refactor';
beforeEach(() => {
mr = {
divergedCommitsCount: 12,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: `<a href="${sourceBranchPath}">mr-widget-refactor</a>`,
sourceBranchRemoved: false,
targetBranchPath: 'foo/bar/commits-path',
targetBranchTreePath: 'foo/bar/tree/path',
targetBranch: 'master',
isOpen: true,
emailPatchesPath: '/mr/email-patches',
plainDiffPath: '/mr/plainDiffPath',
};
vm = createComponent(mr);
el = vm.$el;
describe('common elements', () => {
beforeEach(() => {
vm = mountComponent(Component, { mr: {
divergedCommitsCount: 12,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
sourceBranchRemoved: false,
targetBranchPath: 'foo/bar/commits-path',
targetBranchTreePath: 'foo/bar/tree/path',
targetBranch: 'master',
isOpen: true,
emailPatchesPath: '/mr/email-patches',
plainDiffPath: '/mr/plainDiffPath',
} });
});
it('renders source branch link', () => {
expect(
vm.$el.querySelector('.js-source-branch').innerHTML,
).toEqual('<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>');
});
it('renders clipboard button', () => {
expect(vm.$el.querySelector('.btn-clipboard')).not.toEqual(null);
});
it('renders target branch', () => {
expect(vm.$el.querySelector('.js-target-branch').textContent.trim()).toEqual('master');
});
});
it('should render template elements correctly', () => {
expect(el.classList.contains('mr-source-target')).toBeTruthy();
const sourceBranchLink = el.querySelectorAll('.label-branch')[0];
const targetBranchLink = el.querySelectorAll('.label-branch')[1];
const commitsCount = el.querySelector('.diverged-commits-count');
describe('with an open merge request', () => {
afterEach(() => {
vm.$destroy();
});
expect(sourceBranchLink.textContent).toContain(mr.sourceBranch);
expect(targetBranchLink.textContent).toContain(mr.targetBranch);
expect(sourceBranchLink.querySelector('a').getAttribute('href')).toEqual(sourceBranchPath);
expect(targetBranchLink.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchTreePath);
expect(commitsCount.textContent).toContain('12 commits behind');
expect(commitsCount.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchPath);
beforeEach(() => {
vm = mountComponent(Component, { mr: {
divergedCommitsCount: 12,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
sourceBranchRemoved: false,
targetBranchPath: 'foo/bar/commits-path',
targetBranchTreePath: 'foo/bar/tree/path',
targetBranch: 'master',
isOpen: true,
emailPatchesPath: '/mr/email-patches',
plainDiffPath: '/mr/plainDiffPath',
} });
});
it('renders checkout branch button with modal trigger', () => {
const button = vm.$el.querySelector('.js-check-out-branch');
expect(button.textContent.trim()).toEqual('Check out branch');
expect(button.getAttribute('data-target')).toEqual('#modal_merge_info');
expect(button.getAttribute('data-toggle')).toEqual('modal');
});
it('renders download dropdown with links', () => {
expect(
vm.$el.querySelector('.js-download-email-patches').textContent.trim(),
).toEqual('Email patches');
expect(el.textContent).toContain('Check out branch');
expect(el.querySelectorAll('.dropdown li a')[0].getAttribute('href')).toEqual(mr.emailPatchesPath);
expect(el.querySelectorAll('.dropdown li a')[1].getAttribute('href')).toEqual(mr.plainDiffPath);
expect(
vm.$el.querySelector('.js-download-email-patches').getAttribute('href'),
).toEqual('/mr/email-patches');
expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBeNull();
expect(
vm.$el.querySelector('.js-download-plain-diff').textContent.trim(),
).toEqual('Plain diff');
expect(
vm.$el.querySelector('.js-download-plain-diff').getAttribute('href'),
).toEqual('/mr/plainDiffPath');
});
});
it('should not have right action links if the MR state is not open', (done) => {
vm.mr.isOpen = false;
Vue.nextTick(() => {
expect(el.textContent).not.toContain('Check out branch');
expect(el.querySelectorAll('.dropdown li a').length).toEqual(0);
done();
describe('with a closed merge request', () => {
beforeEach(() => {
vm = mountComponent(Component, { mr: {
divergedCommitsCount: 12,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
sourceBranchRemoved: false,
targetBranchPath: 'foo/bar/commits-path',
targetBranchTreePath: 'foo/bar/tree/path',
targetBranch: 'master',
isOpen: false,
emailPatchesPath: '/mr/email-patches',
plainDiffPath: '/mr/plainDiffPath',
} });
});
it('does not render checkout branch button with modal trigger', () => {
const button = vm.$el.querySelector('.js-check-out-branch');
expect(button).toEqual(null);
});
it('does not render download dropdown with links', () => {
expect(
vm.$el.querySelector('.js-download-email-patches'),
).toEqual(null);
expect(
vm.$el.querySelector('.js-download-plain-diff'),
).toEqual(null);
});
});
it('should not render diverged commits count if the MR has no diverged commits', (done) => {
vm.mr.divergedCommitsCount = null;
Vue.nextTick(() => {
expect(el.textContent).not.toContain('commits behind');
expect(el.querySelectorAll('.diverged-commits-count').length).toEqual(0);
done();
describe('without diverged commits', () => {
beforeEach(() => {
vm = mountComponent(Component, { mr: {
divergedCommitsCount: 0,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
sourceBranchRemoved: false,
targetBranchPath: 'foo/bar/commits-path',
targetBranchTreePath: 'foo/bar/tree/path',
targetBranch: 'master',
isOpen: true,
emailPatchesPath: '/mr/email-patches',
plainDiffPath: '/mr/plainDiffPath',
} });
});
it('does not render diverged commits info', () => {
expect(vm.$el.querySelector('.diverged-commits-count')).toEqual(null);
});
});
it('should disable check out branch button if source branch has been removed', (done) => {
vm.mr.sourceBranchRemoved = true;
describe('with diverged commits', () => {
beforeEach(() => {
vm = mountComponent(Component, { mr: {
divergedCommitsCount: 12,
sourceBranch: 'mr-widget-refactor',
sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
sourceBranchRemoved: false,
targetBranchPath: 'foo/bar/commits-path',
targetBranchTreePath: 'foo/bar/tree/path',
targetBranch: 'master',
isOpen: true,
emailPatchesPath: '/mr/email-patches',
plainDiffPath: '/mr/plainDiffPath',
} });
});
Vue.nextTick()
.then(() => {
expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBe('disabled');
done();
})
.catch(done.fail);
it('renders diverged commits info', () => {
expect(vm.$el.querySelector('.diverged-commits-count').textContent.trim()).toEqual('(12 commits behind)');
});
});
});
});
spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
......@@ -2,9 +2,6 @@ import Vue from 'vue';
import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
const text = `If the ${props.missingBranch} branch exists in your local repository`;
describe('MRWidgetMergeHelp', () => {
let vm;
let Component;
......@@ -17,7 +14,7 @@ describe('MRWidgetMergeHelp', () => {
vm.$destroy();
});
fdescribe('with missing branch', () => {
describe('with missing branch', () => {
beforeEach(() => {
vm = mountComponent(Component, {
missingBranch: 'this-is-not-the-branch-you-are-looking-for',
......@@ -25,8 +22,16 @@ describe('MRWidgetMergeHelp', () => {
});
it('renders missing branch information', () => {
console.log('', vm.$el);
expect(
vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ').replace(/\s\s+/g, ' '),
).toEqual(
'If the this-is-not-the-branch-you-are-looking-for branch exists in your local repository, you can merge this merge request manually using the command line',
);
});
it('renders element to open a modal', () => {
expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('#modal_merge_info');
expect(vm.$el.querySelector('a').getAttribute('data-toggle')).toEqual('modal');
});
});
......@@ -34,5 +39,18 @@ describe('MRWidgetMergeHelp', () => {
beforeEach(() => {
vm = mountComponent(Component);
});
it('renders information about how to merge manually', () => {
expect(
vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ').replace(/\s\s+/g, ' '),
).toEqual(
'You can merge this merge request manually using the command line',
);
});
it('renders element to open a modal', () => {
expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('#modal_merge_info');
expect(vm.$el.querySelector('a').getAttribute('data-toggle')).toEqual('modal');
});
});
});
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