Repository navigation
docs(storybook): add the Flow Node Panels pattern page - #1450
dbacomputer wants to merge 1 commit into
Conversation
Every Flow Workbench node on one canvas; selecting a node opens its right panel, rendered from the node's real Flow form definition. Nodes with a Figma mockup can switch to it. Each panel deep-links via `args=node:<slug>`. Flow's node definitions come from a JSON snapshot regenerated with `pnpm --filter storybook-app sync:flow-nodes <flow-workbench>`, since Apollo can't depend on Flow. The node inventory moves out of Flow.stories.tsx into node-inventory.tsx so both pages share it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
🟡 Changes recommended
Unresolved link generation and panel rendering issues undermine reliable navigation and accurate comparisons with Flow.
4 open issues
What changed in this PR
Adds a Flow Node Panels reference page to Storybook’s Layout Patterns, bringing Flow Workbench node forms and Figma mockups into Apollo’s design-system documentation.
Changes:
- Adds a catalog of 65 built-in nodes and 11 runtime examples, with panel selection and shareable links.
- Renders snapshot-backed forms with placeholders for Flow-specific editors and optional design references.
- Extracts shared inventory components and adds a snapshot regeneration command.
| File | Description |
|---|---|
packages/apollo-react/src/canvas/stories/templates/node-inventory.tsx |
Extracts shared node inventory and reference panels. |
packages/apollo-react/src/canvas/stories/templates/Flow.stories.tsx |
Uses the extracted inventory components. |
apps/storybook/src/patterns/LayoutPatterns.stories.tsx |
Registers the page with a node-selection argument. |
apps/storybook/src/patterns/flow-node-panels/FlowNodePanelsPage.tsx |
Adds the catalog canvas, panels, source toggle, and link controls. |
apps/storybook/src/patterns/flow-node-panels/flow-node-catalog.ts |
Groups nodes and adapts snapshot forms for rendering. |
apps/storybook/scripts/sync-flow-node-manifests.mts |
Generates snapshots from a Flow checkout. |
apps/storybook/package.json |
Adds the snapshot synchronization command. |
Review effort: Balanced
| try { | ||
| const top = window.top?.location; | ||
| if (top) return `${top.origin}${top.pathname}${query}`; | ||
| } catch { | ||
| // Cross-origin embed: fall back to this frame's origin. | ||
| } | ||
| return `${window.location.origin}/${query}`; |
| value={item.designReference ? panelSource : 'flow-definition'} | ||
| onValueChange={(value) => value && onPanelSourceChange(value as PanelSource)} | ||
| aria-label="Panel source" | ||
| > | ||
| <ToggleGroupItem value="flow-definition" className="flex-1 text-xs"> |
| onClose: () => void; | ||
| }) { | ||
| if (item.designReference && (panelSource === 'design-reference' || !item.manifest)) { | ||
| return <NodeInventoryPanel item={item.designReference} onClose={onClose} />; |
| ...manifest.form, | ||
| initialData: { ...manifest.form.initialData, inputs: manifest.inputDefaults }, | ||
| actions: [], |
Storybook visual diffBaseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs Updated (PT): Oct 22, 2026, 10:01:17 AM |
📊 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 |
|
Closing: moving the Flow Node Panels reference out of Storybook into the maestro-design prototype (as a lab with per-node pages and search), where it can sit alongside the Flow vs Apollo comparison. |
Summary
Adds a Flow Node Panels page under Apollo Wind / Patterns / Layout Patterns. It's a UX quality reference whose right panels match Flow Workbench node for node.
NodePropertyPanel/MetadataForm, so fields, sections, labels and defaults match Flow.&args=node:<slug>to the URL, and Copy link copies it. The slug is thenodeTypewith.replaced by-(for examplecore.logic.delaybecomescore-logic-delay). The upcoming Flow ↔ Apollo comparison page will use the same key.How it works
apps/storybook/src/patterns/flow-node-panels/flow-node-manifests.jsonis a snapshot of Flow's node definitions. Apollo can't import@uipath/flow-core, because Flow depends on Apollo. Regenerate the snapshot with:@uipath/flow-core/manifestentry. Buildflow-schemaandflow-corein Flow first.NodeInventoryPanelmoved out ofFlow.stories.tsxintotemplates/node-inventory.tsx, so both pages share them. The code moved as-is, with no behaviour change.Known gaps
@uipath/agents-storage-schemasfrom GitHub Packages (403), so it was stubbed for this one run. Fields and labels are unaffected. Re-runsync:flow-nodesfrom a healthy Flow checkout to fill in the defaults.NodePropertyPanel's default "No form schema defined" state. What these panels should show is an open UX question.Testing
nodearg. Each rendered its node's label, with no console errors.&args=node:core-logic-delay) open with the node selected and zoomed in. Clicking a node updates the manager URL.biome checkis clean on all touched files.tsc -p packages/apollo-reactpasses.Panel links
Live once Storybook deploys.
All 76 panel links
uipath.agent.autonomousuipath.agent.conversationaluipath.agent.voiceuipath.agent.resource.escalation.quick-formuipath.agent.resource.escalation.coded-action-appuipath.agent.resource.tool.builtin.analyzefilesuipath.agent.resource.tool.builtin.batchtransformuipath.agent.resource.tool.builtin.createfileuipath.agent.resource.tool.builtin.httprequestuipath.agent.resource.tool.builtin.jevclassifieruipath.agent.resource.tool.builtin.summarizeuipath.agent.resource.tool.clientsidecore.action.http.v2connector.slack.send-messageuipath.pattern.batch-transformcore.action.transformcore.action.transform.filtercore.action.transform.mapcore.action.transform.group-bycore.action.file.readcore.action.file.createcore.datafabric.readcore.datafabric.updatecore.datafabric.deletecore.datafabric.createuipath.pattern.deep-raguipath.document.classifyconnector.document.extractuipath.human-in-the-loop.quick-formuipath.human-in-the-loop.coded-action-appuipath.human-in-the-loop.document-validationuipath.human-in-the-loop.document-classificationuipath.decisioncore.logic.mockcore.logic.decisioncore.logic.loopcore.logic.dowhilecore.logic.mergecore.logic.switchcore.logic.agentic-switchcore.control.endcore.control.responsecore.logic.terminatecore.control.error-handleruipath.conversational.wait-for-messageuipath.conversational.send-messageuipath.conversational.get-conversation-contextuipath.conversational.voice.create-outgoing-calluipath.conversational.voice.end-callcore.action.httpcore.action.scriptcore.action.queue.createcore.action.queue.create-and-waitcore.action.queue.set-transaction-statuscore.action.queue.set-transaction-progresscore.action.queue.postpone-transaction-itemcore.action.queue.delete-itemscore.action.queue.bulk-addcore.action.queue.get-itemscore.trigger.manualcore.trigger.formcore.trigger.conversationcore.trigger.voicecore.trigger.scheduledcore.trigger.queueconnector.slack.message-receivedconnector.http.webhookcore.logic.delayconnector.http.webhook-waitconnector.gmail.email-received-waitcore.subflowresource.flowresource.maestro-bpmnresource.maestro-caseresource.rpa-workflowresource.api-workflow🤖 Generated with Claude Code