Skip to content

feat(apollo-react): add NodePropertyPanel with FormSchema support (Phase 1)#760

Merged
1980computer merged 2 commits into
ia-and-panel-nodesfrom
add-properties-panel-form-manifest
Jun 11, 2026
Merged

feat(apollo-react): add NodePropertyPanel with FormSchema support (Phase 1)#760
1980computer merged 2 commits into
ia-and-panel-nodesfrom
add-properties-panel-form-manifest

Conversation

@1980computer

@1980computer 1980computer commented May 29, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • New NodePropertyPanel — a docked properties panel that renders a node's form: FormSchema
    (from @uipath/apollo-wind) directly from its manifest in NodeRegistryProvider. No prop
    drilling; the panel looks up the manifest by nodeType from the nearest provider in the tree.
  • Multi-step FormSchema (steps): each step becomes a tab — titles and field types are fully
    consumer-defined in the manifest. The panel resets the active tab whenever nodeType changes.
  • Single-page FormSchema (sections): rendered as a flat scrollable form via MetadataForm.
  • Empty state: shown when the manifest has no form or the steps array is empty.
  • onSubmit is async-compatible: onSubmit?: (data: unknown) => void | Promise<void>.
  • Migrated NodePropertiesPanel from @emotion/styled to Tailwind CSS. The
    NodePropertiesPanel.styles.ts file is deleted.
  • Story titles updated — existing stories reorganised under Components/Panels/.
  • NodePropertyTrigger improvements — named constants (no magic numbers), extensible union
    types ((string & {})), uncontrolled fallback state, Escape/scroll/resize close, ARIA roles.
  • Field border fixTextField, SelectField, NumberField now use
    border-(--canvas-border) / focus:border-(--canvas-primary) instead of the invalid
    theme() fallback syntax.
  • ProbeCardstopPropagation and preventDefault guarded by handler presence so wheel
    events bubble correctly when no canvas handlers are wired; useLatestRef dep array fixed.
  • Unit testsNodePropertyPanel.test.tsx (8 tests) and ProbeCard.test.tsx (8 tests)
    covering keyboard shortcuts, wheel forwarding, and drag-session cleanup.

What this is NOT (Phase 2)

Variable binding for form fields (the {x} bind button / variable picker popover) is deferred to
Phase 2. The multi-step form currently renders an independent MetadataForm per tab — shared
cross-tab state is a Phase 2 concern. A comment in the component acknowledges this limitation.

Test plan

  • View Components/Panels/Node Property Panel > Multi-step — node header, tabs, fields render
  • Click between tabs — correct fields shown per tab
  • Switch nodeType prop — active tab resets to the first tab of the new node type
  • View Components/Panels/Node Property Panel > SinglePage — flat form renders
  • View Components/Panels/Node Property Panel > NoSchema — empty-state message shown
  • View Components/Panels/Node Flyout Panel > Default — existing panel story still works
  • View Components/Controls/Node Property Trigger > Default — popover opens/closes on click
    and closes on Escape, scroll, or resize; behavior and layout selections update correctly

🤖 Generated with Claude Code

@github-actions

github-actions Bot commented May 29, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (PT)
apollo-design 🟢 Ready Preview, Logs Jun 11, 2026, 05:49:49 AM
apollo-docs 🟢 Ready Preview, Logs Jun 11, 2026, 05:49:49 AM
apollo-landing 🟢 Ready Preview, Logs Jun 11, 2026, 05:49:49 AM
apollo-vertex 🟢 Ready Preview, Logs Jun 11, 2026, 05:49:49 AM

@github-actions github-actions Bot added the size:XL 500-999 changed lines. label May 29, 2026
@1980computer 1980computer marked this pull request as draft May 29, 2026 18:07
@github-actions

github-actions Bot commented May 29, 2026

Copy link
Copy Markdown
Contributor

Dependency License Review

  • 1922 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1692
ISC 89
Apache-2.0 55
BSD-3-Clause 27
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
MIT-0 3
CC0-1.0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.2.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

@1980computer 1980computer force-pushed the add-properties-panel-form-manifest branch 3 times, most recently from a9b2cfc to c862813 Compare May 29, 2026 18:34
@github-actions github-actions Bot added size:XXL 1,000+ changed lines. app:storybook and removed size:XL 500-999 changed lines. labels May 29, 2026
@1980computer 1980computer force-pushed the add-properties-panel-form-manifest branch 2 times, most recently from b12cb77 to b0f7264 Compare May 29, 2026 18:47
@1980computer 1980computer force-pushed the add-properties-panel-form-manifest branch 9 times, most recently from 96c6e06 to aaf1f3f Compare May 29, 2026 20:05
@1980computer 1980computer force-pushed the add-properties-panel-form-manifest branch 2 times, most recently from 5705e3b to 3b7ae8b Compare May 29, 2026 20:29
@1980computer 1980computer force-pushed the add-properties-panel-form-manifest branch from 3b7ae8b to 38b0e57 Compare May 29, 2026 22:17

@CalinaCristian CalinaCristian left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR is hard to review, it seems to have commits from #781 , can you clean it up to only have the diffs? Or what's the difference?

Copilot AI review requested due to automatic review settings June 10, 2026 19:50

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 26 out of 26 changed files in this pull request and generated 7 comments.

Comment thread packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx
Comment thread packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx Outdated
Comment thread packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx Outdated
@1980computer 1980computer force-pushed the add-properties-panel-form-manifest branch from 28181f4 to af82409 Compare June 10, 2026 22:13
@1980computer 1980computer changed the title feat(apollo-react): add NodeManifestPanel with parameter form (Phase 1) feat(apollo-react): add NodePropertyPanel with FormSchema support (Phase 1) Jun 10, 2026
Copilot AI review requested due to automatic review settings June 10, 2026 22:25
@1980computer 1980computer force-pushed the add-properties-panel-form-manifest branch from af82409 to 8ef5f19 Compare June 10, 2026 22:25

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 8 comments.

@1980computer 1980computer force-pushed the add-properties-panel-form-manifest branch from 8ef5f19 to 9577354 Compare June 10, 2026 23:01
Copilot AI review requested due to automatic review settings June 10, 2026 23:37

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 3 comments.

Comment thread packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx Outdated
Copilot AI review requested due to automatic review settings June 10, 2026 23:59

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 2 comments.

Comment thread packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx
@CalinaCristian CalinaCristian added the dev-packages Adds dev package publishing on pushes to this PR label Jun 11, 2026
CalinaCristian added a commit that referenced this pull request Jun 11, 2026
Floating probe/watch card for canvas debugging — drag-to-reposition and
resize via ProbeResizeHandles, keyboard shortcuts, wheel-event forwarding
guarded by handler presence, drag-session cleanup via useDragSession, and
useLatestRef for stable handler refs. Includes 8 unit tests.

Extracted from the original PR #760 branch; content unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
CalinaCristian added a commit that referenced this pull request Jun 11, 2026
…ase 1)

Docked properties panel that renders a node's form: FormSchema (from
@uipath/apollo-wind) directly from its manifest in NodeRegistryProvider —
no prop drilling. Multi-step schemas (steps) render as tabs; single-page
schemas (sections) render as a flat MetadataForm; empty state when the
manifest has no form. onSubmit is async-compatible. Includes 8 unit tests
and Multi-step / SinglePage / NoSchema stories.

Variable binding ({x} bind button / variable picker) is Phase 2.

Extracted from the original PR #760 branch; content unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
CalinaCristian added a commit that referenced this pull request Jun 11, 2026
- Derive uncontrolled behavior/layout defaults from behaviorOptions[0] /
  layoutOptions[0] instead of hardcoded values
- Skip scroll events originating inside the portalled menu so it remains
  scrollable (close only on outside scroll / resize)
- Remove role='menuitem' from preset and save-preset buttons (they are
  plain buttons, not menu items)
- Deleting a preset no longer closes the menu (matches story helper)
- Tests updated to match the new roles and delete behavior

Extracted from the original PR #760 branch (Copilot review rounds);
the CustomOptions story added in #781 is intentionally kept.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 11, 2026 09:24
@CalinaCristian CalinaCristian force-pushed the add-properties-panel-form-manifest branch from 71f60b5 to f2ade91 Compare June 11, 2026 09:24
@CalinaCristian CalinaCristian changed the base branch from main to ia-and-panel-nodes June 11, 2026 09:24
@github-actions

github-actions Bot commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

📦 Dev Packages

Package Status Updated (PT)
@uipath/apollo-react@4.43.0-pr760.cf16c2b 🟢 Published Jun 11, 2026, 02:28:07 AM

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 5 comments.

Comments suppressed due to low confidence (1)

packages/apollo-react/src/canvas/controls/NodePropertyTrigger/NodePropertyTrigger.tsx:324

  • Inside a role="menu" container, the "Save as preset" action should be a role="menuitem" for correct ARIA semantics.
            <button
              type="button"
              onClick={() => {
                onSavePreset?.();
                setMenuOpen(false);
              }}
              className="flex w-full items-center gap-2 px-3 py-2 text-xs text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground"

CalinaCristian added a commit that referenced this pull request Jun 11, 2026
…opdownMenu

Replaces the hand-rolled popover (portal, fixed positioning, outside-click/
Escape/scroll/resize listeners) with the same Radix-based DropdownMenu the
canvas package already composes (CanvasDropdownMenu, NodeContextMenu),
gaining arrow-key navigation, typeahead, and focus management. modal={false}
for the React Flow foreignObject reason documented in CanvasDropdownMenu.

Consumer extensibility:
- `children` fully replace the built-in sections (the i18n/extension path).
  Exported design-matched subcomponents: NodePropertyTriggerCheckboxItem
  (keeps menu open by default, closeOnSelect opt-out),
  NodePropertyTriggerRadioItem, NodePropertyTriggerSectionLabel,
  NodePropertyTriggerSeparator — composable with any wind primitive.
- Data props survive as the prefab (rendered when no children), built on the
  same subcomponents.
- NodePropertyTriggerItem gains a stable `id`; onPanelToggle receives
  `id ?? label` so localized labels are never the toggle identity.
- `showMenu={false}` renders a label-only pill for secondary triggers.
- Controlled `open`/`onOpenChange`.
- Empty sections collapse (heading + separator included); the presets
  empty-state stays while canSavePreset is true.

Absorbs the NodePropertyTrigger refinements from PR #760 (uncontrolled
defaults from options[0], delete-preset keeps the menu open); the scroll and
role fixes there are obsolete under Radix. Preset delete buttons stop
pointerdown/pointerup propagation so Radix's pointerup-select doesn't apply
the preset and close the menu.

Tests rewritten: 24 passing. Stories: the 200-line inline popover fake is
replaced by the controlled `open` prop; adds Composed and LabelOnlyPill.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
CalinaCristian and others added 2 commits June 11, 2026 05:43
Floating probe/watch card for canvas debugging — drag-to-reposition and
resize via ProbeResizeHandles, keyboard shortcuts, wheel-event forwarding
guarded by handler presence, drag-session cleanup via useDragSession, and
useLatestRef for stable handler refs. Includes 8 unit tests.

Extracted from the original PR #760 branch; content unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ase 1)

Docked properties panel that renders a node's form: FormSchema (from
@uipath/apollo-wind) directly from its manifest in NodeRegistryProvider —
no prop drilling. Multi-step schemas (steps) render as tabs; single-page
schemas (sections) render as a flat MetadataForm; empty state when the
manifest has no form. onSubmit is async-compatible. Includes 8 unit tests
and Multi-step / SinglePage / NoSchema stories.

Variable binding ({x} bind button / variable picker) is Phase 2.

Extracted from the original PR #760 branch; content unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app:storybook dev-packages Adds dev package publishing on pushes to this PR pkg:apollo-react size:XXL 1,000+ changed lines.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants