fix(apollo-react): add loop node iteration navigator#672
Open
SreedharAvvari wants to merge 1 commit into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
SreedharAvvari
changed the title
SreedharAvvari
added
the
dev-packages
Dependency License Review
License distribution
Excluded packages
|
📦 Dev Packages
|
There was a problem hiding this comment.
Pull request overview
This PR adds an iteration navigation control to the LoopNode header in @uipath/apollo-react so execution-preview experiences can display (and optionally change) the active loop iteration while keeping the existing Sequential/Parallel mode badge.
Changes:
- Introduces a controlled
iterationStateprop (LoopIterationState) onLoopNodefor active index/total, optional change handler, disabled state, and ARIA labeling. - Adds a new
IterationNavigatorheader control that validates inputs, clamps invalid indexes, disables boundary actions, and prevents pointer events from leaking into canvas interactions. - Extends LoopNode Storybook stories with an
ExecutionStatesgrid showcasing multiple execution statuses and navigator behaviors (interactive, label-only, clamped).
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/components/LoopNode/LoopNode.types.ts | Adds the LoopIterationState interface and wires iterationState into LoopNode’s config/props. |
| packages/apollo-react/src/canvas/components/LoopNode/LoopNode.tsx | Renders the new IterationNavigator in the LoopNode header alongside the Sequential/Parallel badge. |
| packages/apollo-react/src/canvas/components/LoopNode/LoopNode.stories.tsx | Adds ExecutionStates Storybook examples demonstrating iteration navigation across statuses and edge cases. |
| packages/apollo-react/src/canvas/components/LoopNode/IterationNavigator.tsx | Implements the navigator UI, including state normalization/clamping and interaction behavior. |
SreedharAvvari
force-pushed
the
fix/loop-node-execution-states
branch
from
9f2a315 to
eee83d1
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds an Apollo React loop iteration navigator to the LoopNode header so loop execution previews can show and change the active iteration while preserving the existing sequential/parallel mode badge.
The issue was that LoopNode only had the mode badge in its header, so execution-state presentations that need to communicate the active loop iteration had no reusable Apollo-owned UI contract. Consumers would otherwise need to invent their own overlay or header treatment, which risks inconsistent canvas behavior and inaccessible controls.
The fix introduces a controlled
iterationStateprop with active index, total count, optional change handler, disabled state, and ARIA label support. The new navigator clamps invalid indexes, disables boundary actions, treats a missing change handler as noninteractive, and stops pointer events from leaking into canvas drag or pan behavior. The LoopNode header now renders the optional navigator alongside the existing Sequential/Parallel badge, and Storybook now includes execution-state examples for completed, running, paused, failed, cancelled, parallel, label-only, and clamped states.Validation
git diff --cached --checkpnpm --filter @uipath/apollo-react lintexited successfully; the repo still reports existingnoExplicitAnywarnings insrc/types/TraceModels.tsunrelated to this change.