Allow selecting items in Workflow History Timeline (#812)

Add onClickItem handler to Timeline that gets called when the VisJS Timeline registers a click on an item
Add "id" number to TimelineItem
Set selected event in query params and scroll to it when an item is selected in the timeline
Refactor Workflow Timeline Styles to share common styles across different items and states
Added rounding to non-timer items
Removed rounding from timer items

Author: adhityamamallan

src/components/timeline/timeline.tsx

@@ -3,14 +3,21 @@ import VisJSTimeline from 'react-visjs-timeline';
 
 import type { Props } from './timeline.types';
 
-export default function Timeline({ items, height = '400px' }: Props) {
+export default function Timeline({
+  items,
+  height = '400px',
+  onClickItem,
+}: Props) {
   return (
     <VisJSTimeline
       options={{
         height,
         verticalScroll: true,
       }}
       items={items}
+      clickHandler={({ item }: { item: number | null }) => {
+        if (item !== null) onClickItem(item);
+      }}
     />
   );
 }

src/components/timeline/timeline.types.ts

@@ -1,4 +1,5 @@
 export type TimelineItem = {
+  id: number;
   start: Date;
   end?: Date;
   content: string;
@@ -10,4 +11,5 @@ export type TimelineItem = {
 export type Props = {
   items: Array<TimelineItem>;
   height?: string;
+  onClickItem: (itemId: number) => void;
 };

src/views/workflow-history/workflow-history-timeline-chart/__tests__/workflow-history-timeline-chart.test.tsx

@@ -64,6 +64,8 @@ function setup({
       hasMoreEvents={hasMoreEvents}
       fetchMoreEvents={mockFetchMoreEvents}
       isFetchingMoreEvents={isFetchingMoreEvents}
+      selectedEventId={mockActivityEventGroup.events[0].eventId}
+      onClickEventGroup={jest.fn()}
     />
   );
 

src/views/workflow-history/workflow-history-timeline-chart/helpers/__tests__/convert-event-group-to-timeline-item.test.ts

@@ -14,8 +14,14 @@ jest.useFakeTimers().setSystemTime(new Date('2024-09-10'));
 describe(convertEventGroupToTimelineItem.name, () => {
   it('converts an event group to timeline chart item correctly', () => {
     expect(
-      convertEventGroupToTimelineItem(mockActivityEventGroup, {} as any)
+      convertEventGroupToTimelineItem({
+        group: mockActivityEventGroup,
+        index: 1,
+        classes: {} as any,
+        isSelected: false,
+      })
     ).toEqual({
+      id: 1,
       className: 'mock-class-name',
       content: 'Mock event',
       end: new Date('2024-09-07T22:16:20.000Z'),
@@ -27,11 +33,14 @@ describe(convertEventGroupToTimelineItem.name, () => {
 
   it('returns end time as present when the event is ongoing or waiting', () => {
     expect(
-      convertEventGroupToTimelineItem(
-        { ...mockActivityEventGroup, timeMs: null, status: 'ONGOING' },
-        {} as any
-      )
+      convertEventGroupToTimelineItem({
+        group: { ...mockActivityEventGroup, timeMs: null, status: 'ONGOING' },
+        index: 1,
+        classes: {} as any,
+        isSelected: false,
+      })
     ).toEqual({
+      id: 1,
       className: 'mock-class-name',
       content: 'Mock event',
       end: new Date('2024-09-10T00:00:00.000Z'),
@@ -43,15 +52,18 @@ describe(convertEventGroupToTimelineItem.name, () => {
 
   it('returns end time as timer end time when the event is an ongoing timer', () => {
     expect(
-      convertEventGroupToTimelineItem(
-        {
+      convertEventGroupToTimelineItem({
+        group: {
           ...mockTimerEventGroup,
           timeMs: null,
           status: 'ONGOING',
         },
-        {} as any
-      )
+        index: 1,
+        classes: {} as any,
+        isSelected: false,
+      })
     ).toEqual({
+      id: 1,
       className: 'mock-class-name',
       content: 'Mock event',
       end: new Date('2024-09-07T22:32:55.632Z'),

src/views/workflow-history/workflow-history-timeline-chart/helpers/__tests__/get-class-name-for-event-group.test.ts

@@ -11,82 +11,165 @@ import { type cssStyles } from '../../workflow-history-timeline-chart.styles';
 import getClassNameForEventGroup from '../get-class-name-for-event-group';
 
 const MOCK_CSS_CLASS_NAMES: ClsObjectFor<typeof cssStyles> = {
-  timer: 'mockTimer',
-  timerCompleted: 'mockTimerCompleted',
-  timerNegative: 'mockTimerNegative',
-  completed: 'mockCompleted',
-  ongoing: 'mockOngoing',
-  negative: 'mockNegative',
-  waiting: 'mockWaiting',
-  singleCompleted: 'mockSingleCompleted',
-  singleNegative: 'mockSingleNegative',
+  timerWaiting: 'timerWaiting',
+  timerCompleted: 'timerCompleted',
+  timerNegative: 'timerNegative',
+  regularCompleted: 'regularCompleted',
+  regularOngoing: 'regularOngoing',
+  regularNegative: 'regularNegative',
+  regularWaiting: 'regularWaiting',
+  singleCompleted: 'singleCompleted',
+  singleNegative: 'singleNegative',
+  timerWaitingSelected: 'timerWaitingSelected',
+  timerCompletedSelected: 'timerCompletedSelected',
+  timerNegativeSelected: 'timerNegativeSelected',
+  regularCompletedSelected: 'regularCompletedSelected',
+  regularOngoingSelected: 'regularOngoingSelected',
+  regularNegativeSelected: 'regularNegativeSelected',
+  regularWaitingSelected: 'regularWaitingSelected',
+  singleCompletedSelected: 'singleCompletedSelected',
+  singleNegativeSelected: 'singleNegativeSelected',
 };
 
 describe(getClassNameForEventGroup.name, () => {
   const tests: Array<{
     groupStatus: WorkflowEventStatus;
     kind?: 'event' | 'timer';
+    isSelected?: boolean;
     expectedClass: string;
   }> = [
     {
       groupStatus: 'ONGOING',
-      expectedClass: 'mockOngoing',
+      expectedClass: 'regularOngoing',
     },
     {
       groupStatus: 'CANCELED',
-      expectedClass: 'mockNegative',
+      expectedClass: 'regularNegative',
     },
     {
       groupStatus: 'COMPLETED',
-      expectedClass: 'mockCompleted',
+      expectedClass: 'regularCompleted',
     },
     {
       groupStatus: 'FAILED',
-      expectedClass: 'mockNegative',
+      expectedClass: 'regularNegative',
     },
     {
       groupStatus: 'WAITING',
-      expectedClass: 'mockWaiting',
+      expectedClass: 'regularWaiting',
     },
     {
       groupStatus: 'ONGOING',
       kind: 'timer',
-      expectedClass: 'mockTimer',
+      expectedClass: 'timerWaiting',
     },
     {
       groupStatus: 'CANCELED',
       kind: 'timer',
-      expectedClass: 'mockTimerNegative',
+      expectedClass: 'timerNegative',
     },
     {
       groupStatus: 'COMPLETED',
       kind: 'timer',
-      expectedClass: 'mockTimerCompleted',
+      expectedClass: 'timerCompleted',
     },
     {
       groupStatus: 'FAILED',
       kind: 'timer',
-      expectedClass: 'mockTimerNegative',
+      expectedClass: 'timerNegative',
     },
     {
       groupStatus: 'WAITING',
       kind: 'timer',
-      expectedClass: 'mockTimer',
+      expectedClass: 'timerWaiting',
     },
     {
       groupStatus: 'COMPLETED',
       kind: 'event',
-      expectedClass: 'mockSingleCompleted',
+      expectedClass: 'singleCompleted',
     },
     {
       groupStatus: 'CANCELED',
       kind: 'event',
-      expectedClass: 'mockSingleNegative',
+      expectedClass: 'singleNegative',
     },
     {
       groupStatus: 'FAILED',
       kind: 'event',
-      expectedClass: 'mockSingleNegative',
+      expectedClass: 'singleNegative',
+    },
+    {
+      groupStatus: 'ONGOING',
+      isSelected: true,
+      expectedClass: 'regularOngoingSelected',
+    },
+    {
+      groupStatus: 'CANCELED',
+      isSelected: true,
+      expectedClass: 'regularNegativeSelected',
+    },
+    {
+      groupStatus: 'COMPLETED',
+      isSelected: true,
+      expectedClass: 'regularCompletedSelected',
+    },
+    {
+      groupStatus: 'FAILED',
+      isSelected: true,
+      expectedClass: 'regularNegativeSelected',
+    },
+    {
+      groupStatus: 'WAITING',
+      isSelected: true,
+      expectedClass: 'regularWaitingSelected',
+    },
+    {
+      groupStatus: 'ONGOING',
+      kind: 'timer',
+      isSelected: true,
+      expectedClass: 'timerWaitingSelected',
+    },
+    {
+      groupStatus: 'CANCELED',
+      kind: 'timer',
+      isSelected: true,
+      expectedClass: 'timerNegativeSelected',
+    },
+    {
+      groupStatus: 'COMPLETED',
+      kind: 'timer',
+      isSelected: true,
+      expectedClass: 'timerCompletedSelected',
+    },
+    {
+      groupStatus: 'FAILED',
+      kind: 'timer',
+      isSelected: true,
+      expectedClass: 'timerNegativeSelected',
+    },
+    {
+      groupStatus: 'WAITING',
+      kind: 'timer',
+      isSelected: true,
+      expectedClass: 'timerWaitingSelected',
+    },
+    {
+      groupStatus: 'COMPLETED',
+      kind: 'event',
+      isSelected: true,
+      expectedClass: 'singleCompletedSelected',
+    },
+    {
+      groupStatus: 'CANCELED',
+      kind: 'event',
+      isSelected: true,
+      expectedClass: 'singleNegativeSelected',
+    },
+    {
+      groupStatus: 'FAILED',
+      kind: 'event',
+      isSelected: true,
+      expectedClass: 'singleNegativeSelected',
     },
   ];
 
@@ -105,7 +188,8 @@ describe(getClassNameForEventGroup.name, () => {
             ...group,
             status: test.groupStatus,
           },
-          MOCK_CSS_CLASS_NAMES
+          MOCK_CSS_CLASS_NAMES,
+          Boolean(test.isSelected)
         )
       ).toEqual(test.expectedClass);
     });

src/views/workflow-history/workflow-history-timeline-chart/helpers/__tests__/is-valid-class-name-key.test.ts

@@ -0,0 +1,37 @@
+import { type ClsObjectFor } from '@/hooks/use-styletron-classes';
+
+import { type cssStyles } from '../../workflow-history-timeline-chart.styles';
+import isValidClassNameKey from '../is-valid-class-name-key';
+
+const MOCK_CSS_CLASS_NAMES: ClsObjectFor<typeof cssStyles> = {
+  timerWaiting: 'timerWaiting',
+  timerCompleted: 'timerCompleted',
+  timerNegative: 'timerNegative',
+  regularCompleted: 'regularCompleted',
+  regularOngoing: 'regularOngoing',
+  regularNegative: 'regularNegative',
+  regularWaiting: 'regularWaiting',
+  singleCompleted: 'singleCompleted',
+  singleNegative: 'singleNegative',
+  timerWaitingSelected: 'timerWaitingSelected',
+  timerCompletedSelected: 'timerCompletedSelected',
+  timerNegativeSelected: 'timerNegativeSelected',
+  regularCompletedSelected: 'regularCompletedSelected',
+  regularOngoingSelected: 'regularOngoingSelected',
+  regularNegativeSelected: 'regularNegativeSelected',
+  regularWaitingSelected: 'regularWaitingSelected',
+  singleCompletedSelected: 'singleCompletedSelected',
+  singleNegativeSelected: 'singleNegativeSelected',
+};
+
+describe(isValidClassNameKey.name, () => {
+  it('returns true for a valid class name', () => {
+    expect(isValidClassNameKey(MOCK_CSS_CLASS_NAMES, 'timerWaiting')).toEqual(
+      true
+    );
+  });
+
+  it('returns false for an ivalid class name', () => {
+    expect(isValidClassNameKey(MOCK_CSS_CLASS_NAMES, 'invalid')).toEqual(false);
+  });
+});

src/views/workflow-history/workflow-history-timeline-chart/helpers/convert-event-group-to-timeline-item.ts

@@ -8,10 +8,17 @@ import { type cssStyles } from '../workflow-history-timeline-chart.styles';
 
 import getClassNameForEventGroup from './get-class-name-for-event-group';
 
-export default function convertEventGroupToTimelineItem(
-  group: HistoryEventsGroup,
-  classes: ClsObjectFor<typeof cssStyles>
-): TimelineItem | undefined {
+export default function convertEventGroupToTimelineItem({
+  group,
+  index,
+  classes,
+  isSelected,
+}: {
+  group: HistoryEventsGroup;
+  index: number;
+  classes: ClsObjectFor<typeof cssStyles>;
+  isSelected: boolean;
+}): TimelineItem | undefined {
   if (group.events.length === 0) {
     return undefined;
   }
@@ -43,11 +50,12 @@ export default function convertEventGroupToTimelineItem(
   }
 
   return {
+    id: index,
     start: groupStartDayjs.toDate(),
     end: groupEndDayjs.toDate(),
     content: group.label,
     title: `${group.label}: ${group.timeLabel}`,
     type: group.groupType === 'Event' ? 'point' : 'range',
-    className: getClassNameForEventGroup(group, classes),
+    className: getClassNameForEventGroup(group, classes, isSelected),
   };
 }