Format issue list counts

Format large counts with thousands separator

Changelog: fixed

app/assets/javascripts/vue_shared/issuable/list/components/issuable_tabs.vue

 <script>
 import { GlTabs, GlTab, GlBadge } from '@gitlab/ui';
+import { formatNumber } from '~/locale';
 
 export default {
   components: {
@@ -29,6 +30,9 @@ export default {
     isTabCountNumeric(tab) {
       return Number.isInteger(this.tabCounts[tab.name]);
     },
+    formatNumber(count) {
+      return formatNumber(count);
+    },
   },
 };
 </script>
@@ -55,7 +59,7 @@ export default {
             size="sm"
             class="gl-tab-counter-badge"
           >
-            {{ tabCounts[tab.name] }}
+            {{ formatNumber(tabCounts[tab.name]) }}
           </gl-badge>
         </template>
       </gl-tab>

spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js

 import { GlTab, GlBadge } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { setLanguage } from 'helpers/locale_helper';
 
 import IssuableTabs from '~/vue_shared/issuable/list/components/issuable_tabs.vue';
 
@@ -27,10 +28,12 @@ describe('IssuableTabs', () => {
   let wrapper;
 
   beforeEach(() => {
+    setLanguage('en');
     wrapper = createComponent();
   });
 
   afterEach(() => {
+    setLanguage(null);
     wrapper.destroy();
   });
 
@@ -71,7 +74,7 @@ describe('IssuableTabs', () => {
 
       // Does not render `All` badge since it has an undefined count
       expect(badges).toHaveLength(2);
-      expect(badges.at(0).text()).toBe(`${mockIssuableListProps.tabCounts.opened}`);
+      expect(badges.at(0).text()).toBe('5,000');
       expect(badges.at(1).text()).toBe(`${mockIssuableListProps.tabCounts.closed}`);
     });
 

spec/frontend/vue_shared/issuable/list/mock_data.js

@@ -133,7 +133,7 @@ export const mockTabs = [
 ];
 
 export const mockTabCounts = {
-  opened: 5,
+  opened: 5000,
   closed: 0,
   all: undefined,
 };