Skip to content

Add Node Property Panel UI inventory#973

Draft
dbacomputer wants to merge 1 commit into
mainfrom
codex/node-property-panel-showcase
Draft

Add Node Property Panel UI inventory#973
dbacomputer wants to merge 1 commit into
mainfrom
codex/node-property-panel-showcase

Conversation

@dbacomputer

Copy link
Copy Markdown
Collaborator

What changed

  • adds a new Panel UI Inventory Storybook page under Apollo React → Components → Panels → Node Property Panel
  • places the page between Inline Editing and Alerts and Errors
  • demonstrates tabs, common form controls, validation and status states, and action hierarchy
  • compares expandable sections, compact sub-containers, and flat content layouts
  • adds an expand/collapse-all control for the collapsible examples
  • adds dismissible layout-pattern notes so reviewers can inspect the examples with or without guidance

Why

This gives UX and design reviewers one interactive reference surface for evaluating the UI elements and layout patterns that can appear in a node property panel.

Validation

  • git diff --check
  • production Storybook build completed successfully with storybook build
  • manually reviewed in local Storybook

Copilot AI review requested due to automatic review settings July 24, 2026 18:07
@github-actions

github-actions Bot commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Apollo Coded App preview deployments are ready.

Project Status Preview Updated (PT)
apollo-design Ready Preview · Logs Jul 24, 2026, 11:12:47 AM
apollo-docs Ready Preview · Logs Jul 24, 2026, 11:12:47 AM
apollo-landing Ready Preview · Logs Jul 24, 2026, 11:12:47 AM
apollo-vertex Ready Preview · Logs Jul 24, 2026, 11:12:47 AM

@github-actions

Copy link
Copy Markdown
Contributor

Dependency License Review

  • 1950 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1720
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.3.2 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 AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new Storybook “Panel UI Inventory” page under the Node Property Panel stories to provide a single interactive reference for common panel controls, states, and layout patterns used in node property panels.

Changes:

  • Introduces a new “Panel UI Inventory” story with tabbed examples for fields, states, and actions.
  • Adds expandable/collapsible layout pattern examples (accordion sections, sub-containers, and flat layouts) plus an expand/collapse-all control.
  • Adds dismissible “Layout pattern” notes to optionally annotate the examples.
Comments suppressed due to low confidence (1)

packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx:2142

  • This accordion item uses value="collapsed" but represents “Advanced options”. If you rename the section key (see allInventorySections), update this value to match so the accordion state stays consistent and readable.
              <AccordionItem value="collapsed" className="border-border-subtle px-3.5">

Comment on lines +1760 to +1776
function InventoryField({
label,
description,
children,
}: {
label: string;
description?: string;
children: ReactNode;
}) {
return (
<div className="grid gap-1.5">
<Label className="text-xs font-medium text-foreground">{label}</Label>
{children}
{description && <p className="text-xs leading-4 text-foreground-muted">{description}</p>}
</div>
);
}
function PanelUIInventoryStory() {
const [enabled, setEnabled] = useState(true);
const [checked, setChecked] = useState(true);
const allInventorySections = ['text-fields', 'choices', 'collapsed'];
@github-actions

Copy link
Copy Markdown
Contributor

📊 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.84 MB 57.45 MB ±0
@uipath/apollo-react 38.7% 0.0% (0/33) 7.45 MB 28.56 MB +56 B
@uipath/apollo-wind 41.5% 401.6 KB 2.60 MB +27 B
@uipath/ap-chat 85.8% 43.44 MB 55.94 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg:apollo-react size:XL 500-999 changed lines.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants