Merge branch 'ph/324178/autoMergeWidgetUpdate' into 'master'

Updated auto merge widget to match new designs

See merge request gitlab-org/gitlab!66637

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

@@ -39340,7 +39340,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"
@@ -39373,7 +39373,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"
@@ -39520,7 +39520,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"
@@ -39592,15 +39598,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');
         });
       });
     });