Show Milestones in the timeline widget

Author: HDinger

frontend/src/app/shared/components/project-timeline-graph/project-timeline-graph.component.sass

@@ -92,3 +92,16 @@
     font-weight: var(--base-text-weight-semibold)
     cursor: pointer
     padding: 0 var(--base-size-6)
+
+  // Milestones: diamond shape via CSS rotate on the vis-dot
+  .vis-item.vis-point.op-timeline-milestone
+    background: none !important
+    border-color: transparent !important
+    cursor: pointer
+
+  .vis-item.vis-dot.op-timeline-milestone
+    width: 10px
+    height: 10px
+    border-width: 0
+    border-radius: 0
+    rotate: 45deg

frontend/src/app/shared/components/project-timeline-graph/project-timeline-graph.component.spec.ts

@@ -29,6 +29,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
+import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { ProjectTimelineItem, ProjectTimelineGraphComponent } from './project-timeline-graph.component';
 
 describe('ProjectTimelineGraphComponent', () => {
@@ -37,6 +38,7 @@ describe('ProjectTimelineGraphComponent', () => {
       return {
         'js.grid.widgets.project_timeline.tooltip_type_phase': 'Phase',
         'js.grid.widgets.project_timeline.tooltip_type_gate': 'Gate',
+        'js.grid.widgets.project_timeline.tooltip_type_milestone': 'Milestone',
       }[key] ?? key;
     },
   };
@@ -93,10 +95,18 @@ describe('ProjectTimelineGraphComponent', () => {
     finishGateName: null,
   };
 
+  const milestone = {
+    id: 10,
+    subject: 'Launch',
+    date: '2024-06-30',
+    typeId: 7,
+  };
+
   let fixture:ComponentFixture<ProjectTimelineGraphComponent>;
   let component:ProjectTimelineGraphComponent;
 
-  let buildData:(phases:unknown[]) => { items:ProjectTimelineItem[]; groups:{ id:string; content:string }[] };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-assignment
+  let buildData:(phases:unknown[], milestones:unknown[]) => { items:ProjectTimelineItem[]; groups:{ id:string; content:string }[] };
   let tooltipTemplate:(item:ProjectTimelineItem) => HTMLElement|string;
 
   beforeEach(async () => {
@@ -105,14 +115,16 @@ describe('ProjectTimelineGraphComponent', () => {
       providers: [
         { provide: I18nService, useValue: i18nStub },
         { provide: TimezoneService, useValue: timezoneStub },
+        { provide: PathHelperService, useValue: { workPackagePath: (id:string) => `/work_packages/${id}` } },
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ProjectTimelineGraphComponent);
     component = fixture.componentInstance;
 
-    // Set required input before detectChanges triggers ngAfterViewInit
+    // Set required inputs before detectChanges triggers ngAfterViewInit
     fixture.componentRef.setInput('phasesData', '[]');
+    fixture.componentRef.setInput('milestonesData', '[]');
     fixture.detectChanges();
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-assignment
@@ -123,31 +135,33 @@ describe('ProjectTimelineGraphComponent', () => {
 
   describe('buildData', () => {
     it('creates a range item for a phase with dates', () => {
-      const { items } = buildData([phaseWithDates]);
+      const { items } = buildData([phaseWithDates], []);
       const item = items.find((i) => i.id === 'phase-1');
 
       expect(item).toBeDefined();
       expect(item!.type).toBe('range');
-      expect(item!.group).toBe('lifecycle');
+      expect(item!.group).toBe('phases');
       expect(item!.content).toBe('Design');
       expect(item!.className).toContain('__hl_background_project_phase_definition_3');
+      expect(item!.itemType).toBe('phase');
       expect(item!.definitionId).toBe(3);
     });
 
     it('skips a phase without dates', () => {
-      const { items } = buildData([phaseWithoutDates]);
+      const { items } = buildData([phaseWithoutDates], []);
       expect(items.find((i) => i.id === 'phase-3')).toBeUndefined();
     });
 
     it('creates start and finish gate items when configured', () => {
-      const { items } = buildData([phaseWithGates]);
+      const { items } = buildData([phaseWithGates], []);
 
       const startGate = items.find((i) => i.id === 'gate-start-2');
       expect(startGate).toBeDefined();
       expect(startGate!.type).toBe('point');
       expect(startGate!.group).toBe('gates');
       expect(startGate!.title).toBe('Build Start');
       expect(startGate!.className).toContain('op-timeline-gate');
+      expect(startGate!.itemType).toBe('gate');
       expect(startGate!.content instanceof HTMLElement).toBe(true);
       expect((startGate!.content as HTMLElement).querySelector('.__hl_inline_project_phase_definition_5')).toBeTruthy();
 
@@ -157,7 +171,7 @@ describe('ProjectTimelineGraphComponent', () => {
     });
 
     it('does not create gate items when gates are disabled', () => {
-      const { items } = buildData([phaseWithDates]);
+      const { items } = buildData([phaseWithDates], []);
       expect(items.find((i) => i.id === 'gate-start-1')).toBeUndefined();
       expect(items.find((i) => i.id === 'gate-finish-1')).toBeUndefined();
     });
@@ -166,7 +180,7 @@ describe('ProjectTimelineGraphComponent', () => {
       let item:ProjectTimelineItem;
 
       beforeEach(() => {
-        ({ items: [item] } = buildData([oneDayPhase]));
+        ({ items: [item] } = buildData([oneDayPhase], []));
       });
 
       it('creates a range item', () => {
@@ -193,9 +207,22 @@ describe('ProjectTimelineGraphComponent', () => {
       });
     });
 
-    it('always creates gates and lifecycle groups', () => {
-      const { groups } = buildData([]);
-      expect(groups.map((g) => g.id)).toEqual(['gates', 'lifecycle']);
+    it('creates a milestone item', () => {
+      const { items } = buildData([], [milestone]);
+      const item = items.find((i) => i.id === 'milestone-10');
+
+      expect(item).toBeDefined();
+      expect(item!.type).toBe('point');
+      expect(item!.group).toBe('milestones');
+      expect(item!.title).toBe('Launch');
+      expect(item!.className).toContain('op-timeline-milestone');
+      expect(item!.className).toContain('__hl_background_type_7');
+      expect(item!.itemType).toBe('milestone');
+    });
+
+    it('always creates gates, lifecycle, and milestones groups', () => {
+      const { groups } = buildData([], []);
+      expect(groups.map((g) => g.id)).toEqual(['gates', 'phases', 'milestones']);
     });
   });
 
@@ -218,6 +245,7 @@ describe('ProjectTimelineGraphComponent', () => {
           content: 'Design',
           title: 'Design',
           className: '__hl_background_project_phase_definition_3',
+          itemType: 'phase',
           definitionId: 3,
         }) as HTMLElement;
       });
@@ -282,6 +310,7 @@ describe('ProjectTimelineGraphComponent', () => {
           content: document.createElement('i'),
           title: 'Build Start',
           className: 'op-timeline-gate __hl_background_project_phase_definition_5',
+          itemType: 'gate',
           definitionId: 5,
         }) as HTMLElement;
       });
@@ -305,5 +334,42 @@ describe('ProjectTimelineGraphComponent', () => {
         expect(result.querySelector('.__hl_inline_project_phase_definition_5')).toBeTruthy();
       });
     });
+
+    describe('for a milestone item', () => {
+      let result:HTMLElement;
+
+      beforeEach(() => {
+        result = tooltipTemplate({
+          id: 'milestone-10',
+          group: 'milestones',
+          type: 'point',
+          start: new Date('2024-06-30'),
+          content: '',
+          title: 'Launch',
+          className: 'op-timeline-milestone __hl_background_type_7',
+          itemType: 'milestone',
+          typeId: 7,
+        }) as HTMLElement;
+      });
+
+      it('shows "Milestone" as the type label', () => {
+        const meta = result.querySelector('.op-timeline-tooltip--meta-row');
+        expect(meta?.textContent).toContain('Milestone');
+      });
+
+      it('shows only a single date (no range)', () => {
+        const meta = result.querySelector('.op-timeline-tooltip--meta-row');
+        expect(meta?.textContent).not.toContain('–');
+      });
+
+      it('shows the milestone name', () => {
+        const name = result.querySelector('.op-timeline-tooltip--name');
+        expect(name?.textContent).toBe('Launch');
+      });
+
+      it('applies the type highlight class to the icon', () => {
+        expect(result.querySelector('.__hl_inline_type_7')).toBeTruthy();
+      });
+    });
   });
 });