Updated auto merge widget to match new designs

This changes the design of the auto merge widget to match the
new designs.
It also removes the auto merge failed widget which will
make the merge enabled widget be visible
and the error message visible above the widget.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/324178

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

@@ -28,7 +28,12 @@ export default {
 };
 </script>
 <template>
-  <a v-gl-tooltip :href="authorUrl" :title="author.name" class="author-link inline">
+  <a
+    v-gl-tooltip
+    :href="authorUrl"
+    :title="showAuthorName ? null : author.name"
+    class="author-link inline"
+  >
     <img :src="avatarUrl" class="avatar avatar-inline s16" />
     <span v-if="showAuthorName" class="author">{{ author.name }}</span>
   </a>

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

 <script>
-import { GlLoadingIcon, GlSkeletonLoader } from '@gitlab/ui';
+import { GlSkeletonLoader, GlIcon, GlButton, GlSprintf } from '@gitlab/ui';
 import autoMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/auto_merge';
 import autoMergeEnabledQuery from 'ee_else_ce/vue_merge_request_widget/queries/states/auto_merge_enabled.query.graphql';
 import createFlash from '~/flash';
@@ -10,7 +10,6 @@ import { AUTO_MERGE_STRATEGIES } from '../../constants';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import MrWidgetAuthor from '../mr_widget_author.vue';
-import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetAutoMergeEnabled',
@@ -28,9 +27,10 @@ export default {
   },
   components: {
     MrWidgetAuthor,
-    statusIcon,
-    GlLoadingIcon,
     GlSkeletonLoader,
+    GlIcon,
+    GlButton,
+    GlSprintf,
   },
   mixins: [autoMergeMixin, glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
   props: {
@@ -155,54 +155,44 @@ export default {
       </gl-skeleton-loader>
     </div>
     <template v-else>
-      <status-icon status="success" />
+      <gl-icon name="status_scheduled" :size="24" class="gl-text-blue-500 gl-mr-3 gl-mt-1" />
       <div class="media-body">
         <h4 class="gl-display-flex">
           <span class="gl-mr-3">
-            <span class="js-status-text-before-author" data-testid="beforeStatusText">{{
-              statusTextBeforeAuthor
-            }}</span>
-            <mr-widget-author :author="mergeUser" />
-            <span class="js-status-text-after-author" data-testid="afterStatusText">{{
-              statusTextAfterAuthor
-            }}</span>
+            <gl-sprintf :message="statusText" data-testid="statusText">
+              <template #merge_author>
+                <mr-widget-author :author="mergeUser" />
+              </template>
+            </gl-sprintf>
           </span>
-          <a
+          <gl-button
             v-if="mr.canCancelAutomaticMerge"
-            :disabled="isCancellingAutoMerge"
-            role="button"
-            href="#"
-            class="btn btn-sm btn-default js-cancel-auto-merge"
+            :loading="isCancellingAutoMerge"
+            size="small"
+            class="js-cancel-auto-merge"
             data-qa-selector="cancel_auto_merge_button"
             data-testid="cancelAutomaticMergeButton"
-            @click.prevent="cancelAutomaticMerge"
+            @click="cancelAutomaticMerge"
           >
-            <gl-loading-icon v-if="isCancellingAutoMerge" size="sm" inline class="gl-mr-1" />
             {{ cancelButtonText }}
-          </a>
+          </gl-button>
         </h4>
         <section class="mr-info-list">
-          <p>
-            {{ s__('mrWidget|The changes will be merged into') }}
-            <a :href="mr.targetBranchPath" class="label-branch">{{ targetBranch }}</a>
-          </p>
           <p v-if="shouldRemoveSourceBranch">
             {{ s__('mrWidget|The source branch will be deleted') }}
           </p>
           <p v-else class="gl-display-flex">
             <span class="gl-mr-3">{{ s__('mrWidget|The source branch will not be deleted') }}</span>
-            <a
+            <gl-button
               v-if="canRemoveSourceBranch"
-              :disabled="isRemovingSourceBranch"
-              role="button"
-              class="btn btn-sm btn-default js-remove-source-branch"
-              href="#"
+              :loading="isRemovingSourceBranch"
+              size="small"
+              class="js-remove-source-branch"
               data-testid="removeSourceBranchButton"
-              @click.prevent="removeSourceBranch"
+              @click="removeSourceBranch"
             >
-              <gl-loading-icon v-if="isRemovingSourceBranch" size="sm" inline class="gl-mr-1" />
               {{ s__('mrWidget|Delete source branch') }}
-            </a>
+            </gl-button>
           </p>
         </section>
       </div>

app/assets/javascripts/vue_merge_request_widget/mixins/auto_merge.js

@@ -2,14 +2,13 @@ import { s__ } from '~/locale';
 
 export default {
   computed: {
-    statusTextBeforeAuthor() {
-      return s__('mrWidget|Set by');
-    },
-    statusTextAfterAuthor() {
-      return s__('mrWidget|to be merged automatically when the pipeline succeeds');
+    statusText() {
+      return s__(
+        'mrWidget|Set by %{merge_author} to be merged automatically when the pipeline succeeds',
+      );
     },
     cancelButtonText() {
-      return s__('mrWidget|Cancel');
+      return s__('mrWidget|Cancel auto-merge');
     },
   },
 };

app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js

@@ -23,8 +23,8 @@ export default function deviseState() {
     return stateKey.pipelineBlocked;
   } else if (this.canMerge && this.isSHAMismatch) {
     return stateKey.shaMismatch;
-  } else if (this.autoMergeEnabled) {
-    return this.mergeError ? stateKey.autoMergeFailed : stateKey.autoMergeEnabled;
+  } else if (this.autoMergeEnabled && !this.mergeError) {
+    return stateKey.autoMergeEnabled;
   } else if (!this.canMerge) {
     return stateKey.notAllowedToMerge;
   } else if (this.canBeMerged) {

ee/app/assets/javascripts/vue_merge_request_widget/mixins/auto_merge.js

 import { s__ } from '~/locale';
-import {
-  MT_MERGE_STRATEGY,
-  MTWPS_MERGE_STRATEGY,
-  MWPS_MERGE_STRATEGY,
-} from '~/vue_merge_request_widget/constants';
+import { MT_MERGE_STRATEGY, MTWPS_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants';
 
 export default {
   computed: {
-    statusTextBeforeAuthor() {
-      if (this.autoMergeStrategy === MT_MERGE_STRATEGY) {
-        return s__('mrWidget|Added to the merge train by');
-      }
-
-      return s__('mrWidget|Set by');
-    },
-    statusTextAfterAuthor() {
+    statusText() {
       const { mergeTrainsCount } = this.glFeatures.mergeRequestWidgetGraphql ? this.state : this.mr;
 
-      if (this.autoMergeStrategy === MTWPS_MERGE_STRATEGY && mergeTrainsCount === 0) {
-        return s__('mrWidget|to start a merge train when the pipeline succeeds');
+      if (this.autoMergeStrategy === MT_MERGE_STRATEGY) {
+        return s__('mrWidget|Added to the merge train by %{merge_author}');
+      } else if (this.autoMergeStrategy === MTWPS_MERGE_STRATEGY && mergeTrainsCount === 0) {
+        return s__(
+          'mrWidget|Set by %{merge_author} to start a merge train when the pipeline succeeds',
+        );
       } else if (this.autoMergeStrategy === MTWPS_MERGE_STRATEGY && mergeTrainsCount !== 0) {
-        return s__('mrWidget|to be added to the merge train when the pipeline succeeds');
-      } else if (this.autoMergeStrategy === MWPS_MERGE_STRATEGY) {
-        return s__('mrWidget|to be merged automatically when the pipeline succeeds');
+        return s__(
+          'mrWidget|Set by %{merge_author} to be added to the merge train when the pipeline succeeds',
+        );
       }
 
-      return '';
+      return s__(
+        'mrWidget|Set by %{merge_author} to be merged automatically when the pipeline succeeds',
+      );
     },
     cancelButtonText() {
       if (this.autoMergeStrategy === MT_MERGE_STRATEGY) {
         return s__('mrWidget|Remove from merge train');
       }
 
-      return s__('mrWidget|Cancel');
+      return s__('mrWidget|Cancel auto-merge');
     },
   },
 };

ee/spec/features/merge_trains/user_adds_merge_request_to_merge_train_spec.rb

@@ -58,8 +58,8 @@ RSpec.describe 'User adds a merge request to a merge train', :js do
       within('.mr-widget-section') do
         expect(page).to have_content("Added to the merge train by #{user.name}")
         expect(page).to have_content('The source branch will not be deleted')
-        expect(page).to have_link('Remove from merge train')
-        expect(page).to have_link('Delete source branch')
+        expect(page).to have_button('Remove from merge train')
+        expect(page).to have_button('Delete source branch')
       end
     end
 
@@ -84,7 +84,7 @@ RSpec.describe 'User adds a merge request to a merge train', :js do
 
     context "when user clicks 'Remove from merge train' button" do
       before do
-        click_link 'Remove from merge train'
+        click_button 'Remove from merge train'
       end
 
       it 'cancels automatic merge' do
@@ -97,7 +97,7 @@ RSpec.describe 'User adds a merge request to a merge train', :js do
 
     context "when user clicks 'Delete source branch" do
       before do
-        click_link 'Delete source branch'
+        click_button 'Delete source branch'
       end
 
       it 'updates the merge option' do

ee/spec/features/merge_trains/user_adds_to_merge_train_when_pipeline_succeeds_spec.rb

@@ -59,14 +59,14 @@ RSpec.describe 'User adds to merge train when pipeline succeeds', :js do
       within('.mr-widget-section') do
         expect(page).to have_content("Set by #{user.name} to start a merge train when the pipeline succeeds")
         expect(page).to have_content('The source branch will not be deleted')
-        expect(page).to have_link('Cancel')
-        expect(page).to have_link('Delete source branch')
+        expect(page).to have_button('Cancel auto-merge')
+        expect(page).to have_button('Delete source branch')
       end
     end
 
     context "when user clicks 'Cancel' button" do
       before do
-        click_link 'Cancel'
+        click_button 'Cancel auto-merge'
       end
 
       it 'cancels automatic merge' do
@@ -79,7 +79,7 @@ RSpec.describe 'User adds to merge train when pipeline succeeds', :js do
 
     context "when user clicks 'Delete source branch" do
       before do
-        click_link 'Delete source branch'
+        click_button 'Delete source branch'
       end
 
       it 'updates the merge option' do

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

@@ -15,6 +15,8 @@ describe('MRWidgetAutoMergeEnabled', () => {
     poll: () => {},
   };
 
+  const getStatusText = () => wrapper.find('[data-testid="statusText"]').attributes('message');
+
   const mr = {
     shouldRemoveSourceBranch: false,
     canRemoveSourceBranch: true,
@@ -45,34 +47,16 @@ describe('MRWidgetAutoMergeEnabled', () => {
   });
 
   describe('computed', () => {
-    describe('statusTextBeforeAuthor', () => {
-      it('should return "Added to the merge train by" if the pipeline has been added to the merge train', () => {
-        factory({ autoMergeStrategy: MT_MERGE_STRATEGY });
-
-        expect(vm.statusTextBeforeAuthor).toBe('Added to the merge train by');
-      });
-
-      it('should return "Set by" if the MTWPS is selected', () => {
-        factory({ autoMergeStrategy: MTWPS_MERGE_STRATEGY });
-
-        expect(vm.statusTextBeforeAuthor).toBe('Set by');
-      });
-
-      it('should return "Set by" if the MWPS is selected', () => {
-        factory({ autoMergeStrategy: MWPS_MERGE_STRATEGY });
-
-        expect(vm.statusTextBeforeAuthor).toBe('Set by');
-      });
-    });
-
-    describe('statusTextAfterAuthor', () => {
+    describe('status', () => {
       it('should return "to start a merge train..." if MTWPS is selected and there is no existing merge train', () => {
         factory({
           autoMergeStrategy: MTWPS_MERGE_STRATEGY,
           mergeTrainsCount: 0,
         });
 
-        expect(vm.statusTextAfterAuthor).toBe('to start a merge train when the pipeline succeeds');
+        expect(getStatusText()).toBe(
+          'Set by %{merge_author} to start a merge train when the pipeline succeeds',
+        );
       });
 
       it('should return "to be added to the merge train..." if MTWPS is selected and there is an existing merge train', () => {
@@ -81,16 +65,16 @@ describe('MRWidgetAutoMergeEnabled', () => {
           mergeTrainsCount: 1,
         });
 
-        expect(vm.statusTextAfterAuthor).toBe(
-          'to be added to the merge train when the pipeline succeeds',
+        expect(getStatusText()).toBe(
+          'Set by %{merge_author} to be added to the merge train when the pipeline succeeds',
         );
       });
 
       it('should return "to be merged automatically..." if MWPS is selected', () => {
         factory({ autoMergeStrategy: MWPS_MERGE_STRATEGY });
 
-        expect(vm.statusTextAfterAuthor).toBe(
-          'to be merged automatically when the pipeline succeeds',
+        expect(getStatusText()).toBe(
+          'Set by %{merge_author} to be merged automatically when the pipeline succeeds',
         );
       });
     });
@@ -99,7 +83,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
       it('should return "Cancel start merge train" if MTWPS is selected', () => {
         factory({ autoMergeStrategy: MTWPS_MERGE_STRATEGY });
 
-        expect(vm.cancelButtonText).toBe('Cancel');
+        expect(vm.cancelButtonText).toBe('Cancel auto-merge');
       });
 
       it('should return "Remove from merge train" if the pipeline has been added to the merge train', () => {
@@ -111,40 +95,18 @@ describe('MRWidgetAutoMergeEnabled', () => {
       it('should return "Cancel" if MWPS is selected', () => {
         factory({ autoMergeStrategy: MWPS_MERGE_STRATEGY });
 
-        expect(vm.cancelButtonText).toBe('Cancel');
+        expect(vm.cancelButtonText).toBe('Cancel auto-merge');
       });
     });
   });
 
   describe('template', () => {
-    it('should render the status text as "...to start a merge train" if MTWPS is selected and there is no existing merge train', () => {
-      factory({
-        autoMergeStrategy: MTWPS_MERGE_STRATEGY,
-        mergeTrainsCount: 0,
-      });
-
-      const statusText = wrapper.find('.js-status-text-after-author').text();
-
-      expect(statusText).toBe('to start a merge train when the pipeline succeeds');
-    });
-
-    it('should render the status text as "...to be added to the merge train" MTWPS is selected and there is an existing merge train', () => {
-      factory({
-        autoMergeStrategy: MTWPS_MERGE_STRATEGY,
-        mergeTrainsCount: 1,
-      });
-
-      const statusText = wrapper.find('.js-status-text-after-author').text();
-
-      expect(statusText).toBe('to be added to the merge train when the pipeline succeeds');
-    });
-
     it('should render the cancel button as "Cancel" if MTWPS is selected', () => {
       factory({ autoMergeStrategy: MTWPS_MERGE_STRATEGY });
 
       const cancelButtonText = wrapper.find('.js-cancel-auto-merge').text();
 
-      expect(cancelButtonText).toBe('Cancel');
+      expect(cancelButtonText).toBe('Cancel auto-merge');
     });
   });
 

locale/gitlab.pot

@@ -39325,7 +39325,7 @@ msgstr ""
 msgid "mrWidget|A new merge train has started and this merge request is the first of the queue."
 msgstr ""
 
-msgid "mrWidget|Added to the merge train by"
+msgid "mrWidget|Added to the merge train by %{merge_author}"
 msgstr ""
 
 msgid "mrWidget|Added to the merge train. There are %{mergeTrainPosition} merge requests waiting to be merged"
@@ -39358,7 +39358,7 @@ msgstr ""
 msgid "mrWidget|Are you adding technical debt or code vulnerabilities?"
 msgstr ""
 
-msgid "mrWidget|Cancel"
+msgid "mrWidget|Cancel auto-merge"
 msgstr ""
 
 msgid "mrWidget|Check out branch"
@@ -39505,7 +39505,13 @@ msgstr ""
 msgid "mrWidget|Revoke approval"
 msgstr ""
 
-msgid "mrWidget|Set by"
+msgid "mrWidget|Set by %{merge_author} to be added to the merge train when the pipeline succeeds"
+msgstr ""
+
+msgid "mrWidget|Set by %{merge_author} to be merged automatically when the pipeline succeeds"
+msgstr ""
+
+msgid "mrWidget|Set by %{merge_author} to start a merge train when the pipeline succeeds"
 msgstr ""
 
 msgid "mrWidget|The changes were merged into"
@@ -39577,15 +39583,6 @@ msgstr ""
 msgid "mrWidget|into"
 msgstr ""
 
-msgid "mrWidget|to be added to the merge train when the pipeline succeeds"
-msgstr ""
-
-msgid "mrWidget|to be merged automatically when the pipeline succeeds"
-msgstr ""
-
-msgid "mrWidget|to start a merge train when the pipeline succeeds"
-msgstr ""
-
 msgid "must be a Debian package"
 msgstr ""
 

spec/features/merge_request/user_merges_when_pipeline_succeeds_spec.rb

@@ -64,7 +64,7 @@ RSpec.describe 'Merge request > User merges when pipeline succeeds', :js do
       context 'when enabled after it was previously canceled' do
         before do
           click_button "Merge when pipeline succeeds"
-          click_link "Cancel"
+          click_button "Cancel auto-merge"
 
           wait_for_requests
 
@@ -87,7 +87,7 @@ RSpec.describe 'Merge request > User merges when pipeline succeeds', :js do
         before do
           merge_request.merge_params['force_remove_source_branch'] = '0'
           merge_request.save!
-          click_link "Cancel"
+          click_button "Cancel auto-merge"
         end
 
         it_behaves_like 'Merge when pipeline succeeds activator'
@@ -114,7 +114,7 @@ RSpec.describe 'Merge request > User merges when pipeline succeeds', :js do
     end
 
     it 'allows to cancel the automatic merge' do
-      click_link "Cancel"
+      click_button "Cancel auto-merge"
 
       expect(page).to have_button "Merge when pipeline succeeds"
 
@@ -124,7 +124,7 @@ RSpec.describe 'Merge request > User merges when pipeline succeeds', :js do
     end
 
     it 'allows to delete source branch' do
-      click_link "Delete source branch"
+      click_button "Delete source branch"
 
       expect(page).to have_content "The source branch will be deleted"
     end

spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb

@@ -151,7 +151,7 @@ RSpec.describe 'Merge request > User sees pipelines triggered by merge request',
       context 'when detached merge request pipeline is pending' do
         it 'waits the head pipeline' do
           expect(page).to have_content('to be merged automatically when the pipeline succeeds')
-          expect(page).to have_link('Cancel')
+          expect(page).to have_button('Cancel auto-merge')
         end
       end
 
@@ -178,7 +178,7 @@ RSpec.describe 'Merge request > User sees pipelines triggered by merge request',
 
         it 'waits the head pipeline' do
           expect(page).to have_content('to be merged automatically when the pipeline succeeds')
-          expect(page).to have_link('Cancel')
+          expect(page).to have_button('Cancel auto-merge')
         end
       end
     end
@@ -377,7 +377,7 @@ RSpec.describe 'Merge request > User sees pipelines triggered by merge request',
       context 'when detached merge request pipeline is pending' do
         it 'waits the head pipeline' do
           expect(page).to have_content('to be merged automatically when the pipeline succeeds')
-          expect(page).to have_link('Cancel')
+          expect(page).to have_button('Cancel auto-merge')
         end
       end
 
@@ -403,7 +403,7 @@ RSpec.describe 'Merge request > User sees pipelines triggered by merge request',
 
         it 'waits the head pipeline' do
           expect(page).to have_content('to be merged automatically when the pipeline succeeds')
-          expect(page).to have_link('Cancel')
+          expect(page).to have_button('Cancel auto-merge')
         end
       end
     end

spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap

@@ -4,8 +4,10 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
 <div
   class="mr-widget-body media"
 >
-  <status-icon-stub
-    status="success"
+  <gl-icon-stub
+    class="gl-text-blue-500 gl-mr-3 gl-mt-1"
+    name="status_scheduled"
+    size="24"
   />
    
   <div
@@ -17,55 +19,31 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
       <span
         class="gl-mr-3"
       >
-        <span
-          class="js-status-text-before-author"
-          data-testid="beforeStatusText"
-        >
-          Set by
-        </span>
-         
-        <mr-widget-author-stub
-          author="[object Object]"
-          showauthorname="true"
+        <gl-sprintf-stub
+          data-testid="statusText"
+          message="Set by %{merge_author} to be merged automatically when the pipeline succeeds"
         />
-         
-        <span
-          class="js-status-text-after-author"
-          data-testid="afterStatusText"
-        >
-          to be merged automatically when the pipeline succeeds
-        </span>
       </span>
        
-      <a
-        class="btn btn-sm btn-default js-cancel-auto-merge"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        class="js-cancel-auto-merge"
         data-qa-selector="cancel_auto_merge_button"
         data-testid="cancelAutomaticMergeButton"
-        href="#"
-        role="button"
+        icon=""
+        size="small"
+        variant="default"
       >
-        <!---->
         
-          Cancel
+          Cancel auto-merge
         
-      </a>
+      </gl-button-stub>
     </h4>
      
     <section
       class="mr-info-list"
     >
-      <p>
-        
-          The changes will be merged into
-          
-        <a
-          class="label-branch"
-          href="/foo/bar"
-        >
-          foo
-        </a>
-      </p>
-       
       <p
         class="gl-display-flex"
       >
@@ -75,17 +53,19 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
           The source branch will not be deleted
         </span>
          
-        <a
-          class="btn btn-sm btn-default js-remove-source-branch"
+        <gl-button-stub
+          buttontextclasses=""
+          category="primary"
+          class="js-remove-source-branch"
           data-testid="removeSourceBranchButton"
-          href="#"
-          role="button"
+          icon=""
+          size="small"
+          variant="default"
         >
-          <!---->
           
             Delete source branch
           
-        </a>
+        </gl-button-stub>
       </p>
     </section>
   </div>
@@ -96,8 +76,10 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
 <div
   class="mr-widget-body media"
 >
-  <status-icon-stub
-    status="success"
+  <gl-icon-stub
+    class="gl-text-blue-500 gl-mr-3 gl-mt-1"
+    name="status_scheduled"
+    size="24"
   />
    
   <div
@@ -109,55 +91,31 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
       <span
         class="gl-mr-3"
       >
-        <span
-          class="js-status-text-before-author"
-          data-testid="beforeStatusText"
-        >
-          Set by
-        </span>
-         
-        <mr-widget-author-stub
-          author="[object Object]"
-          showauthorname="true"
+        <gl-sprintf-stub
+          data-testid="statusText"
+          message="Set by %{merge_author} to be merged automatically when the pipeline succeeds"
         />
-         
-        <span
-          class="js-status-text-after-author"
-          data-testid="afterStatusText"
-        >
-          to be merged automatically when the pipeline succeeds
-        </span>
       </span>
        
-      <a
-        class="btn btn-sm btn-default js-cancel-auto-merge"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        class="js-cancel-auto-merge"
         data-qa-selector="cancel_auto_merge_button"
         data-testid="cancelAutomaticMergeButton"
-        href="#"
-        role="button"
+        icon=""
+        size="small"
+        variant="default"
       >
-        <!---->
         
-          Cancel
+          Cancel auto-merge
         
-      </a>
+      </gl-button-stub>
     </h4>
      
     <section
       class="mr-info-list"
     >
-      <p>
-        
-          The changes will be merged into
-          
-        <a
-          class="label-branch"
-          href="/foo/bar"
-        >
-          foo
-        </a>
-      </p>
-       
       <p
         class="gl-display-flex"
       >
@@ -167,17 +125,19 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
           The source branch will not be deleted
         </span>
          
-        <a
-          class="btn btn-sm btn-default js-remove-source-branch"
+        <gl-button-stub
+          buttontextclasses=""
+          category="primary"
+          class="js-remove-source-branch"
           data-testid="removeSourceBranchButton"
-          href="#"
-          role="button"
+          icon=""
+          size="small"
+          variant="default"
         >
-          <!---->
           
             Delete source branch
           
-        </a>
+        </gl-button-stub>
       </p>
     </section>
   </div>

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

@@ -72,6 +72,8 @@ const defaultMrProps = () => ({
   autoMergeStrategy: MWPS_MERGE_STRATEGY,
 });
 
+const getStatusText = () => wrapper.findByTestId('statusText').attributes('message');
+
 describe('MRWidgetAutoMergeEnabled', () => {
   let oldWindowGl;
 
@@ -167,30 +169,6 @@ describe('MRWidgetAutoMergeEnabled', () => {
           });
         });
 
-        describe('statusTextBeforeAuthor', () => {
-          it('should return "Set by" if the MWPS is selected', () => {
-            factory({
-              ...defaultMrProps(),
-              autoMergeStrategy: MWPS_MERGE_STRATEGY,
-            });
-
-            expect(wrapper.findByTestId('beforeStatusText').text()).toBe('Set by');
-          });
-        });
-
-        describe('statusTextAfterAuthor', () => {
-          it('should return "to be merged automatically..." if MWPS is selected', () => {
-            factory({
-              ...defaultMrProps(),
-              autoMergeStrategy: MWPS_MERGE_STRATEGY,
-            });
-
-            expect(wrapper.findByTestId('afterStatusText').text()).toBe(
-              'to be merged automatically when the pipeline succeeds',
-            );
-          });
-        });
-
         describe('cancelButtonText', () => {
           it('should return "Cancel" if MWPS is selected', () => {
             factory({
@@ -198,7 +176,9 @@ describe('MRWidgetAutoMergeEnabled', () => {
               autoMergeStrategy: MWPS_MERGE_STRATEGY,
             });
 
-            expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe('Cancel');
+            expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe(
+              'Cancel auto-merge',
+            );
           });
         });
       });
@@ -279,7 +259,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
           await nextTick();
 
-          expect(wrapper.find('.js-cancel-auto-merge').attributes('disabled')).toBe('disabled');
+          expect(wrapper.find('.js-cancel-auto-merge').props('loading')).toBe(true);
         });
 
         it('should show source branch will be deleted text when it source branch set to remove', () => {
@@ -313,7 +293,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
           await nextTick();
 
-          expect(wrapper.find('.js-remove-source-branch').attributes('disabled')).toBe('disabled');
+          expect(wrapper.find('.js-remove-source-branch').props('loading')).toBe(true);
         });
 
         it('should render the status text as "...to merged automatically" if MWPS is selected', () => {
@@ -322,9 +302,9 @@ describe('MRWidgetAutoMergeEnabled', () => {
             autoMergeStrategy: MWPS_MERGE_STRATEGY,
           });
 
-          const statusText = trimText(wrapper.find('.js-status-text-after-author').text());
-
-          expect(statusText).toBe('to be merged automatically when the pipeline succeeds');
+          expect(getStatusText()).toBe(
+            'Set by %{merge_author} to be merged automatically when the pipeline succeeds',
+          );
         });
 
         it('should render the cancel button as "Cancel" if MWPS is selected', () => {
@@ -335,7 +315,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
           const cancelButtonText = trimText(wrapper.find('.js-cancel-auto-merge').text());
 
-          expect(cancelButtonText).toBe('Cancel');
+          expect(cancelButtonText).toBe('Cancel auto-merge');
         });
       });
     });