Workflow History - scroll to event in timeline (#702)

* partial commit

* Add more changes

* Fix tests

* Re-add load more logic

* Resolve comments

* Remove empty file

Author: adhityamamallan

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

@@ -20,6 +20,7 @@ jest.mock(
   '../workflow-history-timeline-group/workflow-history-timeline-group',
   () => jest.fn(() => <div>Timeline group card</div>)
 );
+
 jest.mock(
   '../workflow-history-timeline-load-more/workflow-history-timeline-load-more',
   () => jest.fn(() => <div>Load more</div>)
@@ -74,25 +75,25 @@ describe('WorkflowHistory', () => {
       );
     }
   });
+
   it('should render the page initially with filters hidden', async () => {
     setup({});
     expect(screen.queryByText('Filter Fields')).not.toBeInTheDocument();
   });
 
   it('should show filters on executing toggle button onClick', async () => {
-    setup({});
+    const { user } = setup({});
     const toggleButton = await screen.findByText('Filter Toggle');
 
-    await act(() => {
-      userEvent.click(toggleButton);
-    });
+    await user.click(toggleButton);
 
     expect(await screen.findByText('Filter Fields')).toBeInTheDocument();
   });
 });
 
 function setup({ error }: { error?: boolean }) {
-  render(
+  const user = userEvent.setup();
+  const renderResult = render(
     <Suspense>
       <WorkflowHistory
         params={{
@@ -141,4 +142,6 @@ function setup({ error }: { error?: boolean }) {
       ),
     }
   );
+
+  return { user, ...renderResult };
 }

src/views/workflow-history/workflow-history-compact-event-card/__tests__/workflow-history-compact-event-card.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render, screen } from '@/test-utils/rtl';
+import { render, screen, userEvent } from '@/test-utils/rtl';
 
 import type WorkflowHistoryEventStatusBadge from '../../workflow-history-event-status-badge/workflow-history-event-status-badge';
 import WorkflowHistoryCompactEventCard from '../workflow-history-compact-event-card';
@@ -45,15 +45,34 @@ describe('WorkflowHistoryCompactEventCard', () => {
     const badge = screen.getByText('ONGOING');
     expect(badge).toBeInTheDocument();
   });
+
+  it('calls onClick when clicked', async () => {
+    const { user, mockOnClick } = setup({
+      label: 'test label',
+    });
+
+    const tile = screen.getByText('test label');
+
+    await user.click(tile);
+
+    expect(mockOnClick).toHaveBeenCalled();
+  });
 });
 
 function setup(props: Partial<Props>) {
-  return render(
-    <WorkflowHistoryCompactEventCard
-      status="COMPLETED"
-      label="test label"
-      secondaryLabel="test secondaryLabel"
-      {...props}
-    />
-  );
+  const user = userEvent.setup();
+  const mockOnClick = jest.fn();
+  return {
+    ...render(
+      <WorkflowHistoryCompactEventCard
+        status="COMPLETED"
+        label="test label"
+        secondaryLabel="test secondaryLabel"
+        onClick={mockOnClick}
+        {...props}
+      />
+    ),
+    user,
+    mockOnClick,
+  };
 }

src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx

@@ -19,6 +19,7 @@ export default function WorkflowHistoryCompactEventCard({
   label,
   secondaryLabel,
   showLabelPlaceholder,
+  onClick,
 }: Props) {
   const { cls, theme } = useStyletronClasses(cssStyles);
 
@@ -28,6 +29,7 @@ export default function WorkflowHistoryCompactEventCard({
       tileKind={TILE_KIND.selection}
       headerAlignment={ALIGNMENT.right}
       bodyAlignment={ALIGNMENT.left}
+      onClick={onClick}
     >
       <WorkflowHistoryEventStatusBadge status={status} size="small" />
       <div className={cls.textContainer}>

src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.types.ts

@@ -1,8 +1,11 @@
+import { type TileProps } from 'baseui/tile';
+
 import { type WorkflowEventStatus } from '../workflow-history-event-status-badge/workflow-history-event-status-badge.types';
 
 export type Props = {
   status: WorkflowEventStatus;
   label: string;
   secondaryLabel: string;
   showLabelPlaceholder?: boolean;
+  onClick: TileProps['onClick'];
 };

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

@@ -1,13 +1,13 @@
 'use client';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 
 import {
   useSuspenseInfiniteQuery,
   type InfiniteData,
 } from '@tanstack/react-query';
 import { HeadingXSmall } from 'baseui/typography';
 import queryString from 'query-string';
-import { Virtuoso } from 'react-virtuoso';
+import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
 
 import usePageFilters from '@/components/page-filters/hooks/use-page-filters';
 import PageFiltersFields from '@/components/page-filters/page-filters-fields/page-filters-fields';
@@ -108,6 +108,8 @@ export default function WorkflowHistory({ params }: Props) {
 
   const [areFiltersShown, setAreFiltersShown] = useState(false);
 
+  const timelineSectionListRef = useRef<VirtuosoHandle>(null);
+
   return (
     <PageSection className={cls.pageContainer}>
       <div className={cls.pageHeader}>
@@ -133,23 +135,34 @@ export default function WorkflowHistory({ params }: Props) {
           <div role="list" className={cls.compactSection}>
             <Virtuoso
               data={filteredGroupedHistoryEventsEntries}
-              itemContent={(_, [groupId, { label, status, timeLabel }]) => (
+              itemContent={(index, [groupId, { label, status, timeLabel }]) => (
                 <div role="listitem" className={cls.compactCardContainer}>
                   <WorkflowHistoryCompactEventCard
                     key={groupId}
                     status={status}
                     label={label}
                     secondaryLabel={timeLabel}
                     showLabelPlaceholder={!label}
+                    onClick={() => {
+                      timelineSectionListRef.current?.scrollToIndex({
+                        index,
+                        align: 'start',
+                        behavior: 'smooth',
+                      });
+                    }}
                   />
                 </div>
               )}
+              endReached={() => {
+                if (!isFetchingNextPage && hasNextPage) fetchNextPage();
+              }}
             />
           </div>
           <section className={cls.timelineSection}>
             <Virtuoso
               useWindowScroll
               data={filteredGroupedHistoryEventsEntries}
+              ref={timelineSectionListRef}
               itemContent={(index, [groupId, group]) => (
                 <WorkflowHistoryTimelineGroup
                   key={groupId}