Update merge request merge widget status icons

What does this MR do and why?

Resolves MR Merge Widget new Framework: Update status icons (#368036 - closed)

🖼 Design specs in Figma

Also fixes minor styling issues and updates one translation to match other statuses format.

Screenshots or screen recordings

Before	After

Outdated comparison

Before	After

How to set up and validate locally

Apply patch first:

Preview.patch

Index: app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
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
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue	(revision bd2484a69c6f7e14c63af1a6ea24fd7b53bef2f2)
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue	(date 1659705908364)
@@ -143,6 +143,7 @@
       return this.mr.state !== 'nothingToMerge';
     },
     componentName() {
+      return classState;
       return stateToComponentMap[this.machineState] || classState[this.mr.state];
     },
     hasPipelineMustSucceedConflict() {
@@ -624,7 +625,10 @@
       />
 
       <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" :mr="mr" :service="service" />
       </div>
     </div>
Index: app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
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
--- a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js	(revision bd2484a69c6f7e14c63af1a6ea24fd7b53bef2f2)
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js	(date 1659704814341)
@@ -6,7 +6,7 @@
   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',
Index: app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
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
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue	(revision bd2484a69c6f7e14c63af1a6ea24fd7b53bef2f2)
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue	(date 1659704814332)
@@ -76,6 +76,7 @@
       return this.mr.targetBranch;
     },
     status() {
+      return 'error';
       if (this.rebaseInProgress || this.isMakingRequest) {
         return 'loading';
       }
Index: app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
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
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue	(revision bd2484a69c6f7e14c63af1a6ea24fd7b53bef2f2)
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue	(date 1659704814306)
@@ -26,7 +26,7 @@
         return this.$options.i18n.blockingMergeRequests;
       }
 
-      return null;
+      return __('Merge checks failed');
     },
   },
 };

1. Open any merge request
2. Uncomment line 628 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.