Add danger for merge trains

If pipeline failed for merge train
show red danger button.

Changelog: added

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, CONFIRM, 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';
@@ -223,7 +229,7 @@ export default {
       return PIPELINE_SUCCESS_STATE;
     },
     mergeButtonVariant() {
-      if (this.status === PIPELINE_FAILED_STATE) {
+      if (this.status === PIPELINE_FAILED_STATE || this.isPipelineFailed) {
         return DANGER;
       }
 
@@ -286,6 +292,9 @@ export default {
     shaMismatchLink() {
       return this.mr.mergeRequestDiffsPath;
     },
+    showDangerMessageForMergeTrain() {
+      return this.preferredAutoMergeStrategy === MT_MERGE_STRATEGY && this.isPipelineFailed;
+    },
   },
   mounted() {
     if (this.glFeatures.mergeRequestWidgetGraphql) {
@@ -499,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"
               >
@@ -579,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

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

@@ -86,6 +86,8 @@ describe('ReadyToMerge', () => {
     findMergeTrainHelperText().find('[data-testid="pipeline-link"]');
   const findMergeTrainDocumentationLink = () =>
     findMergeTrainHelperText().find('[data-testid="documentation-link"]');
+  const findFailedPipelineMergeTrainText = () =>
+    wrapper.find('[data-testid="failed-pipeline-merge-train-text"]');
 
   afterEach(() => {
     if (wrapper?.destroy) {
@@ -423,4 +425,32 @@ describe('ReadyToMerge', () => {
       expect(findPipelineConflictMessage().text()).toBe(PIPELINE_MUST_SUCCEED_CONFLICT_TEXT);
     });
   });
+
+  describe('Merge button variant', () => {
+    it('danger variant and failed text should show if pipeline failed', () => {
+      factory({
+        isPipelineFailed: true,
+        preferredAutoMergeStrategy: MT_MERGE_STRATEGY,
+        availableAutoMergeStrategies: [MT_MERGE_STRATEGY],
+        hasCI: true,
+        onlyAllowMergeIfPipelineSucceeds: false,
+      });
+
+      expect(findMergeButton().attributes('variant')).toBe('danger');
+      expect(findFailedPipelineMergeTrainText().exists()).toBe(true);
+    });
+
+    it('confirm variant and failed text should not show if pipeline passed', () => {
+      factory({
+        preferredAutoMergeStrategy: MT_MERGE_STRATEGY,
+        availableAutoMergeStrategies: [MT_MERGE_STRATEGY],
+        hasCI: true,
+        onlyAllowMergeIfPipelineSucceeds: false,
+        ciStatus: 'success',
+      });
+
+      expect(findMergeButton().attributes('variant')).toBe('confirm');
+      expect(findFailedPipelineMergeTrainText().exists()).toBe(false);
+    });
+  });
 });

locale/gitlab.pot

@@ -32610,6 +32610,9 @@ msgstr ""
 msgid "The latest artifacts created by jobs in the most recent successful pipeline will be stored."
 msgstr ""
 
+msgid "The latest pipeline for this merge request did not complete successfully."
+msgstr ""
+
 msgid "The license key is invalid. Make sure it is exactly as you received it from GitLab Inc."
 msgstr ""