feat: Add grouped table with raw JSON of events (#1093)

* Add fetching and grouping logic for Workflow History V2 page & components, based on the existing fetching logic for V1
* Add grouped events table, with JSON placeholder for each event group row

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

Author: adhityamamallan

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

@@ -0,0 +1,3 @@
+const WORKFLOW_HISTORY_FETCH_EVENTS_THROTTLE_MS_CONFIG = 2000;
+
+export default WORKFLOW_HISTORY_FETCH_EVENTS_THROTTLE_MS_CONFIG;

src/views/workflow-history-v2/config/workflow-history-fetch-events-throttle-ms.config.ts

@@ -0,0 +1,3 @@
+const WORKFLOW_HISTORY_SET_RANGE_THROTTLE_MS_CONFIG = 700;
+
+export default WORKFLOW_HISTORY_SET_RANGE_THROTTLE_MS_CONFIG;

src/views/workflow-history-v2/config/workflow-history-set-range-throttle-ms.config.ts

@@ -1,14 +1,34 @@
 import React from 'react';
 
-import { render, screen } from '@/test-utils/rtl';
+import { VirtuosoMockContext } from 'react-virtuoso';
+
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import { RequestError } from '@/utils/request/request-error';
+import { mockActivityEventGroup } from '@/views/workflow-history/__fixtures__/workflow-history-event-groups';
+import { type HistoryEventsGroup } from '@/views/workflow-history/workflow-history.types';
 
 import WorkflowHistoryGroupedTable from '../workflow-history-grouped-table';
 
+jest.mock(
+  '@/views/workflow-history/workflow-history-timeline-load-more/workflow-history-timeline-load-more',
+  () =>
+    jest.fn(({ error, hasNextPage, isFetchingNextPage, fetchNextPage }) => (
+      <div data-testid="timeline-load-more">
+        {error && <div data-testid="load-more-error">Error loading more</div>}
+        {hasNextPage && <div data-testid="has-next-page">Has more</div>}
+        {isFetchingNextPage && <div data-testid="is-fetching">Fetching...</div>}
+        <button onClick={fetchNextPage} data-testid="fetch-more-button">
+          Fetch More
+        </button>
+      </div>
+    ))
+);
+
 describe(WorkflowHistoryGroupedTable.name, () => {
   it('should render all column headers in correct order', () => {
     setup();
 
-    expect(screen.getByText('ID')).toBeInTheDocument();
     expect(screen.getByText('Event group')).toBeInTheDocument();
     expect(screen.getByText('Status')).toBeInTheDocument();
     expect(screen.getByText('Time')).toBeInTheDocument();
@@ -19,14 +39,98 @@ describe(WorkflowHistoryGroupedTable.name, () => {
   it('should apply grid layout to table header', () => {
     setup();
 
-    const header = screen.getByText('ID').parentElement;
+    const header = screen.getByText('Event group').parentElement;
     expect(header).toHaveStyle({
       display: 'grid',
       gridTemplateColumns: '0.3fr 2fr 1fr 1.2fr 1fr 3fr minmax(0, 70px)',
     });
   });
+
+  it('should render event groups data', () => {
+    const mockEventGroups: Array<[string, HistoryEventsGroup]> = [
+      ['group-1', mockActivityEventGroup],
+    ];
+    setup({ eventGroupsById: mockEventGroups });
+
+    expect(
+      screen.getByText(JSON.stringify(mockActivityEventGroup))
+    ).toBeInTheDocument();
+  });
+
+  it('should render timeline load more component with correct props', () => {
+    const mockFetchMoreEvents = jest.fn();
+
+    setup({
+      error: new RequestError('Test error', '/mock-history-url', 500),
+      hasMoreEvents: true,
+      isFetchingMoreEvents: false,
+      fetchMoreEvents: mockFetchMoreEvents,
+    });
+
+    expect(screen.getByTestId('timeline-load-more')).toBeInTheDocument();
+    expect(screen.getByTestId('has-next-page')).toBeInTheDocument();
+  });
+
+  it('should show error state in load more component', () => {
+    setup({ error: new RequestError('Test error', '/mock-history-url', 500) });
+
+    expect(screen.getByTestId('load-more-error')).toBeInTheDocument();
+  });
+
+  it('should show fetching state in load more component', () => {
+    setup({ isFetchingMoreEvents: true });
+
+    expect(screen.getByTestId('is-fetching')).toBeInTheDocument();
+  });
 });
 
-function setup() {
-  return render(<WorkflowHistoryGroupedTable />);
+function setup({
+  eventGroupsById = [],
+  error = null,
+  hasMoreEvents = false,
+  isFetchingMoreEvents = false,
+  fetchMoreEvents = jest.fn(),
+  setVisibleRange = jest.fn(),
+  initialStartIndex,
+}: {
+  eventGroupsById?: Array<[string, HistoryEventsGroup]>;
+  error?: RequestError | null;
+  hasMoreEvents?: boolean;
+  isFetchingMoreEvents?: boolean;
+  fetchMoreEvents?: () => void;
+  setVisibleRange?: ({
+    startIndex,
+    endIndex,
+  }: {
+    startIndex: number;
+    endIndex: number;
+  }) => void;
+  initialStartIndex?: number;
+} = {}) {
+  const virtuosoRef = { current: null };
+  const user = userEvent.setup();
+
+  render(
+    <VirtuosoMockContext.Provider
+      value={{ viewportHeight: 1000, itemHeight: 160 }}
+    >
+      <WorkflowHistoryGroupedTable
+        eventGroupsById={eventGroupsById}
+        virtuosoRef={virtuosoRef}
+        initialStartIndex={initialStartIndex}
+        setVisibleRange={setVisibleRange}
+        error={error}
+        hasMoreEvents={hasMoreEvents}
+        fetchMoreEvents={fetchMoreEvents}
+        isFetchingMoreEvents={isFetchingMoreEvents}
+      />
+    </VirtuosoMockContext.Provider>
+  );
+
+  return {
+    user,
+    virtuosoRef,
+    mockFetchMoreEvents: fetchMoreEvents,
+    mockSetVisibleRange: setVisibleRange,
+  };
 }

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

@@ -1,20 +1,58 @@
+import { Virtuoso } from 'react-virtuoso';
+
+import WorkflowHistoryTimelineLoadMore from '@/views/workflow-history/workflow-history-timeline-load-more/workflow-history-timeline-load-more';
+
 import { styled } from './workflow-history-grouped-table.styles';
+import { type Props } from './workflow-history-grouped-table.types';
 
-/**
- * To be used in History v2
- */
-export default function WorkflowHistoryGroupedTable() {
+export default function WorkflowHistoryGroupedTable({
+  eventGroupsById,
+  virtuosoRef,
+  initialStartIndex,
+  setVisibleRange,
+  error,
+  hasMoreEvents,
+  fetchMoreEvents,
+  isFetchingMoreEvents,
+}: Props) {
   return (
     <>
       <styled.TableHeader>
-        <div>ID</div>
+        <div />
         <div>Event group</div>
         <div>Status</div>
         <div>Time</div>
         <div>Duration</div>
         <div>Details</div>
       </styled.TableHeader>
-      {/* TODO @adhityamamallan: Add table body with Virtuoso  with new design*/}
+      <Virtuoso
+        useWindowScroll
+        data={eventGroupsById}
+        ref={virtuosoRef}
+        defaultItemHeight={160}
+        rangeChanged={setVisibleRange}
+        {...(initialStartIndex === undefined
+          ? {}
+          : {
+              initialTopMostItemIndex: {
+                index: initialStartIndex,
+                align: 'start',
+                behavior: 'auto',
+              },
+            })}
+        // TODO: update this with the actual implementation for groupedEntry
+        itemContent={(_, [__, group]) => <div>{JSON.stringify(group)}</div>}
+        components={{
+          Footer: () => (
+            <WorkflowHistoryTimelineLoadMore
+              error={error}
+              fetchNextPage={fetchMoreEvents}
+              hasNextPage={hasMoreEvents}
+              isFetchingNextPage={isFetchingMoreEvents}
+            />
+          ),
+        }}
+      />
     </>
   );
 }

src/views/workflow-history-v2/workflow-history-grouped-table/workflow-history-grouped-table.tsx

@@ -0,0 +1,24 @@
+import { type RefObject } from 'react';
+
+import { type VirtuosoHandle } from 'react-virtuoso';
+
+import { type RequestError } from '@/utils/request/request-error';
+import { type HistoryEventsGroup } from '@/views/workflow-history/workflow-history.types';
+
+export type Props = {
+  eventGroupsById: Array<[string, HistoryEventsGroup]>;
+  virtuosoRef: RefObject<VirtuosoHandle>;
+  initialStartIndex?: number;
+  setVisibleRange: ({
+    startIndex,
+    endIndex,
+  }: {
+    startIndex: number;
+    endIndex: number;
+  }) => void;
+  // Props to fetch more history
+  error: RequestError | null;
+  hasMoreEvents: boolean;
+  fetchMoreEvents: () => void;
+  isFetchingMoreEvents: boolean;
+};