1 files changed, 63 insertions, 1 deletions

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 806f8f939a6..6bcf88713a5 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,7 +1,17 @@
 <script>
+import api from '~/api';
+import showGlobalToast from '~/vue_shared/plugins/global_toast';
+
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
 import StateContainer from '../state_container.vue';
 
+import {
+  MR_WIDGET_CLOSED_REOPEN,
+  MR_WIDGET_CLOSED_REOPENING,
+  MR_WIDGET_CLOSED_RELOADING,
+  MR_WIDGET_CLOSED_REOPEN_FAILURE,
+} from '../../i18n';
+
 export default {
   name: 'MRWidgetClosed',
   components: {
@@ -14,10 +24,62 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isPending: false,
+      isReloading: false,
+    };
+  },
+  computed: {
+    reopenText() {
+      let text = MR_WIDGET_CLOSED_REOPEN;
+
+      if (this.isPending) {
+        text = MR_WIDGET_CLOSED_REOPENING;
+      } else if (this.isReloading) {
+        text = MR_WIDGET_CLOSED_RELOADING;
+      }
+
+      return text;
+    },
+    actions() {
+      if (!window.gon?.current_user_id) {
+        return [];
+      }
+
+      return [
+        {
+          text: this.reopenText,
+          loading: this.isPending || this.isReloading,
+          onClick: this.reopen,
+          testId: 'extension-actions-reopen-button',
+        },
+      ];
+    },
+  },
+  methods: {
+    reopen() {
+      this.isPending = true;
+
+      api
+        .updateMergeRequest(this.mr.targetProjectId, this.mr.iid, { state_event: 'reopen' })
+        .then(() => {
+          this.isReloading = true;
+
+          window.location.reload();
+        })
+        .catch(() => {
+          showGlobalToast(MR_WIDGET_CLOSED_REOPEN_FAILURE);
+        })
+        .finally(() => {
+          this.isPending = false;
+        });
+    },
+  },
 };
 </script>
 <template>
-  <state-container :mr="mr" status="closed">
+  <state-container :mr="mr" status="closed" :actions="actions">
     <mr-widget-author-time
       :action-text="s__('mrWidget|Closed by')"
       :author="mr.metrics.closedBy"