feat(apollo-react): IA updates, Node Flyout Panel migration, and NodePropertyTrigger#781
Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
This PR introduces a new Canvas panel control UI and continues the Canvas panel IA re-organization, while migrating the existing NodePropertiesPanel (now “Node Flyout Panel” in Storybook) off Emotion and onto Tailwind/AP Wind conventions.
Changes:
- Added the new
NodePropertyPanelcontrol (pill trigger + popover/portal menu) and Storybook stories. - Migrated
NodePropertiesPaneland its field components from Emotion-styled wrappers to Tailwind classes. - Updated Storybook panel naming / ordering and removed the standalone
NodeInspectorstory file (but reintroduced an inspector story inside the flyout panel stories).
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/controls/NodePropertyPanel/NodePropertyPanel.tsx | New NodePropertyPanel control with portaled options menu |
| packages/apollo-react/src/canvas/controls/NodePropertyPanel/NodePropertyPanel.stories.tsx | Stories for the new Node Property Panel |
| packages/apollo-react/src/canvas/controls/NodePropertyPanel/index.ts | Barrel exports for the new control |
| packages/apollo-react/src/canvas/controls/index.ts | Re-export NodePropertyPanel from canvas controls |
| packages/apollo-react/src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.tsx | Tailwind migration of section/field layout wrappers |
| packages/apollo-react/src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.styles.ts | Deleted Emotion styles for the panel/fields |
| packages/apollo-react/src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.stories.tsx | Renamed story + added an “Inspector” story implementation |
| packages/apollo-react/src/canvas/components/NodePropertiesPanel/index.ts | Removed re-export of deleted Emotion styles |
| packages/apollo-react/src/canvas/components/NodePropertiesPanel/fields/TextField.tsx | Tailwind migration of text/textarea field |
| packages/apollo-react/src/canvas/components/NodePropertiesPanel/fields/SelectField.tsx | Tailwind migration of select field |
| packages/apollo-react/src/canvas/components/NodePropertiesPanel/fields/NumberField.tsx | Tailwind migration of number field |
| packages/apollo-react/src/canvas/components/NodePropertiesPanel/fields/CheckboxField.tsx | Tailwind migration of checkbox field |
| packages/apollo-react/src/canvas/components/NodeInspector.stories.tsx | Removed standalone Node Inspector story file |
| packages/apollo-react/src/canvas/components/CollapseConfig/CollapseConfig.stories.tsx | Renamed story title |
| apps/storybook/.storybook/preview.tsx | Updated storySort order for Canvas panel IA |
Comments suppressed due to low confidence (1)
packages/apollo-react/src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.stories.tsx:29
- Story title is still under
Components/Panels/..., but panel IA sorting inapps/storybook/.storybook/preview.tsxis defined underCanvas > Components > Panels. As-is, this story won’t land in (or be ordered within) the intended Canvas panel section.
const meta: Meta<typeof NodePropertiesPanel> = {
title: 'Components/Panels/Node Flyout Panel',
component: NodePropertiesPanel,
parameters: { layout: 'fullscreen' },
decorators: [withCanvasProviders()],
};
1980computer
changed the title
7 tasks
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 15 out of 15 changed files in this pull request and generated 9 comments.
Comments suppressed due to low confidence (1)
packages/apollo-react/src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.stories.tsx:29
NodePropertiesPanel.stories.tsxdeclarescomponent: NodePropertiesPanel, but theInspectorstory rendersNodeInspectorinstead. This mixes unrelated stories under the "Node Flyout Panel" group and can break autodocs/controls that assume stories render the meta component. The inspector demo should live in its ownNodeInspector.stories.tsx(with the updated Panels IA title), or be removed from this meta file.
const meta: Meta<typeof NodePropertiesPanel> = {
title: 'Components/Panels/Node Flyout Panel',
component: NodePropertiesPanel,
parameters: { layout: 'fullscreen' },
decorators: [withCanvasProviders()],
};
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
7 tasks
CalinaCristian
approved these changes
Jun 11, 2026
…o current options In uncontrolled mode the internal behavior/layout state initializes from options[0] once; if the option set later changes to one that no longer contains the selection, the radio group rendered with no checked item. Clamp at render time (no effect/state-sync) so the selection falls back to the first available option. Addresses the remaining Copilot review thread on PR #781. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
CalinaCristian
approved these changes
Jun 11, 2026
CalinaCristian
added
the
dev-packages
Contributor
📦 Dev Packages🧹 Dev packages cleaned up after PR close. Last updated: 2026-06-11 18:20:17 PT |
Adds optional onPresetRename — when provided, each preset row renders a pencil button (before delete) that emits the preset and keeps the menu open, with the same pointerdown/up stoppers so Radix's pointerup-select doesn't apply the preset. The naming/rename dialog itself is consumer UX (fires the callback only). Localized via the established useSafeLingui pattern (canvas.property_trigger.rename_preset). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
CalinaCristian
force-pushed
the
ia-and-panel-nodes
branch
from
60208e7 to
479392b
Compare
CalinaCristian
approved these changes
Jun 12, 2026
CalinaCristian
approved these changes
Jun 12, 2026
CalinaCristian
added a commit
that referenced
this pull request
Jun 12, 2026
…o current options In uncontrolled mode the internal behavior/layout state initializes from options[0] once; if the option set later changes to one that no longer contains the selection, the radio group rendered with no checked item. Clamp at render time (no effect/state-sync) so the selection falls back to the first available option. Addresses the remaining Copilot review thread on PR #781. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
CalinaCristian
added a commit
that referenced
this pull request
Jun 12, 2026
…ePropertyTrigger The review-feedback pass on #781 replaced the inline pencil/trash buttons on preset rows with indented per-preset 'Rename {label}' / 'Delete {label}' menu items. Product/design prefers the inline affordance — restore it: - preset rows render pencil/trash icon buttons inline (pointer events stopped so the Radix item's pointerup-select doesn't apply the preset) - truncated preset labels get a native title tooltip - catalog: rename_preset / delete_preset ids replace the *_with_label pair - story: wire onPresetRename (the pencil only renders when provided) with a bounded '(n)' counter demo handler Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
Focused PR covering Canvas panel IA reorganisation, Node Flyout Panel Tailwind migration, and the new NodePropertyTrigger control component. Intentionally scoped — Node Manifest Panel and Expression Editor are in a separate PR (#760).
NodePropertyTrigger (new)
A pill trigger (label + sliders button) whose popover is built on
@uipath/apollo-wind's RadixDropdownMenu— the same primitive the canvas already composes inCanvasDropdownMenu/NodeContextMenu(modal={false}for the React FlowforeignObjectreason documented there). Positioning, dismissal (outside click / Escape), focus management, arrow-key navigation, typeahead, andaria-*wiring all come from the primitive instead of hand-rolled listeners.Two-tier API:
panels,behavior/behaviorOptions,layout/layoutOptions,presets,canSavePreset+ callbacks render the canonical panel-options menu. Empty sections collapse entirely (heading + separator); the presets empty state stays whilecanSavePresetis true. Uncontrolled behavior/layout selections clamp to the current option set at render time, so dynamic option changes can't strand the radio group.children) — fully replaces the built-in sections for custom structure/ordering/text. Exported design-matched subcomponents:NodePropertyTriggerCheckboxItem(keeps the menu open by default;closeOnSelectopt-out),NodePropertyTriggerRadioItem,NodePropertyTriggerSectionLabel,NodePropertyTriggerSeparator— composable with any windDropdownMenu*primitive.Details:
id;onPanelTogglereceivesid ?? label, so localized display labels are never the toggle identity.menuitemcheckboxand keep the menu open so several panels can be toggled in one visit; radios and preset apply close on select.preventDefault()so the menu stays open after the action.showMenu={false}renders a label-only pill for secondary triggers (e.g. a Variables pill). The label renders as a non-interactive span when noonPropertiesClickis supplied.open/onOpenChangesupported; uncontrolled by default.useSafeLingui(same pattern asCanvasZoomControls/StageNode): section headings, presets empty state, save/apply/rename/delete labels, and theProperties/Panel options/option-label defaults all go throughcanvas.property_trigger.*ids with baked English fallback; entries added to the canvasen.jsonsource catalog. (Note:lingui extractcurrently fails repo-wide on a pre-existing duplicate message inap-chat/attachments.tsx— catalog entries were added manually in the same shape asloop-node/stage-node.)@uipath/apollo-react/canvas/controls.NodePropertiesPanel → Node Flyout Panel
@emotion/styledto Tailwind CSSNodePropertiesPanel.styles.tsdeletedCheckboxField,NumberField,SelectField,TextField) migrated--canvas-*) so Canvas theme overrides continue to applyPanel IA + story renames
Canvas > Components > Panelswith explicitstorySortComponents/Panelspath)What this is NOT
Node Manifest Panel, ParameterField, and ExpressionField are in PR #760.
Test plan
Canvas > Components > Panelsshows Node Property Trigger → Node Flyout Panel in correct orderbehaviorOptions/layoutOptions/panels/presetsprops reflected; empty sections collapse (no orphan headings)Composedstory renders custom sections via children;LabelOnlyPillstory renders the menu-less pillNodePropertyTrigger.test.tsx— 27 tests passing🤖 Generated with Claude Code