Add latest changes from gitlab-org/gitlab@master

2 files changed, 34 insertions, 36 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 66167a0d748..5eccc0c543d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -1,6 +1,6 @@
 <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"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index 8132b1a944b..e52ad9156d5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -1,15 +1,17 @@
 <script>
 import $ from 'jquery';
-import { __ } from '~/locale';
+import { GlButton } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
 import createFlash from '~/flash';
-import statusIcon from '../mr_widget_status_icon.vue';
+import StatusIcon from '../mr_widget_status_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
 
 export default {
   name: 'WorkInProgress',
   components: {
-    statusIcon,
+    StatusIcon,
+    GlButton,
   },
   directives: {
     tooltip,
@@ -23,8 +25,15 @@ export default {
       isMakingRequest: false,
     };
   },
+  computed: {
+    wipInfoTooltip() {
+      return s__(
+        'mrWidget|When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged',
+      );
+    },
+  },
   methods: {
-    removeWIP() {
+    handleRemoveWIP() {
       this.isMakingRequest = true;
       this.service
         .removeWIP()
@@ -52,29 +61,22 @@ export default {
         <i
           v-tooltip
           class="fa fa-question-circle"
-          :title="
-            s__(
-              'mrWidget|When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged',
-            )
-          "
-          :aria-label="
-            s__(
-              'mrWidget|When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged',
-            )
-          "
+          :title="wipInfoTooltip"
+          :aria-label="wipInfoTooltip"
         >
         </i>
       </span>
-      <button
+      <gl-button
         v-if="mr.removeWIPPath"
+        size="sm"
+        variant="default"
         :disabled="isMakingRequest"
-        type="button"
-        class="btn btn-default btn-sm js-remove-wip"
-        @click="removeWIP"
+        :loading="isMakingRequest"
+        class="js-remove-wip"
+        @click="handleRemoveWIP"
       >
-        <i v-if="isMakingRequest" class="fa fa-spinner fa-spin" aria-hidden="true"> </i>
         {{ s__('mrWidget|Resolve WIP status') }}
-      </button>
+      </gl-button>
     </div>
   </div>
 </template>