Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42

19 files changed, 98 insertions, 117 deletions

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
index a45823823f0..e2a9caf5419 100644
--- 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
@@ -34,7 +34,7 @@ export default {
 
 <template>
   <div class="mr-widget-body media gl-flex-wrap">
-    <status-icon status="warning" />
+    <status-icon status="failed" />
     <p class="media-body gl-m-0! gl-font-weight-bold gl-text-black-normal!">
       {{ failedText }}
     </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
index f74826f95d3..79e878431ed 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -1,22 +1,24 @@
 <script>
-import statusIcon from '../mr_widget_status_icon.vue';
+import StateContainer from '../state_container.vue';
 
 export default {
   name: 'MRWidgetArchived',
   components: {
-    statusIcon,
+    StateContainer,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
   },
 };
 </script>
+
 <template>
-  <div class="mr-widget-body media">
-    <div class="space-children">
-      <status-icon status="warning" show-disabled-button />
-    </div>
-    <div class="media-body">
-      <span class="gl-ml-0! gl-text-body! bold">
-        {{ s__('mrWidget|Merge unavailable: merge requests are read-only on archived projects.') }}
-      </span>
-    </div>
-  </div>
+  <state-container :mr="mr" status="failed">
+    <span class="gl-font-weight-bold">
+      {{ s__('mrWidget|Merge unavailable: merge requests are read-only on archived projects.') }}
+    </span>
+  </state-container>
 </template>
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 690acc9a6dc..3c6c2a44e70 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 { GlSkeletonLoader, GlIcon, GlSprintf } from '@gitlab/ui';
+import { GlSkeletonLoader, 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';
@@ -28,7 +28,6 @@ export default {
   components: {
     MrWidgetAuthor,
     GlSkeletonLoader,
-    GlIcon,
     GlSprintf,
     StateContainer,
   },
@@ -151,7 +150,7 @@ export default {
 };
 </script>
 <template>
-  <state-container status="scheduled" :is-loading="loading" :actions="actions">
+  <state-container :mr="mr" status="scheduled" :is-loading="loading" :actions="actions">
     <template #loading>
       <gl-skeleton-loader :width="334" :height="30">
         <rect x="0" y="3" width="24" height="24" rx="4" />
@@ -168,8 +167,5 @@ export default {
         </gl-sprintf>
       </h4>
     </template>
-    <template v-if="!loading" #icon>
-      <gl-icon name="status_scheduled" :size="24" class="gl-text-blue-500 gl-mr-3 gl-mt-1" />
-    </template>
   </state-container>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index b0cda85f361..39c56cbb93d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -58,8 +58,8 @@ export default {
 };
 </script>
 <template>
-  <state-container status="warning" :actions="actions">
-    <span class="bold gl-ml-0!">
+  <state-container :mr="mr" status="failed" :actions="actions">
+    <span class="gl-font-weight-bold">
       <template v-if="mergeError">{{ mergeError }}</template>
       {{ s__('mrWidget|This merge request failed to be merged automatically') }}
     </span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
index e2d87d8d536..922075516f3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -1,20 +1,23 @@
 <script>
-import statusIcon from '../mr_widget_status_icon.vue';
+import StateContainer from '../state_container.vue';
 
 export default {
   name: 'MRWidgetChecking',
   components: {
-    statusIcon,
+    StateContainer,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
   },
 };
 </script>
 <template>
-  <div class="mr-widget-body media">
-    <status-icon :show-disabled-button="true" status="loading" />
-    <div class="media-body space-children">
-      <span class="gl-ml-0! gl-text-body! bold">
-        {{ s__('mrWidget|Checking if merge request can be merged…') }}
-      </span>
-    </div>
-  </div>
+  <state-container :mr="mr" status="loading">
+    <span class="gl-font-weight-bold">
+      {{ s__('mrWidget|Checking if merge request can be merged…') }}
+    </span>
+  </state-container>
 </template>
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 61f7d26f51e..806f8f939a6 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
@@ -1,16 +1,14 @@
 <script>
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
-import statusIcon from '../mr_widget_status_icon.vue';
+import StateContainer from '../state_container.vue';
 
 export default {
   name: 'MRWidgetClosed',
   components: {
     MrWidgetAuthorTime,
-    statusIcon,
+    StateContainer,
   },
   props: {
-    /* TODO: This is providing all store and service down when it
-      only needs metrics and targetBranch */
     mr: {
       type: Object,
       required: true,
@@ -19,15 +17,12 @@ export default {
 };
 </script>
 <template>
-  <div class="mr-widget-body media">
-    <status-icon status="warning" />
-    <div class="media-body">
-      <mr-widget-author-time
-        :action-text="s__('mrWidget|Closed by')"
-        :author="mr.metrics.closedBy"
-        :date-title="mr.metrics.closedAt"
-        :date-readable="mr.metrics.readableClosedAt"
-      />
-    </div>
-  </div>
+  <state-container :mr="mr" status="closed">
+    <mr-widget-author-time
+      :action-text="s__('mrWidget|Closed by')"
+      :author="mr.metrics.closedBy"
+      :date-title="mr.metrics.closedAt"
+      :date-readable="mr.metrics.readableClosedAt"
+    />
+  </state-container>
 </template>
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 8abd915b93e..d60d3cfc9ea 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
@@ -86,7 +86,7 @@ export default {
 };
 </script>
 <template>
-  <state-container status="warning" :is-loading="isLoading">
+  <state-container :mr="mr" status="failed" :is-loading="isLoading">
     <template #loading>
       <gl-skeleton-loader :width="334" :height="30">
         <rect x="0" y="7" width="150" height="16" rx="4" />
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 18103ac4a0e..8a7f15d8d1a 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
@@ -1,16 +1,14 @@
 <script>
-import { GlButton } from '@gitlab/ui';
 import { stripHtml } from '~/lib/utils/text_utility';
 import { sprintf, s__, n__ } from '~/locale';
 import eventHub from '../../event_hub';
-import statusIcon from '../mr_widget_status_icon.vue';
+import StateContainer from '../state_container.vue';
 
 export default {
   name: 'MRWidgetFailedToMerge',
 
   components: {
-    GlButton,
-    statusIcon,
+    StateContainer,
   },
 
   props: {
@@ -47,6 +45,16 @@ export default {
         this.timer,
       );
     },
+    actions() {
+      return [
+        {
+          text: s__('mrWidget|Refresh now'),
+          onClick: () => this.refresh(),
+          testId: 'merge-request-failed-refresh-button',
+          dataQaSelector: 'merge_request_error_content',
+        },
+      ];
+    },
   },
 
   mounted() {
@@ -87,30 +95,18 @@ export default {
 };
 </script>
 <template>
-  <div class="mr-widget-body media">
-    <template v-if="isRefreshing">
-      <status-icon status="loading" />
-      <span class="media-body bold js-refresh-label"> {{ s__('mrWidget|Refreshing now') }} </span>
-    </template>
-    <template v-else>
-      <status-icon :show-disabled-button="true" status="warning" />
-      <div class="media-body space-children">
-        <span class="bold">
-          <span v-if="mr.mergeError" class="has-error-message" data-testid="merge-error">
-            {{ mergeError }}
-          </span>
-          <span v-else> {{ s__('mrWidget|Merge failed.') }} </span>
-          <span :class="{ 'has-custom-error': mr.mergeError }"> {{ timerText }} </span>
-        </span>
-        <gl-button
-          size="small"
-          data-testid="merge-request-failed-refresh-button"
-          data-qa-selector="merge_request_error_content"
-          @click="refresh"
-        >
-          {{ s__('mrWidget|Refresh now') }}
-        </gl-button>
-      </div>
-    </template>
-  </div>
+  <state-container v-if="isRefreshing" :mr="mr" status="loading">
+    <span class="gl-font-weight-bold">
+      {{ s__('mrWidget|Refreshing now') }}
+    </span>
+  </state-container>
+  <state-container v-else :mr="mr" status="failed" :actions="actions">
+    <span class="gl-font-weight-bold">
+      <span v-if="mr.mergeError" class="has-error-message" data-testid="merge-error">
+        {{ mergeError }}
+      </span>
+      <span v-else> {{ s__('mrWidget|Merge failed.') }} </span>
+      <span :class="{ 'has-custom-error': mr.mergeError }"> {{ timerText }} </span>
+    </span>
+  </state-container>
 </template>
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 4416123cd51..e9298b0c856 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
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import api from '~/api';
 import createFlash from '~/flash';
 import { s__, __ } from '~/locale';
@@ -16,7 +16,6 @@ export default {
   },
   components: {
     MrWidgetAuthorTime,
-    GlIcon,
     StateContainer,
   },
   props: {
@@ -49,18 +48,6 @@ export default {
       const { sourceBranchRemoved, isRemovingSourceBranch } = this.mr;
       return !sourceBranchRemoved && (isRemovingSourceBranch || this.isMakingRequest);
     },
-    shouldShowMergedButtons() {
-      const {
-        canRevertInCurrentMR,
-        canCherryPickInCurrentMR,
-        revertInForkPath,
-        cherryPickInForkPath,
-      } = this.mr;
-
-      return (
-        canRevertInCurrentMR || canCherryPickInCurrentMR || revertInForkPath || cherryPickInForkPath
-      );
-    },
     revertTitle() {
       return s__('mrWidget|Revert this merge request in a new merge request');
     },
@@ -163,10 +150,7 @@ export default {
 };
 </script>
 <template>
-  <state-container :actions="actions">
-    <template #icon>
-      <gl-icon name="merge" :size="24" class="gl-text-blue-500 gl-mr-3 gl-mt-1" />
-    </template>
+  <state-container :mr="mr" :actions="actions" status="merged">
     <mr-widget-author-time
       :action-text="s__('mrWidget|Merged by')"
       :author="mr.metrics.mergedBy"
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 c7574a41bb8..51ac2576f75 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
@@ -4,7 +4,7 @@ import simplePoll from '~/lib/utils/simple_poll';
 import MergeRequest from '~/merge_request';
 import eventHub from '../../event_hub';
 import { MERGE_ACTIVE_STATUS_PHRASES, STATE_MACHINE } from '../../constants';
-import statusIcon from '../mr_widget_status_icon.vue';
+import StatusIcon from '../mr_widget_status_icon.vue';
 
 const { transitions } = STATE_MACHINE;
 const { MERGE_FAILURE } = transitions;
@@ -12,7 +12,7 @@ const { MERGE_FAILURE } = transitions;
 export default {
   name: 'MRWidgetMerging',
   components: {
-    statusIcon,
+    StatusIcon,
   },
   props: {
     mr: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index 659d12d1160..214d1b49732 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -9,7 +9,7 @@ import {
   MR_WIDGET_MISSING_BRANCH_RESTORE,
   MR_WIDGET_MISSING_BRANCH_MANUALCLI,
 } from '../../i18n';
-import statusIcon from '../mr_widget_status_icon.vue';
+import StatusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetMissingBranch',
@@ -19,7 +19,7 @@ export default {
   components: {
     GlIcon,
     GlSprintf,
-    statusIcon,
+    StatusIcon,
   },
   mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
   apollo: {
@@ -71,10 +71,10 @@ export default {
 </script>
 <template>
   <div class="mr-widget-body media">
-    <status-icon :show-disabled-button="true" status="warning" />
+    <status-icon :show-disabled-button="true" status="failed" />
 
     <div class="media-body space-children">
-      <span class="gl-ml-0! gl-text-body! bold js-branch-text" data-testid="widget-content">
+      <span class="gl-font-weight-bold js-branch-text" data-testid="widget-content">
         <gl-sprintf :message="warning">
           <template #code="{ content }">
             <code>{{ content }}</code>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
index c203d2824fa..d837551a813 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
@@ -11,9 +11,9 @@ export default {
 
 <template>
   <div class="mr-widget-body media">
-    <status-icon :show-disabled-button="true" status="success" />
+    <status-icon status="success" />
     <div class="media-body space-children">
-      <span class="bold">
+      <span class="gl-font-weight-bold">
         {{
           s__(`mrWidget|Ready to be merged automatically.
 Ask someone with write access to this repository to merge this request`)
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 e99ee59b877..13920daca15 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
@@ -12,9 +12,9 @@ export default {
 </script>
 <template>
   <div class="mr-widget-body media">
-    <status-icon :show-disabled-button="true" status="warning" />
+    <status-icon status="failed" />
     <div class="media-body space-children">
-      <span class="gl-ml-0! gl-text-body! bold">
+      <span class="gl-font-weight-bold">
         {{
           s__(
             `mrWidget|Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.`,
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 6c5fc916799..37c8d5d15f3 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
@@ -81,16 +81,19 @@ export default {
         return 'loading';
       }
       if (!this.canPushToSourceBranch && !this.rebaseInProgress) {
-        return 'warning';
+        return 'failed';
       }
       return 'success';
     },
-    showDisabledButton() {
-      return ['failed', 'loading'].includes(this.status);
-    },
     fastForwardMergeText() {
       return __('Merge blocked: the source branch must be rebased onto the target branch.');
     },
+    showRebaseWithoutPipeline() {
+      return (
+        !this.mr.onlyAllowMergeIfPipelineSucceeds ||
+        (this.mr.onlyAllowMergeIfPipelineSucceeds && this.mr.allowMergeOnSkippedPipeline)
+      );
+    },
   },
   methods: {
     rebase({ skipCi = false } = {}) {
@@ -149,7 +152,7 @@ export default {
 };
 </script>
 <template>
-  <state-container :status="status" :is-loading="isLoading">
+  <state-container :mr="mr" :status="status" :is-loading="isLoading">
     <template #loading>
       <gl-skeleton-loader :width="334" :height="30">
         <rect x="0" y="3" width="24" height="24" rx="4" />
@@ -192,6 +195,7 @@ export default {
     </template>
     <template v-if="!isLoading" #actions>
       <gl-button
+        v-if="showRebaseWithoutPipeline"
         :loading="isMakingRequest"
         variant="confirm"
         size="small"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
index d507e5f232b..3cbd171a035 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
@@ -2,14 +2,14 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
-import statusIcon from '../mr_widget_status_icon.vue';
+import StatusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'PipelineFailed',
   components: {
     GlLink,
     GlSprintf,
-    statusIcon,
+    StatusIcon,
   },
   computed: {
     troubleshootingDocsPath() {
@@ -26,9 +26,9 @@ export default {
 
 <template>
   <div class="mr-widget-body media">
-    <status-icon :show-disabled-button="true" status="warning" />
+    <status-icon status="failed" />
     <div class="media-body space-children">
-      <span class="gl-ml-0! gl-text-body! bold">
+      <span class="gl-font-weight-bold">
         <gl-sprintf :message="$options.i18n.failedMessage">
           <template #link="{ content }">
             <gl-link :href="troubleshootingDocsPath" target="_blank">
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 d2c85b14999..78430abcfe9 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
@@ -680,6 +680,7 @@ export default {
                     :is-fast-forward-enabled="!shouldShowMergeEdit"
                     :commits-count="commitsCount"
                     :target-branch="stateData.targetBranch"
+                    :merge-commit-path="mr.mergeCommitPath"
                   />
                 </li>
                 <li v-if="mr.state !== 'closed'" class="gl-line-height-normal">
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 d149f5208fc..27919f90cc3 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
@@ -22,7 +22,7 @@ export default {
 </script>
 
 <template>
-  <state-container status="warning">
+  <state-container :mr="mr" status="failed">
     <span
       class="gl-font-weight-bold gl-md-mr-3 gl-flex-grow-1 gl-ml-0! gl-text-body!"
       data-qa-selector="head_mismatch_content"
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 035d62eaa59..8f2e4eb2131 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
@@ -24,7 +24,7 @@ export default {
 </script>
 
 <template>
-  <state-container status="warning">
+  <state-container :mr="mr" status="failed">
     <span
       class="gl-ml-3 gl-font-weight-bold gl-w-100 gl-flex-grow-1 gl-md-mr-3 gl-ml-0! gl-text-body!"
     >
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 cf7f83c014a..0458e9dfaf5 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
@@ -163,7 +163,7 @@ export default {
 </script>
 
 <template>
-  <state-container status="warning">
+  <state-container :mr="mr" status="failed">
     <span class="gl-font-weight-bold gl-ml-0! gl-text-body! gl-flex-grow-1">
       {{ __("Merge blocked: merge request must be marked as ready. It's still marked as draft.") }}
     </span>