Track selected event in url (#806)

* track selected event in url

* address comments

* describe useInitialSelectedEvent hook

Author: Assem-Uber

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

@@ -3,15 +3,27 @@ import { Suspense } from 'react';
 import { HttpResponse } from 'msw';
 import { VirtuosoMockContext } from 'react-virtuoso';
 
-import { act, render, screen, userEvent } from '@/test-utils/rtl';
+import {
+  act,
+  render,
+  screen,
+  userEvent,
+  waitForElementToBeRemoved,
+} from '@/test-utils/rtl';
 
+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 GetWorkflowHistoryResponse } from '@/route-handlers/get-workflow-history/get-workflow-history.types';
 import { describeWorkflowResponse } from '@/views/workflow-page/__fixtures__/describe-workflow-response';
 
 import { completedActivityTaskEvents } from '../__fixtures__/workflow-history-activity-events';
+import { completedDecisionTaskEvents } from '../__fixtures__/workflow-history-decision-events';
 import WorkflowHistory from '../workflow-history';
 
+jest.mock('@/hooks/use-page-query-params/use-page-query-params', () =>
+  jest.fn(() => [{ historySelectedEventId: '1' }, jest.fn()])
+);
+
 jest.mock(
   '../workflow-history-compact-event-card/workflow-history-compact-event-card',
   () => jest.fn(() => <div>Compact group Card</div>)
@@ -51,6 +63,11 @@ jest.mock('@/components/page-filters/hooks/use-page-filters', () =>
 
 jest.mock('../config/workflow-history-filters.config', () => []);
 
+jest.mock(
+  '@/components/section-loading-indicator/section-loading-indicator',
+  () => jest.fn(() => <div>keep loading events</div>)
+);
+
 describe('WorkflowHistory', () => {
   it('renders page correctly', async () => {
     setup({});
@@ -74,7 +91,7 @@ describe('WorkflowHistory', () => {
 
   it('throws an error if the request fails', async () => {
     try {
-      await act(() => setup({ error: true }));
+      await act(async () => await setup({ error: true }));
     } catch (error) {
       expect((error as Error)?.message).toBe(
         'Failed to fetch workflow history'
@@ -84,7 +101,7 @@ describe('WorkflowHistory', () => {
 
   it('throws an error if the workflow summary request fails', async () => {
     try {
-      await act(() => setup({ summaryError: true }));
+      await act(async () => await setup({ summaryError: true }));
     } catch (error) {
       expect((error as Error)?.message).toBe(
         'Failed to fetch workflow summary'
@@ -98,7 +115,7 @@ describe('WorkflowHistory', () => {
   });
 
   it('should hide filters on executing toggle button onClick', async () => {
-    const { user } = setup({});
+    const { user } = await setup({});
     const toggleButton = await screen.findByText('Filter Toggle');
 
     await user.click(toggleButton);
@@ -107,25 +124,83 @@ describe('WorkflowHistory', () => {
   });
 
   it('should show timeline when the Timeline button is clicked', async () => {
-    const { user } = setup({});
+    const { user } = await setup({});
     const timelineButton = await screen.findByText('Timeline');
 
     await user.click(timelineButton);
 
     expect(screen.queryByText('Timeline chart')).toBeInTheDocument();
   });
+
+  it('should show loading while searching for initial selectedEventId', async () => {
+    const { getRequestResolver } = await setup({
+      resolveLoadMoreManually: true,
+      pageQueryParamsValues: { historySelectedEventId: '3' },
+      hasNextPage: true,
+    });
+
+    await act(() => {
+      const resolver = getRequestResolver();
+      resolver({
+        history: {
+          events: [completedDecisionTaskEvents[0]],
+        },
+        archived: false,
+        nextPageToken: 'mock-next-page-token',
+        rawHistory: [],
+      });
+    });
+
+    expect(await screen.findByText('keep loading events')).toBeInTheDocument();
+
+    const secondPageResolver = getRequestResolver();
+    secondPageResolver({
+      history: {
+        events: [completedDecisionTaskEvents[1]],
+      },
+      archived: false,
+      nextPageToken: 'mock-next-page-token',
+      rawHistory: [],
+    });
+
+    expect(
+      await screen.findByText('keep loading events')
+    ).not.toBeInTheDocument();
+  });
 });
 
-function setup({
+async function setup({
   error,
   summaryError,
+  resolveLoadMoreManually,
+  pageQueryParamsValues = {},
+  hasNextPage,
 }: {
   error?: boolean;
   summaryError?: boolean;
+  resolveLoadMoreManually?: boolean;
+  pageQueryParamsValues?: Record<string, string>;
+  hasNextPage?: boolean;
 }) {
   const user = userEvent.setup();
+
+  if (pageQueryParamsValues) {
+    jest.spyOn(usePageFiltersModule, 'default').mockReturnValue({
+      queryParams: pageQueryParamsValues,
+      setQueryParams: jest.fn(),
+      activeFiltersCount: 0,
+      resetAllFilters: jest.fn(),
+    });
+  }
+
+  type ReqResolver = (r: GetWorkflowHistoryResponse) => void;
+  let requestResolver: ReqResolver = () => {};
+  let requestRejector = () => {};
+  const getRequestResolver = () => requestResolver;
+  const getRequestRejector = () => requestRejector;
+  let requestIndex = -1;
   const renderResult = render(
-    <Suspense>
+    <Suspense fallback={'Suspense placeholder'}>
       <WorkflowHistory
         params={{
           domain: 'test-domain',
@@ -141,25 +216,41 @@ function setup({
         {
           path: '/api/domains/:domain/:cluster/workflows/:workflowId/:runId/history',
           httpMethod: 'GET',
-          ...(error
-            ? {
-                httpResolver: () => {
-                  return HttpResponse.json(
-                    { message: 'Failed to fetch workflow history' },
-                    { status: 500 }
+          mockOnce: false,
+          httpResolver: async () => {
+            requestIndex = requestIndex + 1;
+            if (requestIndex > 0 && resolveLoadMoreManually) {
+              await new Promise((resolve, reject) => {
+                requestResolver = (result: GetWorkflowHistoryResponse) =>
+                  resolve(HttpResponse.json(result, { status: 200 }));
+                requestRejector = () =>
+                  reject(
+                    HttpResponse.json(
+                      { message: 'Failed to fetch workflow history' },
+                      { status: 500 }
+                    )
                   );
-                },
-              }
-            : {
-                jsonResponse: {
+              });
+            } else {
+              if (error)
+                return HttpResponse.json(
+                  { message: 'Failed to fetch workflow history' },
+                  { status: 500 }
+                );
+
+              return HttpResponse.json(
+                {
                   history: {
                     events: completedActivityTaskEvents,
                   },
                   archived: false,
-                  nextPageToken: '',
+                  nextPageToken: hasNextPage ? 'mock-next-page-token' : '',
                   rawHistory: [],
                 } satisfies GetWorkflowHistoryResponse,
-              }),
+                { status: 200 }
+              );
+            }
+          },
         },
         {
           path: '/api/domains/:domain/:cluster/workflows/:workflowId/:runId',
@@ -182,13 +273,17 @@ function setup({
     {
       wrapper: ({ children }) => (
         <VirtuosoMockContext.Provider
-          value={{ viewportHeight: 1000, itemHeight: 100 }}
+          value={{ viewportHeight: 300, itemHeight: 100 }}
         >
           {children}
         </VirtuosoMockContext.Provider>
       ),
     }
   );
+  if (!error && !summaryError)
+    await waitForElementToBeRemoved(() =>
+      screen.queryAllByText('Suspense placeholder')
+    );
 
-  return { user, ...renderResult };
+  return { user, getRequestResolver, getRequestRejector, ...renderResult };
 }

src/views/workflow-history/hooks/__tests__/use-initial-selected-event.test.ts

@@ -0,0 +1,62 @@
+import { renderHook } from '@/test-utils/rtl';
+
+import { completedActivityTaskEvents } from '../../__fixtures__/workflow-history-activity-events';
+import { completedDecisionTaskEvents } from '../../__fixtures__/workflow-history-decision-events';
+import useInitialSelectedEvent from '../use-initial-selected-event';
+
+jest.mock('../../helpers/get-history-event-group-id');
+
+describe('useInitialSelectedEvent', () => {
+  const events = [...completedDecisionTaskEvents];
+  const filteredEventGroupsEntries: [string, any][] = [
+    ['group1', completedDecisionTaskEvents],
+  ];
+
+  it('should return shouldSearchForInitialEvent as true when initialEventId is defined', () => {
+    const { result } = renderHook(() =>
+      useInitialSelectedEvent({
+        selectedEventId: '2',
+        events,
+        filteredEventGroupsEntries,
+      })
+    );
+
+    expect(result.current.shouldSearchForInitialEvent).toBe(true);
+  });
+
+  it('should return shouldSearchForInitialEvent as false when initialEventId is undefined', () => {
+    const { result } = renderHook(() =>
+      useInitialSelectedEvent({
+        selectedEventId: undefined,
+        events,
+        filteredEventGroupsEntries,
+      })
+    );
+
+    expect(result.current.shouldSearchForInitialEvent).toBe(false);
+  });
+
+  it('should return initialEventGroupIndex as undefined when initialEventId is defined & group is not found', () => {
+    const { result } = renderHook(() =>
+      useInitialSelectedEvent({
+        selectedEventId: '500',
+        events,
+        filteredEventGroupsEntries: [],
+      })
+    );
+
+    expect(result.current.initialEventGroupIndex).toBe(undefined);
+  });
+
+  it('should return initialEventFound as false when initialEventId is defined & event is not found', () => {
+    const { result } = renderHook(() =>
+      useInitialSelectedEvent({
+        selectedEventId: '500',
+        events,
+        filteredEventGroupsEntries,
+      })
+    );
+
+    expect(result.current.initialEventFound).toBe(false);
+  });
+});