Fix bug with ungrouped history table when selected event is hidden (#987)

When the ungrouped table view is opened with a selected event that is then hidden by the filters, Virtuoso is unable to find the selected event and so, it crashes. This PR fixes the issue by not doing the check if the selected event is not present in the list of events to show.

Author: adhityamamallan

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

@@ -14,13 +14,25 @@ import WorkflowHistoryUngroupedTable from '../workflow-history-ungrouped-table';
 jest.mock(
   '../../workflow-history-ungrouped-event/workflow-history-ungrouped-event',
   () =>
-    jest.fn(({ eventInfo, isExpanded, toggleIsExpanded, onReset }) => (
-      <div data-testid="mock-event" data-expanded={isExpanded}>
-        <button onClick={toggleIsExpanded}>Toggle Event</button>
-        <div>Event ID: {eventInfo.id}</div>
-        {onReset && <button onClick={onReset}>Reset Event</button>}
-      </div>
-    ))
+    jest.fn(
+      ({
+        eventInfo,
+        isExpanded,
+        toggleIsExpanded,
+        onReset,
+        animateOnEnter,
+      }) => (
+        <div
+          data-testid="mock-event"
+          data-expanded={isExpanded}
+          data-animate-on-enter={animateOnEnter}
+        >
+          <button onClick={toggleIsExpanded}>Toggle Event</button>
+          <div>Event ID: {eventInfo.id}</div>
+          {onReset && <button onClick={onReset}>Reset Event</button>}
+        </div>
+      )
+    )
 );
 
 jest.mock(
@@ -142,6 +154,32 @@ describe(WorkflowHistoryUngroupedTable.name, () => {
 
     expect(mockOnResetToEventId).toHaveBeenCalledWith('1');
   });
+
+  it('renders correctly when selectedEventId is not found in eventsInfo', async () => {
+    setup({
+      selectedEventId: '3',
+    });
+
+    expect(screen.getByText('ID')).toBeInTheDocument();
+
+    const events = await screen.findAllByTestId('mock-event');
+    expect(events).toHaveLength(2);
+    events.forEach((e) =>
+      expect(e).toHaveAttribute('data-animate-on-enter', 'false')
+    );
+  });
+
+  it('renders correctly when selectedEventId is found in eventsInfo', async () => {
+    setup({
+      selectedEventId: '2',
+    });
+
+    expect(screen.getByText('ID')).toBeInTheDocument();
+    const events = await screen.findAllByTestId('mock-event');
+    expect(events).toHaveLength(2);
+    expect(screen.getByText('Event ID: 2')).toBeInTheDocument();
+    expect(events[1]).toHaveAttribute('data-animate-on-enter', 'true');
+  });
 });
 
 function setup({

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

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { Virtuoso } from 'react-virtuoso';
 
 import WorkflowHistoryTimelineLoadMore from '../workflow-history-timeline-load-more/workflow-history-timeline-load-more';
@@ -23,6 +25,11 @@ export default function WorkflowHistoryUngroupedTable({
   const workflowStartTime =
     eventsInfo.length > 0 ? eventsInfo[0].event.eventTime : null;
 
+  const maybeHighlightedEventId = useMemo(
+    () => eventsInfo.findIndex((v) => v.id === selectedEventId),
+    [eventsInfo, selectedEventId]
+  );
+
   return (
     <>
       <styled.TableHeader>
@@ -49,10 +56,8 @@ export default function WorkflowHistoryUngroupedTable({
               : {})}
           />
         )}
-        {...(selectedEventId && {
-          initialTopMostItemIndex: eventsInfo.findIndex(
-            (v) => v.id === selectedEventId
-          ),
+        {...(maybeHighlightedEventId !== -1 && {
+          initialTopMostItemIndex: maybeHighlightedEventId,
         })}
         rangeChanged={onVisibleRangeChange}
         components={{