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

8 files changed, 47 insertions, 69 deletions

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>