feat(apollo-react): add NodePropertyPanel editor stories by 1980computer · Pull Request #793 · UiPath/apollo-ui

1980computer · 2026-06-08T14:30:48Z

Summary

Adds three new canvas NodePropertyPanel editor stories to Storybook, demonstrating interactive property panels for workflow nodes.

Stories added

Editor Full — full-height panel with Monaco code editor, expandable CasePanel rows, and inline-editable node title/category
Editor Compact — compact variant with accordion CasePanels, inline title editing, delete-on-hover for cases, default branch toggle
Editor Inline — End/Control node panel showing output messaging rows with per-row Monaco fields (fixed/expression mode toggle via Code2 icon)

Component changes

NodePropertyPanel.tsx — identity row gap updated to 14 px; children prop added so editor stories can render custom layouts; SURFACE_REMAP applied to children wrapper; border separators retained on title bar and identity row; contentInset now drives the CSS custom property on the root element
NodePropertyPanel.types.ts — added children and contentInset props
monaco.ts — fixed apolloFutureDarkMonaco and apolloFutureLightMonaco editor backgrounds to match surface-overlay
metadata-form.tsx — TabbedStepForm tab style updated from underline to compact pill tabs, matching the properties panel design language
Switch — replaced placeholder toggle with the correct Switch component from @uipath/apollo-wind

Dependencies

@monaco-editor/react ^4.7.0 added as devDependency to apollo-react (used in story files only, not shipped in the package bundle)

github-actions · 2026-06-08T14:31:04Z

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

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jun 18, 2026, 04:05:14 PM
apollo-docs	🟢 Ready	Preview, Logs	Jun 18, 2026, 04:05:14 PM
apollo-landing	🟢 Ready	Preview, Logs	Jun 18, 2026, 04:05:14 PM
apollo-vertex	🟢 Ready	Preview, Logs	Jun 18, 2026, 04:05:14 PM

github-actions · 2026-06-08T14:31:43Z

Dependency License Review

✅ 1942 package(s) scanned
✅ No license issues found
⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1712
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

Copilot

Pull request overview

This PR introduces new canvas UI components and Storybook updates in apollo-react, notably a new NodePropertyPanel (manifest-driven MetadataForm rendering) and a new ProbeCard (floating debug watch/inspect card). It also adds a standalone ExpressionField demoed in Storybook, but does not appear to implement the PR description’s promised MetadataForm “custom field type” (type: 'custom') backed by Monaco/CodeMirror.

Changes:

Added ProbeCard (draggable/resizable watch list UI) plus supporting hooks and unit tests.
Added NodePropertyPanel (renders a node’s FormSchema from NodeRegistryProvider, with single-page + multi-step tab support) plus tests and stories.
Added ExpressionField (read-only code display + mode toggle) and a Storybook “Expression Editor” story, and updated Storybook nav ordering.

Reviewed changes

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

Show a summary per file

File	Description
packages/apollo-react/src/canvas/components/ProbeCard/useLatestRef.ts	Adds a small “latest value” ref hook using an isomorphic layout effect.
packages/apollo-react/src/canvas/components/ProbeCard/useDragSession.ts	Adds a reusable window-listener-based mouse drag session hook with cleanup.
packages/apollo-react/src/canvas/components/ProbeCard/ProbeResizeHandles.tsx	Adds resize handle UI that wires into `useDragSession`.
packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx	Introduces the ProbeCard component (watch list rendering + drag/resize + wheel forwarding + keyboard delete).
packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.test.tsx	Adds unit tests covering keyboard shortcuts, wheel forwarding, and drag cleanup behavior.
packages/apollo-react/src/canvas/components/ProbeCard/index.ts	Exports ProbeCard and related public types.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.types.ts	Defines `NodePropertyPanelProps`.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx	Implements manifest-driven `FormSchema` rendering with tabs for multi-step forms.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.test.tsx	Adds unit tests for title bar, close behavior, empty states, and multi-step tab rendering.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx	Adds extensive Storybook stories for NodePropertyPanel and an “Expression Editor” demo using `ExpressionField`.
packages/apollo-react/src/canvas/components/NodePropertyPanel/index.ts	Re-exports NodePropertyPanel and ExpressionField APIs.
packages/apollo-react/src/canvas/components/NodePropertyPanel/ExpressionField.tsx	Adds a read-only code display component with mode toggle and UI chrome.
packages/apollo-react/src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.stories.tsx	Adds a new “Inspector” canvas story variant and supporting imports.
packages/apollo-react/src/canvas/components/index.ts	Re-exports ProbeCard and NodePropertyPanel from the canvas components barrel.
apps/storybook/.storybook/preview.tsx	Updates Storybook sidebar ordering to include “Node Property Panel”.

github-actions · 2026-06-17T15:30:06Z

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package	Coverage	New-line coverage	Packed (gzip)	Unpacked	vs main
`@uipath/apollo-core`	9.0%	—	43.82 MB	57.31 MB	±0
`@uipath/apollo-react`	34.7%	0.0% (0/157)	7.26 MB	27.55 MB	+3.0 KB
`@uipath/apollo-wind`	38.6%	— (7 untracked)	324.3 KB	2.23 MB	−184 B
`@uipath/ap-chat`	85.8%	—	43.36 MB	55.68 MB	±0

_{"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.}

Copilot

Pull request overview

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

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Scaffolds four Storybook stories for the Node Property Panel expression editor variants: - Editor Full: expanded panel with toolbar, mode switcher, undo/redo, AI assist, and Insert variable affordance - Editor Compact: collapsed field rows that expand inline on click - Editor Inline: single-line fx inputs with variable pill support - Inline Editing: node title and description editable directly in the identity row (click to edit, Enter/blur to confirm) Downgrades Storybook app Vite from 8 to 7 to resolve a pre-bundling incompatibility between Vite 8, MUI, and Emotion that caused all story previews to show a white screen. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…editing - Editor Full, Compact, and Inline stories for NodePropertyPanel - Inline title/category editing on all editor stories (click-to-edit) - CasePanel with inline title editing and delete-on-hover for Compact - InlineCaseRow with 40px Monaco field and Fixed/Expression mode toggle - Monaco Future Dark/Light backgrounds updated to surface-overlay - Switch component replaced with apollo-wind Switch in all editor stories - @monaco-editor/react added as devDependency - biome: noAutofocus off for stories files; noUnused cleanup Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…re vite 8 in storybook - ExpressionField.onChange was in the public interface but never called (editing is Phase 2); removing it prevents misleading API surface - apps/storybook/package.json accidentally downgraded vite ^8.0.0 → ^7.3.5 in the original commit; restore to ^8.0.0 (per the vite 8 migration in commit 68efebd) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 6 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

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

Files not reviewed (1)

pnpm-lock.yaml: Generated file

…inset regressions - Restore border-b to title bar and identity row (accidentally removed during contentInset refactor; no intent documented) - Apply SURFACE_REMAP to children wrapper so Apollo Wind inputs rendered via the children prop get the correct surface-overlay token - Fix empty state to use --mf-content-inset instead of hardcoded px-6 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Adds undici override (>=7.28.0) to fix GHSA-vmh5-mc38-953g (high) and GHSA-pr7r-676h-xcf6 (moderate) in @semantic-release/github chain. - Updates dompurify override to >=3.4.11 to fix GHSA-cmwh-pvxp-8882. - Adds both to minimumReleaseAgeExclude (packages within 14-day quarantine). - pnpm v11 requires overrides in pnpm-workspace.yaml, not package.json. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 6 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

- Remove duplicate CanvasBackground wrappers from 4 editor stories; meta.decorators already provides the canvas background for every story - Add aria-label to expand/collapse case button (a11y) - Add aria-label to expression mode toggle button (a11y) - Export ExpressionField and its types from the NodePropertyPanel index - Add unit test for children rendering path (asserts schema UI is hidden) - Fix contentInset JSDoc: remove stale reference to tab-underline full-bleed Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Constrain undici override to ^7.28.0 (8.x requires Node >=22.19.0, stricter than repo minimum >=22.12.0); lockfile now resolves 7.28.0 - Update children JSDoc to list all props ignored when children are provided (schema, plugins, onSubmit, disabled, resetKey) - Replace <p> with <span class="block"> in ExpressionField description to prevent Angular Material typography from injecting bottom margins Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

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

Files not reviewed (1)

pnpm-lock.yaml: Generated file

document.body is undefined in Node — autodocs SSR renders the story in a non-browser context, causing a crash. Fall back to the dark theme when document is unavailable. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CalinaCristian · 2026-06-18T23:29:01Z

      ) : (
        <div className="min-h-0 flex-1 overflow-auto">
-          <div
-            style={{ ...SURFACE_REMAP, '--mf-content-inset': contentInset } as CSSProperties}


why did we move this?

github-actions Bot added the pkg:apollo-react label Jun 8, 2026

1980computer marked this pull request as ready for review June 8, 2026 17:28

1980computer force-pushed the add-expression-editor branch from ee7c2f6 to da95c64 Compare June 10, 2026 20:20

1980computer force-pushed the add-properties-panel-form-manifest branch 3 times, most recently from 8ef5f19 to 9577354 Compare June 10, 2026 23:01

1980computer force-pushed the add-expression-editor branch from da95c64 to bd8104b Compare June 11, 2026 00:03

CalinaCristian force-pushed the add-properties-panel-form-manifest branch 4 times, most recently from c6a7eab to cfc1b2f Compare June 11, 2026 12:43

Base automatically changed from add-properties-panel-form-manifest to ia-and-panel-nodes June 11, 2026 14:15

CalinaCristian force-pushed the ia-and-panel-nodes branch from 60208e7 to 479392b Compare June 12, 2026 00:07

Base automatically changed from ia-and-panel-nodes to main June 12, 2026 01:19

Copilot AI review requested due to automatic review settings June 17, 2026 15:24

1980computer force-pushed the add-expression-editor branch from bd8104b to cd91c52 Compare June 17, 2026 15:24

github-actions Bot added app:storybook size:XXL 1,000+ changed lines. labels Jun 17, 2026

Copilot started reviewing on behalf of 1980computer June 17, 2026 15:24 View session

Copilot AI reviewed Jun 17, 2026

View reviewed changes

Comment thread packages/apollo-react/src/canvas/components/NodePropertyPanel/ExpressionField.tsx

Comment thread packages/apollo-react/src/canvas/components/NodePropertyPanel/ExpressionField.tsx

Comment thread packages/apollo-react/src/canvas/components/NodePropertyPanel/ExpressionField.tsx

1980computer force-pushed the add-expression-editor branch from cd91c52 to 68ad46b Compare June 17, 2026 15:44

github-actions Bot added size:L 100-499 changed lines. and removed app:storybook size:XXL 1,000+ changed lines. labels Jun 17, 2026

1980computer force-pushed the add-expression-editor branch from 68ad46b to fa02c32 Compare June 17, 2026 19:32

Copilot AI review requested due to automatic review settings June 17, 2026 19:32

github-actions Bot added the app:storybook label Jun 17, 2026

Copilot started reviewing on behalf of 1980computer June 17, 2026 19:33 View session

Copilot AI reviewed Jun 17, 2026

View reviewed changes

1980computer force-pushed the add-expression-editor branch from fa02c32 to 21cc941 Compare June 18, 2026 18:30

1980computer changed the title ~~feat(apollo-react): add ExpressionEditor field type for NodeManifestPanel~~ feat(apollo-react): add NodePropertyPanel editor stories Jun 18, 2026

Copilot AI review requested due to automatic review settings June 18, 2026 21:59

github-actions Bot added the pkg:apollo-wind label Jun 18, 2026

Copilot started reviewing on behalf of 1980computer June 18, 2026 21:59 View session

Copilot AI reviewed Jun 18, 2026

View reviewed changes

github-actions Bot removed the app:storybook label Jun 18, 2026

Copilot AI review requested due to automatic review settings June 18, 2026 22:14

Copilot started reviewing on behalf of 1980computer June 18, 2026 22:14 View session

Copilot AI reviewed Jun 18, 2026

View reviewed changes

1980computer and others added 3 commits June 18, 2026 15:42

style(apollo-react): apply biome format to NodePropertyPanel files

317b8f1

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings June 18, 2026 22:42

1980computer force-pushed the add-expression-editor branch from 9fc8f1f to bf28692 Compare June 18, 2026 22:42

Copilot started reviewing on behalf of 1980computer June 18, 2026 22:42 View session

Copilot AI reviewed Jun 18, 2026

View reviewed changes

1980computer and others added 2 commits June 18, 2026 15:49

Copilot AI review requested due to automatic review settings June 18, 2026 22:55

Copilot started reviewing on behalf of 1980computer June 18, 2026 22:55 View session

Copilot AI reviewed Jun 18, 2026

View reviewed changes

1980computer requested a review from CalinaCristian June 18, 2026 23:03

CalinaCristian reviewed Jun 18, 2026

View reviewed changes

Conversation

1980computer commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Stories added

Component changes

Dependencies

Uh oh!

github-actions Bot commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dependency License Review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Coverage + size by package

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

CalinaCristian Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

1980computer commented Jun 8, 2026 •

edited

Loading

github-actions Bot commented Jun 8, 2026 •

edited

Loading

github-actions Bot commented Jun 8, 2026 •

edited

Loading

github-actions Bot commented Jun 17, 2026 •

edited

Loading