Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

16 files changed, 87 insertions, 182 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue
index d79da9d3b90..41edbc83cdb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue
@@ -20,21 +20,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    showVisualReviewApp: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    visualReviewAppMeta: {
-      type: Object,
-      required: false,
-      default: () => ({
-        sourceProjectId: '',
-        sourceProjectPath: '',
-        mergeRequestId: '',
-        appUrl: '',
-      }),
-    },
   },
   computed: {
     computedDeploymentStatus() {
@@ -63,8 +48,6 @@ export default {
           <deployment-actions
             :deployment="deployment"
             :computed-deployment-status="computedDeploymentStatus"
-            :show-visual-review-app="showVisualReviewApp"
-            :visual-review-app-meta="visualReviewAppMeta"
           />
         </div>
       </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
index 7e587663c26..5ef7c2f72e0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
@@ -33,21 +33,6 @@ export default {
       type: Object,
       required: true,
     },
-    showVisualReviewApp: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    visualReviewAppMeta: {
-      type: Object,
-      required: false,
-      default: () => ({
-        sourceProjectId: '',
-        sourceProjectPath: '',
-        mergeRequestId: '',
-        appUrl: '',
-      }),
-    },
   },
   data() {
     return {
@@ -178,8 +163,6 @@ export default {
       v-if="hasExternalUrls"
       :app-button-text="appButtonText"
       :deployment="deployment"
-      :show-visual-review-app="showVisualReviewApp"
-      :visual-review-app-meta="visualReviewAppMeta"
     />
     <deployment-action-button
       v-if="stopUrl"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue
index d23c7f016fb..d3384903cce 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue
@@ -32,11 +32,6 @@ export default {
         appUrl: '',
       }),
     },
-    showVisualReviewAppLink: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     showCollapsedDeployments() {
@@ -74,8 +69,6 @@ export default {
       class="gl-bg-gray-50"
       :deployment="deployment"
       :show-metrics="hasDeploymentMetrics"
-      :show-visual-review-app="showVisualReviewAppLink"
-      :visual-review-app-meta="visualReviewAppMeta"
     />
   </mr-collapsible-extension>
   <div v-else class="mr-widget-extension">
@@ -85,8 +78,6 @@ export default {
       :class="deploymentClass"
       :deployment="deployment"
       :show-metrics="hasDeploymentMetrics"
-      :show-visual-review-app="showVisualReviewAppLink"
-      :visual-review-app-meta="visualReviewAppMeta"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
index 459bee8023f..1e363b0f5fb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
@@ -20,8 +20,6 @@ export default {
     GlLink,
     GlSearchBoxByType,
     ReviewAppLink,
-    VisualReviewAppLink: () =>
-      import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'),
   },
   directives: {
     autofocusonshow,
@@ -35,21 +33,6 @@ export default {
       type: Object,
       required: true,
     },
-    showVisualReviewApp: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    visualReviewAppMeta: {
-      type: Object,
-      required: false,
-      default: () => ({
-        sourceProjectId: '',
-        sourceProjectPath: '',
-        mergeRequestId: '',
-        appUrl: '',
-      }),
-    },
   },
   data() {
     return { searchTerm: '' };
@@ -114,12 +97,5 @@ export default {
       size="small"
       css-class="js-deploy-url deploy-link btn btn-default btn-sm inline gl-ml-3"
     />
-    <visual-review-app-link
-      v-if="showVisualReviewApp"
-      :view-app-display="appButtonText"
-      :link="deploymentExternalUrl"
-      :app-metadata="visualReviewAppMeta"
-      :changes="deployment.changes"
-    />
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
index 5ed699acddf..f71b1fbc539 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
+++ b/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>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 5e401fc17e9..966262944ad 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -14,6 +14,7 @@ import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 import MrWidgetHowToMergeModal from './mr_widget_how_to_merge_modal.vue';
 import MrWidgetIcon from './mr_widget_icon.vue';
 
@@ -30,6 +31,7 @@ export default {
     GlDropdownItem,
     GlLink,
     GlSprintf,
+    WebIdeLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -56,31 +58,24 @@ export default {
       });
     },
     webIdePath() {
-      if (this.mr.canPushToSourceBranch) {
-        return mergeUrlParams(
-          {
-            target_project:
-              this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath
-                ? this.mr.targetProjectFullPath
-                : '',
-          },
-          webIDEUrl(`/${this.mr.sourceProjectFullPath}/merge_requests/${this.mr.iid}`),
-        );
-      }
-
-      return null;
-    },
-    ideButtonTitle() {
-      return !this.mr.canPushToSourceBranch
-        ? s__(
-            'mrWidget|You are not allowed to edit this project directly. Please fork to make changes.',
-          )
-        : '';
+      return mergeUrlParams(
+        {
+          target_project:
+            this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath
+              ? this.mr.targetProjectFullPath
+              : '',
+        },
+        webIDEUrl(`/${this.mr.sourceProjectFullPath}/merge_requests/${this.mr.iid}`),
+      );
     },
     isFork() {
       return this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath;
     },
   },
+  i18n: {
+    webIdeText: s__('mrWidget|Open in Web IDE'),
+    gitpodText: s__('mrWidget|Open in Gitpod'),
+  },
 };
 </script>
 <template>
@@ -123,22 +118,21 @@ export default {
 
       <div class="branch-actions d-flex">
         <template v-if="mr.isOpen">
-          <span
+          <web-ide-link
             v-if="!mr.sourceBranchRemoved"
-            v-gl-tooltip
-            :title="ideButtonTitle"
-            class="gl-display-none d-md-inline-block gl-mr-3"
-            :tabindex="ideButtonTitle ? 0 : null"
-          >
-            <gl-button
-              :href="webIdePath"
-              :disabled="!mr.canPushToSourceBranch"
-              class="js-web-ide"
-              data-qa-selector="open_in_web_ide_button"
-            >
-              {{ s__('mrWidget|Open in Web IDE') }}
-            </gl-button>
-          </span>
+            :show-edit-button="false"
+            :show-web-ide-button="true"
+            :web-ide-url="webIdePath"
+            :web-ide-text="$options.i18n.webIdeText"
+            :show-gitpod-button="mr.showGitpodButton"
+            :gitpod-url="mr.gitpodUrl"
+            :gitpod-enabled="mr.gitpodEnabled"
+            :gitpod-text="$options.i18n.gitpodText"
+            class="gl-display-none gl-md-display-inline-block gl-mr-3"
+            data-placement="bottom"
+            tabindex="0"
+            data-qa-selector="open_in_web_ide_button"
+          />
           <gl-button
             v-gl-modal-directive="'modal-merge-info'"
             :disabled="mr.sourceBranchRemoved"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
index c24ae92db4f..a8272002f16 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
@@ -66,11 +66,6 @@ export default {
     pipeline() {
       return this.isPostMerge ? this.mr.mergePipeline : this.mr.pipeline;
     },
-    showVisualReviewAppLink() {
-      return Boolean(
-        this.mr.visualReviewAppAvailable && this.glFeatures.anonymousVisualReviewFeedback,
-      );
-    },
     showMergeTrainPositionIndicator() {
       return isNumber(this.mr.mergeTrainIndex);
     },
@@ -120,8 +115,6 @@ export default {
         :deployments="deployments"
         :deployment-class="deploymentClass"
         :has-deployment-metrics="hasDeploymentMetrics"
-        :visual-review-app-meta="visualReviewAppMeta"
-        :show-visual-review-app-link="showVisualReviewAppLink"
       />
       <merge-train-position-indicator
         v-if="showMergeTrainPositionIndicator"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
index 43317130b08..ac6368a3025 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
@@ -1,6 +1,6 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { s__ } from '~/locale';
+import { s__, n__ } from '~/locale';
 
 export default {
   name: 'MRWidgetRelatedLinks',
@@ -24,7 +24,8 @@ export default {
       if (this.state === 'closed') {
         return s__('mrWidget|Did not close');
       }
-      return s__('mrWidget|Closes');
+
+      return n__('mrWidget|Closes issue', 'mrWidget|Closes issues', this.relatedLinks.closingCount);
     },
   },
 };
@@ -33,7 +34,8 @@ export default {
   <section class="mr-info-list gl-ml-7 gl-pb-5">
     <p v-if="relatedLinks.closing">{{ closesText }} <span v-html="relatedLinks.closing"></span></p>
     <p v-if="relatedLinks.mentioned">
-      {{ s__('mrWidget|Mentions') }} <span v-html="relatedLinks.mentioned"></span>
+      {{ n__('mrWidget|Mentions issue', 'mrWidget|Mentions issues', relatedLinks.mentionedCount) }}
+      <span v-html="relatedLinks.mentioned"></span>
     </p>
     <p v-if="relatedLinks.assignToMe"><span v-html="relatedLinks.assignToMe"></span></p>
   </section>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
index f99b825ff30..0eb173edbcb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
@@ -1,5 +1,5 @@
 <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,21 +27,20 @@ export default {
   },
   components: {
     MrWidgetAuthor,
-    statusIcon,
-    GlLoadingIcon,
     GlSkeletonLoader,
+    GlIcon,
+    GlButton,
+    GlSprintf,
   },
   mixins: [autoMergeMixin, glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
   props: {
     mr: {
       type: Object,
       required: true,
-      default: () => ({}),
     },
     service: {
       type: Object,
       required: true,
-      default: () => ({}),
     },
   },
   data() {
@@ -155,54 +153,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>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
index 302a30dab54..6d5ca58aa20 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -14,7 +14,6 @@ export default {
     mr: {
       type: Object,
       required: true,
-      default: () => ({}),
     },
   },
 };
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index 5a93021978c..1596f852b74 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -45,7 +45,6 @@ export default {
     mr: {
       type: Object,
       required: true,
-      default: () => ({}),
     },
   },
   data() {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
index e973a2350a3..42e9261b82c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
@@ -17,7 +17,6 @@ export default {
     mr: {
       type: Object,
       required: true,
-      default: () => ({}),
     },
   },
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index 5177eab790b..a1759b1a815 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -25,12 +25,10 @@ export default {
     mr: {
       type: Object,
       required: true,
-      default: () => ({}),
     },
     service: {
       type: Object,
       required: true,
-      default: () => ({}),
     },
   },
   data() {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
index 32749b8b018..1c245b584ea 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
@@ -11,7 +11,6 @@ export default {
     mr: {
       type: Object,
       required: true,
-      default: () => ({}),
     },
   },
   data() {
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 2d0b7fe46a6..f33f4d3fda0 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
@@ -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"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
index 89edf588213..7eeba8d8f89 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
@@ -1,24 +1,42 @@
 <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>