Add latest changes from gitlab-org/gitlab@master

2 files changed, 31 insertions, 4 deletions

diff --git a/app/assets/javascripts/cycle_analytics/components/formatted_stage_count.vue b/app/assets/javascripts/cycle_analytics/components/formatted_stage_count.vue
new file mode 100644
index 00000000000..0fcfeb93e34
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/formatted_stage_count.vue
@@ -0,0 +1,28 @@
+<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>
diff --git a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue b/app/assets/javascripts/cycle_analytics/components/path_navigation.vue
index c1e33f73b13..aa929e076a5 100644
--- a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue
+++ b/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>