Skip to content

G
gitlab-ce
Commit fd4bb75f authored by Mike Greiling's avatar Mike Greiling
Browse files
Options

Merge branch 'ee-refactor/move-mr-widget-ready-to-merge-vue-component' into 'master' 

Move ReadyToMerge vue component

See merge request gitlab-org/gitlab-ee!4852
parents 7b41ff8a 23760d35
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 135 deletions
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js → app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
View file @ fd4bb75f
<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;
...@@ -221,136 +222,146 @@ export default { ...@@ -221,136 +222,146 @@ export default {
}); });
}, },
}, },
template: ` };
<div class="mr-widget-body media"> </script>
<status-icon :status="iconClass" />
<div class="media-body"> <template>
<div class="mr-widget-body-controls media space-children"> <div class="mr-widget-body media">
<span class="btn-group append-bottom-5"> <status-icon :status="iconClass" />
<button <div class="media-body">
@click="handleMergeButtonClick()" <div class="mr-widget-body-controls media space-children">
:disabled="isMergeButtonDisabled" <span class="btn-group append-bottom-5">
:class="mergeButtonClass" <button
type="button" @click="handleMergeButtonClick()"
class="qa-merge-button"> :disabled="isMergeButtonDisabled"
<i :class="mergeButtonClass"
v-if="isMakingRequest" type="button"
class="fa fa-spinner fa-spin" class="qa-merge-button">
aria-hidden="true" /> <i
{{mergeButtonText}} v-if="isMakingRequest"
</button> class="fa fa-spinner fa-spin"
aria-hidden="true"
></i>
{{ mergeButtonText }}
</button>
<button
v-if="shouldShowMergeOptionsDropdown"
:disabled="isMergeButtonDisabled"
type="button"
class="btn btn-sm btn-info dropdown-toggle js-merge-moment"
data-toggle="dropdown"
aria-label="Select merge moment">
<i
class="fa fa-chevron-down"
aria-hidden="true"
></i>
</button>
<ul
v-if="shouldShowMergeOptionsDropdown"
class="dropdown-menu dropdown-menu-right"
role="menu">
<li>
<a
@click.prevent="handleMergeButtonClick(true)"
class="merge_when_pipeline_succeeds"
href="#">
<span class="media">
<span
v-html="successSvg"
class="merge-opt-icon"
aria-hidden="true"></span>
<span class="media-body merge-opt-title">Merge when pipeline succeeds</span>
</span>
</a>
</li>
<li>
<a
@click.prevent="handleMergeButtonClick(false, true)"
class="accept-merge-request"
href="#">
<span class="media">
<span
v-html="warningSvg"
class="merge-opt-icon"
aria-hidden="true"></span>
<span class="media-body merge-opt-title">Merge immediately</span>
</span>
</a>
</li>
</ul>
</span>
<div class="media-body-wrap space-children">
<template v-if="shouldShowMergeControls()">
<label v-if="mr.canRemoveSourceBranch">
<input
id="remove-source-branch-input"
v-model="removeSourceBranch"
class="js-remove-source-branch-checkbox"
:disabled="isRemoveSourceBranchButtonDisabled"
type="checkbox"/> Remove source branch
</label>
<!-- Placeholder for EE extension of this component -->
<squash-before-merge
v-if="shouldShowSquashBeforeMerge"
:mr="mr"
:is-merge-button-disabled="isMergeButtonDisabled" />
<span
v-if="mr.ffOnlyEnabled"
class="js-fast-forward-message">
Fast-forward merge without a merge commit
</span>
<button <button
v-if="shouldShowMergeOptionsDropdown" v-else
@click="toggleCommitMessageEditor"
:disabled="isMergeButtonDisabled" :disabled="isMergeButtonDisabled"
type="button" class="js-modify-commit-message-button btn btn-default btn-xs"
class="btn btn-sm btn-info dropdown-toggle js-merge-moment" type="button">
data-toggle="dropdown" Modify commit message
aria-label="Select merge moment">
<i
class="fa fa-chevron-down"
aria-hidden="true" />
</button> </button>
<ul </template>
v-if="shouldShowMergeOptionsDropdown" <template v-else>
class="dropdown-menu dropdown-menu-right" <span class="bold js-resolve-mr-widget-items-message">
role="menu"> You can only merge once the items above are resolved
<li> </span>
<a </template>
@click.prevent="handleMergeButtonClick(true)"
class="merge_when_pipeline_succeeds"
href="#">
<span class="media">
<span
v-html="successSvg"
class="merge-opt-icon"
aria-hidden="true"></span>
<span class="media-body merge-opt-title">Merge when pipeline succeeds</span>
</span>
</a>
</li>
<li>
<a
@click.prevent="handleMergeButtonClick(false, true)"
class="accept-merge-request"
href="#">
<span class="media">
<span
v-html="warningSvg"
class="merge-opt-icon"
aria-hidden="true"></span>
<span class="media-body merge-opt-title">Merge immediately</span>
</span>
</a>
</li>
</ul>
</span>
<div class="media-body-wrap space-children">
<template v-if="shouldShowMergeControls()">
<label v-if="mr.canRemoveSourceBranch">
<input
id="remove-source-branch-input"
v-model="removeSourceBranch"
class="js-remove-source-branch-checkbox"
:disabled="isRemoveSourceBranchButtonDisabled"
type="checkbox"/> Remove source branch
</label>
<!-- Placeholder for EE extension of this component -->
<squash-before-merge
v-if="shouldShowSquashBeforeMerge"
:mr="mr"
:is-merge-button-disabled="isMergeButtonDisabled" />
<span
v-if="mr.ffOnlyEnabled"
class="js-fast-forward-message">
Fast-forward merge without a merge commit
</span>
<button
v-else
@click="toggleCommitMessageEditor"
:disabled="isMergeButtonDisabled"
class="js-modify-commit-message-button btn btn-default btn-xs"
type="button">
Modify commit message
</button>
</template>
<template v-else>
<span class="bold js-resolve-mr-widget-items-message">
You can only merge once the items above are resolved
</span>
</template>
</div>
</div> </div>
<div </div>
v-if="showCommitMessageEditor" <div
class="prepend-top-default commit-message-editor"> v-if="showCommitMessageEditor"
<div class="form-group clearfix"> class="prepend-top-default commit-message-editor">
<label <div class="form-group clearfix">
class="control-label" <label
for="commit-message"> class="control-label"
Commit message for="commit-message">
</label> Commit message
<div class="col-sm-10"> </label>
<div class="commit-message-container"> <div class="col-sm-10">
<div class="max-width-marker"></div> <div class="commit-message-container">
<textarea <div class="max-width-marker"></div>
v-model="commitMessage" <textarea
class="form-control js-commit-message" id="commit-message"
required="required" v-model="commitMessage"
rows="14" class="form-control js-commit-message"
name="Commit message"></textarea> required="required"
</div> rows="14"
<p class="hint">Try to keep the first line under 52 characters and the others under 72</p> name="Commit message"></textarea>
<div class="hint"> </div>
<a <p class="hint">
@click.prevent="updateCommitMessage" Try to keep the first line under 52 characters and the others under 72
href="#">{{commitMessageLinkTitle}}</a> </p>
</div> <div class="hint">
<a
@click.prevent="updateCommitMessage"
href="#"
>
{{ commitMessageLinkTitle }}
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
`, </div>
}; </template>
changelogs/unreleased/refactor-move-mr-widget-ready-to-merge-vue-component.yml 0 → 100644
View file @ fd4bb75f
---
title: Move ReadyToMerge vue component
merge_request: 17545
author: George Tsiolis
type: performance
ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
View file @ fd4bb75f
import eventHub from '~/vue_merge_request_widget/event_hub'; import eventHub from '~/vue_merge_request_widget/event_hub';
import ReadyToMergeState from '~/vue_merge_request_widget/components/states/mr_widget_ready_to_merge'; import ReadyToMergeState from '~/vue_merge_request_widget/components/states/ready_to_merge.vue';
import SquashBeforeMerge from './mr_widget_squash_before_merge'; import SquashBeforeMerge from './mr_widget_squash_before_merge';
export default { export default {
extends: ReadyToMergeState, extends: ReadyToMergeState,
name: 'MRWidgetReadyToMerge', name: 'ReadyToMerge',
components: { components: {
'squash-before-merge': SquashBeforeMerge, 'squash-before-merge': SquashBeforeMerge,
}, },
......
qa/qa/page/merge_request/show.rb
View file @ fd4bb75f
...@@ -4,7 +4,7 @@ module QA ...@@ -4,7 +4,7 @@ module QA
class Show < Page::Base class Show < Page::Base
prepend QA::EE::Page::MergeRequest::Show prepend QA::EE::Page::MergeRequest::Show
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
......
spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
View file @ fd4bb75f
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7