Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

20 files changed, 216 insertions, 35 deletions

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 ac6368a3025..306026072a3 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,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { s__, n__ } from '~/locale';
 
 export default {
@@ -32,11 +31,16 @@ export default {
 </script>
 <template>
   <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.closing">
+      {{ closesText }}
+      <span v-html="relatedLinks.closing /* eslint-disable-line vue/no-v-html */"></span>
+    </p>
     <p v-if="relatedLinks.mentioned">
       {{ n__('mrWidget|Mentions issue', 'mrWidget|Mentions issues', relatedLinks.mentionedCount) }}
-      <span v-html="relatedLinks.mentioned"></span>
+      <span v-html="relatedLinks.mentioned /* eslint-disable-line vue/no-v-html */"></span>
+    </p>
+    <p v-if="relatedLinks.assignToMe">
+      <span v-html="relatedLinks.assignToMe /* eslint-disable-line vue/no-v-html */"></span>
     </p>
-    <p v-if="relatedLinks.assignToMe"><span v-html="relatedLinks.assignToMe"></span></p>
   </section>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
index d2581f57837..f3673005c45 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
@@ -98,7 +98,7 @@ export default {
               data-testid="add-pipeline-link"
               :data-track-property="humanAccess"
               :data-track-value="$options.SP_LINK_TRACK_VALUE"
-              :data-track-event="$options.SP_LINK_TRACK_EVENT"
+              :data-track-action="$options.SP_LINK_TRACK_EVENT"
               :data-track-label="$options.SP_TRACK_LABEL"
             >
               {{ content }}
@@ -139,7 +139,7 @@ export default {
             :href="pipelinePath"
             :data-track-property="humanAccess"
             :data-track-value="$options.SP_SHOW_TRACK_VALUE"
-            :data-track-event="$options.SP_SHOW_TRACK_EVENT"
+            :data-track-action="$options.SP_SHOW_TRACK_EVENT"
             :data-track-label="$options.SP_TRACK_LABEL"
           >
             {{ __('Show me how to add a pipeline') }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
index ebd2b5cd22d..e31e69d0f3a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
@@ -39,7 +39,7 @@ export default {
     target="_blank"
     rel="noopener noreferrer nofollow"
     :class="cssClass"
-    data-track-event="open_review_app"
+    data-track-action="open_review_app"
     data-track-label="review_app"
   >
     {{ display.text }} <gl-icon class="fgray" name="external-link" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
index d331f1690f5..a55dba92e16 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
@@ -1,5 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
+/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
 import { GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, n__, sprintf, s__ } from '~/locale';
@@ -89,7 +89,10 @@ export default {
       />
       <span v-if="expanded">{{ __('Collapse') }}</span>
       <span v-else>
-        <span class="vertical-align-middle" v-html="message"></span>
+        <span
+          class="vertical-align-middle"
+          v-html="message /* eslint-disable-line vue/no-v-html */"
+        ></span>
         <gl-button variant="link" class="modify-message-button">
           {{ modifyLinkMessage }}
         </gl-button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
new file mode 100644
index 00000000000..503ddf8a396
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
@@ -0,0 +1,75 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import notesEventHub from '~/notes/event_hub';
+import StatusIcon from '../mr_widget_status_icon.vue';
+
+export default {
+  i18n: {
+    pipelineFailed: s__(
+      'mrWidget|The pipeline for this merge request did not complete. Push a new commit to fix the failure.',
+    ),
+    approvalNeeded: s__('mrWidget|You can only merge once this merge request is approved.'),
+    unresolvedDiscussions: s__('mrWidget|Merge blocked: all threads must be resolved.'),
+  },
+  components: {
+    StatusIcon,
+    GlButton,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    failedText() {
+      if (this.mr.isPipelineFailed) {
+        return this.$options.i18n.pipelineFailed;
+      } else if (this.mr.approvals && !this.mr.isApproved) {
+        return this.$options.i18n.approvalNeeded;
+      } else if (this.mr.hasMergeableDiscussionsState) {
+        return this.$options.i18n.unresolvedDiscussions;
+      }
+
+      return null;
+    },
+  },
+  methods: {
+    jumpToFirstUnresolvedDiscussion() {
+      notesEventHub.$emit('jumpToFirstUnresolvedDiscussion');
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media gl-flex-wrap">
+    <status-icon status="warning" />
+    <p class="media-body gl-m-0! gl-font-weight-bold gl-text-black-normal!">
+      {{ failedText }}
+      <template v-if="failedText == $options.i18n.unresolvedDiscussions">
+        <gl-button
+          class="gl-ml-3"
+          size="small"
+          variant="confirm"
+          data-testid="jumpToUnresolved"
+          @click="jumpToFirstUnresolvedDiscussion"
+        >
+          {{ s__('mrWidget|Jump to first unresolved thread') }}
+        </gl-button>
+        <gl-button
+          v-if="mr.createIssueToResolveDiscussionsPath"
+          :href="mr.createIssueToResolveDiscussionsPath"
+          class="gl-ml-3"
+          size="small"
+          variant="confirm"
+          category="secondary"
+          data-testid="resolveIssue"
+        >
+          {{ s__('mrWidget|Create issue to resolve all threads') }}
+        </gl-button>
+      </template>
+    </p>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 22f41b43095..1976d3639a6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
 import { escape } from 'lodash';
 import createFlash from '~/flash';
@@ -171,7 +170,7 @@ export default {
           v-if="!rebaseInProgress && !canPushToSourceBranch"
           class="gl-font-weight-bold gl-ml-0!"
           data-testid="rebase-message"
-          v-html="fastForwardMergeText"
+          v-html="fastForwardMergeText /* eslint-disable-line vue/no-v-html */"
         ></span>
         <div
           v-if="!rebaseInProgress && canPushToSourceBranch && !isMakingRequest"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/new_ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/new_ready_to_merge.vue
new file mode 100644
index 00000000000..9a7743348ff
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/new_ready_to_merge.vue
@@ -0,0 +1,49 @@
+<script>
+import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
+import readyToMergeQuery from '../../queries/states/new_ready_to_merge.query.graphql';
+import StatusIcon from '../mr_widget_status_icon.vue';
+
+export default {
+  apollo: {
+    canMerge: {
+      query: readyToMergeQuery,
+      skip() {
+        return !this.mr || !window.gon?.features?.mergeRequestWidgetGraphql;
+      },
+      variables() {
+        return this.mergeRequestQueryVariables;
+      },
+      update: (data) => data?.project?.mergeRequest?.userPermissions?.canMerge,
+    },
+  },
+  components: {
+    StatusIcon,
+  },
+  mixins: [mergeRequestQueryVariablesMixin],
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      canMerge: null,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon status="success" />
+    <p class="media-body gl-m-0! gl-font-weight-bold">
+      <template v-if="canMerge">
+        {{ __('Ready to merge!') }}
+      </template>
+      <template v-else>
+        {{ __('Ready to merge by members who can write to the target branch.') }}
+      </template>
+    </p>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
index 01e0b91bd4a..7827c79cd31 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
@@ -1,6 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
 import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
@@ -11,6 +10,9 @@ export default {
     GlSprintf,
     GlLink,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     mr: {
       type: Object,
@@ -21,6 +23,7 @@ export default {
     return { emptyStateSVG };
   },
   ciHelpPage: helpPagePath('/ci/quick_start/index.html'),
+  safeHtmlConfig: { ADD_TAGS: ['use'] },
 };
 </script>
 
@@ -30,7 +33,7 @@ export default {
       <div
         class="artwork col-md-5 order-md-last col-12 text-center d-flex justify-content-center align-items-center"
       >
-        <span v-html="emptyStateSVG"></span>
+        <span v-safe-html:[$options.safeHtmlConfig]="emptyStateSVG"></span>
       </div>
       <div class="text col-md-7 order-md-first col-12">
         <p class="highlight">
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 f33f4d3fda0..7df65e995a5 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
@@ -28,6 +28,7 @@ import {
   CONFIRM,
   WARNING,
   MT_MERGE_STRATEGY,
+  PIPELINE_FAILED_STATE,
 } from '../../constants';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
@@ -39,7 +40,6 @@ import CommitsHeader from './commits_header.vue';
 import SquashBeforeMerge from './squash_before_merge.vue';
 
 const PIPELINE_RUNNING_STATE = 'running';
-const PIPELINE_FAILED_STATE = 'failed';
 const PIPELINE_PENDING_STATE = 'pending';
 const PIPELINE_SUCCESS_STATE = 'success';
 
@@ -105,6 +105,10 @@ export default {
       import(
         'ee_component/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue'
       ),
+    MergeTrainFailedPipelineConfirmationDialog: () =>
+      import(
+        'ee_component/vue_merge_request_widget/components/merge_train_failed_pipeline_confirmation_dialog.vue'
+      ),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -125,6 +129,7 @@ export default {
       squashBeforeMerge: this.mr.squashIsSelected,
       isSquashReadOnly: this.mr.squashIsReadonly,
       squashCommitMessage: this.mr.squashCommitMessage,
+      isPipelineFailedModalVisible: false,
     };
   },
   computed: {
@@ -327,7 +332,12 @@ export default {
         : this.mr.commitMessageWithDescription;
       this.commitMessage = includeDescription ? commitMessageWithDescription : commitMessage;
     },
-    handleMergeButtonClick(useAutoMerge, mergeImmediately = false) {
+    handleMergeButtonClick(useAutoMerge, mergeImmediately = false, confirmationClicked = false) {
+      if (this.showFailedPipelineModal && !confirmationClicked) {
+        this.isPipelineFailedModalVisible = true;
+        return;
+      }
+
       if (mergeImmediately) {
         this.isMergingImmediately = true;
       }
@@ -386,7 +396,7 @@ export default {
       }
     },
     onMergeImmediatelyConfirmation() {
-      this.handleMergeButtonClick(false, true);
+      this.handleMergeButtonClick(false, true, true);
     },
     initiateMergePolling() {
       simplePoll(
@@ -522,6 +532,11 @@ export default {
                   @mergeImmediately="onMergeImmediatelyConfirmation"
                 />
               </gl-dropdown>
+              <merge-train-failed-pipeline-confirmation-dialog
+                :visible="isPipelineFailedModalVisible"
+                @startMergeTrain="onStartMergeTrainConfirmation"
+                @cancel="isPipelineFailedModalVisible = false"
+              />
             </gl-button-group>
             <div
               v-if="shouldShowMergeControls"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index c6ce29acb09..69e4df0ca11 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -46,7 +46,7 @@ export default {
         size="small"
         icon="issue-new"
       >
-        {{ s__('mrWidget|Resolve all threads in new issue') }}
+        {{ s__('mrWidget|Create issue to resolve all threads') }}
       </gl-button>
     </div>
   </div>
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 a1eb77479bd..393c599c7e8 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
@@ -124,7 +124,7 @@ export default {
             },
           }) => {
             createFlash({
-              message: __('The merge request can now be merged.'),
+              message: __('Marked as ready. Merging is now allowed.'),
               type: 'notice',
             });
             $('.merge-request .detail-page-description .title').text(title);
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 427ab0842ea..87a310efe78 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
@@ -104,7 +104,7 @@ export default {
           :href="plan.job_path"
           target="_blank"
           data-testid="terraform-report-link"
-          data-track-event="click_terraform_mr_plan_button"
+          data-track-action="click_terraform_mr_plan_button"
           data-track-label="mr_widget_terraform_mr_plan_button"
           data-track-property="terraform_mr_plan_button"
           class="btn btn-sm"
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index d067e531fad..f5710f46b7e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -10,6 +10,8 @@ export const MWPS_MERGE_STRATEGY = 'merge_when_pipeline_succeeds';
 export const MTWPS_MERGE_STRATEGY = 'add_to_merge_train_when_pipeline_succeeds';
 export const MT_MERGE_STRATEGY = 'merge_train';
 
+export const PIPELINE_FAILED_STATE = 'failed';
+
 export const AUTO_MERGE_STRATEGIES = [MWPS_MERGE_STRATEGY, MTWPS_MERGE_STRATEGY, MT_MERGE_STRATEGY];
 
 // SP - "Suggest Pipelines"
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
index 3a3a1329483..f5dbcec7dbe 100644
--- a/app/assets/javascripts/vue_merge_request_widget/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -6,9 +6,8 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import MrWidgetOptions from 'ee_else_ce/vue_merge_request_widget/mr_widget_options.vue';
 import createDefaultClient from '~/lib/graphql';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import Translate from '../vue_shared/translate';
-import { registerExtension } from './components/extensions';
-import issueExtension from './extensions/issues';
 
 Vue.use(Translate);
 Vue.use(VueApollo);
@@ -28,13 +27,13 @@ export default () => {
   gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;
   gl.mrWidgetData.defaultAvatarUrl = gon.default_avatar_url;
 
-  registerExtension(issueExtension);
-
   const vm = new Vue({
     el: '#js-vue-mr-widget',
     provide: {
       artifactsEndpoint: gl.mrWidgetData.artifacts_endpoint,
       artifactsEndpointPlaceholder: gl.mrWidgetData.artifacts_endpoint_placeholder,
+      falsePositiveDocUrl: gl.mrWidgetData.false_positive_doc_url,
+      canViewFalsePositive: parseBoolean(gl.mrWidgetData.can_view_false_positive),
     },
     ...MrWidgetOptions,
     apolloProvider,
diff --git a/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js
index 23215982e6e..9d8e5d12d58 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js
@@ -38,5 +38,13 @@ export default {
     pipelineId() {
       return this.pipeline.id;
     },
+    showFailedPipelineModal() {
+      return false;
+    },
+  },
+  methods: {
+    onStartMergeTrainConfirmation() {
+      return false;
+    },
   },
 };
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index a8a9df598f5..78aa3941bfe 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -12,9 +12,6 @@ import { sprintf, s__, __ } from '~/locale';
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
 import { setFaviconOverlay } from '../lib/utils/favicon';
-import GroupedAccessibilityReportsApp from '../reports/accessibility_report/grouped_accessibility_reports_app.vue';
-import GroupedCodequalityReportsApp from '../reports/codequality_report/grouped_codequality_reports_app.vue';
-import GroupedTestReportsApp from '../reports/grouped_test_report/grouped_test_reports_app.vue';
 import Loading from './components/loading.vue';
 import MrWidgetAlertMessage from './components/mr_widget_alert_message.vue';
 import WidgetHeader from './components/mr_widget_header.vue';
@@ -42,7 +39,6 @@ import ShaMismatch from './components/states/sha_mismatch.vue';
 import UnresolvedDiscussionsState from './components/states/unresolved_discussions.vue';
 import WorkInProgressState from './components/states/work_in_progress.vue';
 // import ExtensionsContainer from './components/extensions/container';
-import TerraformPlan from './components/terraform/mr_widget_terraform_container.vue';
 import eventHub from './event_hub';
 import mergeRequestQueryVariablesMixin from './mixins/merge_request_query_variables';
 import getStateQuery from './queries/get_state.query.graphql';
@@ -72,7 +68,9 @@ export default {
     'mr-widget-nothing-to-merge': NothingToMergeState,
     'mr-widget-not-allowed': NotAllowedState,
     'mr-widget-missing-branch': MissingBranchState,
-    'mr-widget-ready-to-merge': ReadyToMergeState,
+    'mr-widget-ready-to-merge': window.gon?.features?.restructuredMrWidget
+      ? () => import('./components/states/new_ready_to_merge.vue')
+      : ReadyToMergeState,
     'sha-mismatch': ShaMismatch,
     'mr-widget-checking': CheckingState,
     'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
@@ -82,12 +80,16 @@ export default {
     'mr-widget-auto-merge-failed': AutoMergeFailed,
     'mr-widget-rebase': RebaseState,
     SourceBranchRemovalStatus,
-    GroupedCodequalityReportsApp,
-    GroupedTestReportsApp,
-    TerraformPlan,
-    GroupedAccessibilityReportsApp,
+    GroupedCodequalityReportsApp: () =>
+      import('../reports/codequality_report/grouped_codequality_reports_app.vue'),
+    GroupedTestReportsApp: () =>
+      import('../reports/grouped_test_report/grouped_test_reports_app.vue'),
+    TerraformPlan: () => import('./components/terraform/mr_widget_terraform_container.vue'),
+    GroupedAccessibilityReportsApp: () =>
+      import('../reports/accessibility_report/grouped_accessibility_reports_app.vue'),
     MrWidgetApprovals,
     SecurityReportsApp: () => import('~/vue_shared/security_reports/security_reports_app.vue'),
+    MergeChecksFailed: () => import('./components/states/merge_checks_failed.vue'),
   },
   apollo: {
     state: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/queries/states/new_ready_to_merge.query.graphql b/app/assets/javascripts/vue_merge_request_widget/queries/states/new_ready_to_merge.query.graphql
new file mode 100644
index 00000000000..3b34be73c15
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/queries/states/new_ready_to_merge.query.graphql
@@ -0,0 +1,9 @@
+query readyToMergeQuery($projectPath: ID!, $iid: String!) {
+  project(fullPath: $projectPath) {
+    mergeRequest(iid: $iid) {
+      userPermissions {
+        canMerge
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
index 04800cf43f0..65d78fc283c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
@@ -1,7 +1,9 @@
 import { stateKey } from './state_maps';
 
 export default function deviseState() {
-  if (this.projectArchived) {
+  if (this.hasMergeChecksFailed) {
+    return stateKey.mergeChecksFailed;
+  } else if (this.projectArchived) {
     return stateKey.archived;
   } else if (this.branchMissing) {
     return stateKey.missingBranch;
@@ -25,7 +27,7 @@ export default function deviseState() {
     return stateKey.shaMismatch;
   } else if (this.autoMergeEnabled && !this.mergeError) {
     return stateKey.autoMergeEnabled;
-  } else if (!this.canMerge) {
+  } else if (!this.canMerge && !window.gon?.features?.restructuredMrWidget) {
     return stateKey.notAllowedToMerge;
   } else if (this.canBeMerged) {
     return stateKey.readyToMerge;
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 8979fe621ac..29e0c867f6b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -347,4 +347,13 @@ export default class MergeRequestStore {
     this.approvals = data;
     this.isApproved = data.approved || false;
   }
+
+  get hasMergeChecksFailed() {
+    if (!window.gon?.features?.restructuredMrWidget) return false;
+
+    return (
+      this.hasMergeableDiscussionsState ||
+      (this.onlyAllowMergeIfPipelineSucceeds && this.isPipelineFailed)
+    );
+  }
 }
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
index 28507bba3e5..04454882666 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
@@ -18,6 +18,7 @@ const stateToComponentMap = {
   autoMergeFailed: 'mr-widget-auto-merge-failed',
   shaMismatch: 'sha-mismatch',
   rebase: 'mr-widget-rebase',
+  mergeChecksFailed: 'mergeChecksFailed',
 };
 
 const statesToShowHelpWidget = [
@@ -50,6 +51,7 @@ export const stateKey = {
   readyToMerge: 'readyToMerge',
   rebase: 'rebase',
   merged: 'merged',
+  mergeChecksFailed: 'mergeChecksFailed',
 };
 
 export default {