1 files changed, 22 insertions, 9 deletions

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