Format total count of runners in tabs by locale

This change formats the total count of each type of runner in the tabs
with a thousands separator according to the current user locale.

Changelog: changed

app/assets/javascripts/runner/admin_runners/admin_runners_app.vue

@@ -3,6 +3,7 @@ import { GlBadge, GlLink } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import { fetchPolicies } from '~/lib/graphql';
 import { updateHistory } from '~/lib/utils/url_utility';
+import { formatNumber } from '~/locale';
 
 import RegistrationDropdown from '../components/registration/registration_dropdown.vue';
 import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue';
@@ -172,18 +173,27 @@ export default {
   },
   methods: {
     tabCount({ runnerType }) {
+      let count;
       switch (runnerType) {
         case null:
-          return this.allRunnersCount;
+          count = this.allRunnersCount;
+          break;
         case INSTANCE_TYPE:
-          return this.instanceRunnersCount;
+          count = this.instanceRunnersCount;
+          break;
         case GROUP_TYPE:
-          return this.groupRunnersCount;
+          count = this.groupRunnersCount;
+          break;
         case PROJECT_TYPE:
-          return this.projectRunnersCount;
+          count = this.projectRunnersCount;
+          break;
         default:
           return null;
       }
+      if (typeof count === 'number') {
+        return formatNumber(count);
+      }
+      return '';
     },
     reportToSentry(error) {
       captureException({ error, component: this.$options.name });
@@ -208,7 +218,7 @@ export default {
       >
         <template #title="{ tab }">
           {{ tab.title }}
-          <gl-badge v-if="typeof tabCount(tab) == 'number'" class="gl-ml-1" size="sm">
+          <gl-badge v-if="tabCount(tab)" class="gl-ml-1" size="sm">
             {{ tabCount(tab) }}
           </gl-badge>
         </template>

spec/frontend/runner/admin_runners/admin_runners_app_spec.js

@@ -85,19 +85,7 @@ describe('AdminRunnersApp', () => {
     setWindowLocation('/admin/runners');
 
     mockRunnersQuery = jest.fn().mockResolvedValue(runnersData);
-    mockRunnersCountQuery = jest.fn().mockImplementation(({ type }) => {
-      const mockResponse = {
-        [INSTANCE_TYPE]: 3,
-        [GROUP_TYPE]: 2,
-        [PROJECT_TYPE]: 1,
-      };
-      if (mockResponse[type]) {
-        return Promise.resolve({
-          data: { runners: { count: mockResponse[type] } },
-        });
-      }
-      return Promise.resolve(runnersCountData);
-    });
+    mockRunnersCountQuery = jest.fn().mockResolvedValue(runnersCountData);
     createComponent();
     await waitForPromises();
   });
@@ -107,13 +95,59 @@ describe('AdminRunnersApp', () => {
     wrapper.destroy();
   });
 
-  it('shows the runner tabs with a runner count', async () => {
+  it('shows the runner tabs with a runner count for each type', async () => {
+    mockRunnersCountQuery.mockImplementation(({ type }) => {
+      let count;
+      switch (type) {
+        case INSTANCE_TYPE:
+          count = 3;
+          break;
+        case GROUP_TYPE:
+          count = 2;
+          break;
+        case PROJECT_TYPE:
+          count = 1;
+          break;
+        default:
+          count = 6;
+          break;
+      }
+      return Promise.resolve({ data: { runners: { count } } });
+    });
+
     createComponent({ mountFn: mount });
+    await waitForPromises();
+
+    expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
+      `All 6 Instance 3 Group 2 Project 1`,
+    );
+  });
 
+  it('shows the runner tabs with a formatted runner count', async () => {
+    mockRunnersCountQuery.mockImplementation(({ type }) => {
+      let count;
+      switch (type) {
+        case INSTANCE_TYPE:
+          count = 3000;
+          break;
+        case GROUP_TYPE:
+          count = 2000;
+          break;
+        case PROJECT_TYPE:
+          count = 1000;
+          break;
+        default:
+          count = 6000;
+          break;
+      }
+      return Promise.resolve({ data: { runners: { count } } });
+    });
+
+    createComponent({ mountFn: mount });
     await waitForPromises();
 
     expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
-      `All ${runnersCountData.data.runners.count} Instance 3 Group 2 Project 1`,
+      `All 6,000 Instance 3,000 Group 2,000 Project 1,000`,
     );
   });