feat(apollo-react): add LoopNodeExecutionCount component#753
Open
1980computer wants to merge 2 commits into
Open
feat(apollo-react): add LoopNodeExecutionCount component#7531980computer wants to merge 2 commits into
1980computer wants to merge 2 commits into
Conversation
- Ignore .codeviz/ (code visualisation tool output) - Ignore apps/apollo-chat/ (uninitialised scaffold with no source) - Ignore **/locales/*.js (compiled lingui output; *.ts was already ignored) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
1980computer
force-pushed
the
loopnode-execution-count
branch
8 times, most recently
from
5d97096 to
4d737ef
Compare
github-actions
Bot
added
size:XXL
1980computer
force-pushed
the
loopnode-execution-count
branch
9 times, most recently
from
549df77 to
935fcf0
Compare
1980computer
force-pushed
the
loopnode-execution-count
branch
4 times, most recently
from
b1c254f to
4a59ada
Compare
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
…n Count story Extracts the Option B iteration navigator from the V2 story proposals into a standalone reusable component. IterationNavigatorPill is a unified segmented pill with an All aggregate toggle, per-iteration status dots, click-to-type jump, and a crosshair shortcut to the first failed iteration. Adapts responsively across three size tiers (full ≥400px, compact 260-399px, minimal <260px) derived from props.width. Adds LoopIterationPillState to LoopNode.types and exports the component from the LoopNode module index. Adds an Execution Count doc-layout story to Components/LoopNode showing all three tiers in a live canvas preview with anatomy cards, breakpoint spec table, and usage code block. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1980computer
force-pushed
the
loopnode-execution-count
branch
from
4a59ada to
c41b49a
Compare
1980computer
changed the title
Comment on lines
+13
to
+24
| case 'Completed': | ||
| return '#22c55e'; | ||
| case 'Failed': | ||
| return '#ef4444'; | ||
| case 'InProgress': | ||
| return '#f59e0b'; | ||
| case 'Paused': | ||
| return '#a855f7'; | ||
| case 'Cancelled': | ||
| return '#94a3b8'; | ||
| default: | ||
| return 'currentColor'; |
Collaborator
There was a problem hiding this comment.
I don't like hardcoded colors here, we should use wind tokens. Especially since this is not theme friendly.
| e.stopPropagation(); | ||
| } | ||
|
|
||
| export function getIterationStatusColor(status: string | undefined): string { |
Collaborator
There was a problem hiding this comment.
we should have an enum for status IMO
Comment on lines
+56
to
+62
| ? [...iterationStatuses.entries()].find(([, s]) => s === 'Failed')?.[0] | ||
| : undefined; | ||
| const completedCount = iterationStatuses | ||
| ? [...iterationStatuses.values()].filter((s) => s === 'Completed').length | ||
| : undefined; | ||
| const failedCount = iterationStatuses | ||
| ? [...iterationStatuses.values()].filter((s) => s === 'Failed').length |
Collaborator
There was a problem hiding this comment.
enum could be used here then as well
| completedCount !== undefined ? ( | ||
| <> | ||
| <span style={{ color: getIterationStatusColor('Completed') }}> | ||
| ✓{completedCount} |
Collaborator
There was a problem hiding this comment.
can we use a lucide icon instead of ✓ ?
| ✓{completedCount} | ||
| </span> | ||
| {failedCount > 0 && ( | ||
| <span style={{ color: getIterationStatusColor('Failed') }}> ✗{failedCount}</span> |
Collaborator
There was a problem hiding this comment.
all those references to getIterationStatusColor would benefit from the enum as well
| onMouseDown={stopEvent} | ||
| className="nodrag nopan flex items-center gap-1.5 px-2.5 text-[11px] font-semibold leading-none transition-colors hover:bg-surface-overlay" | ||
| aria-label="Return to individual iteration view" | ||
| title="Click to return to individual iteration view" |
Collaborator
There was a problem hiding this comment.
we should use i18n for those
| onPointerDown={stopEvent} | ||
| onMouseDown={stopEvent} | ||
| aria-label="Jump to first failed iteration" | ||
| title={`Jump to iteration ${firstFailedIndex + 1} (failed)`} |
Collaborator
There was a problem hiding this comment.
same, everything that is consumer facing needs to be translated.
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
2 participants
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
LoopNodeExecutionCountLoopNodeExecutionCountStateanditerationPillStateas a first-class prop onLoopNode— the component derives the size tier from its measured width automatically, no overlay wrappers neededLoopNodeExecutionCountandLoopNodeExecutionCountStatefrom the LoopNode module indexComponents/Nodes/LoopNodewith:LoopNodeExecutionCount.test.tsx) covering all key behaviors: navigation, All toggle, inline edit, jump-to-failed, size tiers, and status color mappingComponent:
LoopNodeExecutionCountProps:
state: LoopNodeExecutionCountState— active index, total, navigation callbacks, per-iteration statuses, overall statussize?: 'full' | 'compact' | 'minimal'— responsive tier (auto-computed byLoopNodefrom its measured width)Size tiers:
fullcompactminimalDefault state: pill opens in the
Allview showing aggregate execution summary (✓ completed / ✗ failed). Clicking All toggles into individual iteration navigation.Test plan
pnpm --filter @uipath/apollo-react run format:checkpasses37 testscovering navigation, All toggle, inline edit, jump-to-failed, size tiers, status colors🤖 Generated with Claude Code