fix(apollo-react): fix loop header adornment spacing [MST-9651]#685
Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
Fixes LoopNode header layout so badge adornments (top-left breakpoint, top-right execution/validation) no longer overlap the loop title and iteration/parallel controls by conditionally adding header padding only on sides that actually have visible adornments. It also tightens default adornment resolution and Storybook execution-state parsing to avoid reserving top-right space when there isn’t a real status/validation signal.
Changes:
- Stop emitting a default top-right execution adornment when there is no visible execution status (and adjust resolver tests accordingly).
- Update LoopNode header to add conditional left/right padding based on presence of top-left/top-right adornments, preventing overlap.
- Improve Storybook canvas decorator execution-status parsing to ignore invalid ID fragments (e.g.
loop-1) so stories don’t show reserved adornment spacing incorrectly.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/utils/adornment-resolver.tsx | Adjusts default top-right adornment resolution to avoid empty/hidden defaults. |
| packages/apollo-react/src/canvas/utils/adornment-resolver.test.tsx | Updates test expectations for the new “no visible status => no topRight adornment” behavior. |
| packages/apollo-react/src/canvas/storybook-utils/decorators.tsx | Validates Storybook-derived execution status fragments against known statuses to prevent false positives. |
| packages/apollo-react/src/canvas/components/LoopNode/LoopNode.tsx | Adds conditional header padding based on actual top-left/top-right adornment presence. |
| packages/apollo-react/src/canvas/components/LoopNode/LoopNode.test.tsx | Adds regression tests asserting header padding behavior with/without adornments. |
snuziale
approved these changes
May 14, 2026
SreedharAvvari
force-pushed
the
fix/mst-9651-loop-adornment-spacing
branch
from
96759ca to
2513e06
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
Fixes the loop container header so top-corner adornments do not overlap the loop title area or the iteration/parallel controls.
Details
The loop node already renders breakpoint and execution/status adornments in the same top-left and top-right badge slots used by other canvas nodes. The overlap happened because the loop header content did not reserve room for those absolute-positioned badge slots. When an execution count/status appeared on the top right, it could sit on top of the iteration navigator and the Parallel badge.
This change keeps the adornments in their existing badge positions and pushes only the loop header content inward on the side that actually has an adornment. A breakpoint on the left shifts the loop icon/title inward; a status/count adornment on the right shifts the iteration navigator and Sequential/Parallel pill inward.
I also tightened the default adornment resolver so it does not emit an empty top-right adornment when there is no visible execution status or validation signal. The Storybook canvas decorator now ignores invalid status fragments such as the
1inloop-1, which prevents stories from showing reserved adornment spacing when no real adornment exists.Validation
pnpm --filter=@uipath/apollo-react test -- src/canvas/utils/adornment-resolver.test.tsx src/canvas/components/LoopNode/LoopNode.test.tsx src/canvas/components/LoopNode/IterationNavigator.test.tsxpnpm exec biome check src/canvas/utils/adornment-resolver.tsx src/canvas/utils/adornment-resolver.test.tsx src/canvas/components/LoopNode/LoopNode.tsx src/canvas/components/LoopNode/LoopNode.test.tsx src/canvas/storybook-utils/decorators.tsx