feat(apollo-react): add NodePropertyPanel with FormSchema support (Phase 1)#809
Closed
CalinaCristian wants to merge 2 commits into
Closed
feat(apollo-react): add NodePropertyPanel with FormSchema support (Phase 1)#809CalinaCristian wants to merge 2 commits into
CalinaCristian wants to merge 2 commits into
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
pkg:apollo-react
app:storybook
size:XXL
Contributor
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
Adds two new Canvas UI building blocks to @uipath/apollo-react: a manifest-driven NodePropertyPanel for rendering FormSchema and a floating ProbeCard for inspecting node outputs, along with tests and Storybook wiring.
Changes:
- Introduces
NodePropertyPanelthat readsmanifest.formfromNodeRegistryProviderand renders single-page (sections) or multi-step (steps) schemas viaMetadataForm+ tabs. - Adds
ProbeCard(drag/resize + wheel forwarding) with supporting hooks (useDragSession,useLatestRef) and unit tests. - Exposes new components through the canvas components barrel and updates Storybook ordering to include the new panel.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/components/ProbeCard/useLatestRef.ts | Adds a small “latest ref” hook with isomorphic layout effect behavior. |
| packages/apollo-react/src/canvas/components/ProbeCard/useDragSession.ts | Adds a reusable window-listener-backed mouse drag session hook. |
| packages/apollo-react/src/canvas/components/ProbeCard/ProbeResizeHandles.tsx | Adds resize handle UI that uses useDragSession. |
| packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.tsx | Implements the ProbeCard UI, interactions, and wheel forwarding logic. |
| packages/apollo-react/src/canvas/components/ProbeCard/ProbeCard.test.tsx | Adds unit tests for keyboard close, wheel forwarding, and drag cleanup. |
| packages/apollo-react/src/canvas/components/ProbeCard/index.ts | Exports ProbeCard and its public types. |
| packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.types.ts | Defines public props for the new panel component. |
| packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx | Implements manifest-driven panel rendering for FormSchema (tabs + MetadataForm). |
| packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.test.tsx | Adds unit tests for title/header rendering, empty states, and step/tab behavior. |
| packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx | Adds Storybook stories demonstrating single/multi-step schemas and variants. |
| packages/apollo-react/src/canvas/components/NodePropertyPanel/index.ts | Exports NodePropertyPanel and its props type. |
| packages/apollo-react/src/canvas/components/index.ts | Re-exports the new NodePropertyPanel and ProbeCard from the components barrel. |
| apps/storybook/.storybook/preview.tsx | Updates story sort order to include Node Property Panel in Panels section. |
CalinaCristian
force-pushed
the
codex/pr-760-node-property-panel
branch
from
4929876 to
d59eb75
Compare
CalinaCristian
force-pushed
the
codex/pr-760-node-property-panel
branch
from
d59eb75 to
15dffd3
Compare
Contributor
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
1980computer
approved these changes
Jun 17, 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
force-pushed
the
codex/pr-760-node-property-panel
branch
from
15dffd3 to
7ceb6a6
Compare
…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
force-pushed
the
codex/pr-760-node-property-panel
branch
from
7ceb6a6 to
87b6990
Compare
Comment on lines
+22
to
+26
| return useCallback((e: React.MouseEvent) => { | ||
| if (e.button !== 0) return; | ||
| e.stopPropagation(); | ||
| e.preventDefault(); | ||
| startRef.current = { x: e.clientX, y: e.clientY }; |
Comment on lines
+63
to
+74
| const steps = form && isMultiStep(form) ? form.steps : null; | ||
| const [activeStep, setActiveStep] = useState<string>(''); | ||
| // Clamp to a valid step id so dynamic manifest/schema updates can't strand | ||
| // Radix Tabs on a value that no longer exists in `steps`. | ||
| const currentStep = steps?.some((step) => step.id === activeStep) | ||
| ? activeStep | ||
| : (steps?.[0]?.id ?? ''); | ||
|
|
||
| // biome-ignore lint/correctness/useExhaustiveDependencies: nodeType is the trigger; setActiveStep is stable | ||
| useEffect(() => { | ||
| setActiveStep(''); | ||
| }, [nodeType]); |
Collaborator
Author
|
Superseded by #835. The
Closing in favour of #835. 🤖 Generated with Claude Code |
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.
Recreates #760 as a fresh PR against main because GitHub cannot reopen a merged PR. #760 was merged into #781; #781 is now repaired with revert commit 60208e7.
Cherry-picked payload:
Verification: