feat(apollo-react): Input/Output panel prototype — three UX concepts by 1980computer · Pull Request #852 · UiPath/apollo-ui

1980computer · 2026-06-24T19:47:48Z

Summary

Design prototype for the node property panel's Input/Output experience. Three concepts rendered side-by-side in Storybook for async review, each exploring a different UX approach.

Concept 1 — Schema/JSON tabs with Referenced/All fields filter, expandable tree, inline value editing
Concept 2 (Recommended) — Compact header with node identity + Referenced toggle; Schema/JSON tabs; tree + inline editing + copy affordance
Concept 3 — Full node identity row (name + category); Schema/Types/JSON tabs; filter icon on search row; TypeScript interface generation annotated with referenced fields

Shared across all concepts

Expandable/collapsible tree grouped by top-level output node
Inline value editing on leaf fields (click to edit, Enter or Escape to confirm)
Input/Output mode toggle per concept panel
Pro/con notes card below each panel with a recommendation callout on Concept 2

NodePropertyPanel component changes

Added headerExtra?: ReactNode slot to NodePropertyPanelProps — renders between the title and close button, available for compact mode toggles or status indicators

How to review

Open Storybook → Apollo React / Canvas Components / Panels / Node Property Panel → Input / Output

Toggle each panel between Input and Output mode. Interact with the tree (expand/collapse, inline edit, copy). Check the notes card at the bottom of each concept for the trade-off summary.

Test plan

All three concepts render without errors in light and dark themes
Input/Output toggle correctly swaps data in all three concepts
Referenced filter shows subset vs All fields in Concepts 1, 2, 3
Inline editing saves on Enter/blur, cancels on Escape
Copy button writes expression to clipboard
Monaco editors load in JSON and Types tabs
TypeScript build passes (pnpm --filter @uipath/apollo-react exec tsc --noEmit)

🤖 Generated with Claude Code

github-actions · 2026-06-24T19:47:57Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jun 29, 2026, 04:35:40 PM
apollo-docs	🟢 Ready	Preview, Logs	Jun 29, 2026, 04:35:40 PM
apollo-landing	🟢 Ready	Preview, Logs	Jun 29, 2026, 04:35:40 PM
apollo-vertex	🟢 Ready	Preview, Logs	Jun 29, 2026, 04:35:40 PM

github-actions · 2026-06-24T19:48:40Z

Dependency License Review

✅ 1945 package(s) scanned
✅ No license issues found
⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1715
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.2.4	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

github-actions · 2026-06-24T19:50:12Z

📊 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.82 MB	57.31 MB	±0
`@uipath/apollo-react`	34.2%	0.0% (0/259)	7.27 MB	27.60 MB	+547 B
`@uipath/apollo-wind`	40.1%	—	392.3 KB	2.55 MB	−25 B
`@uipath/ap-chat`	85.8%	—	43.41 MB	55.85 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.}

Copilot

Pull request overview

Adds a Storybook prototype for a node property panel Input/Output experience (three side-by-side UX concepts), and extends NodePropertyPanel with a small new title-bar slot to support compact controls used by the concepts.

Changes:

Added headerExtra?: ReactNode to NodePropertyPanelProps and rendered it in the title bar (between title and close button).
Implemented three Input/Output panel concept prototypes in Storybook, including expandable trees, inline editing, search/filter, copy affordances, and Monaco-based Schema/JSON/Types views.
Added @monaco-editor/react to Storybook app deps and updated the lockfile accordingly.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks `@monaco-editor/react` (and its dependency graph) for the Storybook prototype.
apps/storybook/package.json	Adds `@monaco-editor/react` as a dev dependency to support Monaco usage in Storybook.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.types.ts	Extends the public API with `headerExtra` for title-bar customization.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx	Renders `headerExtra` in the title bar next to the close button.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx	Adds the three Input/Output UX concept prototypes, Monaco editor tabs, and supporting helpers.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 6 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 10 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 10 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 8 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 11 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 10 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 10 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

…pt variants Three side-by-side concepts for design review of the node property panel's input/output experience. Each concept explores a different UX approach for browsing, filtering, and copying output references. - Concept 1: Schema/JSON tabs with Referenced/All fields filter and inline editing - Concept 2: Compact header with node identity + Referenced toggle, tree + JSON tabs, inline editing with copy affordance (recommended) - Concept 3: Full node identity row, Schema/Types/JSON tabs, filter icon on search Shared additions across concepts: - Expandable/collapsible tree grouped by top-level node - Inline value editing on leaf fields (click to edit, Enter/Escape to confirm) - Input/Output mode toggle per concept panel - Pro/con notes card below each panel with recommendation callout on Concept 2 - NodePropertyPanel: headerExtra slot for compact controls in the title bar Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 6 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

+                <Input
+                  type="text"
+                  placeholder={isOutput ? 'Search outputs' : 'Search inputs'}
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}


+                    <input
+                      autoFocus
+                      type="text"
+                      value={search}
+                      onChange={(e) => setSearch(e.target.value)}


+                  <input
+                    autoFocus
+                    type="text"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}


+function tsTypeForLeaf(node: OutputNode): string {
+  if (node.type === 'null') return 'string | null';
+  if (node.type === 'array') return 'Array<unknown>';
+  return node.type;
+}


Concept 2: replace Referenced toggle+chips with a compact dropdown filter (Referenced N / All), unify schema and JSON container styling with matching border, background, and transparent Monaco theme so both tabs feel visually continuous. Add top padding to schema tree rows. Concept notes: add per-concept UX headline and rewrite pros/cons to communicate design tradeoffs to developers reviewing the concepts. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings June 24, 2026 19:47

github-actions Bot added pkg:apollo-react app:storybook size:XXL 1,000+ changed lines. labels Jun 24, 2026

Copilot started reviewing on behalf of 1980computer June 24, 2026 19:48 View session

1980computer force-pushed the panel-input-output branch from 07ccaac to 23ce159 Compare June 24, 2026 19:49

Copilot AI reviewed Jun 24, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings June 24, 2026 19:52

1980computer force-pushed the panel-input-output branch from 23ce159 to d7374f6 Compare June 24, 2026 19:52

Copilot started reviewing on behalf of 1980computer June 24, 2026 19:53 View session

Copilot AI reviewed Jun 24, 2026

View reviewed changes

1980computer marked this pull request as draft June 24, 2026 22:30

1980computer force-pushed the panel-input-output branch from d7374f6 to 33fc987 Compare June 25, 2026 18:48

Copilot AI review requested due to automatic review settings June 25, 2026 18:51

1980computer force-pushed the panel-input-output branch from 33fc987 to ffe8667 Compare June 25, 2026 18:51

Copilot started reviewing on behalf of 1980computer June 25, 2026 18:52 View session

1980computer force-pushed the panel-input-output branch from ffe8667 to c84244b Compare June 25, 2026 18:53