Migrate merge conflicts modal

Migrate merge conflicts widget
modal from old HAML to
new GL Modal component

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

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import ciIcon from '../../vue_shared/components/ci_icon.vue';
 
 export default {
   components: {
     ciIcon,
+    GlButton,
     GlLoadingIcon,
   },
   props: {
@@ -32,21 +33,23 @@ export default {
 };
 </script>
 <template>
-  <div class="d-flex align-self-start">
+  <div class="gl-display-flex gl-align-self-start">
     <div class="square s24 h-auto d-flex-center gl-mr-3">
-      <div v-if="isLoading" class="mr-widget-icon d-inline-flex">
-        <gl-loading-icon size="md" class="mr-loading-icon d-inline-flex" />
+      <div v-if="isLoading" class="mr-widget-icon gl-display-inline-flex">
+        <gl-loading-icon size="md" class="mr-loading-icon gl-display-inline-flex" />
       </div>
       <ci-icon v-else :status="statusObj" :size="24" />
     </div>
 
-    <button
+    <gl-button
       v-if="showDisabledButton"
       type="button"
-      class="js-disabled-merge-button btn btn-success btn-sm"
-      disabled="true"
+      category="primary"
+      variant="success"
+      class="js-disabled-merge-button"
+      :disabled="true"
     >
       {{ s__('mrWidget|Merge') }}
-    </button>
+    </gl-button>
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue

 <script>
 import $ from 'jquery';
 import { escape } from 'lodash';
+import { GlButton, GlModalDirective } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
 import StatusIcon from '../mr_widget_status_icon.vue';
@@ -9,6 +10,10 @@ export default {
   name: 'MRWidgetConflicts',
   components: {
     StatusIcon,
+    GlButton,
+  },
+  directives: {
+    GlModalDirective,
   },
   props: {
     /* TODO: This is providing all store and service down when it
@@ -89,22 +94,21 @@ To merge this request, first rebase locally.`)
           </span>
         </span>
         <span v-if="showResolveButton" ref="popover">
-          <a
+          <gl-button
             :href="mr.conflictResolutionPath"
             :disabled="mr.sourceBranchProtected"
-            class="js-resolve-conflicts-button btn btn-default btn-sm"
+            class="js-resolve-conflicts-button"
           >
             {{ s__('mrWidget|Resolve conflicts') }}
-          </a>
+          </gl-button>
         </span>
-        <button
+        <gl-button
           v-if="mr.canMerge"
-          class="js-merge-locally-button btn btn-default btn-sm"
-          data-toggle="modal"
-          data-target="#modal_merge_info"
+          v-gl-modal-directive="'modal-merge-info'"
+          class="js-merge-locally-button"
         >
           {{ s__('mrWidget|Merge locally') }}
-        </button>
+        </gl-button>
       </template>
     </div>
   </div>

changelogs/unreleased/229677-mr-conflicts.yml

+---
+title: Make How to merge modal in merge requests widget conform to correct modal styling
+merge_request: 48370
+author:
+type: changed

spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js

@@ -194,7 +194,7 @@ describe('MRWidgetConflicts', () => {
     });
 
     it('sets resolve button as disabled', () => {
-      expect(vm.find('.js-resolve-conflicts-button').attributes('disabled')).toBe('disabled');
+      expect(vm.find('.js-resolve-conflicts-button').attributes('disabled')).toBe('true');
     });
 
     it('renders popover', () => {