Add reset button to history timeline (#882)

* Timeline reset workflow button

* add reset to history timeline

* fix mobile styles

Author: Assem-Uber

src/views/workflow-actions/workflow-actions-modal-content/workflow-actions-modal-content.tsx

@@ -24,7 +24,12 @@ export default function WorkflowActionsModalContent<
   FormData extends FieldValues,
   SubmissionData,
   Result,
->({ action, params, onCloseModal }: Props<FormData, SubmissionData, Result>) {
+>({
+  action,
+  params,
+  onCloseModal,
+  initialFormValues,
+}: Props<FormData, SubmissionData, Result>) {
   const queryClient = useQueryClient();
   const { enqueue, dequeue } = useSnackbar();
 
@@ -37,7 +42,7 @@ export default function WorkflowActionsModalContent<
     resolver: action.modal.formSchema
       ? zodResolver(action.modal.formSchema)
       : undefined,
-    defaultValues: {} as DefaultValues<FormData>,
+    defaultValues: initialFormValues,
   });
 
   const { mutate, isPending, error } = useMutation<

src/views/workflow-actions/workflow-actions-modal-content/workflow-actions-modal-content.types.ts

@@ -1,3 +1,5 @@
+import { type DefaultValues } from 'react-hook-form';
+
 import {
   type WorkflowAction,
   type WorkflowActionInputParams,
@@ -7,4 +9,5 @@ export type Props<FormData, SubmissionData, Result> = {
   action: WorkflowAction<FormData, SubmissionData, Result>;
   params: WorkflowActionInputParams;
   onCloseModal: () => void;
+  initialFormValues?: DefaultValues<FormData>;
 };

src/views/workflow-actions/workflow-actions-modal/workflow-actions-modal.tsx

@@ -13,6 +13,7 @@ export default function WorkflowActionsModal<
 >({
   action,
   onClose,
+  initialFormValues,
   ...workflowDetailsParams
 }: Props<FormData, SubmissionData, Result>) {
   return (
@@ -28,6 +29,7 @@ export default function WorkflowActionsModal<
           params={{
             ...workflowDetailsParams,
           }}
+          initialFormValues={initialFormValues}
           onCloseModal={onClose}
         />
       )}

src/views/workflow-actions/workflow-actions-modal/workflow-actions-modal.types.ts

@@ -1,3 +1,5 @@
+import { type DefaultValues } from 'react-hook-form';
+
 import { type WorkflowAction } from '../workflow-actions.types';
 
 export type Props<FormData, SubmissionData, Result> = {
@@ -7,4 +9,5 @@ export type Props<FormData, SubmissionData, Result> = {
   runId: string;
   action: WorkflowAction<FormData, SubmissionData, Result> | undefined;
   onClose: () => void;
+  initialFormValues?: DefaultValues<FormData>;
 };

src/views/workflow-history/helpers/get-history-group-from-events/__tests__/get-decision-group-from-events.test.ts

@@ -259,4 +259,34 @@ describe('getDecisionGroupFromEvents', () => {
     const group = getDecisionGroupFromEvents(events);
     expect(group.badges).toEqual([{ content: '1 Retry' }]);
   });
+
+  it('should set resetToDecisionEventId to null when no close or timeout events are present', () => {
+    const events: ExtendedDecisionHistoryEvent[] = [
+      scheduleDecisionTaskEvent,
+      startDecisionTaskEvent,
+    ];
+    const group = getDecisionGroupFromEvents(events);
+    expect(group.resetToDecisionEventId).toBeNull();
+  });
+
+  it('should set resetToDecisionEventId to the close event ID when a close event is present', () => {
+    const events: ExtendedDecisionHistoryEvent[] = [
+      scheduleDecisionTaskEvent,
+      startDecisionTaskEvent,
+      completeDecisionTaskEvent,
+    ];
+    const group = getDecisionGroupFromEvents(events);
+    expect(group.resetToDecisionEventId).toBe(
+      completeDecisionTaskEvent.eventId
+    );
+  });
+
+  it('should be set to the timeout event ID when only a timeout event is present', () => {
+    const events: ExtendedDecisionHistoryEvent[] = [
+      scheduleDecisionTaskEvent,
+      timeoutDecisionTaskEvent,
+    ];
+    const group = getDecisionGroupFromEvents(events);
+    expect(group.resetToDecisionEventId).toBe(timeoutDecisionTaskEvent.eventId);
+  });
 });

src/views/workflow-history/helpers/get-history-group-from-events/get-decision-group-from-events.ts

@@ -41,7 +41,9 @@ export default function getDecisionGroupFromEvents(
   const hasAllCloseEvents = scheduleEvent && startEvent && closeEvent;
   const hasMissingEvents = !hasAllTimeoutEvents && !hasAllCloseEvents;
 
+  // Retry attempts calculation
   let retryAttemptNumber = 0;
+
   if (
     pendingStartEvent &&
     pendingStartAttr in pendingStartEvent &&
@@ -64,6 +66,17 @@ export default function getDecisionGroupFromEvents(
         retryAttemptNumber === 1 ? '1 Retry' : `${retryAttemptNumber} Retries`,
     });
   }
+
+  // set resetToDecisionEventId to close/timeout decision event id
+  let resetToDecisionEventId: string | null = null;
+
+  if (closeEvent && closeEvent.eventId) {
+    resetToDecisionEventId = closeEvent.eventId;
+  } else if (timeoutEvent && timeoutEvent.eventId) {
+    resetToDecisionEventId = timeoutEvent.eventId;
+  }
+
+  // populate event to label and status maps
   const eventToLabel: HistoryGroupEventToStringMap<DecisionHistoryGroup> = {
     decisionTaskScheduledEventAttributes: 'Scheduled',
     pendingDecisionTaskStartEventAttributes: 'Starting',
@@ -93,6 +106,7 @@ export default function getDecisionGroupFromEvents(
     hasMissingEvents,
     groupType,
     badges,
+    resetToDecisionEventId,
     ...getCommonHistoryGroupFields<DecisionHistoryGroup>(
       events,
       eventToStatus,

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

@@ -1,8 +1,9 @@
-import { render, screen } from '@/test-utils/rtl';
+import { render, screen, userEvent } from '@/test-utils/rtl';
 
 import { startWorkflowExecutionEvent } from '../../__fixtures__/workflow-history-single-events';
 import type WorkflowHistoryEventStatusBadge from '../../workflow-history-event-status-badge/workflow-history-event-status-badge';
 import type WorkflowHistoryEventsCard from '../../workflow-history-events-card/workflow-history-events-card';
+import type WorkflowHistoryTimelineResetButton from '../../workflow-history-timeline-reset-button/workflow-history-timeline-reset-button';
 import WorkflowHistoryTimelineGroup from '../workflow-history-timeline-group';
 import { type styled } from '../workflow-history-timeline-group.styles';
 import type { Props } from '../workflow-history-timeline-group.types';
@@ -17,6 +18,16 @@ jest.mock<typeof WorkflowHistoryEventsCard>(
   () => jest.fn(() => <div>Events Card</div>)
 );
 
+jest.mock<typeof WorkflowHistoryTimelineResetButton>(
+  '../../workflow-history-timeline-reset-button/workflow-history-timeline-reset-button',
+  () =>
+    jest.fn((props) => (
+      <button onClick={props.onReset} data-testid="reset-button">
+        Reset Button
+      </button>
+    ))
+);
+
 jest.mock('../workflow-history-timeline-group.styles', () => {
   const actual = jest.requireActual(
     '../workflow-history-timeline-group.styles'
@@ -76,6 +87,27 @@ describe('WorkflowHistoryTimelineGroup', () => {
     setup({ isLastEvent: true });
     expect(screen.getByText('Divider hidden')).toBeInTheDocument();
   });
+
+  it('renders reset button when resetToDecisionEventId is provided', () => {
+    setup({ resetToDecisionEventId: 'decision-event-id' });
+    expect(screen.getByTestId('reset-button')).toBeInTheDocument();
+  });
+
+  it('does not render reset button when resetToDecisionEventId is not provided', () => {
+    setup({ resetToDecisionEventId: undefined });
+    expect(screen.queryByTestId('reset-button')).not.toBeInTheDocument();
+  });
+
+  it('calls onReset when reset button is clicked', async () => {
+    const { mockOnReset, user } = setup({
+      resetToDecisionEventId: 'decision-event-id',
+    });
+
+    const resetButton = screen.getByTestId('reset-button');
+    await user.click(resetButton);
+
+    expect(mockOnReset).toHaveBeenCalledTimes(1);
+  });
 });
 
 function setup({
@@ -101,8 +133,11 @@ function setup({
     workflowTab: 'history',
   },
   badges,
+  resetToDecisionEventId,
 }: Partial<Props>) {
-  return render(
+  const mockOnReset = jest.fn();
+  const user = userEvent.setup();
+  render(
     <WorkflowHistoryTimelineGroup
       events={events}
       eventsMetadata={eventsMetadata}
@@ -115,6 +150,9 @@ function setup({
       getIsEventExpanded={jest.fn()}
       onEventToggle={jest.fn()}
       badges={badges}
+      resetToDecisionEventId={resetToDecisionEventId}
+      onReset={mockOnReset}
     />
   );
+  return { mockOnReset, user };
 }

src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.styles.ts

@@ -15,8 +15,7 @@ export const overrides = {
         color: $theme.colors.contentSecondary,
         ...$theme.typography.LabelXSmall,
         whiteSpace: 'nowrap',
-        marginTop: $theme.sizing.scale100,
-        marginBottom: $theme.sizing.scale100,
+
         [$theme.mediaQuery.medium]: {
           marginTop: 0,
           marginBottom: 0,
@@ -45,13 +44,13 @@ const cssStylesObj = {
     display: 'flex',
     flexDirection: 'column',
   },
-  timelineEventHeader: (theme) => ({
+  eventHeader: (theme) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.sizing.scale600,
     padding: `${theme.sizing.scale500} 0`,
   }),
-  timelineEventLabelAndTime: (theme) => ({
+  eventLabelAndSecondaryDetails: (theme) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: 0,
@@ -62,19 +61,27 @@ const cssStylesObj = {
       alignItems: 'center',
       gap: theme.sizing.scale200,
     },
+    flex: 1,
+  }),
+  eventSecondaryDetails: (theme) => ({
+    display: 'flex',
+    gap: theme.sizing.scale200,
+    alignItems: 'center',
+    flexWrap: 'wrap',
   }),
-  timelineEventsLabel: (theme) => ({
-    ...theme.typography.LabelLarge,
+  eventsLabel: (theme) => ({
+    ...theme.typography.LabelMedium,
+    flex: 1,
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
   }),
-  timelineEventsTime: (theme) => ({
+  eventsTime: (theme) => ({
     ...theme.typography.LabelXSmall,
     color: theme.colors.contentTertiary,
     wordBreak: 'break-word',
   }),
-  timelineEventCardContainer: {
+  eventCardContainer: {
     display: 'flex',
     gap: '28px',
   },

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

@@ -7,6 +7,7 @@ import useStyletronClasses from '@/hooks/use-styletron-classes';
 
 import WorkflowHistoryEventStatusBadge from '../workflow-history-event-status-badge/workflow-history-event-status-badge';
 import WorkflowHistoryEventsCard from '../workflow-history-events-card/workflow-history-events-card';
+import WorkflowHistoryTimelineResetButton from '../workflow-history-timeline-reset-button/workflow-history-timeline-reset-button';
 
 import {
   cssStyles,
@@ -25,40 +26,60 @@ export default function WorkflowHistoryTimelineGroup({
   hasMissingEvents,
   decodedPageUrlParams,
   badges,
+  resetToDecisionEventId,
   getIsEventExpanded,
   onEventToggle,
+  onReset,
 }: Props) {
   const { cls } = useStyletronClasses(cssStyles);
   const hasBadges = badges !== undefined && badges.length > 0;
+
+  const handleReset = () => {
+    if (onReset) {
+      onReset();
+    }
+  };
+
   return (
     <div className={cls.groupContainer}>
-      <div className={cls.timelineEventHeader}>
+      <div className={cls.eventHeader}>
         <WorkflowHistoryEventStatusBadge
           status={status}
           statusReady={!hasMissingEvents}
           size="medium"
         />
-        <div className={cls.timelineEventLabelAndTime}>
-          <div className={cls.timelineEventsLabel}>{label}</div>
-          {hasBadges && (
-            <div>
-              {badges.map((badge) => (
-                <Badge
-                  key={badge.content}
-                  overrides={overrides.headerBadge}
-                  content={badge.content}
-                  shape="rectangle"
-                  color="primary"
-                />
-              ))}
+        <div className={cls.eventLabelAndSecondaryDetails}>
+          <div className={cls.eventsLabel}>{label}</div>
+          <div className={cls.eventSecondaryDetails}>
+            {hasBadges && (
+              <>
+                {badges.map((badge) => (
+                  <Badge
+                    key={badge.content}
+                    overrides={overrides.headerBadge}
+                    content={badge.content}
+                    shape="rectangle"
+                    color="primary"
+                  />
+                ))}
+              </>
+            )}
+            <div suppressHydrationWarning className={cls.eventsTime}>
+              {timeLabel}
             </div>
-          )}
-          <div suppressHydrationWarning className={cls.timelineEventsTime}>
-            {timeLabel}
+            {resetToDecisionEventId && (
+              <WorkflowHistoryTimelineResetButton
+                workflowId={decodedPageUrlParams.workflowId}
+                runId={decodedPageUrlParams.runId}
+                domain={decodedPageUrlParams.domain}
+                cluster={decodedPageUrlParams.cluster}
+                onReset={handleReset}
+              />
+            )}
           </div>
         </div>
       </div>
-      <div className={cls.timelineEventCardContainer}>
+      <div className={cls.eventCardContainer}>
         <styled.VerticalDivider $hidden={isLastEvent} />
         <WorkflowHistoryEventsCard
           events={events}

src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.types.ts

@@ -16,9 +16,11 @@ export type Props = Pick<
   | 'hasMissingEvents'
   | 'status'
   | 'badges'
+  | 'resetToDecisionEventId'
 > & {
   isLastEvent: boolean;
   decodedPageUrlParams: WorkflowHistoryProps['params'];
   getIsEventExpanded: GetIsEventExpanded;
   onEventToggle: ToggleIsEventExpanded;
+  onReset?: () => void;
 };