feat: History Page V2 - event group row in history grouped table (#1095)

- Add WorkflowHistoryEventGroup component that renders the single row for an event group
- Edit upstream components to pass required props
- Implement item expansion in History Page V2 using `useExpansionToggle` hook
- Fixes to grid styling
- Add Workflow Actions Modal to History Page V2

Signed-off-by: Adhitya Mamallan <[email protected]>

Author: adhityamamallan

src/views/workflow-history-v2/workflow-history-event-group-duration/__tests__/workflow-history-event-group-duration.test.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+
+import dayjs from 'dayjs';
+
+import { render, screen, act } from '@/test-utils/rtl';
+
+import { WorkflowExecutionCloseStatus } from '@/__generated__/proto-ts/uber/cadence/api/v1/WorkflowExecutionCloseStatus';
+
+import getFormattedEventsDuration from '../helpers/get-formatted-events-duration';
+import WorkflowHistoryEventGroupDuration from '../workflow-history-event-group-duration';
+import type { Props } from '../workflow-history-event-group-duration.types';
+
+jest.mock('../helpers/get-formatted-events-duration', () =>
+  jest.fn((startTime, endTime) =>
+    String(dayjs(endTime ?? undefined).diff(dayjs(startTime), 'seconds'))
+  )
+);
+
+const mockStartTime = new Date('2024-01-01T10:00:00Z').getTime();
+const mockCloseTime = new Date('2024-01-01T10:01:00Z').getTime();
+const mockNow = new Date('2024-01-01T10:02:00Z').getTime();
+
+describe('WorkflowHistoryEventGroupDuration', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(mockNow);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+  });
+
+  it('renders duration for completed event', () => {
+    setup({
+      closeTime: mockCloseTime,
+    });
+
+    expect(screen.getByText('60')).toBeInTheDocument();
+  });
+
+  it('renders duration for ongoing event', () => {
+    setup({
+      closeTime: null,
+    });
+    expect(screen.getByText('120')).toBeInTheDocument();
+  });
+
+  it('does not render duration for single event', () => {
+    setup({
+      eventsCount: 1,
+      hasMissingEvents: false,
+    });
+
+    expect(screen.queryByText('60')).not.toBeInTheDocument();
+  });
+
+  it('renders duration for single event with missing events', () => {
+    setup({
+      eventsCount: 1,
+      hasMissingEvents: true,
+    });
+
+    expect(screen.getByText('120')).toBeInTheDocument();
+  });
+
+  it('does not render duration when loading more events', () => {
+    setup({
+      loadingMoreEvents: true,
+    });
+
+    expect(screen.queryByText('60')).not.toBeInTheDocument();
+  });
+
+  it('does not render duration when workflow is archived without close time', () => {
+    setup({
+      closeTime: null,
+      workflowIsArchived: true,
+    });
+
+    expect(screen.queryByText('120')).not.toBeInTheDocument();
+  });
+
+  it('does not render duration when workflow has close status without close time', () => {
+    setup({
+      workflowCloseStatus:
+        WorkflowExecutionCloseStatus.WORKFLOW_EXECUTION_CLOSE_STATUS_COMPLETED,
+    });
+
+    expect(screen.queryByText('60')).not.toBeInTheDocument();
+  });
+
+  it('updates duration for ongoing event every second', () => {
+    setup({
+      closeTime: null,
+    });
+    expect(screen.getByText('120')).toBeInTheDocument();
+
+    (getFormattedEventsDuration as jest.Mock).mockClear();
+    act(() => {
+      jest.advanceTimersByTime(1000);
+      jest.setSystemTime(new Date(mockNow + 1000));
+    });
+    expect(screen.getByText('121')).toBeInTheDocument();
+    act(() => {
+      jest.advanceTimersByTime(1000);
+      jest.setSystemTime(new Date(mockNow + 2000));
+    });
+    expect(screen.getByText('122')).toBeInTheDocument();
+
+    expect(getFormattedEventsDuration).toHaveBeenCalledTimes(2);
+  });
+
+  it('cleans up interval when component unmounts', () => {
+    const { unmount } = setup();
+
+    const clearIntervalSpy = jest.spyOn(global, 'clearInterval');
+    unmount();
+
+    expect(clearIntervalSpy).toHaveBeenCalled();
+  });
+
+  it('uses workflow close time when close time is not provided', () => {
+    setup({
+      closeTime: null,
+      workflowCloseTime: mockCloseTime,
+    });
+
+    expect(getFormattedEventsDuration).toHaveBeenCalledWith(
+      mockStartTime,
+      mockCloseTime,
+      expect.any(Boolean)
+    );
+    expect(screen.getByText('60')).toBeInTheDocument();
+  });
+});
+
+function setup({
+  startTime = mockStartTime,
+  closeTime,
+  eventsCount = 2,
+  hasMissingEvents = false,
+  loadingMoreEvents = false,
+  workflowIsArchived = false,
+  workflowCloseStatus = WorkflowExecutionCloseStatus.WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID,
+  workflowCloseTime = null,
+}: Partial<Props> = {}) {
+  return render(
+    <WorkflowHistoryEventGroupDuration
+      startTime={startTime}
+      closeTime={closeTime}
+      eventsCount={eventsCount}
+      hasMissingEvents={hasMissingEvents}
+      loadingMoreEvents={loadingMoreEvents}
+      workflowIsArchived={workflowIsArchived}
+      workflowCloseStatus={workflowCloseStatus}
+      workflowCloseTime={workflowCloseTime}
+    />
+  );
+}

src/views/workflow-history-v2/workflow-history-event-group-duration/helpers/__tests__/get-formatted-events-duration.test.ts

@@ -0,0 +1,83 @@
+import getFormattedEventsDuration from '../get-formatted-events-duration';
+
+jest.mock('@/utils/data-formatters/format-duration', () => ({
+  __esModule: true,
+  default: jest.fn(
+    (duration, { minUnit }) =>
+      `mocked: ${duration.seconds}s${minUnit === 'ms' ? ` ${duration.nanos / 1000000}ms` : ''}`
+  ),
+}));
+
+const mockNow = new Date('2024-01-01T10:02:00Z');
+
+describe('getFormattedEventsDuration', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(mockNow);
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should return 0s for identical start and end times', () => {
+    const duration = getFormattedEventsDuration(
+      '2021-01-01T00:00:00Z',
+      '2021-01-01T00:00:00Z'
+    );
+    expect(duration).toEqual('mocked: 0s 0ms');
+  });
+
+  it('should return correct duration for 1 minute', () => {
+    const duration = getFormattedEventsDuration(
+      '2021-01-01T00:00:00Z',
+      '2021-01-01T00:01:00Z'
+    );
+    expect(duration).toEqual('mocked: 60s 0ms');
+  });
+
+  it('should return correct duration for 1 hour, 2 minutes, 3 seconds', () => {
+    const duration = getFormattedEventsDuration(
+      '2021-01-01T01:02:03Z',
+      '2021-01-01T02:04:06Z'
+    );
+    expect(duration).toEqual(`mocked: ${60 * 60 + 2 * 60 + 3}s 0ms`);
+  });
+
+  it('should handle endTime as null (use current time)', () => {
+    const start = new Date(mockNow.getTime() - 60000).toISOString(); // 1 minute ago
+    const duration = getFormattedEventsDuration(start, null);
+    expect(duration).toEqual('mocked: 60s 0ms');
+  });
+
+  it('should handle negative durations (start after end)', () => {
+    const duration = getFormattedEventsDuration(
+      '2021-01-01T01:00:00Z',
+      '2021-01-01T00:00:00Z'
+    );
+    expect(duration).toEqual('mocked: -3600s 0ms');
+  });
+
+  it('should handle numeric durations', () => {
+    const duration = getFormattedEventsDuration(1726652232190, 1726652292194);
+    expect(duration).toEqual('mocked: 60s 4ms');
+  });
+
+  it('should remove ms from duration when hideMs is true', () => {
+    const duration = getFormattedEventsDuration(
+      1726652232190,
+      1726652292194,
+      true
+    );
+    expect(duration).toEqual('mocked: 60s');
+  });
+
+  it('should not hide ms if there are no bigger units', () => {
+    const duration = getFormattedEventsDuration(
+      1726652232190,
+      1726652232194,
+      true
+    );
+    expect(duration).toEqual('mocked: 0s 4ms');
+  });
+});

src/views/workflow-history-v2/workflow-history-event-group-duration/helpers/get-formatted-events-duration.ts

@@ -0,0 +1,24 @@
+import formatDuration from '@/utils/data-formatters/format-duration';
+import dayjs from '@/utils/datetime/dayjs';
+
+export default function getFormattedEventsDuration(
+  startTime: Date | string | number | null,
+  endTime: Date | string | number | null | undefined,
+  hideMs: boolean = false
+) {
+  const end = endTime ? dayjs(endTime) : dayjs();
+  const start = dayjs(startTime);
+  const diff = end.diff(start);
+  const durationObj = dayjs.duration(diff);
+  const seconds = Math.floor(durationObj.asSeconds());
+
+  const duration = formatDuration(
+    {
+      seconds: seconds.toString(),
+      nanos: (durationObj.asMilliseconds() - seconds * 1000) * 1000000,
+    },
+    { separator: ' ', minUnit: hideMs && seconds > 0 ? 's' : 'ms' }
+  );
+
+  return duration;
+}

src/views/workflow-history-v2/workflow-history-event-group-duration/workflow-history-event-group-duration.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react';
+
+import getFormattedEventsDuration from './helpers/get-formatted-events-duration';
+import { type Props } from './workflow-history-event-group-duration.types';
+
+export default function WorkflowHistoryEventGroupDuration({
+  startTime,
+  closeTime,
+  workflowIsArchived,
+  workflowCloseStatus,
+  eventsCount,
+  hasMissingEvents,
+  loadingMoreEvents,
+  workflowCloseTime,
+}: Props) {
+  const endTime = closeTime || workflowCloseTime;
+  const workflowEnded =
+    workflowIsArchived ||
+    workflowCloseStatus !== 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID';
+  const singleEvent = eventsCount === 1 && !hasMissingEvents;
+
+  const hideDuration =
+    loadingMoreEvents || singleEvent || (workflowEnded && !endTime);
+  const isOngoing = !endTime && !hideDuration;
+
+  const [duration, setDuration] = useState<string>(() =>
+    getFormattedEventsDuration(startTime ?? null, endTime, isOngoing)
+  );
+
+  useEffect(() => {
+    setDuration(
+      getFormattedEventsDuration(startTime ?? null, endTime, isOngoing)
+    );
+    if (isOngoing) {
+      const interval = setInterval(() => {
+        setDuration(
+          getFormattedEventsDuration(startTime ?? null, endTime, true)
+        );
+      }, 1000);
+
+      return () => clearInterval(interval);
+    }
+  }, [startTime, endTime, isOngoing]);
+
+  if (!startTime || hideDuration) {
+    return null;
+  }
+
+  return <>{duration}</>;
+}

src/views/workflow-history-v2/workflow-history-event-group-duration/workflow-history-event-group-duration.types.ts

@@ -0,0 +1,12 @@
+import { type WorkflowExecutionCloseStatus } from '@/__generated__/proto-ts/uber/cadence/api/v1/WorkflowExecutionCloseStatus';
+
+export type Props = {
+  startTime: number | null | undefined;
+  closeTime: number | null | undefined;
+  workflowIsArchived: boolean;
+  workflowCloseStatus: WorkflowExecutionCloseStatus | null | undefined;
+  eventsCount: number;
+  loadingMoreEvents: boolean;
+  hasMissingEvents: boolean;
+  workflowCloseTime: number | null | undefined;
+};