Truncate long custom stage names

Ensures we truncate long names in customizable
cycle analytics, and adds a tooltip.

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

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { approximateDuration } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import StageCardListItem from './stage_card_list_item.vue';
@@ -11,6 +11,9 @@ export default {
     Icon,
     GlButton,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     isDefaultStage: {
       type: Boolean,
@@ -40,6 +43,7 @@ export default {
   data() {
     return {
       isHover: false,
+      isTitleOverflowing: false,
     };
   },
   computed: {
@@ -53,6 +57,9 @@ export default {
       return this.canEdit;
     },
   },
+  mounted() {
+    this.checkIfTitleOverflows();
+  },
   methods: {
     handleDropdownAction(action) {
       this.$emit(action);
@@ -67,6 +74,12 @@ export default {
     handleHover(hoverState = false) {
       this.isHover = hoverState;
     },
+    checkIfTitleOverflows() {
+      const [titleEl] = this.$refs.title?.children;
+      if (titleEl) {
+        this.isTitleOverflowing = titleEl.offsetWidth > this.$refs.title.offsetWidth;
+      }
+    },
   },
 };
 </script>
@@ -74,8 +87,13 @@ export default {
 <template>
   <li @click="handleSelectStage" @mouseover="handleHover(true)" @mouseleave="handleHover()">
     <stage-card-list-item :is-active="isActive" :can-edit="editable">
-      <div class="stage-nav-item-cell stage-name p-0" :class="{ 'font-weight-bold': isActive }">
-        {{ title }}
+      <div
+        ref="title"
+        class="stage-nav-item-cell stage-name p-0 pr-2 text-truncate"
+        :class="{ 'font-weight-bold': isActive }"
+      >
+        <span v-if="isTitleOverflowing" v-gl-tooltip.hover :title="title">{{ title }}</span>
+        <span v-else>{{ title }}</span>
       </div>
       <div class="stage-nav-item-cell stage-median mr-4">
         <span v-if="hasValue">{{ median }}</span>

ee/spec/features/analytics/cycle_analytics/cycle_analytics_spec.rb

@@ -741,6 +741,22 @@ describe 'Group Value Stream Analytics', :js do
             expect(nav).not_to have_text(custom_stage_name)
           end
         end
+
+        context 'custom stage with a long name' do
+          let(:bad_custom_stage_name) { 'This is a very very very long stage name that will break the ui' }
+          let(:params) { { name: bad_custom_stage_name, start_event_identifier: start_event_identifier, end_event_identifier: end_event_identifier } }
+
+          before do
+            create_custom_stage
+            select_group
+
+            expect(page).to have_text bad_custom_stage_name
+          end
+
+          it 'will have a tooltip for the stage' do
+            expect(page.find(".stage-nav")).to have_css "span[title='#{bad_custom_stage_name}']"
+          end
+        end
       end
     end