Merge branch 'mr-widget-refresh-failed' into 'master'

Add refresh button into MR widget failed state.

Closes #32543

See merge request !11519

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js

+import eventHub from '../../event_hub';
+
 export default {
   name: 'MRWidgetAutoMergeFailed',
   props: {
     mr: { type: Object, required: true },
   },
+  data() {
+    return {
+      isRefreshing: false,
+    };
+  },
+  methods: {
+    refreshWidget() {
+      this.isRefreshing = true;
+      eventHub.$emit('MRWidgetUpdateRequested', () => {
+        this.isRefreshing = false;
+      });
+    },
+  },
   template: `
     <div class="mr-widget-body">
       <button
@@ -13,8 +28,19 @@ export default {
       </button>
       <span class="bold danger">
         This merge request failed to be merged automatically.
+        <button
+          @click="refreshWidget"
+          :class="{ disabled: isRefreshing }"
+          type="button"
+          class="btn btn-xs btn-default">
+          <i
+            v-if="isRefreshing"
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
+          Refresh
+        </button>
       </span>
-      <div class="merge-error-text">
+      <div class="merge-error-text danger bold">
         {{mr.mergeError}}
       </div>
     </div>