feat(apollo-react): add NodePropertyPanel with FormSchema support (Phase 1)#809
Open
CalinaCristian wants to merge 2 commits into
Open
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
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>
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. |
Comment on lines
+63
to
+66
| const steps = form && isMultiStep(form) ? form.steps : null; | ||
| const [activeStep, setActiveStep] = useState<string>(''); | ||
| const currentStep = activeStep || steps?.[0]?.id || ''; | ||
|
|
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: