Makes close/reopen issue request to inside the vue app

1 files changed, 47 insertions, 28 deletions

diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index ff65ea99e9a..1bf3dc1da91 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -25,6 +25,51 @@ export default class Issue {
     if (Issue.createMrDropdownWrap) {
       this.createMergeRequestDropdown = new CreateMergeRequestDropdown(Issue.createMrDropdownWrap);
     }
+
+    // Listen to state changes in the Vue app
+    document.addEventListener('issuable_vue_app:change', (event) => {
+      this.updateTopState(event.detail.isClosed, event.detail.data);
+    });
+  }
+
+  /**
+   * This method updates the top area of the issue.
+   *
+   * Once the issue state changes, either through a click on the top area (jquery)
+   * or a click on the bottom area (Vue) we need to update the top area.
+   *
+   * @param {Boolean} isClosed
+   * @param {Array} data
+   * @param {String} issueFailMessage
+   */
+  updateTopState(isClosed, data, issueFailMessage = 'Unable to update this issue at this time.') {
+    if ('id' in data) {
+      const isClosedBadge = $('div.status-box-issue-closed');
+      const isOpenBadge = $('div.status-box-open');
+      const projectIssuesCounter = $('.issue_counter');
+
+      isClosedBadge.toggleClass('hidden', !isClosed);
+      isOpenBadge.toggleClass('hidden', isClosed);
+
+      $(document).trigger('issuable:change', isClosed);
+      this.toggleCloseReopenButton(isClosed);
+
+      let numProjectIssues = Number(projectIssuesCounter.first().text().trim().replace(/[^\d]/, ''));
+      numProjectIssues = isClosed ? numProjectIssues - 1 : numProjectIssues + 1;
+      projectIssuesCounter.text(addDelimiter(numProjectIssues));
+
+      if (this.createMergeRequestDropdown) {
+        if (isClosed) {
+          this.createMergeRequestDropdown.unavailable();
+          this.createMergeRequestDropdown.disable();
+        } else {
+          // We should check in case a branch was created in another tab
+          this.createMergeRequestDropdown.checkAbilityToCreateBranch();
+        }
+      }
+    } else {
+      flash(issueFailMessage);
+    }
   }
 
   initIssueBtnEventListeners() {
@@ -45,34 +90,8 @@ export default class Issue {
       url = $button.attr('href');
       return axios.put(url)
       .then(({ data }) => {
-        const isClosedBadge = $('div.status-box-issue-closed');
-        const isOpenBadge = $('div.status-box-open');
-        const projectIssuesCounter = $('.issue_counter');
-
-        if ('id' in data) {
-          const isClosed = $button.hasClass('btn-close');
-          isClosedBadge.toggleClass('hidden', !isClosed);
-          isOpenBadge.toggleClass('hidden', isClosed);
-
-          $(document).trigger('issuable:change', isClosed);
-          this.toggleCloseReopenButton(isClosed);
-
-          let numProjectIssues = Number(projectIssuesCounter.first().text().trim().replace(/[^\d]/, ''));
-          numProjectIssues = isClosed ? numProjectIssues - 1 : numProjectIssues + 1;
-          projectIssuesCounter.text(addDelimiter(numProjectIssues));
-
-          if (this.createMergeRequestDropdown) {
-            if (isClosed) {
-              this.createMergeRequestDropdown.unavailable();
-              this.createMergeRequestDropdown.disable();
-            } else {
-              // We should check in case a branch was created in another tab
-              this.createMergeRequestDropdown.checkAbilityToCreateBranch();
-            }
-          }
-        } else {
-          flash(issueFailMessage);
-        }
+        const isClosed = $button.hasClass('btn-close');
+        this.updateTopState(isClosed, data);
       })
       .catch(() => flash(issueFailMessage))
       .then(() => {