Merge branch 'mg-replace-loading-spinner' into 'master'

Replace fa-spinner with SVG spinner in "merge" button

See merge request gitlab-org/gitlab!20887

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

 <script>
 import _ from 'underscore';
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlButton } from '@gitlab/ui';
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge';
@@ -26,6 +26,7 @@ export default {
     CommitEdit,
     CommitMessageDropdown,
     GlIcon,
+    GlButton,
     MergeImmediatelyConfirmationDialog: () =>
       import(
         'ee_component/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue'
@@ -67,18 +68,13 @@ export default {
 
       return 'success';
     },
-    mergeButtonClass() {
-      const defaultClass = 'btn btn-sm btn-success accept-merge-request';
-      const failedClass = `${defaultClass} btn-danger`;
-      const inActionClass = `${defaultClass} btn-info`;
-
+    mergeButtonVariant() {
       if (this.status === 'failed') {
-        return failedClass;
+        return 'danger';
       } else if (this.status === 'pending') {
-        return inActionClass;
+        return 'info';
       }
-
-      return defaultClass;
+      return 'success';
     },
     iconClass() {
       if (
@@ -267,16 +263,16 @@ export default {
       <div class="media-body">
         <div class="mr-widget-body-controls media space-children">
           <span class="btn-group">
-            <button
+            <gl-button
+              size="sm"
+              class="qa-merge-button accept-merge-request"
+              :variant="mergeButtonVariant"
               :disabled="isMergeButtonDisabled"
-              :class="mergeButtonClass"
-              type="button"
-              class="qa-merge-button"
+              :loading="isMakingRequest"
               @click="handleMergeButtonClick(isAutoMergeAvailable)"
             >
-              <i v-if="isMakingRequest" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
               {{ mergeButtonText }}
-            </button>
+            </gl-button>
             <button
               v-if="shouldShowMergeImmediatelyDropdown"
               :disabled="isMergeButtonDisabled"

ee/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -269,7 +269,7 @@ describe('ReadyToMerge', () => {
         const button = findMergeButton();
 
         expect(button.exists()).toBe(true);
-        expect(button.attributes('disabled')).toBe('disabled');
+        expect(button.attributes('disabled')).toBe('true');
       });
     });
   });

spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -145,34 +145,30 @@ describe('ReadyToMerge', () => {
       });
     });
 
-    describe('mergeButtonClass', () => {
-      const defaultClass = 'btn btn-sm btn-success accept-merge-request';
-      const failedClass = `${defaultClass} btn-danger`;
-      const inActionClass = `${defaultClass} btn-info`;
-
+    describe('mergeButtonVariant', () => {
       it('defaults to success class', () => {
         Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
 
-        expect(vm.mergeButtonClass).toEqual(defaultClass);
+        expect(vm.mergeButtonVariant).toEqual('success');
       });
 
       it('returns success class for success status', () => {
         Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
         Vue.set(vm.mr, 'pipeline', true);
 
-        expect(vm.mergeButtonClass).toEqual(defaultClass);
+        expect(vm.mergeButtonVariant).toEqual('success');
       });
 
       it('returns info class for pending status', () => {
         Vue.set(vm.mr, 'availableAutoMergeStrategies', [MTWPS_MERGE_STRATEGY]);
 
-        expect(vm.mergeButtonClass).toEqual(inActionClass);
+        expect(vm.mergeButtonVariant).toEqual('info');
       });
 
-      it('returns failed class for failed status', () => {
+      it('returns danger class for failed status', () => {
         vm.mr.hasCI = true;
 
-        expect(vm.mergeButtonClass).toEqual(failedClass);
+        expect(vm.mergeButtonVariant).toEqual('danger');
       });
     });