Merge branch...

Merge branch '229287-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javascripts' into 'master'

Migrate MR rebase button to GitLab UI

Closes #229287

See merge request gitlab-org/gitlab!42348

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

 <script>
 /* eslint-disable vue/no-v-html */
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import simplePoll from '../../../lib/utils/simple_poll';
 import eventHub from '../../event_hub';
@@ -12,7 +12,7 @@ export default {
   name: 'MRWidgetRebase',
   components: {
     statusIcon,
-    GlLoadingIcon,
+    GlButton,
   },
   props: {
     mr: {
@@ -109,29 +109,29 @@ export default {
 
     <div class="rebase-state-find-class-convention media media-body space-children">
       <template v-if="mr.rebaseInProgress || isMakingRequest">
-        <span class="bold">{{ __('Rebase in progress') }}</span>
+        <span class="bold" data-testid="rebase-message">{{ __('Rebase in progress') }}</span>
       </template>
       <template v-if="!mr.rebaseInProgress && !mr.canPushToSourceBranch">
-        <span class="bold" v-html="fastForwardMergeText"></span>
+        <span class="bold" data-testid="rebase-message" v-html="fastForwardMergeText"></span>
       </template>
       <template v-if="!mr.rebaseInProgress && mr.canPushToSourceBranch && !isMakingRequest">
         <div
           class="accept-merge-holder clearfix js-toggle-container accept-action media space-children"
         >
-          <button
-            :disabled="isMakingRequest"
-            type="button"
-            class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button"
+          <gl-button
+            :loading="isMakingRequest"
+            variant="success"
+            class="qa-mr-rebase-button"
             @click="rebase"
           >
-            <gl-loading-icon v-if="isMakingRequest" />{{ __('Rebase') }}
-          </button>
-          <span v-if="!rebasingError" class="bold">{{
+            {{ __('Rebase') }}
+          </gl-button>
+          <span v-if="!rebasingError" class="bold" data-testid="rebase-message">{{
             __(
               'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
             )
           }}</span>
-          <span v-else class="bold danger">{{ rebasingError }}</span>
+          <span v-else class="bold danger" data-testid="rebase-message">{{ rebasingError }}</span>
         </div>
       </template>
     </div>

spec/frontend/vue_mr_widget/components/mr_widget_rebase_spec.js

@@ -6,6 +6,10 @@ import component from '~/vue_merge_request_widget/components/states/mr_widget_re
 describe('Merge request widget rebase component', () => {
   let Component;
   let vm;
+
+  const findRebaseMessageEl = () => vm.$el.querySelector('[data-testid="rebase-message"]');
+  const findRebaseMessageElText = () => findRebaseMessageEl().textContent.trim();
+
   beforeEach(() => {
     Component = Vue.extend(component);
   });
@@ -21,9 +25,7 @@ describe('Merge request widget rebase component', () => {
         service: {},
       });
 
-      expect(
-        vm.$el.querySelector('.rebase-state-find-class-convention span').textContent.trim(),
-      ).toContain('Rebase in progress');
+      expect(findRebaseMessageElText()).toContain('Rebase in progress');
     });
   });
 
@@ -39,9 +41,7 @@ describe('Merge request widget rebase component', () => {
     });
 
     it('it should render rebase button and warning message', () => {
-      const text = vm.$el
-        .querySelector('.rebase-state-find-class-convention span')
-        .textContent.trim();
+      const text = findRebaseMessageElText();
 
       expect(text).toContain('Fast-forward merge is not possible.');
       expect(text.replace(/\s\s+/g, ' ')).toContain(
@@ -53,9 +53,7 @@ describe('Merge request widget rebase component', () => {
       vm.rebasingError = 'Something went wrong!';
 
       Vue.nextTick(() => {
-        expect(
-          vm.$el.querySelector('.rebase-state-find-class-convention span').textContent.trim(),
-        ).toContain('Something went wrong!');
+        expect(findRebaseMessageElText()).toContain('Something went wrong!');
         done();
       });
     });
@@ -72,9 +70,7 @@ describe('Merge request widget rebase component', () => {
         service: {},
       });
 
-      const text = vm.$el
-        .querySelector('.rebase-state-find-class-convention span')
-        .textContent.trim();
+      const text = findRebaseMessageElText();
 
       expect(text).toContain('Fast-forward merge is not possible.');
       expect(text).toContain('Rebase the source branch onto');
@@ -93,7 +89,7 @@ describe('Merge request widget rebase component', () => {
         service: {},
       });
 
-      const elem = vm.$el.querySelector('.rebase-state-find-class-convention span');
+      const elem = findRebaseMessageEl();
 
       expect(elem.innerHTML).toContain(
         `Fast-forward merge is not possible. Rebase the source branch onto <span class="label-branch">${targetBranch}</span> to allow this merge request to be merged.`,