handle commas in Issue total count

2 files changed, 20 insertions, 3 deletions

diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index ef4029a8623..47e675f537e 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -2,6 +2,7 @@
 /* global Flash */
 
 require('./flash');
+require('~/lib/utils/text_utility');
 require('vendor/jquery.waitforimages');
 require('./task_list');
 
@@ -50,20 +51,21 @@ class Issue {
         success: function(data, textStatus, jqXHR) {
           if ('id' in data) {
             $(document).trigger('issuable:change');
-            const currentTotal = Number($('.issue_counter').text());
+            let total = Number($('.issue_counter').text().replace(/[^\d]/, ''));
             if (isClose) {
               $('a.btn-close').addClass('hidden');
               $('a.btn-reopen').removeClass('hidden');
               $('div.status-box-closed').removeClass('hidden');
               $('div.status-box-open').addClass('hidden');
-              $('.issue_counter').text(currentTotal - 1);
+              total -= 1;
             } else {
               $('a.btn-reopen').addClass('hidden');
               $('a.btn-close').removeClass('hidden');
               $('div.status-box-closed').addClass('hidden');
               $('div.status-box-open').removeClass('hidden');
-              $('.issue_counter').text(currentTotal + 1);
+              total += 1;
             }
+            $('.issue_counter').text(gl.text.addDelimiter(total));
           } else {
             new Flash(issueFailMessage, 'alert');
           }
diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index 8d25500b9fd..aabc8bea12f 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -136,6 +136,21 @@ describe('Issue', function() {
       expectErrorMessage();
       expect($('.issue_counter')).toHaveText(1);
     });
+
+    it('updates counter', () => {
+      spyOn(jQuery, 'ajax').and.callFake(function(req) {
+        expectPendingRequest(req, $btnClose);
+        req.success({
+          id: 34
+        });
+      });
+
+      expect($('.issue_counter')).toHaveText(1);
+      $('.issue_counter').text('1,001');
+      expect($('.issue_counter').text()).toEqual('1,001');
+      $btnClose.trigger('click');
+      expect($('.issue_counter').text()).toEqual('1,000');
+    });
   });
 
   describe('reopen issue', function() {