Improve flow builder canvas interactions - #4053
Merged
DonOmalVindula merged 1 commit intoJul 20, 2026
Merged
Conversation
Contributor
📝 WalkthroughWalkthroughThe PR adds inline step renaming and node-focused preview simulation, centralizes resource image rendering, updates property-panel controls and validation handling, persists node properties and generated ID prefixes, and refreshes validation-panel, sidebar, edge, and route behavior. ChangesFlow builder interactions
Property panels and persisted metadata
Validation and layout
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
frontend/apps/console/src/App.tsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. frontend/apps/console/src/features/flows/components/ResourceDisplayImage.tsxESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox. frontend/apps/console/src/features/flows/components/react-flow-overrides/BaseEdge.tsxESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
DonOmalVindula
force-pushed
the
flow-builder-canvas-ux
branch
2 times, most recently
from
July 16, 2026 08:10
c820d88 to
19850a7
Compare
Codecov Report❌ Patch coverage is 📢 Thoughts on this report? Let us know! |
DonOmalVindula
force-pushed
the
flow-builder-canvas-ux
branch
5 times, most recently
from
July 20, 2026 05:57
c113b18 to
b8dd2a2
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
frontend/apps/console/src/features/flows/components/resources/steps/view/View.tsx (2)
227-252: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winPreview button duplicates the hover
sxobject a 5th time in this file.The preview
IconButton'ssx(color/hoverapplyStylesblock) is an exact copy of the Add/Configure/Delete buttons below it. Worth extracting into a shared constant (similar to the existingdashedAddButtonSx) to avoid drifting styles across five near-identical buttons.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/apps/console/src/features/flows/components/resources/steps/view/View.tsx` around lines 227 - 252, Extract the duplicated preview/Add/Configure/Delete IconButton styling into a shared constant, analogous to dashedAddButtonSx, and replace the inline sx object in the preview button and matching buttons below with that constant. Preserve the existing color and light/dark hover behavior.
205-226: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winNew clickable header lacks keyboard support.
The header
Boxnow hasonClick+cursor: pointerto open the properties panel, but it's a plaindivwith norole,tabIndex, or key handler — keyboard users can't trigger this new shortcut (though the Cog/Configure button remains a keyboard-accessible fallback).♻️ Suggested fix
<Box data-testid="step-action-panel" display="flex" justifyContent="space-between" alignItems="center" + role={onActionPanelClick ? 'button' : undefined} + tabIndex={onActionPanelClick ? 0 : undefined} onClick={(event: MouseEvent<HTMLDivElement>) => { if ((event.target as HTMLElement).closest('button, input')) { return; } onActionPanelClick?.(event); }} + onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => { + if ((event.key === 'Enter' || event.key === ' ') && !(event.target as HTMLElement).closest('button, input')) { + onActionPanelClick?.(event as unknown as MouseEvent<HTMLDivElement>); + } + }}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/apps/console/src/features/flows/components/resources/steps/view/View.tsx` around lines 205 - 226, Update the step-action-panel Box to be keyboard accessible when onActionPanelClick is provided: add an appropriate interactive role and tabIndex, and invoke the same onActionPanelClick behavior for Enter and Space key presses while preserving the existing button/input exclusion for pointer clicks.frontend/apps/console/src/features/flows/components/resources/steps/execution/ExecutionMinimal.tsx (1)
107-118: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winDescription hint icon isn't reachable via keyboard.
The
Tooltipwraps a plainBox(adiv), which never receives focus, so the description tooltip can only be revealed by hovering with a mouse — keyboard-only users have no way to see it since there's no other UI surfacingdisplayDescription.♻️ Suggested fix
<Tooltip title={displayDescription}> - <Box - display="inline-flex" - alignItems="center" + <IconButton + size="small" + disableRipple data-testid="execution-description-hint" - sx={{color: 'common.white', cursor: 'help', px: 0.5}} + sx={{color: 'common.white', cursor: 'help', p: 0.5}} > <InfoIcon size={18} /> - </Box> + </IconButton> </Tooltip>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/apps/console/src/features/flows/components/resources/steps/execution/ExecutionMinimal.tsx` around lines 107 - 118, Make the description hint in ExecutionMinimal keyboard-reachable by replacing the non-focusable Box trigger around InfoIcon with an appropriate focusable interactive element, while preserving the existing tooltip, styling, test id, and displayDescription condition. Ensure the tooltip opens when the element receives keyboard focus as well as on pointer hover.frontend/apps/console/src/features/flows/components/resources/elements/adapters/ButtonAdapter.tsx (1)
30-34: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy liftHardcoded filename allowlist duplicates the
preserveImageColorconcept used elsewhere in this PR.
FULL_COLOR_ICON_PATTERNis a second, filename-based mechanism for "keep this icon's colors" alongside the metadata-drivendisplay.preserveImageColorfield already introduced inExecution.tsx/ExecutionFactory.tsx. Any new full-color icon added towidgets.json/executors.jsonlater must remember to update this regex or it will get silently inverted in dark mode. Consider threading apreserveIconColor-style flag throughButtonConfig/ButtonElementinstead, reusing the same convention.Please also verify that the raw
srcvalues passed torenderButtonIcon(e.g. frombuttonElement.startIcon) are never hashed/versioned by the asset pipeline before reachingresolveStaticResourcePath, since the$-anchored regex would silently stop matching if they were.Also applies to: 120-133
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/apps/console/src/features/flows/components/resources/elements/adapters/ButtonAdapter.tsx` around lines 30 - 34, Replace the filename-based FULL_COLOR_ICON_PATTERN logic in ButtonAdapter/renderButtonIcon with a preserveIconColor-style flag propagated through ButtonConfig and ButtonElement, sourced from the existing display.preserveImageColor metadata used by Execution.tsx and ExecutionFactory.tsx. Ensure renderButtonIcon passes raw src values unchanged to resolveStaticResourcePath, without hashing or versioning, and use the propagated flag to decide whether dark-mode inversion is applied.frontend/apps/console/src/features/flows/utils/reactFlowTransformer.ts (1)
587-590: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove redundant property assignment.
This block can safely be removed. The mapping of
stepData.propertiestoflowNode.propertiesis now universally handled at the top of the function (lines 508-512) for all node types, making this node-specific assignment redundant.♻️ Proposed refactor
- // Add decision properties if present (for conditions) - if (stepData?.properties && Object.keys(stepData.properties).length > 0) { - flowNode.properties = stepData.properties; - }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/apps/console/src/features/flows/utils/reactFlowTransformer.ts` around lines 587 - 590, Remove the conditional stepData.properties assignment block from the node transformation logic. The existing universal mapping near the start of the transformer should remain the sole source for assigning flowNode.properties across all node types.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@frontend/apps/console/src/features/flows/components/resource-property-panel/TextPropertyField.tsx`:
- Around line 157-162: Update the onBlur handler in TextPropertyField so the
commitsOnBlur path calls onChange without immediately resetting localValue; rely
on the existing propertyValue synchronization effect for successful updates. Add
a strict equality check to avoid invoking onChange when localValue already
equals propertyValue, preserving unchanged values on focus-and-blur.
In
`@frontend/apps/console/src/features/flows/components/resources/steps/execution/ExecutionMinimal.scss`:
- Around line 133-143: In the execution step styling block, add a blank line
between the padding declaration and the double-slash comment preceding cursor:
pointer to satisfy the scss/double-slash-comment-empty-line-before rule; leave
the hover styles unchanged.
In
`@frontend/apps/console/src/features/flows/components/resources/steps/StepTitle.tsx`:
- Around line 118-132: Update StepTitle’s rendered edit affordances so editing
is enabled only when stepId is available: guard the onDoubleClick handler, hide
or disable the rename Tooltip, and use a non-text cursor when stepId is null.
Preserve the existing displayed text while preventing palette/non-node instances
from entering the unsaveable edit state.
---
Nitpick comments:
In
`@frontend/apps/console/src/features/flows/components/resources/elements/adapters/ButtonAdapter.tsx`:
- Around line 30-34: Replace the filename-based FULL_COLOR_ICON_PATTERN logic in
ButtonAdapter/renderButtonIcon with a preserveIconColor-style flag propagated
through ButtonConfig and ButtonElement, sourced from the existing
display.preserveImageColor metadata used by Execution.tsx and
ExecutionFactory.tsx. Ensure renderButtonIcon passes raw src values unchanged to
resolveStaticResourcePath, without hashing or versioning, and use the propagated
flag to decide whether dark-mode inversion is applied.
In
`@frontend/apps/console/src/features/flows/components/resources/steps/execution/ExecutionMinimal.tsx`:
- Around line 107-118: Make the description hint in ExecutionMinimal
keyboard-reachable by replacing the non-focusable Box trigger around InfoIcon
with an appropriate focusable interactive element, while preserving the existing
tooltip, styling, test id, and displayDescription condition. Ensure the tooltip
opens when the element receives keyboard focus as well as on pointer hover.
In
`@frontend/apps/console/src/features/flows/components/resources/steps/view/View.tsx`:
- Around line 227-252: Extract the duplicated preview/Add/Configure/Delete
IconButton styling into a shared constant, analogous to dashedAddButtonSx, and
replace the inline sx object in the preview button and matching buttons below
with that constant. Preserve the existing color and light/dark hover behavior.
- Around line 205-226: Update the step-action-panel Box to be keyboard
accessible when onActionPanelClick is provided: add an appropriate interactive
role and tabIndex, and invoke the same onActionPanelClick behavior for Enter and
Space key presses while preserving the existing button/input exclusion for
pointer clicks.
In `@frontend/apps/console/src/features/flows/utils/reactFlowTransformer.ts`:
- Around line 587-590: Remove the conditional stepData.properties assignment
block from the node transformation logic. The existing universal mapping near
the start of the transformer should remain the sole source for assigning
flowNode.properties across all node types.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: d477b44e-f89f-44fd-8245-6464ce3221fd
📒 Files selected for processing (76)
frontend/apps/console/src/App.tsxfrontend/apps/console/src/features/flows/components/ResourceDisplayImage.tsxfrontend/apps/console/src/features/flows/components/react-flow-overrides/BaseEdge.tsxfrontend/apps/console/src/features/flows/components/react-flow-overrides/__tests__/BaseEdge.test.tsxfrontend/apps/console/src/features/flows/components/resource-panel/ResourcePanelItem.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/CheckboxPropertyField.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/ClassesPropertyField.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/I18nConfigurationCard.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/PanelActionButton.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/ResourceProperties.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/ResourcePropertyPanel.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/TextPropertyField.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/VariantSelect.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/__tests__/ResourcePropertyPanel.test.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/rich-text/RichTextWithTranslation.tsxfrontend/apps/console/src/features/flows/components/resources/elements/adapters/ButtonAdapter.tsxfrontend/apps/console/src/features/flows/components/resources/steps/StepTitle.tsxfrontend/apps/console/src/features/flows/components/resources/steps/__tests__/StepTitle.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/call/Call.tsxfrontend/apps/console/src/features/flows/components/resources/steps/call/__tests__/Call.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/Execution.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/ExecutionMinimal.scssfrontend/apps/console/src/features/flows/components/resources/steps/execution/ExecutionMinimal.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/__tests__/Execution.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/__tests__/ExecutionMinimal.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/ExecutionFactory.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/GithubExecution.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/GoogleExecution.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/__tests__/ExecutionFactory.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/__tests__/GithubExecution.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/__tests__/GoogleExecution.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/view/ReorderableElement.tsxfrontend/apps/console/src/features/flows/components/resources/steps/view/View.tsxfrontend/apps/console/src/features/flows/components/resources/steps/view/__tests__/View.test.tsxfrontend/apps/console/src/features/flows/components/validation-panel/ValidationNotificationsList.tsxfrontend/apps/console/src/features/flows/components/validation-panel/ValidationPanel.tsxfrontend/apps/console/src/features/flows/components/validation-panel/__tests__/ValidationPanel.test.tsxfrontend/apps/console/src/features/flows/components/visual-flow/DecoratedVisualFlow.tsxfrontend/apps/console/src/features/flows/components/visual-flow/__tests__/DecoratedVisualFlow.test.tsxfrontend/apps/console/src/features/flows/components/visual-flow/__tests__/SimulationStepPreview.test.tsxfrontend/apps/console/src/features/flows/context/FlowBuilderCoreProvider.tsxfrontend/apps/console/src/features/flows/context/StepPreviewContext.tsxfrontend/apps/console/src/features/flows/context/__tests__/FlowBuilderCoreProvider.test.tsxfrontend/apps/console/src/features/flows/hooks/useFlowSimulation.tsfrontend/apps/console/src/features/flows/hooks/useRenameStep.tsfrontend/apps/console/src/features/flows/hooks/useResourceFieldError.tsfrontend/apps/console/src/features/flows/hooks/useStepPreview.tsfrontend/apps/console/src/features/flows/models/base.tsfrontend/apps/console/src/features/flows/models/steps.tsfrontend/apps/console/src/features/flows/utils/__tests__/reactFlowTransformer.test.tsfrontend/apps/console/src/features/flows/utils/__tests__/resolveStepMetadata.test.tsfrontend/apps/console/src/features/flows/utils/__tests__/updateTemplatePlaceholderReferences.test.tsfrontend/apps/console/src/features/flows/utils/reactFlowTransformer.tsfrontend/apps/console/src/features/flows/utils/updateTemplatePlaceholderReferences.tsfrontend/apps/console/src/features/login-flow/components/LoginFlowBuilder.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/CallProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/FieldExtendedProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/__tests__/ExecutionExtendedProperties.test.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/CheckboxWithHint.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/EmailProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/ExecutorInputsEditor.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/FederationProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/HttpRequestProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OUExecutorProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OUResolverProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OpenID4VPProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OtpProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/PermissionValidatorProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/ProvisioningProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/SmsProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/UserTypeResolverProperties.tsxfrontend/apps/console/src/features/login-flow/data/executors.jsonfrontend/apps/console/src/features/login-flow/data/templates.jsonfrontend/apps/console/src/features/login-flow/data/widgets.jsonfrontend/apps/console/src/layouts/DashboardLayout.tsxfrontend/packages/i18n/src/locales/en-US.ts
💤 Files with no reviewable changes (4)
- frontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/tests/GithubExecution.test.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/GoogleExecution.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/GithubExecution.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/tests/GoogleExecution.test.tsx
- Show the step id as the node header title with double-click-to-edit, including uniqueness and format validation and automatic edge rewiring - Label the call nodes created by the sign-up, sign-in, and recovery link widgets with their purpose (icon, name, and description matching the resource panel entry) and purposeful id prefixes, so the otherwise identical nodes are tellable apart - Persist node properties for every node type when saving, not only executions - Keep the edge delete button visible while an edge is selected and enlarge its hit target - Signal clickable step bodies and elements with pointer cursors and a hover tint Refs thunder-id#3871
DonOmalVindula
force-pushed
the
flow-builder-canvas-ux
branch
from
July 20, 2026 06:21
b8dd2a2 to
b922612
Compare
brionmario
approved these changes
Jul 20, 2026
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/apps/console/src/features/flows/components/validation-panel/ValidationNotificationsList.tsx (1)
134-151: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winGeneric aria-label on notification rows.
Every navigable row announces the same
aria-label={t('common:show')}regardless of content, giving screen-reader users no way to distinguish which notification a given row corresponds to.♿ Proposed fix to make the aria-label content-aware
- aria-label={t('common:show')} + aria-label={typeof notification.getMessage() === 'string' ? (notification.getMessage() as string) : t('common:show')}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/apps/console/src/features/flows/components/validation-panel/ValidationNotificationsList.tsx` around lines 134 - 151, Update the notification row rendered in ValidationNotificationsList to derive its aria-label from the specific notification content instead of the generic t('common:show') label. Reuse the notification’s existing display text or accessible content so screen readers can distinguish rows, while preserving the current onNotificationClick behavior and styling.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@frontend/apps/console/src/features/flows/components/validation-panel/ValidationNotificationsList.tsx`:
- Around line 134-151: Update the notification row rendered in
ValidationNotificationsList to derive its aria-label from the specific
notification content instead of the generic t('common:show') label. Reuse the
notification’s existing display text or accessible content so screen readers can
distinguish rows, while preserving the current onNotificationClick behavior and
styling.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 6d35bcc7-60aa-4f41-8207-1fa903be3b72
📒 Files selected for processing (76)
frontend/apps/console/src/App.tsxfrontend/apps/console/src/features/flows/components/ResourceDisplayImage.tsxfrontend/apps/console/src/features/flows/components/react-flow-overrides/BaseEdge.tsxfrontend/apps/console/src/features/flows/components/react-flow-overrides/__tests__/BaseEdge.test.tsxfrontend/apps/console/src/features/flows/components/resource-panel/ResourcePanelItem.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/CheckboxPropertyField.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/ClassesPropertyField.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/I18nConfigurationCard.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/PanelActionButton.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/ResourceProperties.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/ResourcePropertyPanel.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/TextPropertyField.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/VariantSelect.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/__tests__/ResourcePropertyPanel.test.tsxfrontend/apps/console/src/features/flows/components/resource-property-panel/rich-text/RichTextWithTranslation.tsxfrontend/apps/console/src/features/flows/components/resources/elements/adapters/ButtonAdapter.tsxfrontend/apps/console/src/features/flows/components/resources/steps/StepTitle.tsxfrontend/apps/console/src/features/flows/components/resources/steps/__tests__/StepTitle.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/call/Call.tsxfrontend/apps/console/src/features/flows/components/resources/steps/call/__tests__/Call.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/Execution.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/ExecutionMinimal.scssfrontend/apps/console/src/features/flows/components/resources/steps/execution/ExecutionMinimal.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/__tests__/Execution.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/__tests__/ExecutionMinimal.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/ExecutionFactory.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/GithubExecution.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/GoogleExecution.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/__tests__/ExecutionFactory.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/__tests__/GithubExecution.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/__tests__/GoogleExecution.test.tsxfrontend/apps/console/src/features/flows/components/resources/steps/view/ReorderableElement.tsxfrontend/apps/console/src/features/flows/components/resources/steps/view/View.tsxfrontend/apps/console/src/features/flows/components/resources/steps/view/__tests__/View.test.tsxfrontend/apps/console/src/features/flows/components/validation-panel/ValidationNotificationsList.tsxfrontend/apps/console/src/features/flows/components/validation-panel/ValidationPanel.tsxfrontend/apps/console/src/features/flows/components/validation-panel/__tests__/ValidationPanel.test.tsxfrontend/apps/console/src/features/flows/components/visual-flow/DecoratedVisualFlow.tsxfrontend/apps/console/src/features/flows/components/visual-flow/__tests__/DecoratedVisualFlow.test.tsxfrontend/apps/console/src/features/flows/components/visual-flow/__tests__/SimulationStepPreview.test.tsxfrontend/apps/console/src/features/flows/context/FlowBuilderCoreProvider.tsxfrontend/apps/console/src/features/flows/context/StepPreviewContext.tsxfrontend/apps/console/src/features/flows/context/__tests__/FlowBuilderCoreProvider.test.tsxfrontend/apps/console/src/features/flows/hooks/useFlowSimulation.tsfrontend/apps/console/src/features/flows/hooks/useRenameStep.tsfrontend/apps/console/src/features/flows/hooks/useResourceFieldError.tsfrontend/apps/console/src/features/flows/hooks/useStepPreview.tsfrontend/apps/console/src/features/flows/models/base.tsfrontend/apps/console/src/features/flows/models/steps.tsfrontend/apps/console/src/features/flows/utils/__tests__/reactFlowTransformer.test.tsfrontend/apps/console/src/features/flows/utils/__tests__/resolveStepMetadata.test.tsfrontend/apps/console/src/features/flows/utils/__tests__/updateTemplatePlaceholderReferences.test.tsfrontend/apps/console/src/features/flows/utils/reactFlowTransformer.tsfrontend/apps/console/src/features/flows/utils/updateTemplatePlaceholderReferences.tsfrontend/apps/console/src/features/login-flow/components/LoginFlowBuilder.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/CallProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/FieldExtendedProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/__tests__/ExecutionExtendedProperties.test.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/CheckboxWithHint.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/EmailProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/ExecutorInputsEditor.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/FederationProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/HttpRequestProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OUExecutorProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OUResolverProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OpenID4VPProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OtpProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/PermissionValidatorProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/ProvisioningProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/SmsProperties.tsxfrontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/UserTypeResolverProperties.tsxfrontend/apps/console/src/features/login-flow/data/executors.jsonfrontend/apps/console/src/features/login-flow/data/templates.jsonfrontend/apps/console/src/features/login-flow/data/widgets.jsonfrontend/apps/console/src/layouts/DashboardLayout.tsxfrontend/packages/i18n/src/locales/en-US.ts
💤 Files with no reviewable changes (4)
- frontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/tests/GithubExecution.test.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/GithubExecution.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/GoogleExecution.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/tests/GoogleExecution.test.tsx
🚧 Files skipped from review as they are similar to previous changes (64)
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/SmsProperties.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OUResolverProperties.tsx
- frontend/apps/console/src/features/flows/models/base.ts
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/PermissionValidatorProperties.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/UserTypeResolverProperties.tsx
- frontend/apps/console/src/features/flows/context/StepPreviewContext.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/ExecutionMinimal.scss
- frontend/apps/console/src/features/flows/components/react-flow-overrides/tests/BaseEdge.test.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OtpProperties.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/EmailProperties.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OUExecutorProperties.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/ProvisioningProperties.tsx
- frontend/apps/console/src/features/flows/hooks/useResourceFieldError.ts
- frontend/apps/console/src/features/login-flow/components/LoginFlowBuilder.tsx
- frontend/apps/console/src/features/flows/components/resource-property-panel/PanelActionButton.tsx
- frontend/apps/console/src/features/flows/context/tests/FlowBuilderCoreProvider.test.tsx
- frontend/apps/console/src/features/flows/hooks/useRenameStep.ts
- frontend/apps/console/src/features/flows/components/visual-flow/tests/SimulationStepPreview.test.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/HttpRequestProperties.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/tests/ExecutionMinimal.test.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/CheckboxWithHint.tsx
- frontend/apps/console/src/App.tsx
- frontend/apps/console/src/features/login-flow/data/widgets.json
- frontend/apps/console/src/features/flows/components/resources/steps/view/ReorderableElement.tsx
- frontend/apps/console/src/features/flows/components/resource-property-panel/VariantSelect.tsx
- frontend/apps/console/src/features/flows/components/react-flow-overrides/BaseEdge.tsx
- frontend/apps/console/src/features/flows/utils/tests/reactFlowTransformer.test.ts
- frontend/apps/console/src/features/flows/components/resources/steps/call/Call.tsx
- frontend/apps/console/src/features/flows/utils/updateTemplatePlaceholderReferences.ts
- frontend/apps/console/src/features/flows/components/visual-flow/DecoratedVisualFlow.tsx
- frontend/apps/console/src/features/flows/hooks/useStepPreview.ts
- frontend/apps/console/src/features/login-flow/data/executors.json
- frontend/packages/i18n/src/locales/en-US.ts
- frontend/apps/console/src/features/flows/hooks/useFlowSimulation.ts
- frontend/apps/console/src/features/flows/components/ResourceDisplayImage.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/Execution.tsx
- frontend/apps/console/src/features/flows/context/FlowBuilderCoreProvider.tsx
- frontend/apps/console/src/features/flows/components/resource-property-panel/CheckboxPropertyField.tsx
- frontend/apps/console/src/features/flows/components/resource-property-panel/rich-text/RichTextWithTranslation.tsx
- frontend/apps/console/src/features/flows/components/visual-flow/tests/DecoratedVisualFlow.test.tsx
- frontend/apps/console/src/features/flows/components/resource-panel/ResourcePanelItem.tsx
- frontend/apps/console/src/features/flows/components/resources/elements/adapters/ButtonAdapter.tsx
- frontend/apps/console/src/features/flows/components/resource-property-panel/tests/ResourcePropertyPanel.test.tsx
- frontend/apps/console/src/features/flows/utils/tests/updateTemplatePlaceholderReferences.test.ts
- frontend/apps/console/src/features/flows/components/validation-panel/tests/ValidationPanel.test.tsx
- frontend/apps/console/src/features/flows/components/validation-panel/ValidationPanel.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/OpenID4VPProperties.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/call/tests/Call.test.tsx
- frontend/apps/console/src/features/flows/utils/reactFlowTransformer.ts
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/CallProperties.tsx
- frontend/apps/console/src/features/flows/components/resource-property-panel/ResourceProperties.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/view/tests/View.test.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/FieldExtendedProperties.tsx
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/tests/ExecutionExtendedProperties.test.tsx
- frontend/apps/console/src/features/flows/utils/tests/resolveStepMetadata.test.ts
- frontend/apps/console/src/features/login-flow/components/resource-property-panel/extended-properties/execution-properties/FederationProperties.tsx
- frontend/apps/console/src/features/flows/components/resource-property-panel/ResourcePropertyPanel.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/tests/StepTitle.test.tsx
- frontend/apps/console/src/features/flows/components/resource-property-panel/TextPropertyField.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/execution-factory/tests/ExecutionFactory.test.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/tests/Execution.test.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/execution/ExecutionMinimal.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/view/View.tsx
- frontend/apps/console/src/features/flows/components/resources/steps/StepTitle.tsx
DonOmalVindula
enabled auto-merge
July 20, 2026 06:45
This was referenced Jul 20, 2026
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.
Purpose
Improve the flow builder canvas and properties panel UX. This addresses the canvas interaction gaps listed in #3871 (follow-up to #4015) plus a set of consistency and discoverability issues found along the way:
Canvas nodes
{id}_NEXT/{id}_INCOMPLETEhandles).useRenameStephook. The panel Id field previously wrote into node data, which the save transformer ignored.ResourceDisplayImagecomponent (asset paths and icon-library names). The Google/GitHub special-case renderers, which had drifted from the panel entries, are removed.#151515with step id at font weight 600.preserveImageColordisplay flag so dark mode does not invert full-color brand logos. Monochrome button icons inside view nodes (e.g. GitHub) now invert correctly in dark mode.startAton the simulation).Properties panel
PanelActionButtonstyled like the flow preview's option rows.Notifications panel
Misc
SessionExecutorpanel entry gained its missing description.propertiespersist for all step types in the save transformer.Approach
useRenameStep) keeps every rename surface consistent and syncs the interaction state.ResourceDisplayImageso the two surfaces cannot drift again.useFlowSimulation) with a newstartAtentry point, exposed to canvas nodes through a minimal context carrying only a stable callback.Related Issues
Related PRs
Checklist
breaking changelabel added.Security checks
Summary by CodeRabbit