Add ungrouped event table to Workflow History page (#926)

- Add an ungrouped event table to Workflow History page that sorts events by Event ID, and adds the pending events at the end
- Add some unit test coverage for Workflow History component

Author: adhityamamallan

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

@@ -12,10 +12,13 @@ import {
   waitForElementToBeRemoved,
 } from '@/test-utils/rtl';
 
+import { type HistoryEvent } from '@/__generated__/proto-ts/uber/cadence/api/v1/HistoryEvent';
 import * as usePageFiltersModule from '@/components/page-filters/hooks/use-page-filters';
 import { type Props as PageFiltersToggleProps } from '@/components/page-filters/page-filters-toggle/page-filters-toggle.types';
+import { type PageQueryParamValues } from '@/hooks/use-page-query-params/use-page-query-params.types';
 import { type GetWorkflowHistoryResponse } from '@/route-handlers/get-workflow-history/get-workflow-history.types';
 import { mockDescribeWorkflowResponse } from '@/views/workflow-page/__fixtures__/describe-workflow-response';
+import type workflowPageQueryParamsConfig from '@/views/workflow-page/config/workflow-page-query-params.config';
 
 import { completedActivityTaskEvents } from '../__fixtures__/workflow-history-activity-events';
 import { completedDecisionTaskEvents } from '../__fixtures__/workflow-history-decision-events';
@@ -32,7 +35,13 @@ jest.mock(
 
 jest.mock(
   '../workflow-history-timeline-group/workflow-history-timeline-group',
-  () => jest.fn(() => <div>Timeline group card</div>)
+  () =>
+    jest.fn(({ onReset, resetToDecisionEventId }) => (
+      <div>
+        Timeline group card
+        {resetToDecisionEventId && <button onClick={onReset}>Reset</button>}
+      </div>
+    ))
 );
 
 jest.mock(
@@ -69,6 +78,37 @@ jest.mock(
   () => jest.fn(() => <div>keep loading events</div>)
 );
 
+jest.mock(
+  '../workflow-history-expand-all-events-button/workflow-history-expand-all-events-button',
+  () =>
+    jest.fn(({ isExpandAllEvents, toggleIsExpandAllEvents }) => (
+      <button onClick={toggleIsExpandAllEvents}>
+        {isExpandAllEvents ? 'Collapse All' : 'Expand All'}
+      </button>
+    ))
+);
+
+jest.mock(
+  '../workflow-history-export-json-button/workflow-history-export-json-button',
+  () => jest.fn(() => <button>Export JSON</button>)
+);
+
+jest.mock(
+  '../workflow-history-ungrouped-table/workflow-history-ungrouped-table',
+  () => jest.fn(() => <div>Ungrouped Table</div>)
+);
+
+jest.mock(
+  '@/views/workflow-actions/workflow-actions-modal/workflow-actions-modal',
+  () =>
+    jest.fn(({ onClose }) => (
+      <div>
+        <div>Workflow Actions</div>
+        <button onClick={onClose}>Close</button>
+      </div>
+    ))
+);
+
 describe('WorkflowHistory', () => {
   it('renders page correctly', async () => {
     setup({});
@@ -180,6 +220,57 @@ describe('WorkflowHistory', () => {
       expect(screen.queryByText('keep loading events')).not.toBeInTheDocument();
     });
   });
+
+  it('should show no results when filtered events are empty', async () => {
+    setup({ emptyEvents: true });
+    expect(await screen.findByText('No Results')).toBeInTheDocument();
+  });
+
+  it('should render expand all events button', async () => {
+    setup({});
+    expect(await screen.findByText('Expand All')).toBeInTheDocument();
+  });
+
+  it('should render export JSON button', async () => {
+    setup({});
+    expect(await screen.findByText('Export JSON')).toBeInTheDocument();
+  });
+
+  it('should show "Ungroup" button in grouped view and call setQueryParams when clicked', async () => {
+    const { user, mockSetQueryParams } = await setup({
+      pageQueryParamsValues: { ungroupedHistoryViewEnabled: false },
+    });
+
+    const ungroupButton = await screen.findByText('Ungroup');
+    expect(ungroupButton).toBeInTheDocument();
+
+    await user.click(ungroupButton);
+    expect(mockSetQueryParams).toHaveBeenCalledWith({
+      ungroupedHistoryViewEnabled: 'true',
+    });
+  });
+
+  it('should show "Group" button when in ungrouped view', async () => {
+    await setup({
+      pageQueryParamsValues: { ungroupedHistoryViewEnabled: true },
+    });
+
+    expect(await screen.findByText('Group')).toBeInTheDocument();
+  });
+
+  it('should show ungrouped table when ungrouped view is enabled', async () => {
+    setup({ pageQueryParamsValues: { ungroupedHistoryViewEnabled: true } });
+    expect(await screen.findByText('Ungrouped Table')).toBeInTheDocument();
+  });
+
+  it('should show workflow actions modal when resetToDecisionEventId is set', async () => {
+    const { user } = await setup({ withResetModal: true });
+
+    const resetButton = await screen.findByText('Reset');
+    await user.click(resetButton);
+
+    expect(screen.getByText('Workflow Actions')).toBeInTheDocument();
+  });
 });
 
 async function setup({
@@ -188,19 +279,26 @@ async function setup({
   resolveLoadMoreManually,
   pageQueryParamsValues = {},
   hasNextPage,
+  emptyEvents,
+  withResetModal,
 }: {
   error?: boolean;
   summaryError?: boolean;
   resolveLoadMoreManually?: boolean;
-  pageQueryParamsValues?: Record<string, string>;
+  pageQueryParamsValues?: Partial<
+    PageQueryParamValues<typeof workflowPageQueryParamsConfig>
+  >;
   hasNextPage?: boolean;
+  emptyEvents?: boolean;
+  withResetModal?: boolean;
 }) {
   const user = userEvent.setup();
 
+  const mockSetQueryParams = jest.fn();
   if (pageQueryParamsValues) {
     jest.spyOn(usePageFiltersModule, 'default').mockReturnValue({
       queryParams: pageQueryParamsValues,
-      setQueryParams: jest.fn(),
+      setQueryParams: mockSetQueryParams,
       activeFiltersCount: 0,
       resetAllFilters: jest.fn(),
     });
@@ -255,10 +353,17 @@ async function setup({
                 );
               }
 
+              let events: Array<HistoryEvent> = completedActivityTaskEvents;
+              if (emptyEvents) {
+                events = [];
+              } else if (withResetModal) {
+                events = completedDecisionTaskEvents;
+              }
+
               return HttpResponse.json(
                 {
                   history: {
-                    events: completedActivityTaskEvents,
+                    events,
                   },
                   archived: false,
                   nextPageToken: hasNextPage ? 'mock-next-page-token' : '',
@@ -302,5 +407,11 @@ async function setup({
       screen.queryAllByText('Suspense placeholder')
     );
 
-  return { user, getRequestResolver, getRequestRejector, ...renderResult };
+  return {
+    user,
+    getRequestResolver,
+    getRequestRejector,
+    ...renderResult,
+    mockSetQueryParams,
+  };
 }

src/views/workflow-history/config/workflow-history-page-size.config.ts

@@ -0,0 +1,3 @@
+const WORKFLOW_HISTORY_PAGE_SIZE_CONFIG = 200;
+
+export default WORKFLOW_HISTORY_PAGE_SIZE_CONFIG;

src/views/workflow-history/helpers/__tests__/compare-ungrouped-events.test.ts

@@ -0,0 +1,107 @@
+import { type Timestamp } from '@/__generated__/proto-ts/google/protobuf/Timestamp';
+
+import {
+  pendingActivityTaskStartEvent,
+  pendingDecisionTaskStartEvent,
+} from '../../__fixtures__/workflow-history-pending-events';
+import { startWorkflowExecutionEvent } from '../../__fixtures__/workflow-history-single-events';
+import { type WorkflowEventStatus } from '../../workflow-history-event-status-badge/workflow-history-event-status-badge.types';
+import compareUngroupedEvents from '../compare-ungrouped-events';
+
+describe(compareUngroupedEvents.name, () => {
+  it('orders non-pending events by event ID', () => {
+    const eventA = {
+      id: '1',
+      label: 'Event A',
+      status: 'COMPLETED' as WorkflowEventStatus,
+      statusLabel: 'Completed',
+      event: startWorkflowExecutionEvent,
+    };
+    const eventB = {
+      id: '2',
+      label: 'Event B',
+      status: 'COMPLETED' as WorkflowEventStatus,
+      statusLabel: 'Completed',
+      event: startWorkflowExecutionEvent,
+    };
+
+    expect(compareUngroupedEvents(eventA, eventB)).toBe(-1);
+    expect(compareUngroupedEvents(eventB, eventA)).toBe(1);
+    expect(compareUngroupedEvents(eventA, eventA)).toBe(0);
+  });
+
+  it('puts non-pending events before pending events', () => {
+    const nonPendingEvent = {
+      id: '2',
+      label: 'Non-pending Event',
+      status: 'COMPLETED' as WorkflowEventStatus,
+      statusLabel: 'Completed',
+      event: startWorkflowExecutionEvent,
+    };
+    const pendingEvent = {
+      id: '1',
+      label: 'Pending Event',
+      status: 'WAITING' as WorkflowEventStatus,
+      statusLabel: 'Waiting',
+      event: pendingActivityTaskStartEvent,
+    };
+
+    expect(compareUngroupedEvents(nonPendingEvent, pendingEvent)).toBe(-1);
+    expect(compareUngroupedEvents(pendingEvent, nonPendingEvent)).toBe(1);
+  });
+
+  it('orders pending events by event time', () => {
+    const eventTimeA: Timestamp = { seconds: '1000', nanos: 0 };
+    const eventTimeB: Timestamp = { seconds: '2000', nanos: 0 };
+
+    const pendingEventA = {
+      id: '1',
+      label: 'Pending Event A',
+      status: 'WAITING' as WorkflowEventStatus,
+      statusLabel: 'Waiting',
+      event: {
+        ...pendingActivityTaskStartEvent,
+        eventTime: eventTimeA,
+      },
+    };
+    const pendingEventB = {
+      id: '2',
+      label: 'Pending Event B',
+      status: 'WAITING' as WorkflowEventStatus,
+      statusLabel: 'Waiting',
+      event: {
+        ...pendingDecisionTaskStartEvent,
+        eventTime: eventTimeB,
+      },
+    };
+
+    expect(compareUngroupedEvents(pendingEventA, pendingEventB)).toBe(-1000000);
+    expect(compareUngroupedEvents(pendingEventB, pendingEventA)).toBe(1000000);
+    expect(compareUngroupedEvents(pendingEventA, pendingEventA)).toBe(0);
+  });
+
+  it('returns 0 when pending events have no event time', () => {
+    const pendingEventA = {
+      id: '1',
+      label: 'Pending Event A',
+      status: 'WAITING' as WorkflowEventStatus,
+      statusLabel: 'Waiting',
+      event: {
+        ...pendingActivityTaskStartEvent,
+        eventTime: null,
+      },
+    };
+    const pendingEventB = {
+      id: '2',
+      label: 'Pending Event B',
+      status: 'WAITING' as WorkflowEventStatus,
+      statusLabel: 'Waiting',
+      event: {
+        ...pendingDecisionTaskStartEvent,
+        eventTime: null,
+      },
+    };
+
+    expect(compareUngroupedEvents(pendingEventA, pendingEventB)).toBe(0);
+  });
+});

src/views/workflow-history/helpers/__tests__/get-visible-groups-has-missing-events.test.ts

@@ -1,3 +1,4 @@
+import { type VisibleHistoryGroupRanges } from '../../workflow-history.types';
 import getVisibleGroupsHasMissingEvents from '../get-visible-groups-has-missing-events';
 
 describe('getVisibleGroupsHasMissingEvents', () => {
@@ -9,57 +10,67 @@ describe('getVisibleGroupsHasMissingEvents', () => {
   ];
 
   it('should return true if any event in the main visible range has missing events', () => {
-    const visibleRanges = {
+    const visibleRanges: VisibleHistoryGroupRanges = {
       startIndex: 0,
       endIndex: 2,
       compactStartIndex: 2,
       compactEndIndex: 3,
+      ungroupedStartIndex: -1,
+      ungroupedEndIndex: -1,
     };
     expect(getVisibleGroupsHasMissingEvents(groupEntries, visibleRanges)).toBe(
       true
     );
   });
 
   it('should return true if any event in the compact visible range has missing events', () => {
-    const visibleRanges = {
+    const visibleRanges: VisibleHistoryGroupRanges = {
       startIndex: 0,
       endIndex: 1,
       compactStartIndex: 2,
       compactEndIndex: 3,
+      ungroupedStartIndex: -1,
+      ungroupedEndIndex: -1,
     };
     expect(getVisibleGroupsHasMissingEvents(groupEntries, visibleRanges)).toBe(
       true
     );
   });
 
   it('should return false if no events in the visible range have missing events', () => {
-    const visibleRanges = {
+    const visibleRanges: VisibleHistoryGroupRanges = {
       startIndex: 0,
       endIndex: 0,
       compactStartIndex: 2,
       compactEndIndex: 2,
+      ungroupedStartIndex: -1,
+      ungroupedEndIndex: -1,
     };
     expect(getVisibleGroupsHasMissingEvents(groupEntries, visibleRanges)).toBe(
       false
     );
   });
 
   it('should handle an empty groupEntries array and return false', () => {
-    const visibleRanges = {
+    const visibleRanges: VisibleHistoryGroupRanges = {
       startIndex: 0,
       endIndex: 0,
       compactStartIndex: 0,
       compactEndIndex: 0,
+      ungroupedStartIndex: -1,
+      ungroupedEndIndex: -1,
     };
     expect(getVisibleGroupsHasMissingEvents([], visibleRanges)).toBe(false);
   });
 
   it('should handle out of range numbers and return false', () => {
-    const visibleRanges = {
+    const visibleRanges: VisibleHistoryGroupRanges = {
       startIndex: -1,
       endIndex: -1,
       compactStartIndex: 100,
       compactEndIndex: 200,
+      ungroupedStartIndex: -1,
+      ungroupedEndIndex: -1,
     };
     expect(getVisibleGroupsHasMissingEvents(groupEntries, visibleRanges)).toBe(
       false