Commit 5c5c2d9a authored by David O'Regan's avatar David O'Regan

Replace how to merge HAML

Replace how to merge HAML
modal with new Vue compenent
and delete old code.
parent 5704c69e
......@@ -214,7 +214,6 @@ linters:
- 'app/views/projects/mattermosts/_team_selection.html.haml'
- 'app/views/projects/mattermosts/new.html.haml'
- 'app/views/projects/merge_requests/_commits.html.haml'
- 'app/views/projects/merge_requests/_how_to_merge.html.haml'
- 'app/views/projects/merge_requests/_mr_title.html.haml'
- 'app/views/projects/merge_requests/conflicts/_commit_stats.html.haml'
- 'app/views/projects/merge_requests/conflicts/_file_actions.html.haml'
......
<script>
import { GlButton, GlAlert } from '@gitlab/ui';
import { GlButton, GlAlert, GlModalDirective } from '@gitlab/ui';
import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants';
export default {
......@@ -7,6 +7,9 @@ export default {
GlAlert,
GlButton,
},
directives: {
GlModalDirective,
},
props: {
limited: {
type: Boolean,
......@@ -60,9 +63,8 @@ export default {
</gl-button>
<gl-button
v-if="mergeable"
v-gl-modal-directive="'modal-merge-info'"
class="gl-alert-action"
data-toggle="modal"
data-target="#modal_merge_info"
>
{{ __('Merge locally') }}
</gl-button>
......
import $ from 'jquery';
export default () => {
const modal = $('#modal_merge_info');
if (modal) {
modal.modal({
modal: true,
show: false,
});
$('.how_to_merge_link').on('click', modal.show);
$('.modal-header .close').on('click', modal.hide);
}
};
......@@ -2,7 +2,6 @@ import ZenMode from '~/zen_mode';
import initIssuableSidebar from '~/init_issuable_sidebar';
import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
import { handleLocationHash } from '~/lib/utils/common_utils';
import howToMerge from '~/how_to_merge';
import initPipelines from '~/commit/pipelines/pipelines_bundle';
import initSourcegraph from '~/sourcegraph';
import loadAwardsHandler from '~/awards_handler';
......@@ -15,7 +14,6 @@ export default function() {
initPipelines();
new ShortcutsIssuable(true); // eslint-disable-line no-new
handleLocationHash();
howToMerge();
initSourcegraph();
loadAwardsHandler();
initInviteMemberModal();
......
<script>
import { GlButton, GlModalDirective } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
export default {
name: 'MRWidgetMergeHelp',
components: {
GlButton,
},
directives: {
GlModalDirective,
},
props: {
missingBranch: {
type: String,
......@@ -31,13 +38,12 @@ export default {
{{ s__('mrWidget|You can merge this merge request manually using the') }}
</template>
<button
type="button"
class="btn-link btn-blank js-open-modal-help"
data-toggle="modal"
data-target="#modal_merge_info"
<gl-button
v-gl-modal-directive="'modal-merge-info'"
variant="link"
class="gl-mt-n2 js-open-modal-help"
>
{{ s__('mrWidget|command line') }}
</button>
</gl-button>
</section>
</template>
......@@ -507,19 +507,6 @@ $mr-widget-min-height: 69px;
display: none;
}
#modal_merge_info .modal-dialog {
.dark {
margin-right: 40px;
}
.btn-clipboard {
margin-right: 20px;
margin-top: 5px;
position: absolute;
right: 0;
}
}
.mr-links {
padding-left: $gl-padding-8 + $status-icon-size + $gl-btn-padding;
......
#modal_merge_info.modal{ tabindex: '-1' }
.modal-dialog.modal-lg
.modal-content
.modal-header
%h3.modal-title Check out, review, and merge locally
%button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
%span{ "aria-hidden": true } &times;
.modal-body
%p
%strong Step 1.
Fetch and check out the branch for this merge request
= clipboard_button(target: "pre#merge-info-1", title: _("Copy commands"))
%pre.dark#merge-info-1
- if @merge_request.for_fork?
-# All repo/branch refs have been quoted to allow support for special characters (such as #my-branch)
:preserve
git fetch "#{h default_url_to_repo(@merge_request.source_project)}" "#{h @merge_request.source_branch}"
git checkout -b "#{h @merge_request.source_project_path}-#{h @merge_request.source_branch}" FETCH_HEAD
- else
:preserve
git fetch origin
git checkout -b "#{h @merge_request.source_branch}" "origin/#{h @merge_request.source_branch}"
%p
%strong Step 2.
Review the changes locally
%p
%strong Step 3.
Merge the branch and fix any conflicts that come up
= clipboard_button(target: "pre#merge-info-3", title: _("Copy commands"))
%pre.dark#merge-info-3
- if @merge_request.for_fork?
:preserve
git fetch origin
git checkout "#{h @merge_request.target_branch}"
git merge --no-ff "#{h @merge_request.source_project_path}-#{h @merge_request.source_branch}"
- else
:preserve
git fetch origin
git checkout "#{h @merge_request.target_branch}"
git merge --no-ff "#{h @merge_request.source_branch}"
%p
%strong Step 4.
Push the result of the merge to GitLab
= clipboard_button(target: "pre#merge-info-4", title: _("Copy commands"))
%pre.dark#merge-info-4
:preserve
git push origin "#{h @merge_request.target_branch}"
- unless @merge_request.can_be_merged_by?(current_user)
%p
Note that pushing to GitLab requires write access to this repository.
%p
%strong Tip:
= succeed '.' do
You can also checkout merge requests locally by
= link_to 'following these guidelines', help_page_path('user/project/merge_requests/reviewing_and_managing_merge_requests.md', anchor: "checkout-merge-requests-locally-through-the-head-ref"), target: '_blank', rel: 'noopener noreferrer'
......@@ -16,9 +16,6 @@
.merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
= render "projects/merge_requests/mr_title"
- if @merge_request.source_branch_exists?
= render "projects/merge_requests/how_to_merge"
.merge-request-details.issuable-details{ data: { id: @merge_request.project.id } }
= render "projects/merge_requests/mr_box"
.merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
......
---
title: Replace how to merge HAML with Vue component
merge_request: 48766
author:
type: changed
import Vue from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
import { shallowMount } from '@vue/test-utils';
import MergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
describe('MRWidgetMergeHelp', () => {
let vm;
let Component;
let wrapper;
beforeEach(() => {
Component = Vue.extend(mergeHelpComponent);
const createComponent = ({ props = {} } = {}) => {
wrapper = shallowMount(MergeHelpComponent, {
propsData: {
missingBranch: 'this-is-not-the-branch-you-are-looking-for',
...props,
},
});
};
afterEach(() => {
vm.$destroy();
wrapper.destroy();
wrapper = null;
});
describe('with missing branch', () => {
beforeEach(() => {
vm = mountComponent(Component, {
missingBranch: 'this-is-not-the-branch-you-are-looking-for',
});
createComponent();
});
it('renders missing branch information', () => {
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 button to open help modal', () => {
expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-target')).toEqual(
'#modal_merge_info',
);
expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual(
'modal',
expect(wrapper.find('.mr-widget-help').text()).toContain(
'If the this-is-not-the-branch-you-are-looking-for branch exists in your local repository',
);
});
});
describe('without missing branch', () => {
beforeEach(() => {
vm = mountComponent(Component);
createComponent({
props: { missingBranch: '' },
});
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('.js-open-modal-help').getAttribute('data-target')).toEqual(
'#modal_merge_info',
);
expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual(
'modal',
it('renders information about how to merge manually', () => {
expect(wrapper.find('.mr-widget-help').text()).toContain(
'You can merge this merge request manually',
);
});
});
......
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