Update ShaMismatch component to match design

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

@@ -188,13 +188,6 @@ export default {
 
       return this.mr.preferredAutoMergeStrategy;
     },
-    isSHAMismatch() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.mr.sha !== this.state.diffHeadSha;
-      }
-
-      return this.mr.isSHAMismatch;
-    },
     squashIsSelected() {
       if (this.glFeatures.mergeRequestWidgetGraphql) {
         return this.isSquashReadOnly ? this.state.squashOnMerge : this.state.squash;
@@ -573,21 +566,6 @@ export default {
               </div>
             </template>
           </div>
-          <div v-if="isSHAMismatch" class="d-flex align-items-center mt-2 js-sha-mismatch">
-            <gl-icon name="warning-solid" class="text-warning mr-1" />
-            <span class="text-warning">
-              <gl-sprintf
-                :message="
-                  __('New changes were added. %{linkStart}Reload the page to review them%{linkEnd}')
-                "
-              >
-                <template #link="{ content }">
-                  <gl-link :href="mr.mergeRequestDiffsPath">{{ content }}</gl-link>
-                </template>
-              </gl-sprintf>
-            </span>
-          </div>
-
           <div
             v-if="showDangerMessageForMergeTrain"
             class="gl-mt-5 gl-text-gray-500"

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

 <script>
+import { GlButton } from '@gitlab/ui';
+import { I18N_SHA_MISMATCH } from '../../i18n';
 import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'ShaMismatch',
   components: {
     statusIcon,
+    GlButton,
+  },
+  i18n: {
+    I18N_SHA_MISMATCH,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
   },
 };
 </script>
 
 <template>
   <div class="mr-widget-body media">
-    <status-icon :show-disabled-button="true" status="warning" />
-    <div class="media-body space-children">
-      <span class="bold" data-qa-selector="head_mismatch_content">
-        {{
-          s__(`mrWidget|The source branch HEAD has recently changed.
-Please reload the page and review the changes before merging`)
-        }}
+    <status-icon :show-disabled-button="false" status="warning" />
+    <div class="media-body">
+      <span class="gl-font-weight-bold" data-qa-selector="head_mismatch_content">
+        {{ $options.i18n.I18N_SHA_MISMATCH.warningMessage }}
       </span>
+      <gl-button
+        class="gl-ml-3"
+        data-testid="action-button"
+        size="small"
+        category="primary"
+        variant="confirm"
+        :href="mr.mergeRequestDiffsPath"
+        >{{ $options.i18n.I18N_SHA_MISMATCH.actionButtonLabel }}</gl-button
+      >
     </div>
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/i18n.js

@@ -5,3 +5,8 @@ export const SQUASH_BEFORE_MERGE = {
   checkboxLabel: __('Squash commits'),
   helpLabel: __('What is squashing?'),
 };
+
+export const I18N_SHA_MISMATCH = {
+  warningMessage: __('Merge blocked: new changes were just added.'),
+  actionButtonLabel: __('Review changes'),
+};

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -38,6 +38,7 @@ import RebaseState from './components/states/mr_widget_rebase.vue';
 import NothingToMergeState from './components/states/nothing_to_merge.vue';
 import PipelineFailedState from './components/states/pipeline_failed.vue';
 import ReadyToMergeState from './components/states/ready_to_merge.vue';
+import ShaMismatch from './components/states/sha_mismatch.vue';
 import UnresolvedDiscussionsState from './components/states/unresolved_discussions.vue';
 import WorkInProgressState from './components/states/work_in_progress.vue';
 // import ExtensionsContainer from './components/extensions/container';
@@ -72,7 +73,7 @@ export default {
     'mr-widget-not-allowed': NotAllowedState,
     'mr-widget-missing-branch': MissingBranchState,
     'mr-widget-ready-to-merge': ReadyToMergeState,
-    'sha-mismatch': ReadyToMergeState,
+    'sha-mismatch': ShaMismatch,
     'mr-widget-checking': CheckingState,
     'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
     'mr-widget-pipeline-blocked': PipelineBlockedState,

locale/gitlab.pot

@@ -20916,6 +20916,9 @@ msgstr ""
 msgid "Merge automatically (%{strategy})"
 msgstr ""
 
+msgid "Merge blocked: new changes were just added."
+msgstr ""
+
 msgid "Merge blocked: the source branch must be rebased onto the target branch."
 msgstr ""
 
@@ -22334,9 +22337,6 @@ msgstr ""
 msgid "New branch unavailable"
 msgstr ""
 
-msgid "New changes were added. %{linkStart}Reload the page to review them%{linkEnd}"
-msgstr ""
-
 msgid "New confidential epic title "
 msgstr ""
 
@@ -28560,6 +28560,9 @@ msgstr ""
 msgid "Review App|View latest app"
 msgstr ""
 
+msgid "Review changes"
+msgstr ""
+
 msgid "Review requested from %{name}"
 msgstr ""
 
@@ -39854,9 +39857,6 @@ msgstr ""
 msgid "mrWidget|The pipeline for this merge request did not complete. Push a new commit to fix the failure, or check the %{linkStart}troubleshooting documentation%{linkEnd} to see other possible actions."
 msgstr ""
 
-msgid "mrWidget|The source branch HEAD has recently changed. Please reload the page and review the changes before merging"
-msgstr ""
-
 msgid "mrWidget|The source branch has been deleted"
 msgstr ""
 

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

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ReadyToMerge with a mismatched SHA warns the user to refresh to review 1`] = `"<gl-sprintf-stub message=\\"New changes were added. %{linkStart}Reload the page to review them%{linkEnd}\\"></gl-sprintf-stub>"`;

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

-import { GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import simplePoll from '~/lib/utils/simple_poll';
@@ -782,26 +781,4 @@ describe('ReadyToMerge', () => {
       });
     });
   });
-
-  describe('with a mismatched SHA', () => {
-    const findMismatchShaBlock = () => wrapper.find('.js-sha-mismatch');
-    const findMismatchShaTextBlock = () => findMismatchShaBlock().find(GlSprintf);
-
-    beforeEach(() => {
-      createComponent({
-        mr: {
-          isSHAMismatch: true,
-          mergeRequestDiffsPath: '/merge_requests/1/diffs',
-        },
-      });
-    });
-
-    it('displays a warning message', () => {
-      expect(findMismatchShaBlock().exists()).toBe(true);
-    });
-
-    it('warns the user to refresh to review', () => {
-      expect(findMismatchShaTextBlock().element.outerHTML).toMatchSnapshot();
-    });
-  });
 });

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

-import Vue from 'vue';
-import { removeBreakLine } from 'helpers/text_helper';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import ShaMismatch from '~/vue_merge_request_widget/components/states/sha_mismatch.vue';
+import { I18N_SHA_MISMATCH } from '~/vue_merge_request_widget/i18n';
+
+function createComponent({ path = '' } = {}) {
+  return mount(ShaMismatch, {
+    propsData: {
+      mr: {
+        mergeRequestDiffsPath: path,
+      },
+    },
+  });
+}
 
 describe('ShaMismatch', () => {
-  let vm;
+  let wrapper;
+  const findActionButton = () => wrapper.find('[data-testid="action-button"]');
 
   beforeEach(() => {
-    const Component = Vue.extend(ShaMismatch);
-    vm = mountComponent(Component);
+    wrapper = createComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+  });
+
+  it('should render warning message', () => {
+    expect(wrapper.element.innerText).toContain(I18N_SHA_MISMATCH.warningMessage);
   });
 
-  it('should render information message', () => {
-    expect(vm.$el.querySelector('button').disabled).toEqual(true);
+  it('action button should have correct label', () => {
+    expect(findActionButton().text()).toBe(I18N_SHA_MISMATCH.actionButtonLabel);
+  });
+
+  it('action button should link to the diff path', () => {
+    const DIFF_PATH = '/gitlab-org/gitlab-test/-/merge_requests/6/diffs';
+
+    wrapper = createComponent({ path: DIFF_PATH });
 
-    expect(removeBreakLine(vm.$el.textContent).trim()).toContain(
-      'The source branch HEAD has recently changed. Please reload the page and review the changes before merging',
-    );
+    expect(findActionButton().attributes('href')).toBe(DIFF_PATH);
   });
 });

spec/frontend/vue_mr_widget/mr_widget_options_spec.js

@@ -80,14 +80,15 @@ describe('MrWidgetOptions', () => {
 
     describe('computed', () => {
       describe('componentName', () => {
-        it('should return merged component', () => {
-          expect(wrapper.vm.componentName).toEqual('mr-widget-merged');
-        });
-
-        it('should return conflicts component', () => {
-          wrapper.vm.mr.state = 'conflicts';
-
-          expect(wrapper.vm.componentName).toEqual('mr-widget-conflicts');
+        it.each`
+          state            | componentName
+          ${'merged'}      | ${'mr-widget-merged'}
+          ${'conflicts'}   | ${'mr-widget-conflicts'}
+          ${'shaMismatch'} | ${'sha-mismatch'}
+        `('should translate $state into $componentName', ({ state, componentName }) => {
+          wrapper.vm.mr.state = state;
+
+          expect(wrapper.vm.componentName).toEqual(componentName);
         });
       });