Replace how to merge HAML

Replace how to merge HAML
modal with new Vue compenent
and delete old code.

.haml-lint_todo.yml

@@ -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'

app/assets/javascripts/diffs/components/merge_conflict_warning.vue

 <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>

app/assets/javascripts/how_to_merge.js

-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);
-  }
-};

app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js

@@ -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();

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue

 <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>

app/assets/stylesheets/pages/merge_requests.scss

@@ -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;
 

app/views/projects/merge_requests/_how_to_merge.html.haml

-#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 } ×
-      .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'

app/views/projects/merge_requests/show.html.haml

@@ -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') }

changelogs/unreleased/229677-mr-widget-conflicts-warning.yml

+---
+title: Replace how to merge HAML with Vue component
+merge_request: 48766
+author:
+type: changed

spec/frontend/vue_mr_widget/components/mr_widget_merge_help_spec.js

-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',
+      expect(wrapper.find('.mr-widget-help').text()).toContain(
+        'You can merge this merge request manually',
       );
     });
   });