MRWidget: Add refresh button into MR widget failed state.

1 files changed, 26 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js
index fcccb17f58d..9fb89a99175 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js
@@ -1,8 +1,23 @@
+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
@@ -16,6 +31,17 @@ export default {
       </span>
       <div class="merge-error-text">
         {{mr.mergeError}}
+        <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>
       </div>
     </div>
   `,