feat: Workflow History V2 - show Failed and Pending events in nav bar (#1128)

* Create WorkflowHistoryNavigationBarEventsMenu to show list of events (paginated if >10)
* Use the events menu component in the nav bar to show failed and pending events
* Filter out failed and pending events in WorkflowHistoryV2 to pass to nav bar
* Use React state to handle scrolling to events in both grouped & ungrouped views

Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com>

Author: adhityamamallan

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

@@ -16,12 +16,29 @@ import { type HistoryEvent } from '@/__generated__/proto-ts/uber/cadence/api/v1/
 import * as usePageFiltersModule from '@/components/page-filters/hooks/use-page-filters';
 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 {
+  type PendingActivityTaskStartEvent,
+  type PendingDecisionTaskStartEvent,
+} from '@/views/workflow-history/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 '../../workflow-history/__fixtures__/workflow-history-activity-events';
-import { completedDecisionTaskEvents } from '../../workflow-history/__fixtures__/workflow-history-decision-events';
+import {
+  completedActivityTaskEvents,
+  failedActivityTaskEvents,
+  scheduleActivityTaskEvent,
+} from '../../workflow-history/__fixtures__/workflow-history-activity-events';
+import {
+  completedDecisionTaskEvents,
+  failedDecisionTaskEvents,
+  scheduleDecisionTaskEvent,
+} from '../../workflow-history/__fixtures__/workflow-history-decision-events';
+import {
+  pendingActivityTaskStartEvent,
+  pendingDecisionTaskStartEvent,
+} from '../../workflow-history/__fixtures__/workflow-history-pending-events';
 import { WorkflowHistoryContext } from '../../workflow-history/workflow-history-context-provider/workflow-history-context-provider';
+import { type Props as NavbarProps } from '../workflow-history-navigation-bar/workflow-history-navigation-bar.types';
 import WorkflowHistoryV2 from '../workflow-history-v2';
 
 jest.mock('@/hooks/use-page-query-params/use-page-query-params', () =>
@@ -111,9 +128,22 @@ jest.mock(
 jest.mock(
   '../workflow-history-navigation-bar/workflow-history-navigation-bar',
   () =>
-    jest.fn(() => (
-      <div data-testid="workflow-history-navigation-bar">Navigation Bar</div>
-    ))
+    jest.fn(
+      ({ failedEventsMenuItems, pendingEventsMenuItems }: NavbarProps) => (
+        <div data-testid="workflow-history-navigation-bar">
+          {failedEventsMenuItems && failedEventsMenuItems.length > 0 && (
+            <div data-testid="failed-events-menu-items-count">
+              {failedEventsMenuItems.length} failed events
+            </div>
+          )}
+          {pendingEventsMenuItems && pendingEventsMenuItems.length > 0 && (
+            <div data-testid="pending-events-menu-items-count">
+              {pendingEventsMenuItems.length} pending events
+            </div>
+          )}
+        </div>
+      )
+    )
 );
 
 jest.mock('@/utils/decode-url-params', () => jest.fn((params) => params));
@@ -408,6 +438,30 @@ describe(WorkflowHistoryV2.name, () => {
       await screen.findByTestId('ungrouped-selected-event-id')
     ).toHaveTextContent('test-event-id');
   });
+
+  it('passes failed events menu items to navigation bar when failed events exist', async () => {
+    await setup({
+      historyEvents: [...failedActivityTaskEvents, ...failedDecisionTaskEvents],
+    });
+
+    const failedItemsCounter = await screen.findByTestId(
+      'failed-events-menu-items-count'
+    );
+    expect(failedItemsCounter).toHaveTextContent('2 failed events');
+  });
+
+  it('passes pending events menu items to navigation bar when pending events exist', async () => {
+    await setup({
+      historyEvents: [scheduleActivityTaskEvent, scheduleDecisionTaskEvent],
+      pendingActivities: [pendingActivityTaskStartEvent],
+      pendingDecision: pendingDecisionTaskStartEvent,
+    });
+
+    const pendingItemsCounter = await screen.findByTestId(
+      'pending-events-menu-items-count'
+    );
+    expect(pendingItemsCounter).toHaveTextContent('2 pending events');
+  });
 });
 
 async function setup({
@@ -417,6 +471,9 @@ async function setup({
   pageQueryParamsValues = {},
   hasNextPage,
   ungroupedViewPreference,
+  historyEvents = completedActivityTaskEvents,
+  pendingActivities,
+  pendingDecision,
 }: {
   error?: boolean;
   summaryError?: boolean;
@@ -426,7 +483,10 @@ async function setup({
   >;
   hasNextPage?: boolean;
   ungroupedViewPreference?: boolean | null;
-}) {
+  historyEvents?: Array<HistoryEvent>;
+  pendingActivities?: Array<PendingActivityTaskStartEvent>;
+  pendingDecision?: PendingDecisionTaskStartEvent | null;
+} = {}) {
   const user = userEvent.setup();
 
   const mockSetQueryParams = jest.fn();
@@ -497,12 +557,10 @@ async function setup({
                 );
               }
 
-              const events: Array<HistoryEvent> = completedActivityTaskEvents;
-
               return HttpResponse.json(
                 {
                   history: {
-                    events,
+                    events: historyEvents,
                   },
                   archived: false,
                   nextPageToken: hasNextPage ? 'mock-next-page-token' : '',
@@ -526,7 +584,18 @@ async function setup({
                 },
               }
             : {
-                jsonResponse: mockDescribeWorkflowResponse,
+                httpResolver: () => {
+                  const describeResponse = {
+                    ...mockDescribeWorkflowResponse,
+                    ...(pendingActivities && pendingActivities.length > 0
+                      ? {
+                          pendingActivities,
+                        }
+                      : {}),
+                    ...(pendingDecision ? { pendingDecision } : {}),
+                  };
+                  return HttpResponse.json(describeResponse, { status: 200 });
+                },
               }),
         },
       ],

src/views/workflow-history-v2/helpers/__tests__/get-navigation-bar-events-menu-items.test.ts

@@ -0,0 +1,135 @@
+import {
+  mockActivityEventGroup,
+  mockDecisionEventGroup,
+} from '@/views/workflow-history/__fixtures__/workflow-history-event-groups';
+import { type HistoryEventsGroup } from '@/views/workflow-history/workflow-history.types';
+
+import { type EventGroupEntry } from '../../workflow-history-v2.types';
+import getNavigationBarEventsMenuItems from '../get-navigation-bar-events-menu-items';
+
+jest.mock(
+  '../../workflow-history-event-group/helpers/get-event-group-filtering-type',
+  () =>
+    jest.fn((group: HistoryEventsGroup) => {
+      if (group.groupType === 'Activity') return 'ACTIVITY';
+      if (group.groupType === 'Decision') return 'DECISION';
+      return 'WORKFLOW';
+    })
+);
+
+describe(getNavigationBarEventsMenuItems.name, () => {
+  it('should return an empty array when eventGroupsEntries is empty', () => {
+    const eventGroupsEntries: Array<EventGroupEntry> = [];
+
+    const result = getNavigationBarEventsMenuItems(
+      eventGroupsEntries,
+      () => true
+    );
+
+    expect(result).toEqual([]);
+  });
+
+  it('should skip groups with no events', () => {
+    const groupWithoutEvents: HistoryEventsGroup = {
+      ...mockActivityEventGroup,
+      events: [],
+    };
+    const eventGroupsEntries: Array<EventGroupEntry> = [
+      ['group1', groupWithoutEvents],
+    ];
+
+    const result = getNavigationBarEventsMenuItems(
+      eventGroupsEntries,
+      () => true
+    );
+
+    expect(result).toEqual([]);
+  });
+
+  it('should skip groups filtered out by filterFn', () => {
+    const eventGroupsEntries: Array<EventGroupEntry> = [
+      ['group1', mockActivityEventGroup],
+      ['group2', mockDecisionEventGroup],
+    ];
+    const filterFn = jest.fn((group: HistoryEventsGroup) => {
+      return group.groupType === 'Decision';
+    });
+
+    const result = getNavigationBarEventsMenuItems(
+      eventGroupsEntries,
+      filterFn
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      eventId: '4', // last eventId from completedDecisionTaskEvents
+      label: 'Mock decision',
+      type: 'DECISION',
+    });
+  });
+
+  it('should include groups that pass filterFn', () => {
+    const eventGroupsEntries: Array<EventGroupEntry> = [
+      ['group1', mockActivityEventGroup],
+      ['group2', mockDecisionEventGroup],
+    ];
+
+    const result = getNavigationBarEventsMenuItems(
+      eventGroupsEntries,
+      () => true
+    );
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toEqual({
+      eventId: '10', // last eventId from completedActivityTaskEvents
+      label: 'Mock event',
+      type: 'ACTIVITY',
+    });
+    expect(result[1]).toEqual({
+      eventId: '4', // last eventId from completedDecisionTaskEvents
+      label: 'Mock decision',
+      type: 'DECISION',
+    });
+  });
+
+  it('should use shortLabel when available, otherwise use label', () => {
+    const groupWithShortLabel: HistoryEventsGroup = {
+      ...mockActivityEventGroup,
+      label: 'Long Label',
+      shortLabel: 'Short',
+    };
+    const groupWithoutShortLabel: HistoryEventsGroup = {
+      ...mockDecisionEventGroup,
+      label: 'Decision Label',
+    };
+    const eventGroupsEntries: Array<EventGroupEntry> = [
+      ['group1', groupWithShortLabel],
+      ['group2', groupWithoutShortLabel],
+    ];
+
+    const result = getNavigationBarEventsMenuItems(
+      eventGroupsEntries,
+      () => true
+    );
+
+    expect(result).toHaveLength(2);
+    expect(result[0].label).toBe('Short');
+    expect(result[1].label).toBe('Decision Label');
+  });
+
+  it('should use the last event eventId from each group', () => {
+    const eventGroupsEntries: Array<EventGroupEntry> = [
+      ['group1', mockActivityEventGroup],
+    ];
+
+    const result = getNavigationBarEventsMenuItems(
+      eventGroupsEntries,
+      () => true
+    );
+
+    expect(result).toHaveLength(1);
+    // completedActivityTaskEvents has events with ids: '7', '9', '10'
+    // Last eventId should be '10'
+    expect(result[0].eventId).toBe('10');
+  });
+});

src/views/workflow-history-v2/helpers/get-navigation-bar-events-menu-items.ts

@@ -0,0 +1,28 @@
+import { type HistoryEventsGroup } from '@/views/workflow-history/workflow-history.types';
+
+import getEventGroupFilteringType from '../workflow-history-event-group/helpers/get-event-group-filtering-type';
+import { type NavigationBarEventsMenuItem } from '../workflow-history-navigation-bar-events-menu/workflow-history-navigation-bar-events-menu.types';
+import { type EventGroupEntry } from '../workflow-history-v2.types';
+
+export default function getNavigationBarEventsMenuItems(
+  eventGroupsEntries: Array<EventGroupEntry>,
+  filterFn: (group: HistoryEventsGroup) => boolean
+): Array<NavigationBarEventsMenuItem> {
+  return eventGroupsEntries.reduce<Array<NavigationBarEventsMenuItem>>(
+    (acc, [_, group]) => {
+      const lastEventId = group.events.at(-1)?.eventId;
+      if (!lastEventId) return acc;
+
+      if (!filterFn(group)) return acc;
+
+      acc.push({
+        eventId: lastEventId,
+        label: group.shortLabel ?? group.label,
+        type: getEventGroupFilteringType(group),
+      });
+
+      return acc;
+    },
+    []
+  );
+}