VSA: Change item count to 1000+

- Change the displayed item
count to 1000+ when there
are more than 1000 items

Changelog: changed
EE: true

app/assets/javascripts/cycle_analytics/components/formatted_stage_count.vue

+<script>
+import { s__, n__, sprintf } from '~/locale';
+
+export default {
+  props: {
+    stageCount: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    formattedStageCount() {
+      if (!this.stageCount) {
+        return '-';
+      } else if (this.stageCount > 1000) {
+        return sprintf(s__('ValueStreamAnalytics|%{stageCount} items'), { stageCount: '1000+' });
+      }
+
+      return n__('%d item', '%d items', this.stageCount);
+    },
+  },
+};
+</script>
+
+<template>
+  <span>{{ formattedStageCount }}</span>
+</template>

app/assets/javascripts/cycle_analytics/components/path_navigation.vue

@@ -7,6 +7,7 @@ import {
 } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import { OVERVIEW_STAGE_ID } from '../constants';
+import FormattedStageCount from './formatted_stage_count.vue';
 
 export default {
   name: 'PathNavigation',
@@ -14,6 +15,7 @@ export default {
     GlPath,
     GlSkeletonLoading,
     GlPopover,
+    FormattedStageCount,
   },
   directives: {
     SafeHtml,
@@ -88,10 +90,7 @@ export default {
               {{ s__('ValueStreamEvent|Items in stage') }}
             </div>
             <div class="gl-pb-4 gl-font-weight-bold">
-              <template v-if="hasStageCount(pathItem)">{{
-                n__('%d item', '%d items', pathItem.stageCount)
-              }}</template>
-              <template v-else>-</template>
+              <formatted-stage-count :stage-count="pathItem.stageCount" />
             </div>
           </div>
         </div>

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_table.vue

@@ -8,6 +8,7 @@ import {
   GlTable,
   GlBadge,
 } from '@gitlab/ui';
+import FormattedStageCount from '~/cycle_analytics/components/formatted_stage_count.vue';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
 import {
@@ -42,6 +43,7 @@ export default {
     GlTable,
     GlBadge,
     TotalTime,
+    FormattedStageCount,
   },
   mixins: [Tracking.mixin()],
   props: {
@@ -175,7 +177,9 @@ export default {
     >
       <template #head(end_event)="data">
         <span>{{ data.label }}</span
-        ><gl-badge v-if="stageCount" class="gl-ml-2" size="sm">{{ stageCount }}</gl-badge>
+        ><gl-badge class="gl-ml-2" size="sm">
+          <formatted-stage-count :stage-count="stageCount" />
+        </gl-badge>
       </template>
       <template #cell(end_event)="{ item }">
         <div data-testid="vsa-stage-event">

ee/spec/frontend/analytics/cycle_analytics/components/path_navigation_spec.js

 import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import FormattedStageCount from '~/cycle_analytics/components/formatted_stage_count.vue';
 import Component from '~/cycle_analytics/components/path_navigation.vue';
 import { OVERVIEW_STAGE_ID } from '~/cycle_analytics/constants';
 import { transformedStagePathData, issueStage } from '../mock_data';
@@ -26,6 +27,7 @@ describe('Group PathNavigation', () => {
 
   const pathItemContent = () => pathNavigationItems().wrappers.map(extendedWrapper);
   const firstPopover = () => wrapper.findAllByTestId('stage-item-popover').at(0);
+  const findStageCountAtIndex = (index) => wrapper.findAllComponents(FormattedStageCount).at(index);
 
   const stagesWithCounts = transformedStagePathData.filter(
     (stage) => stage.id !== OVERVIEW_STAGE_ID,
@@ -76,7 +78,9 @@ describe('Group PathNavigation', () => {
       popoverStages.forEach((stage, index) => {
         const content = stage.findByTestId('stage-item-popover').html();
         expect(content).toContain('Items in stage');
-        expect(content).toContain(`${stagesWithCounts[index].stageCount} items`);
+        expect(findStageCountAtIndex(index).props('stageCount')).toBe(
+          stagesWithCounts[index].stageCount,
+        );
       });
     });
   });

locale/gitlab.pot

@@ -35661,6 +35661,9 @@ msgstr ""
 msgid "ValueStreamAnalyticsStage|We don't have enough data to show this stage."
 msgstr ""
 
+msgid "ValueStreamAnalytics|%{stageCount} items"
+msgstr ""
+
 msgid "ValueStreamAnalytics|%{value}M"
 msgstr ""
 

spec/frontend/cycle_analytics/formatted_stage_count_spec.js

+import { shallowMount } from '@vue/test-utils';
+import Component from '~/cycle_analytics/components/formatted_stage_count.vue';
+
+describe('Formatted Stage Count', () => {
+  let wrapper = null;
+
+  const createComponent = (stageCount = null) => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        stageCount,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each`
+    stageCount | expectedOutput
+    ${null}    | ${'-'}
+    ${1}       | ${'1 item'}
+    ${10}      | ${'10 items'}
+    ${1000}    | ${'1000 items'}
+    ${1001}    | ${'1000+ items'}
+  `('returns "$expectedOutput" for stageCount=$stageCount', ({ stageCount, expectedOutput }) => {
+    createComponent(stageCount);
+    expect(wrapper.text()).toContain(expectedOutput);
+  });
+});