Add reset button to ungrouped history view (#931)

- Add canReset field to ungrouped history event info to determine if an event can be reset to (this is determined based on the resetToEventId in the event group
- Pass onReset down to the Ungrouped Event Card component
- Add reset button in Ungrouped Event Card component
- Stop onClick event propagation in the reset button, to prevent clicks from affecting accordion state

Author: adhityamamallan

src/views/workflow-history/workflow-history-timeline-reset-button/workflow-history-timeline-reset-button.tsx

@@ -53,7 +53,10 @@ export default function WorkflowHistoryTimelineResetButton({
   return (
     <Button
       kind={KIND.secondary}
-      onClick={onReset}
+      onClick={(e) => {
+        e.stopPropagation();
+        onReset();
+      }}
       startEnhancer={<MdRefresh />}
       size="mini"
     >

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

@@ -80,6 +80,18 @@ jest.mock(
   })
 );
 
+jest.mock(
+  '../../workflow-history-timeline-reset-button/workflow-history-timeline-reset-button',
+  () => ({
+    __esModule: true,
+    default: ({ onReset }: { onReset: () => void }) => (
+      <button onClick={onReset} data-testid="reset-button">
+        Reset
+      </button>
+    ),
+  })
+);
+
 const mockEventInfo: WorkflowHistoryUngroupedEventInfo = {
   id: '1',
   label: 'Workflow Execution Started',
@@ -176,16 +188,42 @@ describe(WorkflowHistoryUngroupedEvent.name, () => {
 
     expect(screen.queryByText(/retry/)).not.toBeInTheDocument();
   });
+
+  it('renders reset button when onReset function is provided', async () => {
+    const mockOnReset = jest.fn();
+    setup({ onReset: mockOnReset });
+
+    expect(await screen.findByTestId('reset-button')).toBeInTheDocument();
+    expect(await screen.findByText('Reset')).toBeInTheDocument();
+  });
+
+  it('does not render reset button when onReset function is not provided', () => {
+    setup({ onReset: undefined });
+
+    expect(screen.queryByTestId('reset-button')).not.toBeInTheDocument();
+  });
+
+  it('calls onReset when reset button is clicked', async () => {
+    const mockOnReset = jest.fn();
+    const { user } = setup({ onReset: mockOnReset });
+
+    const resetButton = await screen.findByTestId('reset-button');
+    await user.click(resetButton);
+
+    expect(mockOnReset).toHaveBeenCalledTimes(1);
+  });
 });
 
 function setup({
   eventInfo = mockEventInfo,
   isExpanded = false,
   animateBorderOnEnter = false,
+  onReset,
 }: {
   eventInfo?: WorkflowHistoryUngroupedEventInfo;
   isExpanded?: boolean;
   animateBorderOnEnter?: boolean;
+  onReset?: (() => void) | undefined;
 } = {}) {
   const mockToggleIsExpanded = jest.fn();
 
@@ -199,6 +237,7 @@ function setup({
     isExpanded,
     toggleIsExpanded: mockToggleIsExpanded,
     animateBorderOnEnter,
+    onReset,
   };
 
   const user = userEvent.setup();

src/views/workflow-history/workflow-history-ungrouped-event/workflow-history-ungrouped-event.styles.ts

@@ -31,6 +31,14 @@ export const styled = {
     alignItems: 'center',
     gap: $theme.sizing.scale400,
   })),
+  ResetButtonContainer: createStyled(
+    'div',
+    ({ $theme }: { $theme: Theme }) => ({
+      display: 'flex',
+      justifyContent: 'flex-end',
+      paddingRight: $theme.sizing.scale400,
+    })
+  ),
 };
 
 export const overrides = (animateBorderOnEnter?: boolean) => ({

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

@@ -11,6 +11,7 @@ import WorkflowHistoryEventLinkButton from '../workflow-history-event-link-butto
 import WorkflowHistoryEventStatusBadge from '../workflow-history-event-status-badge/workflow-history-event-status-badge';
 import getFormattedEventsDuration from '../workflow-history-events-duration-badge/helpers/get-formatted-events-duration';
 import WorkflowHistoryGroupLabel from '../workflow-history-group-label/workflow-history-group-label';
+import WorkflowHistoryTimelineResetButton from '../workflow-history-timeline-reset-button/workflow-history-timeline-reset-button';
 
 import getRetriesForHistoryEvent from './helpers/get-retries-for-history-event';
 import {
@@ -26,6 +27,7 @@ export default function WorkflowHistoryUngroupedEvent({
   isExpanded,
   toggleIsExpanded,
   animateBorderOnEnter,
+  onReset,
 }: Props) {
   const retries = getRetriesForHistoryEvent(eventInfo.event);
   const overrides = getOverrides(animateBorderOnEnter);
@@ -90,6 +92,19 @@ export default function WorkflowHistoryUngroupedEvent({
             ) : (
               <div />
             )}
+            {typeof onReset === 'function' ? (
+              <styled.ResetButtonContainer>
+                <WorkflowHistoryTimelineResetButton
+                  domain={decodedPageUrlParams.domain}
+                  cluster={decodedPageUrlParams.cluster}
+                  workflowId={decodedPageUrlParams.workflowId}
+                  runId={decodedPageUrlParams.runId}
+                  onReset={onReset}
+                />
+              </styled.ResetButtonContainer>
+            ) : (
+              <div />
+            )}
           </styled.CardHeaderContainer>
         }
         expanded={isExpanded}

src/views/workflow-history/workflow-history-ungrouped-event/workflow-history-ungrouped-event.types.ts

@@ -18,6 +18,7 @@ export type WorkflowHistoryUngroupedEventInfo = {
     | HistoryEvent
     | PendingDecisionTaskStartEvent
     | PendingActivityTaskStartEvent;
+  canReset?: boolean;
 };
 
 export type Props = {
@@ -32,4 +33,5 @@ export type Props = {
 
   // UI behavior
   animateBorderOnEnter?: boolean;
+  onReset?: () => void;
 };

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

@@ -14,10 +14,11 @@ import WorkflowHistoryUngroupedTable from '../workflow-history-ungrouped-table';
 jest.mock(
   '../../workflow-history-ungrouped-event/workflow-history-ungrouped-event',
   () =>
-    jest.fn(({ eventInfo, isExpanded, toggleIsExpanded }) => (
+    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>
     ))
 );
@@ -116,6 +117,23 @@ describe(WorkflowHistoryUngroupedTable.name, () => {
       expect(events).toHaveLength(2);
     });
   });
+
+  it('calls onResetToEventId when reset button is clicked on resettable event', async () => {
+    const { user, mockOnResetToEventId } = setup({
+      eventsInfo: [
+        {
+          ...mockEventsInfo[0],
+          canReset: true,
+        },
+        mockEventsInfo[1],
+      ],
+    });
+
+    const resetButtons = screen.getAllByText('Reset Event');
+    await user.click(resetButtons[0]);
+
+    expect(mockOnResetToEventId).toHaveBeenCalledWith('1');
+  });
 });
 
 function setup({
@@ -135,6 +153,7 @@ function setup({
   const mockGetIsEventExpanded = jest.fn(() => false);
   const mockToggleIsEventExpanded = jest.fn();
   const mockOnVisibleRangeChange = jest.fn();
+  const mockOnResetToEventId = jest.fn();
 
   const props = {
     eventsInfo,
@@ -148,6 +167,7 @@ function setup({
     onVisibleRangeChange: mockOnVisibleRangeChange,
     virtuosoRef: { current: null },
     selectedEventId,
+    onResetToEventId: mockOnResetToEventId,
   };
 
   const user = userEvent.setup();
@@ -167,5 +187,6 @@ function setup({
     mockGetIsEventExpanded,
     mockToggleIsEventExpanded,
     mockOnVisibleRangeChange,
+    mockOnResetToEventId,
   };
 }

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

@@ -10,6 +10,7 @@ export default function WorkflowHistoryUngroupedTable({
   eventsInfo,
   selectedEventId,
   decodedPageUrlParams,
+  onResetToEventId,
   error,
   hasMoreEvents,
   isFetchingMoreEvents,
@@ -43,6 +44,9 @@ export default function WorkflowHistoryUngroupedTable({
             isExpanded={getIsEventExpanded(eventInfo.id)}
             toggleIsExpanded={() => toggleIsEventExpanded(eventInfo.id)}
             animateBorderOnEnter={eventInfo.id === selectedEventId}
+            {...(eventInfo.canReset
+              ? { onReset: () => onResetToEventId(eventInfo.id) }
+              : {})}
           />
         )}
         {...(selectedEventId && {

src/views/workflow-history/workflow-history-ungrouped-table/workflow-history-ungrouped-table.types.ts

@@ -14,6 +14,7 @@ export type Props = {
   eventsInfo: Array<WorkflowHistoryUngroupedEventInfo>;
   selectedEventId?: string;
   decodedPageUrlParams: WorkflowPageTabsParams;
+  onResetToEventId: (eventId: string) => void;
 
   // React Query props
   error: RequestError | null;

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

@@ -205,6 +205,7 @@ export default function WorkflowHistory({ params }: Props) {
               status: group.eventsMetadata[index].status,
               statusLabel: group.eventsMetadata[index].label,
               id: event.eventId ?? event.computedEventId,
+              canReset: group.resetToDecisionEventId === event.eventId,
             })),
           ])
           .flat(1)
@@ -454,6 +455,7 @@ export default function WorkflowHistory({ params }: Props) {
                   }))
                 }
                 virtuosoRef={ungroupedTableRef}
+                onResetToEventId={setResetToDecisionEventId}
               />
             </section>
           ) : (