feat: History Page V2 - event group row in history grouped table #1095

adhityamamallan · 2025-11-26T11:54:46Z

Summary

Add WorkflowHistoryEventGroup component that renders the single row for an event group
Edit upstream components to pass required props
Implement item expansion in History Page V2 using useExpansionToggle hook
Fixes to grid layout and styling
Add Workflow Actions Modal to History Page V2

Test plan

Added unit tests + ran locally.

Basic table

With hover

Expanded

Reset Workflow form

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

Copilot

Pull request overview

This PR implements the grouped event view for History v2, introducing a comprehensive event grouping interface with expansion/collapse functionality, duration tracking, and reset capabilities. The changes establish a foundation for displaying workflow history events in a more organized, grouped format.

Key changes:

Added event group rendering with Panel-based UI including status badges, timestamps, and durations
Implemented expansion/collapse state management using a custom hook for individual event groups
Integrated workflow reset functionality with modal support for decision events

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`src/views/workflow-history-v2/workflow-history-v2.tsx`	Added expansion toggle state management, workflow close time computation, and modal integration for reset functionality
`src/views/workflow-history-v2/workflow-history-grouped-table/workflow-history-grouped-table.types.ts`	Extended props to include workflow execution state, event expansion handlers, and reset callbacks
`src/views/workflow-history-v2/workflow-history-grouped-table/workflow-history-grouped-table.tsx`	Replaced placeholder with WorkflowHistoryEventGroup component and updated default item height for virtualized rendering
`src/views/workflow-history-v2/workflow-history-grouped-table/workflow-history-grouped-table.styles.ts`	Adjusted padding to remove space for expand icon (now hidden) and reduced accordion panel padding
`src/views/workflow-history-v2/workflow-history-grouped-table/workflow-history-grouped-table.constants.ts`	Updated grid template columns to accommodate icon, adjusted column proportions for better layout
`src/views/workflow-history-v2/workflow-history-grouped-table/__tests__/workflow-history-grouped-table.test.tsx`	Updated tests to mock WorkflowHistoryEventGroup, removed grid layout test, added new required props to setup
`src/views/workflow-history-v2/workflow-history-event-group/workflow-history-event-group.types.ts`	Defined props interface for event group component with workflow state and interaction handlers
`src/views/workflow-history-v2/workflow-history-event-group/workflow-history-event-group.tsx`	Created event group component with header displaying status, time, duration, and reset button; panel expansion based on event state
`src/views/workflow-history-v2/workflow-history-event-group/workflow-history-event-group.styles.ts`	Defined styled components and overrides for event group panel with grid layout and animation support
`src/views/workflow-history-v2/workflow-history-event-group/helpers/get-event-group-filtering-type.ts`	Implemented helper to determine filtering type based on event group type and attributes
`src/views/workflow-history-v2/workflow-history-event-group/helpers/__tests__/get-event-group-filtering-type.test.ts`	Added comprehensive test coverage for filtering type determination logic
`src/views/workflow-history-v2/workflow-history-event-group/__tests__/workflow-history-event-group.test.tsx`	Created tests for event group rendering, expansion, reset functionality, and loading states
`src/views/workflow-history-v2/workflow-history-event-group-duration/workflow-history-event-group-duration.types.ts`	Defined props for duration component including start/close times and workflow state
`src/views/workflow-history-v2/workflow-history-event-group-duration/workflow-history-event-group-duration.tsx`	Implemented duration component with live updates for ongoing events and conditional rendering
`src/views/workflow-history-v2/workflow-history-event-group-duration/helpers/get-formatted-events-duration.ts`	Created helper to format duration between timestamps with configurable millisecond display
`src/views/workflow-history-v2/workflow-history-event-group-duration/helpers/__tests__/get-formatted-events-duration.test.ts`	Added tests for duration formatting with various time scenarios
`src/views/workflow-history-v2/workflow-history-event-group-duration/__tests__/workflow-history-event-group-duration.test.tsx`	Created tests for duration component behavior including live updates and conditional rendering

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

src/views/workflow-history-v2/workflow-history-event-group/workflow-history-event-group.tsx

...views/workflow-history-v2/workflow-history-event-group/workflow-history-event-group.types.ts

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

Copilot

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

Copilot · 2025-11-26T14:17:21Z

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

+        .flat(1)
+        .map(({ history }) => history?.events || [])
+        .flat(1)


The allEventIds computation uses multiple .flat() and .map() operations which creates intermediate arrays. Consider using .flatMap() to reduce iterations: (result?.pages || []).flatMap(({ history }) => history?.events || []).map(({ eventId }) => eventId).

Suggested change

.flat(1)

.map(({ history }) => history?.events || [])

.flat(1)

.flatMap(({ history }) => history?.events || [])

I see that useExpansionToggle needs the a list of ids but this can influence the API to change from accepting array of ids to accepting items as is with a key for getting the identifier, this can save the events computation that runs frequently after receiving event pages.

Copilot · 2025-11-26T14:17:21Z

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

-        itemContent={(_, [__, group]) => <div>{JSON.stringify(group)}</div>}
+        itemContent={(_, [groupId, group]) => (
+          <WorkflowHistoryEventGroup
+            key={groupId}


The key prop on line 56 is unnecessary within the itemContent function. React Virtuoso manages keys internally for virtualized items. This prop has no effect and should be removed.

Suggested change

key={groupId}

Copilot · 2025-11-26T14:17:22Z

src/views/workflow-history-v2/workflow-history-event-group/workflow-history-event-group.tsx

+              statusReady={!showLoadingMoreEvents}
+              size="small"
+            />
+            {eventsMetadata.at(-1)?.label}


Accessing eventsMetadata.at(-1) assumes the last metadata entry is always relevant. Consider adding a comment explaining why the last entry is used, or use a more descriptive variable name like lastEventLabel to clarify intent.

Copilot · 2025-11-26T14:17:22Z

...w-history-v2/workflow-history-event-group-duration/workflow-history-event-group-duration.tsx

+  const workflowEnded =
+    workflowIsArchived ||
+    workflowCloseStatus !== 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID';


The comparison against the literal string 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID' is fragile. Consider importing and using the enum value: WorkflowExecutionCloseStatus.WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID to ensure type safety and catch refactoring issues.

Copilot · 2025-11-26T14:17:22Z

...ow-history-v2/workflow-history-event-group-duration/helpers/get-formatted-events-duration.ts

+  const duration = formatDuration(
+    {
+      seconds: seconds.toString(),
+      nanos: (durationObj.asMilliseconds() - seconds * 1000) * 1000000,


The magic number 1000000 (conversion from milliseconds to nanoseconds) should be extracted to a named constant like MS_TO_NANOS = 1_000_000 for better readability and maintainability.

Assem-Uber · 2025-11-28T13:09:33Z

I have few questions on UI:

How does it look on smaller screens ?
Where are we adding the Starts in badge?
The time and duration fields seems overfitted to the current data. How does workflows with years duration look like ?

Assem-Uber · 2025-11-28T12:50:18Z

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

-  });
-
-  it('should render event groups data', () => {
+  it('should render event group labels', () => {


This is testing the mock, the removed test was testing that group was passed to the component which makes more sense.

Assem-Uber · 2025-11-28T13:11:11Z

...w-history-v2/workflow-history-event-group-duration/workflow-history-event-group-duration.tsx

+import getFormattedEventsDuration from './helpers/get-formatted-events-duration';
+import { type Props } from './workflow-history-event-group-duration.types';
+
+export default function WorkflowHistoryEventGroupDuration({


Do we need to duplicate this component? I expect a single flag returning the value without the badge (only text) would be sufficient.

Assem-Uber · 2025-11-28T13:23:50Z

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

+        .flat(1)
+        .map(({ history }) => history?.events || [])
+        .flat(1)


I see that useExpansionToggle needs the a list of ids but this can influence the API to change from accepting array of ids to accepting items as is with a key for getting the identifier, this can save the events computation that runs frequently after receiving event pages.

Assem-Uber · 2025-11-28T13:28:52Z

...s/workflow-history-v2/workflow-history-event-group/helpers/get-event-group-filtering-type.ts

+      (typeof filterConfig === 'function' && filterConfig(group)) ||
+      group.groupType === filterConfig
+    ) {
+      return eventGroupFilterType as WorkflowHistoryEventFilteringType;


Why are we casting here?

Assem-Uber · 2025-11-28T13:31:43Z

...s/workflow-history-v2/workflow-history-event-group/helpers/get-event-group-filtering-type.ts

+    }
+  }
+
+  return 'WORKFLOW';


Why are is this filtering by WORKFLOW by default ? shouldn't it be null?

adhityamamallan force-pushed the history-v2-grouped-event branch from f772407 to b89db0f Compare November 26, 2025 12:34

adhityamamallan added 6 commits November 26, 2025 13:35

Add grouped table with raw JSON of events

6fcaf28

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

Address copilot comments

c59d9d7

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

base code for grouped event

fbfeecf

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

Add grouped event base

3ab6cce

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

Add unit tests and make some more changes

fc5a27d

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

move from component to hook

74fe264

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

adhityamamallan force-pushed the history-v2-grouped-event branch from b89db0f to 74fe264 Compare November 26, 2025 12:35

adhityamamallan requested a review from Copilot November 26, 2025 12:40

Copilot started reviewing on behalf of adhityamamallan November 26, 2025 12:41 View session

Copilot finished reviewing on behalf of adhityamamallan November 26, 2025 12:45

Copilot AI reviewed Nov 26, 2025

View reviewed changes

Address copilot comments

ac3bd2e

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

adhityamamallan changed the title ~~feat: History v2 grouped event~~ feat: History Page V2 - implement Event Group row in Workflow History Grouped Table Nov 26, 2025

adhityamamallan changed the title ~~feat: History Page V2 - implement Event Group row in Workflow History Grouped Table~~ feat: History Page V2 - event group row in history grouped table Nov 26, 2025

adhityamamallan marked this pull request as ready for review November 26, 2025 14:14

adhityamamallan requested a review from Copilot November 26, 2025 14:14

Copilot started reviewing on behalf of adhityamamallan November 26, 2025 14:14 View session

Copilot finished reviewing on behalf of adhityamamallan November 26, 2025 14:16

Copilot AI reviewed Nov 26, 2025

View reviewed changes

Assem-Uber reviewed Nov 28, 2025

View reviewed changes

feat: History Page V2 - event group row in history grouped table #1095

Are you sure you want to change the base?

feat: History Page V2 - event group row in history grouped table #1095

Conversation

adhityamamallan commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Basic table

With hover

Expanded

Reset Workflow form

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Assem-Uber Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Assem-Uber commented Nov 28, 2025

Uh oh!

Assem-Uber Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Assem-Uber Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Assem-Uber Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Assem-Uber Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Assem-Uber Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

adhityamamallan commented Nov 26, 2025 •

edited

Loading