Merge branch '229334-button-migration-auto-merge-failed' into 'master'

Migrate Bootstrap button to GlButton in mr_widget_auto_merge_failed.vue

Closes #229334

See merge request gitlab-org/gitlab!42365

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

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import eventHub from '../../event_hub';
 import statusIcon from '../mr_widget_status_icon.vue';
 
@@ -8,6 +8,7 @@ export default {
   components: {
     statusIcon,
     GlLoadingIcon,
+    GlButton,
   },
   props: {
     mr: {
@@ -33,20 +34,21 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon status="warning" />
-    <div class="media-body space-children">
+    <div class="media-body space-children gl-display-flex gl-flex-wrap gl-align-items-center">
       <span class="bold">
         <template v-if="mr.mergeError">{{ mr.mergeError }}</template>
         {{ s__('mrWidget|This merge request failed to be merged automatically') }}
       </span>
-      <button
+      <gl-button
         :disabled="isRefreshing"
-        type="button"
-        class="btn btn-sm btn-default"
+        category="secondary"
+        variant="default"
+        size="small"
         @click="refreshWidget"
       >
         <gl-loading-icon v-if="isRefreshing" :inline="true" />
         {{ s__('mrWidget|Refresh') }}
-      </button>
+      </gl-button>
     </div>
   </div>
 </template>

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

 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import AutoMergeFailedComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 
 describe('MRWidgetAutoMergeFailed', () => {
   let wrapper;
   const mergeError = 'This is the merge error';
-  const findButton = () => wrapper.find('button');
+  const findButton = () => wrapper.find(GlButton);
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(AutoMergeFailedComponent, {
@@ -38,17 +38,13 @@ describe('MRWidgetAutoMergeFailed', () => {
 
   it('emits event and shows loading icon when button is clicked', () => {
     jest.spyOn(eventHub, '$emit');
-    findButton().trigger('click');
+    findButton().vm.$emit('click');
 
     expect(eventHub.$emit.mock.calls[0][0]).toBe('MRWidgetUpdateRequested');
 
     return wrapper.vm.$nextTick(() => {
-      expect(findButton().attributes('disabled')).toEqual('disabled');
-      expect(
-        findButton()
-          .find(GlLoadingIcon)
-          .exists(),
-      ).toBe(true);
+      expect(findButton().attributes('disabled')).toBe('true');
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
 });