From d8a8f9eabc18f21c0c4849a09aa9c4759abf2de9 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Fri, 21 Oct 2022 20:20:50 -0600
Subject: [PATCH 01/20] Add a "reopen" tertiary action to the MR Closed Widget

And:

- Move server-provided actions prep code to a utility
- Test additions to the MR Widget Store class for MR Actions

Changelog: added
---
 .../components/states/mr_widget_closed.vue    | 81 ++++++++++++++++++-
 .../vue_merge_request_widget/i18n.js          |  7 ++
 .../stores/mr_widget_store.js                 | 12 +++
 .../vue_merge_request_widget/stores/utils.js  | 29 +++++++
 .../projects/merge_requests/_widget.html.haml |  1 +
 locale/gitlab.pot                             |  9 +++
 .../stores/mr_widget_store_spec.js            | 34 ++++++++
 .../stores/utils_spec.js                      | 32 ++++++++
 8 files changed, 204 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/vue_merge_request_widget/stores/utils.js
 create mode 100644 spec/frontend/vue_merge_request_widget/stores/utils_spec.js

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 806f8f939a6c49..b260409cdc99a9 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,30 @@
 <script>
+import axios from '~/lib/utils/axios_utils';
+import { getNormalizedURL } from '~/lib/utils/url_utility';
+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';
+
+function reopenInformation(mr) {
+  const path = mr.mergeRequestActions?.reopen?.action;
+  const method = mr.mergeRequestActions?.reopen?.method;
+  const reopenUrl = getNormalizedURL(path);
+
+  return {
+    canReopen: method && path && reopenUrl,
+    url: reopenUrl,
+    method,
+  };
+}
+
 export default {
   name: 'MRWidgetClosed',
   components: {
@@ -14,10 +37,66 @@ 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() {
+      const reopen = reopenInformation(this.mr);
+      const reopener = () => {
+        const { searchParams, search } = new URL(reopen.url);
+        const reopenUrl = reopen.url.replace(search, '');
+
+        this.isPending = true;
+
+        axios({
+          url: reopenUrl,
+          params: searchParams,
+          method: reopen.method,
+        })
+          .then(() => {
+            this.isReloading = true;
+            window.location.reload();
+          })
+          .catch(() => {
+            showGlobalToast(MR_WIDGET_CLOSED_REOPEN_FAILURE);
+          })
+          .finally(() => {
+            this.isPending = false;
+          });
+      };
+      const reopenAction = {
+        text: this.reopenText,
+        loading: this.isPending || this.isReloading,
+        onClick: reopener,
+      };
+      const actions = [];
+
+      if (reopen.canReopen) {
+        actions.push(reopenAction);
+      }
+
+      return actions;
+    },
+  },
 };
 </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"
diff --git a/app/assets/javascripts/vue_merge_request_widget/i18n.js b/app/assets/javascripts/vue_merge_request_widget/i18n.js
index 454a14faabbe33..5380bcae003c1f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/i18n.js
+++ b/app/assets/javascripts/vue_merge_request_widget/i18n.js
@@ -25,3 +25,10 @@ export const MERGE_TRAIN_BUTTON_TEXT = {
   failed: __('Start merge train...'),
   passed: __('Start merge train'),
 };
+
+export const MR_WIDGET_CLOSED_REOPEN = __('Reopen');
+export const MR_WIDGET_CLOSED_REOPENING = __('Reopening...');
+export const MR_WIDGET_CLOSED_RELOADING = __('Refreshing...');
+export const MR_WIDGET_CLOSED_REOPEN_FAILURE = __(
+  'An error occurred. Unable to reopen this merge request.',
+);
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 86ce032ea3d7b5..36f717f056f4bc 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -10,6 +10,7 @@ import {
   stateToTransitionMap,
 } from '../constants';
 import { stateKey } from './state_maps';
+import { prepareMergeRequestActions } from './utils';
 
 const { format } = getTimeago();
 
@@ -84,6 +85,17 @@ export default class MergeRequestStore {
     this.mergeRequestDiffsPath = data.diffs_path;
     this.approvalsWidgetType = data.approvals_widget_type;
     this.mergeRequestWidgetPath = data.merge_request_widget_path;
+    this.mergeRequestActions = {};
+
+    if (data.merge_request_actions) {
+      // In this case, "Merge Request Actions" are behaviors that would
+      // otherwise be implemented using Rails CRUD-type behavior, but we
+      // need to do in a dynamic / user-friendly way.
+      // We can only communicate _what_ they are via the DOM, which means
+      // they're serialized JSON, which Rails ALSO url-encodes, which makes
+      // them technically unusable.
+      this.mergeRequestActions = prepareMergeRequestActions(data.merge_request_actions);
+    }
 
     if (data.issues_links) {
       const links = data.issues_links;
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/utils.js b/app/assets/javascripts/vue_merge_request_widget/stores/utils.js
new file mode 100644
index 00000000000000..e60dde9c3159c8
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/utils.js
@@ -0,0 +1,29 @@
+/**
+ * @param {string} actions - A list of possible actions that can be performed on the Merge Request, as JSON serialized by Rails.
+ * @description Parses Rails-serialized JSON actions into usable JavaScript objects that can be used by the UI to make AJAX requests to the Rails CRUD controller.
+ */
+export function prepareMergeRequestActions(actions) {
+  // actions is (as of November 2022) a serialized JSON string provided by the Rails back end.
+  // The main issues with this are:
+  // -- We need a real object
+  // -- The "action" (in the HTML Form sense) property of the MR Action (in the "what can I do" sense)
+  //        is URL Encoded, meaning it can't be used outright.
+  const actionsEntries = Object.entries(JSON.parse(actions));
+  const remappedActions = actionsEntries.map(([key, action]) => {
+    let url = action.action;
+
+    if (url) {
+      url = decodeURIComponent(url);
+    }
+
+    return [
+      key,
+      {
+        ...action,
+        action: url,
+      },
+    ];
+  });
+
+  return Object.fromEntries(remappedActions);
+}
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 4f6983c6fe337d..1cc3af872bfd45 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -22,5 +22,6 @@
     window.gl.mrWidgetData.can_view_false_positive = '#{@merge_request.project.licensed_feature_available?(:sast_fp_reduction).to_s}';
     window.gl.mrWidgetData.user_preferences_gitpod_path = '#{profile_preferences_path(anchor: 'user_gitpod_enabled')}';
     window.gl.mrWidgetData.user_profile_enable_gitpod_path = '#{profile_path(user: { gitpod_enabled: true })}';
+    window.gl.mrWidgetData.merge_request_actions = '#{ { reopen: { method: "put", action: reopen_issuable_path(@merge_request) } }.to_json}'
 
 #js-vue-mr-widget.mr-widget
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 64f787b32f3049..f4db6328d08381 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4551,6 +4551,9 @@ msgstr ""
 msgid "An error occurred. Please try again."
 msgstr ""
 
+msgid "An error occurred. Unable to reopen this merge request."
+msgstr ""
+
 msgid "An example project for managing Kubernetes clusters integrated with GitLab"
 msgstr ""
 
@@ -33684,6 +33687,9 @@ msgid_plural "Refreshing in %d seconds to show the updated status..."
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "Refreshing..."
+msgstr ""
+
 msgid "Regenerate export"
 msgstr ""
 
@@ -34220,6 +34226,9 @@ msgstr ""
 msgid "Reopened this %{quick_action_target}."
 msgstr ""
 
+msgid "Reopening..."
+msgstr ""
+
 msgid "Reopens this %{quick_action_target}."
 msgstr ""
 
diff --git a/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js b/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js
index 37df041210ce22..d16501f61258c4 100644
--- a/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js
+++ b/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js
@@ -1,8 +1,13 @@
 import { convertToCamelCase } from '~/lib/utils/text_utility';
 import MergeRequestStore from '~/vue_merge_request_widget/stores/mr_widget_store';
 import { stateKey } from '~/vue_merge_request_widget/stores/state_maps';
+import * as utils from '~/vue_merge_request_widget/stores/utils';
 import mockData from '../mock_data';
 
+jest.mock('~/vue_merge_request_widget/stores/utils', () => ({
+  prepareMergeRequestActions: jest.fn(),
+}));
+
 describe('MergeRequestStore', () => {
   let store;
 
@@ -112,6 +117,35 @@ describe('MergeRequestStore', () => {
         expect(store.isNothingToMergeState).toBe(false);
       });
     });
+
+    describe('server-provided Merge Request Actions', () => {
+      const serverProvidedActions = `{
+        "something": {
+          "action": "/abc",
+          "method": "PUT"
+        }
+      }`;
+
+      beforeEach(() => {
+        utils.prepareMergeRequestActions.mockClear();
+      });
+
+      it('processes the server-provided actions when they exist', () => {
+        store.setData({
+          ...mockData,
+          merge_request_actions: serverProvidedActions,
+        });
+
+        expect(utils.prepareMergeRequestActions).toHaveBeenCalledTimes(1);
+        expect(utils.prepareMergeRequestActions).toHaveBeenCalledWith(serverProvidedActions);
+      });
+
+      it("skips processing the actions if they're not provided", () => {
+        store.setData({ ...mockData });
+
+        expect(utils.prepareMergeRequestActions).not.toHaveBeenCalled();
+      });
+    });
   });
 
   describe('setPaths', () => {
diff --git a/spec/frontend/vue_merge_request_widget/stores/utils_spec.js b/spec/frontend/vue_merge_request_widget/stores/utils_spec.js
new file mode 100644
index 00000000000000..96fe234ce33d35
--- /dev/null
+++ b/spec/frontend/vue_merge_request_widget/stores/utils_spec.js
@@ -0,0 +1,32 @@
+import { prepareMergeRequestActions } from '~/vue_merge_request_widget/stores/utils';
+
+describe('Merge Request Widget store utils', () => {
+  describe('prepareMergeRequestActions', () => {
+    const safeActions = JSON.stringify({
+      someDoableThing: {
+        action: '/endpoint?stuff[]=foo',
+        method: 'POST',
+      },
+    });
+    const serverProvidedActions = JSON.stringify({
+      someDoableThing: {
+        action: '/endpoint%3Fstuff%5B%5D=foo',
+        method: 'POST',
+      },
+    });
+    const unusualActions = JSON.stringify({
+      someDoableThing: {
+        method: 'POST',
+      },
+    });
+
+    it.each`
+      description                                                 | actions                  | prepared
+      ${'leaves decoded url parts as-is'}                         | ${safeActions}           | ${JSON.parse(safeActions)}
+      ${'decodes encoded url parts into "normal" (usable) parts'} | ${serverProvidedActions} | ${JSON.parse(safeActions)}
+      ${"does not mutate actions that don't contain urls"}        | ${unusualActions}        | ${JSON.parse(unusualActions)}
+    `('$description', ({ actions, prepared }) => {
+      expect(prepareMergeRequestActions(actions)).toEqual(prepared);
+    });
+  });
+});
-- 
GitLab


From 6cd0e34956b09fa0366745cb54126bf31d9c282c Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 26 Oct 2022 17:32:30 -0600
Subject: [PATCH 02/20] Switch multiple flags for reopening to a state machine

---
 .../components/states/mr_widget_closed.vue    | 62 ++++++++++++-------
 .../vue_merge_request_widget/constants.js     | 42 +++++++++++++
 2 files changed, 83 insertions(+), 21 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 b260409cdc99a9..0e5011be40b112 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,6 +1,7 @@
 <script>
 import axios from '~/lib/utils/axios_utils';
 import { getNormalizedURL } from '~/lib/utils/url_utility';
+import { machine } from '~/lib/utils/finite_state_machine';
 import showGlobalToast from '~/vue_shared/plugins/global_toast';
 
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
@@ -12,6 +13,17 @@ import {
   MR_WIDGET_CLOSED_RELOADING,
   MR_WIDGET_CLOSED_REOPEN_FAILURE,
 } from '../../i18n';
+import {
+  CLOSED_MR_WIDGET_STATE_EVENT_CAN_BE_REOPENED as TRANSITION_REOPENABLE,
+  CLOSED_MR_WIDGET_STATE_EVENT_REQUEST_REOPEN as TRANSITION_REOPENING,
+  CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_WORKED as TRANSITION_REOPENED,
+  CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_FAILED as TRANSITION_FAILED,
+  CLOSED_MR_WIDGET_STATE_NOT_REOPENABLE as STATE_INERT,
+  CLOSED_MR_WIDGET_STATE_REOPENABLE as STATE_REOPENABLE,
+  CLOSED_MR_WIDGET_STATE_BACKEND_REOPENING as STATE_PENDING,
+  CLOSED_MR_WIDGET_STATE_PAGE_RELOADING as STATE_RELOADING,
+  CLOSED_MR_WIDGET_STATE_DEFINITIONS as REOPEN_DEFINITIONS,
+} from '../../constants';
 
 function reopenInformation(mr) {
   const path = mr.mergeRequestActions?.reopen?.action;
@@ -39,60 +51,68 @@ export default {
   },
   data() {
     return {
-      isPending: false,
-      isReloading: false,
+      state: STATE_INERT,
+      reopenInformation: reopenInformation(this.mr),
     };
   },
   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;
-      }
+      const texts = {
+        [STATE_INERT]: '',
+        [STATE_REOPENABLE]: MR_WIDGET_CLOSED_REOPEN,
+        [STATE_PENDING]: MR_WIDGET_CLOSED_REOPENING,
+        [STATE_RELOADING]: MR_WIDGET_CLOSED_RELOADING,
+      };
 
-      return text;
+      return texts[this.state];
     },
     actions() {
-      const reopen = reopenInformation(this.mr);
       const reopener = () => {
-        const { searchParams, search } = new URL(reopen.url);
-        const reopenUrl = reopen.url.replace(search, '');
+        const { searchParams, search } = new URL(this.reopenInformation.url);
+        const reopenUrl = this.reopenInformation.url.replace(search, '');
 
-        this.isPending = true;
+        this.transition(TRANSITION_REOPENING);
 
         axios({
           url: reopenUrl,
           params: searchParams,
-          method: reopen.method,
+          method: this.reopenInformation.method,
         })
           .then(() => {
-            this.isReloading = true;
+            this.transition(TRANSITION_REOPENED);
             window.location.reload();
           })
           .catch(() => {
+            this.transition(TRANSITION_FAILED);
             showGlobalToast(MR_WIDGET_CLOSED_REOPEN_FAILURE);
-          })
-          .finally(() => {
-            this.isPending = false;
           });
       };
       const reopenAction = {
         text: this.reopenText,
-        loading: this.isPending || this.isReloading,
+        loading: [STATE_PENDING, STATE_RELOADING].includes(this.state),
         onClick: reopener,
       };
       const actions = [];
 
-      if (reopen.canReopen) {
+      if (this.reopenInformation.canReopen) {
         actions.push(reopenAction);
       }
 
       return actions;
     },
   },
+  created() {
+    this.$options.state = machine(REOPEN_DEFINITIONS);
+
+    if (this.reopenInformation.canReopen) {
+      this.transition(TRANSITION_REOPENABLE);
+    }
+  },
+  methods: {
+    transition(event) {
+      this.state = this.$options.state.send(event);
+    },
+  },
 };
 </script>
 <template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index 7109bed77439fe..1220d36a87dc69 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -194,3 +194,45 @@ export const DETAILED_MERGE_STATUS = {
   CI_STILL_RUNNING: 'CI_STILL_RUNNING',
   EXTERNAL_STATUS_CHECKS: 'EXTERNAL_STATUS_CHECKS',
 };
+
+/* eslint-disable spaced-comment */
+/***** CLOSED MR WIDGET ********/
+
+// Visualize this state machine: https://stately.ai/viz/8b6e1bd3-ecf6-49d2-a983-3afdcd8e9b6a
+export const CLOSED_MR_WIDGET_STATE_EVENT_CAN_BE_REOPENED = 'reopenable';
+export const CLOSED_MR_WIDGET_STATE_EVENT_REQUEST_REOPEN = 'reopening';
+export const CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_WORKED = 'reopened';
+export const CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_FAILED = 'failure';
+export const CLOSED_MR_WIDGET_STATE_NOT_REOPENABLE = 'INERT';
+export const CLOSED_MR_WIDGET_STATE_REOPENABLE = 'IDLE';
+export const CLOSED_MR_WIDGET_STATE_BACKEND_REOPENING = 'PENDING';
+export const CLOSED_MR_WIDGET_STATE_PAGE_RELOADING = 'RELOADING';
+export const CLOSED_MR_WIDGET_STATE_DEFINITIONS = {
+  initial: CLOSED_MR_WIDGET_STATE_NOT_REOPENABLE,
+  states: {
+    [CLOSED_MR_WIDGET_STATE_NOT_REOPENABLE]: {
+      on: {
+        [CLOSED_MR_WIDGET_STATE_EVENT_CAN_BE_REOPENED]: CLOSED_MR_WIDGET_STATE_REOPENABLE,
+      },
+    },
+    [CLOSED_MR_WIDGET_STATE_REOPENABLE]: {
+      on: {
+        [CLOSED_MR_WIDGET_STATE_EVENT_REQUEST_REOPEN]: CLOSED_MR_WIDGET_STATE_BACKEND_REOPENING,
+      },
+    },
+    [CLOSED_MR_WIDGET_STATE_BACKEND_REOPENING]: {
+      on: {
+        [CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_WORKED]: CLOSED_MR_WIDGET_STATE_PAGE_RELOADING,
+        [CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_FAILED]: CLOSED_MR_WIDGET_STATE_REOPENABLE,
+      },
+    },
+    [CLOSED_MR_WIDGET_STATE_PAGE_RELOADING]: {
+      on: {
+        // final state, no exit criteria
+      },
+    },
+  },
+};
+
+/*** END CLOSED MR WIDGET ******/
+/* eslint-enable spaced-comment */
-- 
GitLab


From 6f43f3328b1764421393e7ed53a0596a11d5d4d4 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Thu, 27 Oct 2022 13:57:47 -0600
Subject: [PATCH 03/20] Test that the UI is as expected when the widget can be
 reopened

---
 .../components/states/mr_widget_closed.vue    |   1 +
 .../states/mr_widget_closed_spec.js           | 178 +++++++++++++++++-
 2 files changed, 171 insertions(+), 8 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 0e5011be40b112..1fa9b6f3da88ce 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
@@ -91,6 +91,7 @@ export default {
         text: this.reopenText,
         loading: [STATE_PENDING, STATE_RELOADING].includes(this.state),
         onClick: reopener,
+        testId: 'extension-actions-reopen-button',
       };
       const actions = [];
 
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index 06ee017dee7cd4..242abcfb7eef21 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -1,7 +1,16 @@
-import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { shallowMount, mount } from '@vue/test-utils';
+import AxiosMockAdapter from 'axios-mock-adapter';
+
+import axios from '~/lib/utils/axios_utils';
+import showGlobalToast from '~/vue_shared/plugins/global_toast';
+
 import closedComponent from '~/vue_merge_request_widget/components/states/mr_widget_closed.vue';
 import MrWidgetAuthorTime from '~/vue_merge_request_widget/components/mr_widget_author_time.vue';
 import StateContainer from '~/vue_merge_request_widget/components/state_container.vue';
+import Actions from '~/vue_merge_request_widget/components/action_buttons.vue';
+
+import { MR_WIDGET_CLOSED_REOPEN_FAILURE } from '~/vue_merge_request_widget/i18n';
 
 const MOCK_DATA = {
   metrics: {
@@ -19,22 +28,82 @@ const MOCK_DATA = {
   },
   targetBranchPath: '/twitter/flight/commits/so_long_jquery',
   targetBranch: 'so_long_jquery',
+  mergeRequestActions: {
+    reopen: {
+      action: '/merge_requests/6?merge_request%5Bstate_event%5D=reopen',
+      method: 'PUT',
+    },
+  },
 };
 
+function createComponent({ shallow = true, props = {} } = {}) {
+  const constructor = shallow ? shallowMount : mount;
+
+  return constructor(closedComponent, {
+    propsData: {
+      mr: MOCK_DATA,
+      ...props,
+    },
+  });
+}
+
+function findActions(wrapper) {
+  return wrapper.findComponent(StateContainer).findComponent(Actions);
+}
+
+function findReopenActionButton(wrapper) {
+  const actions = findActions(wrapper);
+
+  return actions?.find('button[data-testid="extension-actions-reopen-button"]');
+}
+
+async function waitForVueReactivityAfterReopen() {
+  // After clicking, the network request is sent...
+  await nextTick();
+  // ... the network request processes...
+  await nextTick();
+  // ... the response is received...
+  await nextTick();
+  // ... the .then/.error handler is triggered...
+  await nextTick();
+  // ... the component state is updated...
+  await nextTick();
+  // ... and finally the UI is updated / repainted ...
+  await nextTick();
+}
+
+async function waitForGlobalToast() {
+  // I have no idea
+  await nextTick();
+  await nextTick();
+  await nextTick();
+  await nextTick();
+  await nextTick();
+  // It's a mocked module, why would we need to wait for it...
+}
+
+jest.mock('~/vue_shared/plugins/global_toast');
+
 describe('MRWidgetClosed', () => {
+  const origLoc = global.location;
   let wrapper;
+  let axiosMock;
 
   beforeEach(() => {
-    wrapper = shallowMount(closedComponent, {
-      propsData: {
-        mr: MOCK_DATA,
-      },
-    });
+    delete global.location;
+    global.location = { ...origLoc, reload: jest.fn() };
+    axiosMock = new AxiosMockAdapter(axios);
+    wrapper = createComponent();
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
+    global.location = origLoc;
+    axiosMock.restore();
+
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
   });
 
   it('renders closed icon', () => {
@@ -51,4 +120,97 @@ describe('MRWidgetClosed', () => {
       dateReadable: MOCK_DATA.metrics.readableClosedAt,
     });
   });
+
+  describe('actions', () => {
+    describe('reopen', () => {
+      beforeEach(() => {
+        wrapper = createComponent({ shallow: false });
+      });
+
+      afterEach(() => {
+        wrapper.destroy();
+        wrapper = null;
+      });
+
+      it('is not available if the back end does not provide a usable reopen url', () => {
+        wrapper = createComponent({
+          props: {
+            mr: {
+              ...MOCK_DATA,
+              mergeRequestActions: {
+                reopen: {
+                  action: '',
+                  method: 'PUT',
+                },
+              },
+            },
+          },
+        });
+
+        expect(wrapper.findComponent(StateContainer).props().actions.length).toBe(0);
+      });
+
+      it('shows the "reopen" button if the back end provides a usable reopen url', () => {
+        expect(wrapper.findComponent(StateContainer).props().actions.length).toBe(1);
+        expect(findReopenActionButton(wrapper).text()).toBe('Reopen');
+      });
+
+      it('shows "Reopening..." while the reopen network request is pending', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        reopenButton.trigger('click');
+        await nextTick();
+
+        expect(reopenButton.text()).toBe('Reopening...');
+      });
+
+      it('shows "Refreshing..." when the reopen has succeeded', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        axiosMock.onPut().reply(200);
+
+        reopenButton.trigger('click');
+        await waitForVueReactivityAfterReopen();
+
+        expect(reopenButton.text()).toBe('Refreshing...');
+      });
+
+      it('reloads the page when a reopen has succeeded', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        axiosMock.onPut().reply(200);
+
+        reopenButton.trigger('click');
+        await waitForVueReactivityAfterReopen();
+
+        expect(global.location.reload).toHaveBeenCalledTimes(1);
+      });
+
+      it('shows "Reopen" when a reopen request has failed', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        axiosMock.onPut().reply(400);
+
+        reopenButton.trigger('click');
+        await waitForVueReactivityAfterReopen();
+        await waitForGlobalToast();
+
+        expect(global.location.reload).not.toHaveBeenCalled();
+        expect(reopenButton.text()).toBe('Reopen');
+      });
+
+      it('requests a toast popup when a reopen request has failed', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        axiosMock.onPut().reply(400);
+
+        reopenButton.trigger('click');
+        await waitForVueReactivityAfterReopen();
+        await waitForGlobalToast();
+
+        expect(showGlobalToast).toHaveBeenCalledTimes(1);
+        expect(showGlobalToast).toHaveBeenCalledWith(MR_WIDGET_CLOSED_REOPEN_FAILURE);
+      });
+    });
+  });
 });
-- 
GitLab


From aff7e8e1fb55771476d3f007eb89af35f37129bf Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 31 Oct 2022 17:03:31 -0600
Subject: [PATCH 04/20] Unencode the JSON before sending it from Rails

---
 .../stores/mr_widget_store.js                 |  6 ++--
 .../vue_merge_request_widget/stores/utils.js  | 29 -----------------
 .../projects/merge_requests/_widget.html.haml |  2 +-
 .../stores/mr_widget_store_spec.js            | 20 ++++++------
 .../stores/utils_spec.js                      | 32 -------------------
 5 files changed, 14 insertions(+), 75 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_merge_request_widget/stores/utils.js
 delete mode 100644 spec/frontend/vue_merge_request_widget/stores/utils_spec.js

diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 36f717f056f4bc..8aa65eefad9495 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -10,7 +10,6 @@ import {
   stateToTransitionMap,
 } from '../constants';
 import { stateKey } from './state_maps';
-import { prepareMergeRequestActions } from './utils';
 
 const { format } = getTimeago();
 
@@ -92,9 +91,8 @@ export default class MergeRequestStore {
       // otherwise be implemented using Rails CRUD-type behavior, but we
       // need to do in a dynamic / user-friendly way.
       // We can only communicate _what_ they are via the DOM, which means
-      // they're serialized JSON, which Rails ALSO url-encodes, which makes
-      // them technically unusable.
-      this.mergeRequestActions = prepareMergeRequestActions(data.merge_request_actions);
+      // they're serialized JSON.
+      this.mergeRequestActions = JSON.parse(data.merge_request_actions);
     }
 
     if (data.issues_links) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/utils.js b/app/assets/javascripts/vue_merge_request_widget/stores/utils.js
deleted file mode 100644
index e60dde9c3159c8..00000000000000
--- a/app/assets/javascripts/vue_merge_request_widget/stores/utils.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * @param {string} actions - A list of possible actions that can be performed on the Merge Request, as JSON serialized by Rails.
- * @description Parses Rails-serialized JSON actions into usable JavaScript objects that can be used by the UI to make AJAX requests to the Rails CRUD controller.
- */
-export function prepareMergeRequestActions(actions) {
-  // actions is (as of November 2022) a serialized JSON string provided by the Rails back end.
-  // The main issues with this are:
-  // -- We need a real object
-  // -- The "action" (in the HTML Form sense) property of the MR Action (in the "what can I do" sense)
-  //        is URL Encoded, meaning it can't be used outright.
-  const actionsEntries = Object.entries(JSON.parse(actions));
-  const remappedActions = actionsEntries.map(([key, action]) => {
-    let url = action.action;
-
-    if (url) {
-      url = decodeURIComponent(url);
-    }
-
-    return [
-      key,
-      {
-        ...action,
-        action: url,
-      },
-    ];
-  });
-
-  return Object.fromEntries(remappedActions);
-}
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 1cc3af872bfd45..467b6ccfcf44a8 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -22,6 +22,6 @@
     window.gl.mrWidgetData.can_view_false_positive = '#{@merge_request.project.licensed_feature_available?(:sast_fp_reduction).to_s}';
     window.gl.mrWidgetData.user_preferences_gitpod_path = '#{profile_preferences_path(anchor: 'user_gitpod_enabled')}';
     window.gl.mrWidgetData.user_profile_enable_gitpod_path = '#{profile_path(user: { gitpod_enabled: true })}';
-    window.gl.mrWidgetData.merge_request_actions = '#{ { reopen: { method: "put", action: reopen_issuable_path(@merge_request) } }.to_json}'
+    window.gl.mrWidgetData.merge_request_actions = '#{ { reopen: { method: "put", action: CGI.unescape(reopen_issuable_path(@merge_request)) } }.to_json}'
 
 #js-vue-mr-widget.mr-widget
diff --git a/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js b/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js
index d16501f61258c4..ec2925ec9af48e 100644
--- a/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js
+++ b/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js
@@ -1,13 +1,8 @@
 import { convertToCamelCase } from '~/lib/utils/text_utility';
 import MergeRequestStore from '~/vue_merge_request_widget/stores/mr_widget_store';
 import { stateKey } from '~/vue_merge_request_widget/stores/state_maps';
-import * as utils from '~/vue_merge_request_widget/stores/utils';
 import mockData from '../mock_data';
 
-jest.mock('~/vue_merge_request_widget/stores/utils', () => ({
-  prepareMergeRequestActions: jest.fn(),
-}));
-
 describe('MergeRequestStore', () => {
   let store;
 
@@ -119,6 +114,8 @@ describe('MergeRequestStore', () => {
     });
 
     describe('server-provided Merge Request Actions', () => {
+      const origParse = JSON.parse;
+
       const serverProvidedActions = `{
         "something": {
           "action": "/abc",
@@ -127,7 +124,12 @@ describe('MergeRequestStore', () => {
       }`;
 
       beforeEach(() => {
-        utils.prepareMergeRequestActions.mockClear();
+        delete JSON.parse;
+        JSON.parse = jest.fn();
+      });
+
+      afterEach(() => {
+        JSON.parse = origParse;
       });
 
       it('processes the server-provided actions when they exist', () => {
@@ -136,14 +138,14 @@ describe('MergeRequestStore', () => {
           merge_request_actions: serverProvidedActions,
         });
 
-        expect(utils.prepareMergeRequestActions).toHaveBeenCalledTimes(1);
-        expect(utils.prepareMergeRequestActions).toHaveBeenCalledWith(serverProvidedActions);
+        expect(JSON.parse).toHaveBeenCalledTimes(1);
+        expect(JSON.parse).toHaveBeenCalledWith(serverProvidedActions);
       });
 
       it("skips processing the actions if they're not provided", () => {
         store.setData({ ...mockData });
 
-        expect(utils.prepareMergeRequestActions).not.toHaveBeenCalled();
+        expect(JSON.parse).not.toHaveBeenCalled();
       });
     });
   });
diff --git a/spec/frontend/vue_merge_request_widget/stores/utils_spec.js b/spec/frontend/vue_merge_request_widget/stores/utils_spec.js
deleted file mode 100644
index 96fe234ce33d35..00000000000000
--- a/spec/frontend/vue_merge_request_widget/stores/utils_spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { prepareMergeRequestActions } from '~/vue_merge_request_widget/stores/utils';
-
-describe('Merge Request Widget store utils', () => {
-  describe('prepareMergeRequestActions', () => {
-    const safeActions = JSON.stringify({
-      someDoableThing: {
-        action: '/endpoint?stuff[]=foo',
-        method: 'POST',
-      },
-    });
-    const serverProvidedActions = JSON.stringify({
-      someDoableThing: {
-        action: '/endpoint%3Fstuff%5B%5D=foo',
-        method: 'POST',
-      },
-    });
-    const unusualActions = JSON.stringify({
-      someDoableThing: {
-        method: 'POST',
-      },
-    });
-
-    it.each`
-      description                                                 | actions                  | prepared
-      ${'leaves decoded url parts as-is'}                         | ${safeActions}           | ${JSON.parse(safeActions)}
-      ${'decodes encoded url parts into "normal" (usable) parts'} | ${serverProvidedActions} | ${JSON.parse(safeActions)}
-      ${"does not mutate actions that don't contain urls"}        | ${unusualActions}        | ${JSON.parse(unusualActions)}
-    `('$description', ({ actions, prepared }) => {
-      expect(prepareMergeRequestActions(actions)).toEqual(prepared);
-    });
-  });
-});
-- 
GitLab


From 181950d8e7dbefecc759d9920c827c3367d44701 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Thu, 10 Nov 2022 03:44:08 -0700
Subject: [PATCH 05/20] Remove server-sent verification of reopen form action

---
 .../components/states/mr_widget_closed.vue    | 38 ++--------
 .../stores/mr_widget_store.js                 | 10 ---
 .../projects/merge_requests/_widget.html.haml |  1 -
 .../states/mr_widget_closed_spec.js           | 76 ++++++-------------
 .../stores/mr_widget_store_spec.js            | 36 ---------
 5 files changed, 30 insertions(+), 131 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 1fa9b6f3da88ce..f014f715dab943 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,7 @@
 <script>
-import axios from '~/lib/utils/axios_utils';
-import { getNormalizedURL } from '~/lib/utils/url_utility';
+import api from '~/api';
 import { machine } from '~/lib/utils/finite_state_machine';
+
 import showGlobalToast from '~/vue_shared/plugins/global_toast';
 
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
@@ -25,18 +25,6 @@ import {
   CLOSED_MR_WIDGET_STATE_DEFINITIONS as REOPEN_DEFINITIONS,
 } from '../../constants';
 
-function reopenInformation(mr) {
-  const path = mr.mergeRequestActions?.reopen?.action;
-  const method = mr.mergeRequestActions?.reopen?.method;
-  const reopenUrl = getNormalizedURL(path);
-
-  return {
-    canReopen: method && path && reopenUrl,
-    url: reopenUrl,
-    method,
-  };
-}
-
 export default {
   name: 'MRWidgetClosed',
   components: {
@@ -52,7 +40,6 @@ export default {
   data() {
     return {
       state: STATE_INERT,
-      reopenInformation: reopenInformation(this.mr),
     };
   },
   computed: {
@@ -68,16 +55,10 @@ export default {
     },
     actions() {
       const reopener = () => {
-        const { searchParams, search } = new URL(this.reopenInformation.url);
-        const reopenUrl = this.reopenInformation.url.replace(search, '');
-
         this.transition(TRANSITION_REOPENING);
 
-        axios({
-          url: reopenUrl,
-          params: searchParams,
-          method: this.reopenInformation.method,
-        })
+        api
+          .updateMergeRequest(this.mr.targetProjectId, this.mr.iid, { state_event: 'reopen' })
           .then(() => {
             this.transition(TRANSITION_REOPENED);
             window.location.reload();
@@ -93,21 +74,14 @@ export default {
         onClick: reopener,
         testId: 'extension-actions-reopen-button',
       };
-      const actions = [];
-
-      if (this.reopenInformation.canReopen) {
-        actions.push(reopenAction);
-      }
 
-      return actions;
+      return [reopenAction];
     },
   },
   created() {
     this.$options.state = machine(REOPEN_DEFINITIONS);
 
-    if (this.reopenInformation.canReopen) {
-      this.transition(TRANSITION_REOPENABLE);
-    }
+    this.transition(TRANSITION_REOPENABLE);
   },
   methods: {
     transition(event) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 8aa65eefad9495..86ce032ea3d7b5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -84,16 +84,6 @@ export default class MergeRequestStore {
     this.mergeRequestDiffsPath = data.diffs_path;
     this.approvalsWidgetType = data.approvals_widget_type;
     this.mergeRequestWidgetPath = data.merge_request_widget_path;
-    this.mergeRequestActions = {};
-
-    if (data.merge_request_actions) {
-      // In this case, "Merge Request Actions" are behaviors that would
-      // otherwise be implemented using Rails CRUD-type behavior, but we
-      // need to do in a dynamic / user-friendly way.
-      // We can only communicate _what_ they are via the DOM, which means
-      // they're serialized JSON.
-      this.mergeRequestActions = JSON.parse(data.merge_request_actions);
-    }
 
     if (data.issues_links) {
       const links = data.issues_links;
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 467b6ccfcf44a8..4f6983c6fe337d 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -22,6 +22,5 @@
     window.gl.mrWidgetData.can_view_false_positive = '#{@merge_request.project.licensed_feature_available?(:sast_fp_reduction).to_s}';
     window.gl.mrWidgetData.user_preferences_gitpod_path = '#{profile_preferences_path(anchor: 'user_gitpod_enabled')}';
     window.gl.mrWidgetData.user_profile_enable_gitpod_path = '#{profile_path(user: { gitpod_enabled: true })}';
-    window.gl.mrWidgetData.merge_request_actions = '#{ { reopen: { method: "put", action: CGI.unescape(reopen_issuable_path(@merge_request)) } }.to_json}'
 
 #js-vue-mr-widget.mr-widget
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index 242abcfb7eef21..afe6159ddcebdc 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -1,8 +1,8 @@
 import { nextTick } from 'vue';
 import { shallowMount, mount } from '@vue/test-utils';
-import AxiosMockAdapter from 'axios-mock-adapter';
 
-import axios from '~/lib/utils/axios_utils';
+import api from '~/api';
+
 import showGlobalToast from '~/vue_shared/plugins/global_toast';
 
 import closedComponent from '~/vue_merge_request_widget/components/states/mr_widget_closed.vue';
@@ -12,6 +12,16 @@ import Actions from '~/vue_merge_request_widget/components/action_buttons.vue';
 
 import { MR_WIDGET_CLOSED_REOPEN_FAILURE } from '~/vue_merge_request_widget/i18n';
 
+jest.mock('~/api', () => {
+  const updateMergeRequest = jest.fn();
+
+  return {
+    __esModule: true,
+    default: { updateMergeRequest },
+    updateMergeRequest,
+  };
+});
+
 const MOCK_DATA = {
   metrics: {
     mergedBy: {},
@@ -58,28 +68,10 @@ function findReopenActionButton(wrapper) {
 }
 
 async function waitForVueReactivityAfterReopen() {
-  // After clicking, the network request is sent...
-  await nextTick();
-  // ... the network request processes...
-  await nextTick();
-  // ... the response is received...
-  await nextTick();
-  // ... the .then/.error handler is triggered...
-  await nextTick();
-  // ... the component state is updated...
-  await nextTick();
-  // ... and finally the UI is updated / repainted ...
-  await nextTick();
-}
-
-async function waitForGlobalToast() {
-  // I have no idea
-  await nextTick();
-  await nextTick();
-  await nextTick();
+  // After clicking, the network request is mocked and immediately returns...
   await nextTick();
+  // ... and the UI is updated / repainted ...
   await nextTick();
-  // It's a mocked module, why would we need to wait for it...
 }
 
 jest.mock('~/vue_shared/plugins/global_toast');
@@ -87,18 +79,15 @@ jest.mock('~/vue_shared/plugins/global_toast');
 describe('MRWidgetClosed', () => {
   const origLoc = global.location;
   let wrapper;
-  let axiosMock;
 
   beforeEach(() => {
     delete global.location;
     global.location = { ...origLoc, reload: jest.fn() };
-    axiosMock = new AxiosMockAdapter(axios);
     wrapper = createComponent();
   });
 
   afterEach(() => {
     global.location = origLoc;
-    axiosMock.restore();
 
     if (wrapper) {
       wrapper.destroy();
@@ -124,33 +113,17 @@ describe('MRWidgetClosed', () => {
   describe('actions', () => {
     describe('reopen', () => {
       beforeEach(() => {
+        api.updateMergeRequest.mockResolvedValue(true);
         wrapper = createComponent({ shallow: false });
       });
 
       afterEach(() => {
+        api.updateMergeRequest.mockReset();
         wrapper.destroy();
         wrapper = null;
       });
 
-      it('is not available if the back end does not provide a usable reopen url', () => {
-        wrapper = createComponent({
-          props: {
-            mr: {
-              ...MOCK_DATA,
-              mergeRequestActions: {
-                reopen: {
-                  action: '',
-                  method: 'PUT',
-                },
-              },
-            },
-          },
-        });
-
-        expect(wrapper.findComponent(StateContainer).props().actions.length).toBe(0);
-      });
-
-      it('shows the "reopen" button if the back end provides a usable reopen url', () => {
+      it('shows the "reopen" button', () => {
         expect(wrapper.findComponent(StateContainer).props().actions.length).toBe(1);
         expect(findReopenActionButton(wrapper).text()).toBe('Reopen');
       });
@@ -158,6 +131,9 @@ describe('MRWidgetClosed', () => {
       it('shows "Reopening..." while the reopen network request is pending', async () => {
         const reopenButton = findReopenActionButton(wrapper);
 
+        api.updateMergeRequest.mockReset();
+        api.updateMergeRequest.mockReturnValue(new Promise(() => {}));
+
         reopenButton.trigger('click');
         await nextTick();
 
@@ -167,8 +143,6 @@ describe('MRWidgetClosed', () => {
       it('shows "Refreshing..." when the reopen has succeeded', async () => {
         const reopenButton = findReopenActionButton(wrapper);
 
-        axiosMock.onPut().reply(200);
-
         reopenButton.trigger('click');
         await waitForVueReactivityAfterReopen();
 
@@ -178,8 +152,6 @@ describe('MRWidgetClosed', () => {
       it('reloads the page when a reopen has succeeded', async () => {
         const reopenButton = findReopenActionButton(wrapper);
 
-        axiosMock.onPut().reply(200);
-
         reopenButton.trigger('click');
         await waitForVueReactivityAfterReopen();
 
@@ -189,11 +161,11 @@ describe('MRWidgetClosed', () => {
       it('shows "Reopen" when a reopen request has failed', async () => {
         const reopenButton = findReopenActionButton(wrapper);
 
-        axiosMock.onPut().reply(400);
+        api.updateMergeRequest.mockReset();
+        api.updateMergeRequest.mockRejectedValue(false);
 
         reopenButton.trigger('click');
         await waitForVueReactivityAfterReopen();
-        await waitForGlobalToast();
 
         expect(global.location.reload).not.toHaveBeenCalled();
         expect(reopenButton.text()).toBe('Reopen');
@@ -202,11 +174,11 @@ describe('MRWidgetClosed', () => {
       it('requests a toast popup when a reopen request has failed', async () => {
         const reopenButton = findReopenActionButton(wrapper);
 
-        axiosMock.onPut().reply(400);
+        api.updateMergeRequest.mockReset();
+        api.updateMergeRequest.mockRejectedValue(false);
 
         reopenButton.trigger('click');
         await waitForVueReactivityAfterReopen();
-        await waitForGlobalToast();
 
         expect(showGlobalToast).toHaveBeenCalledTimes(1);
         expect(showGlobalToast).toHaveBeenCalledWith(MR_WIDGET_CLOSED_REOPEN_FAILURE);
diff --git a/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js b/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js
index ec2925ec9af48e..37df041210ce22 100644
--- a/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js
+++ b/spec/frontend/vue_merge_request_widget/stores/mr_widget_store_spec.js
@@ -112,42 +112,6 @@ describe('MergeRequestStore', () => {
         expect(store.isNothingToMergeState).toBe(false);
       });
     });
-
-    describe('server-provided Merge Request Actions', () => {
-      const origParse = JSON.parse;
-
-      const serverProvidedActions = `{
-        "something": {
-          "action": "/abc",
-          "method": "PUT"
-        }
-      }`;
-
-      beforeEach(() => {
-        delete JSON.parse;
-        JSON.parse = jest.fn();
-      });
-
-      afterEach(() => {
-        JSON.parse = origParse;
-      });
-
-      it('processes the server-provided actions when they exist', () => {
-        store.setData({
-          ...mockData,
-          merge_request_actions: serverProvidedActions,
-        });
-
-        expect(JSON.parse).toHaveBeenCalledTimes(1);
-        expect(JSON.parse).toHaveBeenCalledWith(serverProvidedActions);
-      });
-
-      it("skips processing the actions if they're not provided", () => {
-        store.setData({ ...mockData });
-
-        expect(JSON.parse).not.toHaveBeenCalled();
-      });
-    });
   });
 
   describe('setPaths', () => {
-- 
GitLab


From f7326a411d8299b63944973bd3ead9bf50adb030 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Thu, 10 Nov 2022 03:56:53 -0700
Subject: [PATCH 06/20] Remove state machine from closed widget

---
 .../components/states/mr_widget_closed.vue    | 52 ++++++-------------
 .../vue_merge_request_widget/constants.js     | 42 ---------------
 2 files changed, 17 insertions(+), 77 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 f014f715dab943..d71657bbeb5333 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,5 @@
 <script>
 import api from '~/api';
-import { machine } from '~/lib/utils/finite_state_machine';
-
 import showGlobalToast from '~/vue_shared/plugins/global_toast';
 
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
@@ -13,17 +11,6 @@ import {
   MR_WIDGET_CLOSED_RELOADING,
   MR_WIDGET_CLOSED_REOPEN_FAILURE,
 } from '../../i18n';
-import {
-  CLOSED_MR_WIDGET_STATE_EVENT_CAN_BE_REOPENED as TRANSITION_REOPENABLE,
-  CLOSED_MR_WIDGET_STATE_EVENT_REQUEST_REOPEN as TRANSITION_REOPENING,
-  CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_WORKED as TRANSITION_REOPENED,
-  CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_FAILED as TRANSITION_FAILED,
-  CLOSED_MR_WIDGET_STATE_NOT_REOPENABLE as STATE_INERT,
-  CLOSED_MR_WIDGET_STATE_REOPENABLE as STATE_REOPENABLE,
-  CLOSED_MR_WIDGET_STATE_BACKEND_REOPENING as STATE_PENDING,
-  CLOSED_MR_WIDGET_STATE_PAGE_RELOADING as STATE_RELOADING,
-  CLOSED_MR_WIDGET_STATE_DEFINITIONS as REOPEN_DEFINITIONS,
-} from '../../constants';
 
 export default {
   name: 'MRWidgetClosed',
@@ -39,38 +26,43 @@ export default {
   },
   data() {
     return {
-      state: STATE_INERT,
+      isPending: false,
+      isReloading: false,
     };
   },
   computed: {
     reopenText() {
-      const texts = {
-        [STATE_INERT]: '',
-        [STATE_REOPENABLE]: MR_WIDGET_CLOSED_REOPEN,
-        [STATE_PENDING]: MR_WIDGET_CLOSED_REOPENING,
-        [STATE_RELOADING]: MR_WIDGET_CLOSED_RELOADING,
-      };
+      let text = MR_WIDGET_CLOSED_REOPEN;
 
-      return texts[this.state];
+      if (this.isPending) {
+        text = MR_WIDGET_CLOSED_REOPENING;
+      } else if (this.isReloading) {
+        text = MR_WIDGET_CLOSED_RELOADING;
+      }
+
+      return text;
     },
     actions() {
       const reopener = () => {
-        this.transition(TRANSITION_REOPENING);
+        this.isPending = true;
 
         api
           .updateMergeRequest(this.mr.targetProjectId, this.mr.iid, { state_event: 'reopen' })
           .then(() => {
-            this.transition(TRANSITION_REOPENED);
+            this.isReloading = true;
+
             window.location.reload();
           })
           .catch(() => {
-            this.transition(TRANSITION_FAILED);
             showGlobalToast(MR_WIDGET_CLOSED_REOPEN_FAILURE);
+          })
+          .finally(() => {
+            this.isPending = false;
           });
       };
       const reopenAction = {
         text: this.reopenText,
-        loading: [STATE_PENDING, STATE_RELOADING].includes(this.state),
+        loading: this.isPending || this.isReloading,
         onClick: reopener,
         testId: 'extension-actions-reopen-button',
       };
@@ -78,16 +70,6 @@ export default {
       return [reopenAction];
     },
   },
-  created() {
-    this.$options.state = machine(REOPEN_DEFINITIONS);
-
-    this.transition(TRANSITION_REOPENABLE);
-  },
-  methods: {
-    transition(event) {
-      this.state = this.$options.state.send(event);
-    },
-  },
 };
 </script>
 <template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index 1220d36a87dc69..7109bed77439fe 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -194,45 +194,3 @@ export const DETAILED_MERGE_STATUS = {
   CI_STILL_RUNNING: 'CI_STILL_RUNNING',
   EXTERNAL_STATUS_CHECKS: 'EXTERNAL_STATUS_CHECKS',
 };
-
-/* eslint-disable spaced-comment */
-/***** CLOSED MR WIDGET ********/
-
-// Visualize this state machine: https://stately.ai/viz/8b6e1bd3-ecf6-49d2-a983-3afdcd8e9b6a
-export const CLOSED_MR_WIDGET_STATE_EVENT_CAN_BE_REOPENED = 'reopenable';
-export const CLOSED_MR_WIDGET_STATE_EVENT_REQUEST_REOPEN = 'reopening';
-export const CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_WORKED = 'reopened';
-export const CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_FAILED = 'failure';
-export const CLOSED_MR_WIDGET_STATE_NOT_REOPENABLE = 'INERT';
-export const CLOSED_MR_WIDGET_STATE_REOPENABLE = 'IDLE';
-export const CLOSED_MR_WIDGET_STATE_BACKEND_REOPENING = 'PENDING';
-export const CLOSED_MR_WIDGET_STATE_PAGE_RELOADING = 'RELOADING';
-export const CLOSED_MR_WIDGET_STATE_DEFINITIONS = {
-  initial: CLOSED_MR_WIDGET_STATE_NOT_REOPENABLE,
-  states: {
-    [CLOSED_MR_WIDGET_STATE_NOT_REOPENABLE]: {
-      on: {
-        [CLOSED_MR_WIDGET_STATE_EVENT_CAN_BE_REOPENED]: CLOSED_MR_WIDGET_STATE_REOPENABLE,
-      },
-    },
-    [CLOSED_MR_WIDGET_STATE_REOPENABLE]: {
-      on: {
-        [CLOSED_MR_WIDGET_STATE_EVENT_REQUEST_REOPEN]: CLOSED_MR_WIDGET_STATE_BACKEND_REOPENING,
-      },
-    },
-    [CLOSED_MR_WIDGET_STATE_BACKEND_REOPENING]: {
-      on: {
-        [CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_WORKED]: CLOSED_MR_WIDGET_STATE_PAGE_RELOADING,
-        [CLOSED_MR_WIDGET_STATE_EVENT_REOPEN_FAILED]: CLOSED_MR_WIDGET_STATE_REOPENABLE,
-      },
-    },
-    [CLOSED_MR_WIDGET_STATE_PAGE_RELOADING]: {
-      on: {
-        // final state, no exit criteria
-      },
-    },
-  },
-};
-
-/*** END CLOSED MR WIDGET ******/
-/* eslint-enable spaced-comment */
-- 
GitLab


From 3dd8ecbb26f681c7f99dcf4518dc58742de5a421 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 11:26:47 -0700
Subject: [PATCH 07/20] Move the reopen action into the widget component
 external API

---
 .../components/states/mr_widget_closed.vue    | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 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 d71657bbeb5333..553dd7b22205af 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
@@ -43,33 +43,35 @@ export default {
       return text;
     },
     actions() {
-      const reopener = () => {
-        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;
-          });
-      };
       const reopenAction = {
         text: this.reopenText,
         loading: this.isPending || this.isReloading,
-        onClick: reopener,
+        onClick: this.reopen,
         testId: 'extension-actions-reopen-button',
       };
 
       return [reopenAction];
     },
   },
+  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>
-- 
GitLab


From 11b3ce111b1e2e4f3594ca653ec65050fd6b12a6 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 11:28:47 -0700
Subject: [PATCH 08/20] Use module mock factory shorthand

This goes against the documentation for
mocking ES6 modules, but still works.
---
 .../components/states/mr_widget_closed_spec.js       | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index afe6159ddcebdc..64f12802641d85 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -12,15 +12,9 @@ import Actions from '~/vue_merge_request_widget/components/action_buttons.vue';
 
 import { MR_WIDGET_CLOSED_REOPEN_FAILURE } from '~/vue_merge_request_widget/i18n';
 
-jest.mock('~/api', () => {
-  const updateMergeRequest = jest.fn();
-
-  return {
-    __esModule: true,
-    default: { updateMergeRequest },
-    updateMergeRequest,
-  };
-});
+jest.mock('~/api', () => ({
+  updateMergeRequest: jest.fn(),
+}));
 
 const MOCK_DATA = {
   metrics: {
-- 
GitLab


From cffeb8484854407a1893da0d3e669607d70a6999 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 11:39:04 -0700
Subject: [PATCH 09/20] Test internal implementation of the reopen action

---
 .../components/states/mr_widget_closed_spec.js    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index 64f12802641d85..275b18353ba8d4 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -17,6 +17,7 @@ jest.mock('~/api', () => ({
 }));
 
 const MOCK_DATA = {
+  iid: 1,
   metrics: {
     mergedBy: {},
     closedBy: {
@@ -38,6 +39,7 @@ const MOCK_DATA = {
       method: 'PUT',
     },
   },
+  targetProjectId: 'twitter/flight',
 };
 
 function createComponent({ shallow = true, props = {} } = {}) {
@@ -122,6 +124,19 @@ describe('MRWidgetClosed', () => {
         expect(findReopenActionButton(wrapper).text()).toBe('Reopen');
       });
 
+      it('makes the reopen request with the correct MR information', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        reopenButton.trigger('click');
+        await nextTick();
+
+        expect(api.updateMergeRequest).toHaveBeenCalledWith(
+          MOCK_DATA.targetProjectId,
+          MOCK_DATA.iid,
+          { state_event: 'reopen' },
+        );
+      });
+
       it('shows "Reopening..." while the reopen network request is pending', async () => {
         const reopenButton = findReopenActionButton(wrapper);
 
-- 
GitLab


From 10137f05647ba95d7b6ec37b72470d75429b42db Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 11:39:35 -0700
Subject: [PATCH 10/20] Remove unused action mock that would be provided by the
 backend

---
 .../components/states/mr_widget_closed_spec.js              | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index 275b18353ba8d4..7e9bd3937c2c2b 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -33,12 +33,6 @@ const MOCK_DATA = {
   },
   targetBranchPath: '/twitter/flight/commits/so_long_jquery',
   targetBranch: 'so_long_jquery',
-  mergeRequestActions: {
-    reopen: {
-      action: '/merge_requests/6?merge_request%5Bstate_event%5D=reopen',
-      method: 'PUT',
-    },
-  },
   targetProjectId: 'twitter/flight',
 };
 
-- 
GitLab


From b022f1920e20de433941211721f8390c57d9e1d8 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 12:06:54 -0700
Subject: [PATCH 11/20] Remove wrapper nullification that was fixed in the
 upstream library

---
 .../components/states/mr_widget_closed_spec.js                  | 2 --
 1 file changed, 2 deletions(-)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index 7e9bd3937c2c2b..aae784f0d8e300 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -81,7 +81,6 @@ describe('MRWidgetClosed', () => {
 
     if (wrapper) {
       wrapper.destroy();
-      wrapper = null;
     }
   });
 
@@ -110,7 +109,6 @@ describe('MRWidgetClosed', () => {
       afterEach(() => {
         api.updateMergeRequest.mockReset();
         wrapper.destroy();
-        wrapper = null;
       });
 
       it('shows the "reopen" button', () => {
-- 
GitLab


From b1c728115c55a406d63de878cb7a06e65cc677e2 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 12:07:26 -0700
Subject: [PATCH 12/20] Depend on implicit mock overwriting instead of
 explicitly resetting

---
 .../components/states/mr_widget_closed_spec.js                | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index aae784f0d8e300..9fa1d6d0028f9b 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -107,7 +107,6 @@ describe('MRWidgetClosed', () => {
       });
 
       afterEach(() => {
-        api.updateMergeRequest.mockReset();
         wrapper.destroy();
       });
 
@@ -132,7 +131,6 @@ describe('MRWidgetClosed', () => {
       it('shows "Reopening..." while the reopen network request is pending', async () => {
         const reopenButton = findReopenActionButton(wrapper);
 
-        api.updateMergeRequest.mockReset();
         api.updateMergeRequest.mockReturnValue(new Promise(() => {}));
 
         reopenButton.trigger('click');
@@ -162,7 +160,6 @@ describe('MRWidgetClosed', () => {
       it('shows "Reopen" when a reopen request has failed', async () => {
         const reopenButton = findReopenActionButton(wrapper);
 
-        api.updateMergeRequest.mockReset();
         api.updateMergeRequest.mockRejectedValue(false);
 
         reopenButton.trigger('click');
@@ -175,7 +172,6 @@ describe('MRWidgetClosed', () => {
       it('requests a toast popup when a reopen request has failed', async () => {
         const reopenButton = findReopenActionButton(wrapper);
 
-        api.updateMergeRequest.mockReset();
         api.updateMergeRequest.mockRejectedValue(false);
 
         reopenButton.trigger('click');
-- 
GitLab


From fa967d4a7520cea96167ceec02b9f67109a6abed Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 12:19:00 -0700
Subject: [PATCH 13/20] Use "mounter" instead of "constructor" for the
 component creation

---
 .../components/states/mr_widget_closed_spec.js                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index 9fa1d6d0028f9b..30061e379fb567 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -37,9 +37,9 @@ const MOCK_DATA = {
 };
 
 function createComponent({ shallow = true, props = {} } = {}) {
-  const constructor = shallow ? shallowMount : mount;
+  const mounter = shallow ? shallowMount : mount;
 
-  return constructor(closedComponent, {
+  return mounter(closedComponent, {
     propsData: {
       mr: MOCK_DATA,
       ...props,
-- 
GitLab


From 687905a8f522af906fe00909e37e29e423d0910b Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 12:29:28 -0700
Subject: [PATCH 14/20] Remove unnecessary guard clause on VTU return value

---
 .../components/states/mr_widget_closed_spec.js                | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index 30061e379fb567..c35020b46d595e 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -52,9 +52,7 @@ function findActions(wrapper) {
 }
 
 function findReopenActionButton(wrapper) {
-  const actions = findActions(wrapper);
-
-  return actions?.find('button[data-testid="extension-actions-reopen-button"]');
+  return findActions(wrapper).find('button[data-testid="extension-actions-reopen-button"]');
 }
 
 async function waitForVueReactivityAfterReopen() {
-- 
GitLab


From e89a267eb6497efa823c3fbcddef7f61ccae8054 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 12:34:16 -0700
Subject: [PATCH 15/20] Move global toast mock to be with the other mock

---
 .../components/states/mr_widget_closed_spec.js                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index c35020b46d595e..bf71ff33afd2f4 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -15,6 +15,7 @@ import { MR_WIDGET_CLOSED_REOPEN_FAILURE } from '~/vue_merge_request_widget/i18n
 jest.mock('~/api', () => ({
   updateMergeRequest: jest.fn(),
 }));
+jest.mock('~/vue_shared/plugins/global_toast');
 
 const MOCK_DATA = {
   iid: 1,
@@ -62,7 +63,6 @@ async function waitForVueReactivityAfterReopen() {
   await nextTick();
 }
 
-jest.mock('~/vue_shared/plugins/global_toast');
 
 describe('MRWidgetClosed', () => {
   const origLoc = global.location;
-- 
GitLab


From 827abeccfcb4afbba4897abe8b6c78d287235c9a Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 12:36:46 -0700
Subject: [PATCH 16/20] Use MockLocationHelper instead of mocking the location
 object

---
 .../components/states/mr_widget_closed_spec.js      | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index bf71ff33afd2f4..d7d466b2ce88a0 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -1,5 +1,6 @@
 import { nextTick } from 'vue';
 import { shallowMount, mount } from '@vue/test-utils';
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 
 import api from '~/api';
 
@@ -17,6 +18,8 @@ jest.mock('~/api', () => ({
 }));
 jest.mock('~/vue_shared/plugins/global_toast');
 
+useMockLocationHelper();
+
 const MOCK_DATA = {
   iid: 1,
   metrics: {
@@ -63,20 +66,14 @@ async function waitForVueReactivityAfterReopen() {
   await nextTick();
 }
 
-
 describe('MRWidgetClosed', () => {
-  const origLoc = global.location;
   let wrapper;
 
   beforeEach(() => {
-    delete global.location;
-    global.location = { ...origLoc, reload: jest.fn() };
     wrapper = createComponent();
   });
 
   afterEach(() => {
-    global.location = origLoc;
-
     if (wrapper) {
       wrapper.destroy();
     }
@@ -152,7 +149,7 @@ describe('MRWidgetClosed', () => {
         reopenButton.trigger('click');
         await waitForVueReactivityAfterReopen();
 
-        expect(global.location.reload).toHaveBeenCalledTimes(1);
+        expect(window.location.reload).toHaveBeenCalledTimes(1);
       });
 
       it('shows "Reopen" when a reopen request has failed', async () => {
@@ -163,7 +160,7 @@ describe('MRWidgetClosed', () => {
         reopenButton.trigger('click');
         await waitForVueReactivityAfterReopen();
 
-        expect(global.location.reload).not.toHaveBeenCalled();
+        expect(window.location.reload).not.toHaveBeenCalled();
         expect(reopenButton.text()).toBe('Reopen');
       });
 
-- 
GitLab


From 511805f1d02d76b776a7cf1af71e9a8a962b9cb4 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 12:55:23 -0700
Subject: [PATCH 17/20] Use a new promise at the end of the stack to infer
 other resolutions

---
 .../components/states/mr_widget_closed_spec.js   | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index d7d466b2ce88a0..7f1e07e05ef990 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -1,6 +1,7 @@
 import { nextTick } from 'vue';
 import { shallowMount, mount } from '@vue/test-utils';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 
 import api from '~/api';
 
@@ -59,13 +60,6 @@ function findReopenActionButton(wrapper) {
   return findActions(wrapper).find('button[data-testid="extension-actions-reopen-button"]');
 }
 
-async function waitForVueReactivityAfterReopen() {
-  // After clicking, the network request is mocked and immediately returns...
-  await nextTick();
-  // ... and the UI is updated / repainted ...
-  await nextTick();
-}
-
 describe('MRWidgetClosed', () => {
   let wrapper;
 
@@ -138,7 +132,7 @@ describe('MRWidgetClosed', () => {
         const reopenButton = findReopenActionButton(wrapper);
 
         reopenButton.trigger('click');
-        await waitForVueReactivityAfterReopen();
+        await waitForPromises();
 
         expect(reopenButton.text()).toBe('Refreshing...');
       });
@@ -147,7 +141,7 @@ describe('MRWidgetClosed', () => {
         const reopenButton = findReopenActionButton(wrapper);
 
         reopenButton.trigger('click');
-        await waitForVueReactivityAfterReopen();
+        await waitForPromises();
 
         expect(window.location.reload).toHaveBeenCalledTimes(1);
       });
@@ -158,7 +152,7 @@ describe('MRWidgetClosed', () => {
         api.updateMergeRequest.mockRejectedValue(false);
 
         reopenButton.trigger('click');
-        await waitForVueReactivityAfterReopen();
+        await waitForPromises();
 
         expect(window.location.reload).not.toHaveBeenCalled();
         expect(reopenButton.text()).toBe('Reopen');
@@ -170,7 +164,7 @@ describe('MRWidgetClosed', () => {
         api.updateMergeRequest.mockRejectedValue(false);
 
         reopenButton.trigger('click');
-        await waitForVueReactivityAfterReopen();
+        await waitForPromises();
 
         expect(showGlobalToast).toHaveBeenCalledTimes(1);
         expect(showGlobalToast).toHaveBeenCalledWith(MR_WIDGET_CLOSED_REOPEN_FAILURE);
-- 
GitLab


From 29a8994ad78285c98dcbdbe310b3f139895a421c Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Nov 2022 13:52:32 -0700
Subject: [PATCH 18/20] Skip showing the reopen action if the user isn't logged
 in

This matches the current behavior of the top kebab menu
(which also skips rendering when the user isn't logged in).
---
 .../components/states/mr_widget_closed.vue               | 7 ++++++-
 .../components/states/mr_widget_closed_spec.js           | 9 +++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

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 553dd7b22205af..45669c31f7b2dc 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
@@ -49,8 +49,13 @@ export default {
         onClick: this.reopen,
         testId: 'extension-actions-reopen-button',
       };
+      const actions = [];
 
-      return [reopenAction];
+      if (window.gon?.current_user_id) {
+        actions.push(reopenAction);
+      }
+
+      return actions;
     },
   },
   methods: {
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index 7f1e07e05ef990..08851bb2d06531 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -91,6 +91,7 @@ describe('MRWidgetClosed', () => {
   describe('actions', () => {
     describe('reopen', () => {
       beforeEach(() => {
+        window.gon = { current_user_id: 1 };
         api.updateMergeRequest.mockResolvedValue(true);
         wrapper = createComponent({ shallow: false });
       });
@@ -104,6 +105,14 @@ describe('MRWidgetClosed', () => {
         expect(findReopenActionButton(wrapper).text()).toBe('Reopen');
       });
 
+      it('does not show widget actions when the user is not logged in', () => {
+        window.gon = {};
+
+        wrapper = createComponent();
+
+        expect(findActions(wrapper).exists()).toBe(false);
+      });
+
       it('makes the reopen request with the correct MR information', async () => {
         const reopenButton = findReopenActionButton(wrapper);
 
-- 
GitLab


From e9d10979c2d892cc97253b84befe2d18750f1e00 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 15 Nov 2022 17:48:32 -0700
Subject: [PATCH 19/20] Use upper teardown to clean up

---
 .../components/states/mr_widget_closed_spec.js                | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index 08851bb2d06531..270a37f87e7de5 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -96,10 +96,6 @@ describe('MRWidgetClosed', () => {
         wrapper = createComponent({ shallow: false });
       });
 
-      afterEach(() => {
-        wrapper.destroy();
-      });
-
       it('shows the "reopen" button', () => {
         expect(wrapper.findComponent(StateContainer).props().actions.length).toBe(1);
         expect(findReopenActionButton(wrapper).text()).toBe('Reopen');
-- 
GitLab


From ab9a398328b0a67adbc9bd6adc9739ced35053a0 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 15 Nov 2022 17:49:09 -0700
Subject: [PATCH 20/20] Remove multiple-action pattern for multiple exit points

---
 .../components/states/mr_widget_closed.vue    | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 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 45669c31f7b2dc..6bcf88713a52d1 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
@@ -43,19 +43,18 @@ export default {
       return text;
     },
     actions() {
-      const reopenAction = {
-        text: this.reopenText,
-        loading: this.isPending || this.isReloading,
-        onClick: this.reopen,
-        testId: 'extension-actions-reopen-button',
-      };
-      const actions = [];
-
-      if (window.gon?.current_user_id) {
-        actions.push(reopenAction);
+      if (!window.gon?.current_user_id) {
+        return [];
       }
 
-      return actions;
+      return [
+        {
+          text: this.reopenText,
+          loading: this.isPending || this.isReloading,
+          onClick: this.reopen,
+          testId: 'extension-actions-reopen-button',
+        },
+      ];
     },
   },
   methods: {
-- 
GitLab