Update blocking text in MR widget

What does this MR do and why?

• Updates font weight of MR status
  • Main status is in bold (Merge blocked etc)
  • Rest of information is in regular font weight
• Slack thread 1
• Slack thread 2

Before	After

How to set up and validate locally

(adapted from !94370 (merged))

First apply the following patch

patch

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 e5688091cc7b..d750cc09d3b3 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
@@ -30,7 +30,7 @@ export default {
         return this.$options.i18n.externalStatusChecksFailed;
       }
 
-      return null;
+      return __('Merge checks failed');
     },
   },
 };
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 d687f0346c70..3b16b9da6013 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
@@ -57,6 +57,7 @@ export default {
       return this.state.targetBranch;
     },
     status() {
+      return 'error';
       if (this.isLoading) {
         return undefined;
       }
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 00024a594dc7..0d5e065bfe02 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
@@ -164,6 +164,7 @@ export default {
       return this.mr.state !== 'nothingToMerge';
     },
     componentName() {
+      return classState;
       return stateToComponentMap[this.machineState] || classState[this.mr.state];
     },
     hasPipelineMustSucceedConflict() {
@@ -611,7 +612,11 @@ export default {
       </div>
 
       <div class="mr-widget-section" data-qa-selector="mr_widget_content">
-        <component :is="componentName" :mr="mr" :service="service" />
+        <!-- <div></div> -->
+        <div v-for="component in componentName" :key="Math.random()">
+          <component :is="component" :mr="mr" :service="service" />
+        </div>
+
         <ready-to-merge
           v-if="mr.commitsCount"
           v-show="shouldShowMergeDetails"
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 9dfeaee905cc..7f72d28c4cc5 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
@@ -6,7 +6,7 @@ export const stateToComponentMap = {
   missingBranch: 'mr-widget-missing-branch',
   draft: 'mr-widget-wip',
   readyToMerge: 'mr-widget-ready-to-merge',
-  nothingToMerge: 'mr-widget-nothing-to-merge',
+  // nothingToMerge: 'mr-widget-nothing-to-merge',
   notAllowedToMerge: 'mr-widget-not-allowed',
   archived: 'mr-widget-archived',
   checking: 'mr-widget-checking',

1. Open any merge request
2. Uncomment line 615 in app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
3. Wait for the page to update

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #387070 (closed)

Related to #364574 (closed)