Add latest changes from gitlab-org/gitlab@14-0-stable-eev14.0.0-rc42

12 files changed, 94 insertions, 59 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
index a5b83167283..386ba2e2d77 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { s__ } from '~/locale';
 import eventHub from '../../event_hub';
@@ -120,7 +120,11 @@ export default {
       .then(() => {
         this.fetchingApprovals = false;
       })
-      .catch(() => createFlash(FETCH_ERROR));
+      .catch(() =>
+        createFlash({
+          message: FETCH_ERROR,
+        }),
+      );
   },
   methods: {
     approve() {
@@ -131,7 +135,10 @@ export default {
 
       this.updateApproval(
         () => this.service.approveMergeRequest(),
-        () => createFlash(APPROVE_ERROR),
+        () =>
+          createFlash({
+            message: APPROVE_ERROR,
+          }),
       );
     },
     approveWithAuth(data) {
@@ -142,14 +149,19 @@ export default {
             this.hasApprovalAuthError = true;
             return;
           }
-          createFlash(APPROVE_ERROR);
+          createFlash({
+            message: APPROVE_ERROR,
+          });
         },
       );
     },
     unapprove() {
       this.updateApproval(
         () => this.service.unapproveMergeRequest(),
-        () => createFlash(UNAPPROVE_ERROR),
+        () =>
+          createFlash({
+            message: UNAPPROVE_ERROR,
+          }),
       );
     },
     updateApproval(serviceFn, errFn) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue
index 55fa24fb51a..07821b01dd5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue
@@ -32,9 +32,9 @@ export default {
       :href="helpPath"
       :title="__('About this feature')"
       target="_blank"
-      class="d-flex-center pl-1"
+      class="d-flex-center"
     >
-      <gl-icon name="question" />
+      <gl-icon name="question-o" class="gl-ml-3" />
     </gl-link>
   </div>
 </template>
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 513d88ecab6..671f9cb8e74 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
@@ -1,5 +1,5 @@
 <script>
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -128,7 +128,9 @@ export default {
             }
           })
           .catch(() => {
-            createFlash(errorMessage);
+            createFlash({
+              message: errorMessage,
+            });
           })
           .finally(() => {
             this.actionInProgress = null;
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue
index 560a68031ef..4dc8bb0562b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue
@@ -1,45 +1,46 @@
 <script>
-import { GlLink, GlIcon } from '@gitlab/ui';
-import { WARNING, DANGER, WARNING_MESSAGE_CLASS, DANGER_MESSAGE_CLASS } from '../constants';
+import { GlLink, GlAlert } from '@gitlab/ui';
 
 export default {
-  name: 'MrWidgetAlertMessage',
+  name: 'MRWidgetAlertMessage',
   components: {
+    GlAlert,
     GlLink,
-    GlIcon,
   },
   props: {
     type: {
       type: String,
-      required: false,
-      default: DANGER,
-      validator: (value) => [WARNING, DANGER].includes(value),
+      required: true,
     },
     helpPath: {
       type: String,
       required: false,
       default: undefined,
     },
+    dismissible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
-  computed: {
-    messageClass() {
-      if (this.type === WARNING) {
-        return WARNING_MESSAGE_CLASS;
-      } else if (this.type === DANGER) {
-        return DANGER_MESSAGE_CLASS;
-      }
-
-      return '';
+  data() {
+    return {
+      isDismissed: false,
+    };
+  },
+  methods: {
+    onDismiss() {
+      this.isDismissed = true;
     },
   },
 };
 </script>
 
 <template>
-  <div class="gl-m-3 gl-ml-7" :class="messageClass">
+  <gl-alert v-if="!isDismissed" :variant="type" :dismissible="dismissible" @dismiss="onDismiss">
     <slot></slot>
-    <gl-link v-if="helpPath" :href="helpPath" target="_blank">
-      <gl-icon :size="16" name="question-o" class="align-middle" />
+    <gl-link v-if="helpPath" :href="helpPath" target="_blank" class="gl-label-link">
+      <slot name="link-content"></slot>
     </gl-link>
-  </div>
+  </gl-alert>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue
index c368399ed6f..f8c4ad69e39 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue
@@ -51,7 +51,7 @@ export default {
         <gl-icon :name="iconName" :size="24" />
       </span>
 
-      <div class="gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-md-flex-direction-row">
+      <div class="gl-display-flex gl-flex-grow-1 gl-flex-direction-column gl-md-flex-direction-row">
         <slot name="header"></slot>
 
         <div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index fa46b4b1364..6c162a06161 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -160,7 +160,7 @@ export default {
   <div class="ci-widget media">
     <template v-if="hasCIError">
       <gl-icon name="status_failed" class="gl-text-red-500" :size="24" />
-      <p class="gl-flex-fill-1 gl-ml-5 gl-mb-0" data-testid="ci-error-message">
+      <p class="gl-flex-grow-1 gl-ml-5 gl-mb-0" data-testid="ci-error-message">
         <gl-sprintf :message="$options.errorText">
           <template #link="{ content }">
             <gl-link :href="mrTroubleshootingDocsPath">{{ content }}</gl-link>
@@ -171,7 +171,7 @@ export default {
     <template v-else-if="!hasPipeline">
       <gl-loading-icon size="md" />
       <p
-        class="gl-flex-fill-1 gl-display-flex gl-ml-5 gl-mb-0"
+        class="gl-flex-grow-1 gl-display-flex gl-ml-5 gl-mb-0"
         data-testid="monitoring-pipeline-message"
       >
         {{ $options.monitoringPipelineText }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
index d50d97e3570..9268e426954 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
@@ -1,15 +1,14 @@
 <script>
-import { GlIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '../../locale';
 
 export default {
   i18n: {
-    removesBranchText: __('%{strongStart}Deletes%{strongEnd} source branch'),
+    removesBranchText: __('The source branch will be deleted'),
     tooltipTitle: __('A user with write access to the source branch selected this option'),
   },
   components: {
     GlIcon,
-    GlSprintf,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -20,11 +19,7 @@ export default {
 <template>
   <p v-once class="mr-info-list gl-ml-7 gl-pb-5 gl-mb-0">
     <span class="status-text">
-      <gl-sprintf :message="$options.i18n.removesBranchText">
-        <template #strong="{ content }">
-          <strong>{{ content }}</strong>
-        </template>
-      </gl-sprintf>
+      {{ $options.i18n.removesBranchText }}
     </span>
     <gl-icon
       v-gl-tooltip.hover
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
index 6331a7d8388..68ffca9cd68 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
@@ -14,8 +14,9 @@ export default {
     <div class="media-body space-children">
       <span class="bold">
         {{
-          s__(`mrWidget|Pipeline blocked.
-The pipeline for this merge request requires a manual action to proceed`)
+          s__(
+            `mrWidget|Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.`,
+          )
         }}
       </span>
     </div>
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 751f8082e1a..07de525b1fa 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
@@ -22,7 +22,13 @@ import { __ } from '~/locale';
 import SmartInterval from '~/smart_interval';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MergeRequest from '../../../merge_request';
-import { AUTO_MERGE_STRATEGIES, DANGER, INFO, WARNING } from '../../constants';
+import {
+  AUTO_MERGE_STRATEGIES,
+  DANGER,
+  CONFIRM,
+  WARNING,
+  MT_MERGE_STRATEGY,
+} from '../../constants';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import MergeRequestStore from '../../stores/mr_widget_store';
@@ -191,7 +197,7 @@ export default {
     },
     squashIsSelected() {
       if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.squashReadOnly ? this.state.squashOnMerge : this.state.squash;
+        return this.isSquashReadOnly ? this.state.squashOnMerge : this.state.squash;
       }
 
       return this.mr.squashIsSelected;
@@ -223,15 +229,11 @@ export default {
       return PIPELINE_SUCCESS_STATE;
     },
     mergeButtonVariant() {
-      if (this.status === PIPELINE_FAILED_STATE) {
+      if (this.status === PIPELINE_FAILED_STATE || this.isPipelineFailed) {
         return DANGER;
       }
 
-      if (this.status === PIPELINE_PENDING_STATE) {
-        return INFO;
-      }
-
-      return PIPELINE_SUCCESS_STATE;
+      return CONFIRM;
     },
     iconClass() {
       if (this.shouldRenderMergeTrainHelperText && !this.mr.preventMerge) {
@@ -290,6 +292,9 @@ export default {
     shaMismatchLink() {
       return this.mr.mergeRequestDiffsPath;
     },
+    showDangerMessageForMergeTrain() {
+      return this.preferredAutoMergeStrategy === MT_MERGE_STRATEGY && this.isPipelineFailed;
+    },
   },
   mounted() {
     if (this.glFeatures.mergeRequestWidgetGraphql) {
@@ -503,7 +508,7 @@ export default {
                 v-if="shouldShowMergeImmediatelyDropdown"
                 v-gl-tooltip.hover.focus="__('Select merge moment')"
                 :disabled="isMergeButtonDisabled"
-                variant="info"
+                :variant="mergeButtonVariant"
                 data-qa-selector="merge_moment_dropdown"
                 toggle-class="btn-icon js-merge-moment"
               >
@@ -583,6 +588,14 @@ export default {
               </gl-sprintf>
             </span>
           </div>
+
+          <div
+            v-if="showDangerMessageForMergeTrain"
+            class="gl-mt-5 gl-text-gray-500"
+            data-testid="failed-pipeline-merge-train-text"
+          >
+            {{ __('The latest pipeline for this merge request did not complete successfully.') }}
+          </div>
         </div>
       </div>
       <merge-train-helper-text
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index f0c624c5d8d..a1eb77479bd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -2,7 +2,7 @@
 import { GlButton } from '@gitlab/ui';
 import { produce } from 'immer';
 import $ from 'jquery';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import MergeRequest from '~/merge_request';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -76,7 +76,9 @@ export default {
             },
           ) {
             if (errors?.length) {
-              createFlash(__('Something went wrong. Please try again.'));
+              createFlash({
+                message: __('Something went wrong. Please try again.'),
+              });
 
               return;
             }
@@ -121,11 +123,18 @@ export default {
               },
             },
           }) => {
-            createFlash(__('The merge request can now be merged.'), 'notice');
+            createFlash({
+              message: __('The merge request can now be merged.'),
+              type: 'notice',
+            });
             $('.merge-request .detail-page-description .title').text(title);
           },
         )
-        .catch(() => createFlash(__('Something went wrong. Please try again.')))
+        .catch(() =>
+          createFlash({
+            message: __('Something went wrong. Please try again.'),
+          }),
+        )
         .finally(() => {
           this.isMakingRequest = false;
         });
@@ -144,7 +153,9 @@ export default {
           })
           .catch(() => {
             this.isMakingRequest = false;
-            createFlash(__('Something went wrong. Please try again.'));
+            createFlash({
+              message: __('Something went wrong. Please try again.'),
+            });
           });
       }
     },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue
index 25f339b362f..2ba945a3ecf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue
@@ -107,7 +107,7 @@ export default {
       <template #header>
         <div
           data-testid="terraform-header-text"
-          class="gl-flex-fill-1 gl-display-flex gl-flex-direction-column"
+          class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column"
         >
           <p v-if="validPlanCountText" class="gl-m-0">
             <gl-sprintf :message="validPlanCountText">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue b/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue
index 25e3dae92e8..427ab0842ea 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue
@@ -71,8 +71,8 @@ export default {
       <gl-icon :name="iconType" :size="16" data-testid="change-type-icon" />
     </span>
 
-    <div class="gl-display-flex gl-flex-fill-1 gl-flex-direction-column flex-md-row gl-pl-3">
-      <div class="gl-flex-fill-1 gl-display-flex gl-flex-direction-column gl-pr-3">
+    <div class="gl-display-flex gl-flex-grow-1 gl-flex-direction-column flex-md-row gl-pl-3">
+      <div class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-pr-3">
         <p class="gl-mb-3 gl-line-height-normal">
           <gl-sprintf :message="reportHeaderText">
             <template #name>