feat(apollo-react): expand Flow canvas templates - #1074
Conversation
|
Apollo Coded App preview deployments are ready.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
This PR expands the Apollo React canvas template Storybook experience by introducing a top-level Template Guide and richer Flow template compositions for both standalone and VS Code/Dockview-style hosts, while also extending a few canvas components to better support these layouts.
Changes:
- Adds new Storybook “Templates” structure with a Template Guide page plus Flow Standalone and Flow VS Code template sections.
- Introduces multiple reusable Flow canvas compositions (standalone floating panels, bottom panels, left sidebar, takeover modal, and Dockview-based workbench layout) and related styling.
- Extends canvas components to better support host integrations (e.g.,
NodePropertyPaneldrag-handle props,CanvasLeftSidebarheader/width options) and addsdockview-reactas a dev dependency.
Reviewed changes
Copilot reviewed 11 out of 13 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Locks new dependency graph changes, including Dockview packages. |
| packages/apollo-react/src/canvas/stories/templates/TemplateGuidelines.stories.tsx | Adds the top-level “Template Guide” story under Templates. |
| packages/apollo-react/src/canvas/stories/templates/FlowVSCode.stories.tsx | Adds VS Code/Dockview-oriented Flow template stories using DraggablePanelLayout. |
| packages/apollo-react/src/canvas/stories/templates/Flow.stories.tsx | Reworks Flow templates into multiple standalone + workbench-aligned compositions; adds Dockview integration examples. |
| packages/apollo-react/src/canvas/stories/templates/Flow.stories.css | Adds Dockview theming overrides for the template stories. |
| packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.types.ts | Adds dragHandleProps to support host-controlled drag interactions. |
| packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx | Applies dragHandleProps to the title-bar drag handle and adds data-slot hooks. |
| packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx | Refactors the Quick Form story into a reusable QuickFormPanel and updates Storybook exports. |
| packages/apollo-react/src/canvas/components/Flow.stories.tsx | Renames the story title to “Templates/Canvas Performance”. |
| packages/apollo-react/src/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.tsx | Updates backdrop styling for the takeover modal. |
| packages/apollo-react/src/canvas/components/CanvasLeftSidebar/CanvasLeftSidebar.tsx | Adds showContentHeader and expandedContentWidth props and updates layout logic accordingly. |
| packages/apollo-react/package.json | Adds dockview-react as a dev dependency to support Dockview template stories. |
| apps/storybook/.storybook/preview.tsx | Updates the Storybook sidebar ordering for the new Templates structure. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
Suppressed comments (1)
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx:3445
- If the QuickFormPanel tabs are renamed to
branching/error-handling, the matchingTabsContentvalues should be updated so the content IDs stay aligned with the triggers.
<TabsContent value="error-handling" className="mt-0" />
<TabsContent value="advanced" className="mt-0" />
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
📊 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 |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 12 out of 14 changed files in this pull request and generated no new comments.
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
Suppressed comments (3)
Previously missed (3) — in code that hasn't changed since the last review.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx:87
- The drag-handle always shows a grab cursor (
cursor-grab/active:cursor-grabbing) even when no drag interaction is provided viadragHandleProps. This creates a misleading affordance in consumers that don’t make the panel draggable. Consider only applying the grab cursor styles when drag behavior is actually enabled (e.g.draggableor pointer/drag handlers are present).
<div
{...dragHandleProps}
data-slot="node-property-panel-drag-handle"
className="grid size-8 cursor-grab touch-none place-items-center text-foreground-subtle active:cursor-grabbing"
>
packages/apollo-react/src/canvas/components/CanvasLeftSidebar/CanvasLeftSidebar.tsx:56
showContentHeaderhides more than just the header chrome. It also removes the title,headerActions, and the primary collapse control. The prop doc should reflect that so consumers don’t accidentally ship an expanded sidebar with no obvious collapse affordance.
/** Additional controls rendered before the collapse button in the panel header. */
headerActions?: ReactNode;
/** Whether to render the expanded content-panel header. Defaults to true. */
showContentHeader?: boolean;
/** Docked sidebars are square; floating sidebars use rounded, elevated chrome. */
variant?: 'default' | 'floating';
/** Width of the expanded content panel. Defaults to 288px. */
expandedContentWidth?: number;
packages/apollo-react/src/canvas/components/CanvasLeftSidebar/CanvasLeftSidebar.tsx:149
- New rendering branches introduced by
showContentHeaderand the width override viaexpandedContentWidtharen’t covered by the existingCanvasLeftSidebarunit tests. Adding a focused test forshowContentHeader={false}(no header rendered) and a test that asserts the container width uses the customexpandedContentWidthwould help prevent regressions.
style={{
width: isExpanded
? CANVAS_LEFT_SIDEBAR_RAIL_WIDTH + expandedContentWidth
: CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH,
}}
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): Aug 21, 2026, 11:47:09 AM |
Summary
Validation
pnpm exec tsc -p packages/apollo-react/tsconfig.json --noEmitpnpm --filter @uipath/apollo-react lint(passes with existing repository warnings)pnpm --dir apps/storybook storybook:buildKnown baseline issue
The full Apollo React test run passes 2,577/2,578 tests. The remaining failure is unrelated to this PR:
StageNode/formatDuration.test.tsexpects German3h, while the current formatter returns3 Std.. Lingui also reports existing translated plural syntax warnings during catalog compilation.