Commit 5cb0a2ef authored by George Tsiolis's avatar George Tsiolis

Move ReadyToMerge vue component

parent 85418f9a
<script>
import successSvg from 'icons/_icon_status_success.svg'; import successSvg from 'icons/_icon_status_success.svg';
import warningSvg from 'icons/_icon_status_warning.svg'; import warningSvg from 'icons/_icon_status_warning.svg';
import simplePoll from '~/lib/utils/simple_poll'; import simplePoll from '~/lib/utils/simple_poll';
...@@ -7,7 +8,10 @@ import statusIcon from '../mr_widget_status_icon.vue'; ...@@ -7,7 +8,10 @@ import statusIcon from '../mr_widget_status_icon.vue';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
export default { export default {
name: 'MRWidgetReadyToMerge', name: 'ReadyToMerge',
components: {
statusIcon,
},
props: { props: {
mr: { type: Object, required: true }, mr: { type: Object, required: true },
service: { type: Object, required: true }, service: { type: Object, required: true },
...@@ -26,9 +30,6 @@ export default { ...@@ -26,9 +30,6 @@ export default {
warningSvg, warningSvg,
}; };
}, },
components: {
statusIcon,
},
computed: { computed: {
shouldShowMergeWhenPipelineSucceedsText() { shouldShowMergeWhenPipelineSucceedsText() {
return this.mr.isPipelineActive; return this.mr.isPipelineActive;
...@@ -217,7 +218,10 @@ export default { ...@@ -217,7 +218,10 @@ export default {
}); });
}, },
}, },
template: ` };
</script>
<template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
<status-icon :status="iconClass" /> <status-icon :status="iconClass" />
<div class="media-body"> <div class="media-body">
...@@ -232,8 +236,9 @@ export default { ...@@ -232,8 +236,9 @@ export default {
<i <i
v-if="isMakingRequest" v-if="isMakingRequest"
class="fa fa-spinner fa-spin" class="fa fa-spinner fa-spin"
aria-hidden="true" /> aria-hidden="true"
{{mergeButtonText}} ></i>
{{ mergeButtonText }}
</button> </button>
<button <button
v-if="shouldShowMergeOptionsDropdown" v-if="shouldShowMergeOptionsDropdown"
...@@ -244,7 +249,8 @@ export default { ...@@ -244,7 +249,8 @@ export default {
aria-label="Select merge moment"> aria-label="Select merge moment">
<i <i
class="fa fa-chevron-down" class="fa fa-chevron-down"
aria-hidden="true" /> aria-hidden="true"
></i>
</button> </button>
<ul <ul
v-if="shouldShowMergeOptionsDropdown" v-if="shouldShowMergeOptionsDropdown"
...@@ -331,22 +337,27 @@ export default { ...@@ -331,22 +337,27 @@ export default {
<div class="commit-message-container"> <div class="commit-message-container">
<div class="max-width-marker"></div> <div class="max-width-marker"></div>
<textarea <textarea
id="commit-message"
v-model="commitMessage" v-model="commitMessage"
class="form-control js-commit-message" class="form-control js-commit-message"
required="required" required="required"
rows="14" rows="14"
name="Commit message"></textarea> name="Commit message"></textarea>
</div> </div>
<p class="hint">Try to keep the first line under 52 characters and the others under 72</p> <p class="hint">
Try to keep the first line under 52 characters and the others under 72
</p>
<div class="hint"> <div class="hint">
<a <a
@click.prevent="updateCommitMessage" @click.prevent="updateCommitMessage"
href="#">{{commitMessageLinkTitle}}</a> href="#"
>
{{ commitMessageLinkTitle }}
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
`, </template>
};
...@@ -27,7 +27,7 @@ export { default as ConflictsState } from './components/states/mr_widget_conflic ...@@ -27,7 +27,7 @@ export { default as ConflictsState } from './components/states/mr_widget_conflic
export { default as NothingToMergeState } from './components/states/nothing_to_merge.vue'; export { default as NothingToMergeState } from './components/states/nothing_to_merge.vue';
export { default as MissingBranchState } from './components/states/mr_widget_missing_branch.vue'; export { default as MissingBranchState } from './components/states/mr_widget_missing_branch.vue';
export { default as NotAllowedState } from './components/states/mr_widget_not_allowed.vue'; export { default as NotAllowedState } from './components/states/mr_widget_not_allowed.vue';
export { default as ReadyToMergeState } from './components/states/mr_widget_ready_to_merge'; export { default as ReadyToMergeState } from './components/states/ready_to_merge.vue';
export { default as ShaMismatchState } from './components/states/sha_mismatch.vue'; export { default as ShaMismatchState } from './components/states/sha_mismatch.vue';
export { default as UnresolvedDiscussionsState } from './components/states/unresolved_discussions.vue'; export { default as UnresolvedDiscussionsState } from './components/states/unresolved_discussions.vue';
export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked.vue'; export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked.vue';
......
---
title: Move ReadyToMerge vue component
merge_request: 17545
author: George Tsiolis
type: performance
...@@ -2,7 +2,7 @@ module QA ...@@ -2,7 +2,7 @@ module QA
module Page module Page
module MergeRequest module MergeRequest
class Show < Page::Base class Show < Page::Base
view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js' do view 'app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue' do
element :merge_button element :merge_button
element :fast_forward_message, 'Fast-forward merge without a merge commit' element :fast_forward_message, 'Fast-forward merge without a merge commit'
end end
......
import Vue from 'vue'; import Vue from 'vue';
import readyToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_ready_to_merge'; import ReadyToMerge from '~/vue_merge_request_widget/components/states/ready_to_merge.vue';
import eventHub from '~/vue_merge_request_widget/event_hub'; import eventHub from '~/vue_merge_request_widget/event_hub';
import * as simplePoll from '~/lib/utils/simple_poll'; import * as simplePoll from '~/lib/utils/simple_poll';
const commitMessage = 'This is the commit message'; const commitMessage = 'This is the commit message';
const commitMessageWithDescription = 'This is the commit message description'; const commitMessageWithDescription = 'This is the commit message description';
const createComponent = (customConfig = {}) => { const createComponent = (customConfig = {}) => {
const Component = Vue.extend(readyToMergeComponent); const Component = Vue.extend(ReadyToMerge);
const mr = { const mr = {
isPipelineActive: false, isPipelineActive: false,
pipeline: null, pipeline: null,
...@@ -36,7 +36,7 @@ const createComponent = (customConfig = {}) => { ...@@ -36,7 +36,7 @@ const createComponent = (customConfig = {}) => {
}); });
}; };
describe('MRWidgetReadyToMerge', () => { describe('ReadyToMerge', () => {
let vm; let vm;
beforeEach(() => { beforeEach(() => {
...@@ -49,7 +49,7 @@ describe('MRWidgetReadyToMerge', () => { ...@@ -49,7 +49,7 @@ describe('MRWidgetReadyToMerge', () => {
describe('props', () => { describe('props', () => {
it('should have props', () => { it('should have props', () => {
const { mr, service } = readyToMergeComponent.props; const { mr, service } = ReadyToMerge.props;
expect(mr.type instanceof Object).toBeTruthy(); expect(mr.type instanceof Object).toBeTruthy();
expect(mr.required).toBeTruthy(); expect(mr.required).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