Merge branch 'mr-status-box-update' into 'master'

Fixed merge request status badge not updating after merging

See merge request gitlab-org/gitlab-ce!16470

5 files changed, 19 insertions, 10 deletions

diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index 088f4921bf4..5384872acb7 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -111,7 +111,7 @@ MergeRequest.prototype.initCommitMessageListeners = function() {
   });
 };
 
-MergeRequest.setStatusBoxToMerged = function() {
+MergeRequest.updateStatusText = function(classToRemove, classToAdd, newStatusText) {
   $('.detail-page-header .status-box')
     .removeClass('status-box-open')
     .addClass('status-box-mr-merged')
@@ -119,14 +119,14 @@ MergeRequest.setStatusBoxToMerged = function() {
     .text(__('Merged'));
 };
 
-MergeRequest.prototype.decreaseCounter = function(by = 1) {
-  const $el = $('.nav-links .js-merge-counter');
+MergeRequest.decreaseCounter = function(by = 1) {
+  const $el = $('.js-merge-counter');
   const count = Math.max((parseInt($el.text().replace(/[^\d]/, ''), 10) - by), 0);
 
   $el.text(addDelimiter(count));
 };
 
-MergeRequest.prototype.hideCloseButton = function() {
+MergeRequest.hideCloseButton = function() {
   const el = document.querySelector('.merge-request .js-issuable-actions');
   const closeDropdownItem = el.querySelector('li.close-item');
   if (closeDropdownItem) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index c0761f63098..60f42c46ffe 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -1,6 +1,7 @@
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
+import MergeRequest from '../../../merge_request';
 import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon';
 import eventHub from '../../event_hub';
@@ -165,7 +166,7 @@ export default {
             // If state is merged we should update the widget and stop the polling
             eventHub.$emit('MRWidgetUpdateRequested');
             eventHub.$emit('FetchActionsContent');
-            MergeRequest.setStatusBoxToMerged();
+            MergeRequest.updateStatusText('status-box-open', 'status-box-merged', 'Merged');
             MergeRequest.hideCloseButton();
             MergeRequest.decreaseCounter();
             stopPolling();
diff --git a/changelogs/unreleased/mr-status-box-update.yml b/changelogs/unreleased/mr-status-box-update.yml
new file mode 100644
index 00000000000..68265be16a1
--- /dev/null
+++ b/changelogs/unreleased/mr-status-box-update.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed merge request status badge not updating after merging
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js
index 2f02c11482f..f2a0cb691bf 100644
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -63,8 +63,8 @@ import IssuablesHelper from '~/helpers/issuables_helper';
         beforeEach(() => {
           loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
           this.el = document.querySelector('.js-issuable-actions');
-          const merge = new MergeRequest();
-          merge.hideCloseButton();
+          new MergeRequest(); // eslint-disable-line no-new
+          MergeRequest.hideCloseButton();
         });
 
         it('hides the dropdown close item and selects the next item', () => {
@@ -83,8 +83,7 @@ import IssuablesHelper from '~/helpers/issuables_helper';
         beforeEach(() => {
           loadFixtures('merge_requests/merge_request_of_current_user.html.raw');
           this.el = document.querySelector('.js-issuable-actions');
-          const merge = new MergeRequest();
-          merge.hideCloseButton();
+          MergeRequest.hideCloseButton();
         });
 
         it('hides the close button', () => {
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index 8d84e67ac2d..11858e45386 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -371,6 +371,10 @@ describe('MRWidgetReadyToMerge', () => {
         });
       });
 
+      beforeEach(() => {
+        loadFixtures('merge_requests/merge_request_of_current_user.html.raw');
+      });
+
       it('should call start and stop polling when MR merged', (done) => {
         spyOn(eventHub, '$emit');
         spyOn(vm.service, 'poll').and.returnValue(returnPromise('merged'));
@@ -400,7 +404,7 @@ describe('MRWidgetReadyToMerge', () => {
 
         setTimeout(() => {
           const statusBox = document.querySelector('.status-box');
-          expect(statusBox.classList.contains('status-box-mr-merged')).toBeTruthy();
+          expect(statusBox.classList.contains('status-box-merged')).toBeTruthy();
           expect(statusBox.textContent).toContain('Merged');
 
           done();