Fix: update oncall rotation name to truncate

ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue

@@ -108,7 +108,7 @@ export default {
       <span
         class="details-cell gl-display-flex gl-justify-content-space-between gl-align-items-center gl-pl-3"
       >
-        <span class="gl-text-truncated">{{ $options.i18n.addRotationLabel }}</span>
+        <span class="gl-text-truncate">{{ $options.i18n.addRotationLabel }}</span>
       </span>
       <span
         v-for="(timeframeItem, index) in timeframeToDraw"
@@ -125,7 +125,13 @@ export default {
         <span
           class="details-cell gl-display-flex gl-justify-content-space-between gl-align-items-center gl-pl-3"
         >
-          <span class="gl-text-truncated">{{ rotation.name }}</span>
+          <span
+            v-gl-tooltip="{ boundary: 'viewport', title: rotation.name }"
+            class="gl-text-truncate"
+            :aria-label="rotation.name"
+            :data-testid="`rotation-name-${rotation.id}`"
+            >{{ rotation.name }}</span
+          >
           <gl-button-group class="gl-px-2">
             <gl-button
               v-gl-modal="$options.editRotationModalId"

ee/changelogs/unreleased/324714-long-name-overlap.yml

+---
+title: Update oncall schedule rotation names to truncate if they are too long
+merge_request: 56762
+author:
+type: fixed

ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap

@@ -12,7 +12,9 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
         class="details-cell gl-display-flex gl-justify-content-space-between gl-align-items-center gl-pl-3"
       >
         <span
-          class="gl-text-truncated"
+          aria-label="Rotation 242"
+          class="gl-text-truncate"
+          data-testid="rotation-name-gid://gitlab/IncidentManagement::OncallRotation/2"
         >
           Rotation 242
         </span>

ee/spec/frontend/oncall_schedule/schedule/components/rotations_list_section_spec.js

@@ -6,6 +6,8 @@ import RotationsListSection from 'ee/oncall_schedules/components/schedule/compon
 import { getTimeframeForWeeksView } from 'ee/oncall_schedules/components/schedule/utils';
 import { PRESET_TYPES } from 'ee/oncall_schedules/constants';
 import { useFakeDate } from 'helpers/fake_date';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { scheduleIid } from '../../mocks/apollo_mock';
 import mockRotations from '../../mocks/mock_rotation.json';
 
@@ -19,7 +21,8 @@ describe('RotationsListSectionComponent', () => {
     presetType = PRESET_TYPES.WEEKS,
     timeframe = mockTimeframeWeeks,
   } = {}) {
-    wrapper = mount(RotationsListSection, {
+    wrapper = extendedWrapper(
+      mount(RotationsListSection, {
         propsData: {
           presetType,
           timeframe,
@@ -32,13 +35,18 @@ describe('RotationsListSectionComponent', () => {
         stubs: {
           GlCard,
         },
-    });
+        directives: {
+          GlTooltip: createMockDirective(),
+        },
+      }),
+    );
   }
 
-  const findTimelineCells = () => wrapper.findAll('[data-testid="timeline-cell"]');
+  const findTimelineCells = () => wrapper.findAllByTestId('timeline-cell');
   const findRotationAssignees = () => wrapper.findAllComponents(RotationsAssignee);
-  const findCurrentDayIndicatorContent = () =>
-    wrapper.find('[data-testid="current-day-indicator"]');
+  const findCurrentDayIndicatorContent = () => wrapper.findByTestId('current-day-indicator');
+  const findRotationName = (id) => wrapper.findByTestId(`rotation-name-${id}`);
+  const findRotationNameTooltip = (id) => getBinding(findRotationName(id).element, 'gl-tooltip');
 
   afterEach(() => {
     if (wrapper) {
@@ -75,6 +83,12 @@ describe('RotationsListSectionComponent', () => {
         mockRotations[0].shifts.nodes[0].participant.user,
       );
     });
+
+    it('renders a tooltip with the rotation name', () => {
+      const rotationNameTT = findRotationNameTooltip(mockRotations[0].id);
+      expect(rotationNameTT.value).toBeDefined();
+      expect(rotationNameTT.value.title).toBe(mockRotations[0].name);
+    });
   });
 
   describe('when the timeframe does not include today', () => {