feat(apollo-react): add JsonValuePanel schema-aware JSON viewing/editing components#892
Draft
BenGSchulz wants to merge 1 commit into
Draft
feat(apollo-react): add JsonValuePanel schema-aware JSON viewing/editing components#892BenGSchulz wants to merge 1 commit into
BenGSchulz wants to merge 1 commit into
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
BenGSchulz
added
the
dev-packages
Contributor
📦 Dev Packages
|
There was a problem hiding this comment.
Pull request overview
Adds new reusable canvas building blocks to @uipath/apollo-react: a schema-aware JSON inspection/editing panel (JsonValuePanel) with supporting tree/editor utilities, plus a standalone NodeModeSelect dropdown for node execution modes.
Changes:
- Introduces
JsonValuePanel(schema/value merge, inline edits, search/filter, copy path/value, optional decorations, extra tabs) with Storybook stories and comprehensive tests. - Adds
NodeModeSelect+ localized defaults (useDefaultNodeModes) with unit tests and exports. - Updates canvas exports and English locale catalog; simplifies
NodePropertyPanelstories by removing the older concept output-panel helpers.
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/locales/en.json | Adds i18n strings for JsonValuePanel and NodeModeSelect. |
| packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx | Removes the prior “Output Panel helpers” concept code from stories. |
| packages/apollo-react/src/canvas/components/NodeModeSelect/NodeModeSelect.tsx | New node-mode dropdown component with localized defaults hook. |
| packages/apollo-react/src/canvas/components/NodeModeSelect/NodeModeSelect.test.tsx | Tests for accessibility semantics, behavior, and disabled state. |
| packages/apollo-react/src/canvas/components/NodeModeSelect/index.ts | Barrel exports for NodeModeSelect. |
| packages/apollo-react/src/canvas/components/JsonValuePanel/valueTree.ts | Core schema/value merge + flattening/filtering + path helpers + schema decoration helpers. |
| packages/apollo-react/src/canvas/components/JsonValuePanel/valueTree.test.ts | Unit tests for tree building, path helpers, filtering, and decorations. |
| packages/apollo-react/src/canvas/components/JsonValuePanel/PanelTitleBar.tsx | New compact panel title/header row component. |
| packages/apollo-react/src/canvas/components/JsonValuePanel/JsonValueTreeToolbar.tsx | New toolbar for filter/search/collapse-all controls. |
| packages/apollo-react/src/canvas/components/JsonValuePanel/JsonValueTree.tsx | New interactive tree UI (copy/edit/wrap, decoration, custom cells). |
| packages/apollo-react/src/canvas/components/JsonValuePanel/JsonValuePanel.types.ts | Public types for schema/value tree, decorations, tabs, and panel props. |
| packages/apollo-react/src/canvas/components/JsonValuePanel/JsonValuePanel.tsx | New panel component composing toolbar + tree + JSON tab(s). |
| packages/apollo-react/src/canvas/components/JsonValuePanel/JsonValuePanel.test.tsx | Integration-style tests covering editing, copy, search/filter, tabs, and extension points. |
| packages/apollo-react/src/canvas/components/JsonValuePanel/JsonValuePanel.stories.tsx | Storybook stories demonstrating the panel, extensions, and decorations. |
| packages/apollo-react/src/canvas/components/JsonValuePanel/JsonValueEditor.tsx | Inline editors for leaf and container editing (single-line + multiline + JSON). |
| packages/apollo-react/src/canvas/components/JsonValuePanel/JsonTypeBadge.tsx | JSON type badge component with per-type icons/colors and tone overrides. |
| packages/apollo-react/src/canvas/components/JsonValuePanel/index.ts | Barrel exports for all JsonValuePanel building blocks and helpers. |
| packages/apollo-react/src/canvas/components/JsonValuePanel/clipboard.ts | Clipboard helper with async API + legacy fallback. |
| packages/apollo-react/src/canvas/components/index.ts | Exports JsonValuePanel and NodeModeSelect from the canvas components entrypoint. |
Comment on lines
+159
to
+170
| <DropdownMenuRadioGroup value={value} onValueChange={onChange}> | ||
| {resolvedOptions.map((option) => { | ||
| const Icon = option.icon; | ||
| return ( | ||
| <DropdownMenuRadioItem | ||
| key={option.value} | ||
| value={option.value} | ||
| className={cn( | ||
| 'group flex items-start gap-2 [&>span:first-child]:hidden', | ||
| value === option.value && 'text-foreground' | ||
| )} | ||
| > |
Comment on lines
+56
to
+60
| /** Builds the text copied when a field name is clicked. Defaults to the path itself. */ | ||
| pathForCopy?: (path: string) => string; | ||
| /** Called after something is copied to the clipboard. */ | ||
| onCopy?: (event: CopyEvent) => void; | ||
| emptyMessage?: string; |
Comment on lines
+251
to
+259
| /** | ||
| * Builds the text copied when a field name is clicked. Defaults to the path | ||
| * itself; consumers with an expression syntax can wrap it (e.g. `{{path}}`). | ||
| */ | ||
| pathForCopy?: (path: string) => string; | ||
| /** Called after something is copied to the clipboard. */ | ||
| onCopy?: (event: CopyEvent) => void; | ||
| /** Containers at depth >= this start collapsed. Default 1 (roots open). */ | ||
| defaultCollapsedDepth?: number; |
Contributor
📊 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 |
BenGSchulz
force-pushed
the
feat/node-io-panel
branch
from
de0278f to
95f38ee
Compare
…ing components Generic JSON schema/value tree panel (inline editing, search, filters, custom tabs, path copy) plus the node-domain NodeModeSelect with localized default execution modes.
BenGSchulz
force-pushed
the
feat/node-io-panel
branch
from
95f38ee to
ad17de4
Compare
Comment on lines
+535
to
+543
| const copy = (node: ValueTreeNode, kind: CopyEvent["kind"], text: string) => { | ||
| void copyTextToClipboard(text).then((ok) => { | ||
| if (!ok) return; | ||
| setCopied({ path: node.path, kind }); | ||
| if (copyTimerRef.current) clearTimeout(copyTimerRef.current); | ||
| copyTimerRef.current = setTimeout(() => setCopied(null), 1500); | ||
| }); | ||
| onCopy?.({ kind, path: node.path, text }); | ||
| }; |
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.
Summary
Adds
JsonValuePanelto@uipath/apollo-react/canvas— a generic, schema-aware JSON viewing/editing panel — plus a standaloneNodeModeSelectdropdown. Extracted from flow-workbench's node Input/Output properties panels, but deliberately de-node-ified so it can serve as a general "JSON schema + value" surface.What's included
JsonValuePanel(src/canvas/components/JsonValuePanel/)pathForCopylets consumers wrap copied paths, e.g.{{path}})renderValuecustom value cells +RenderValueContext.commit/clear(clear routes through newremoveValueAtPath)rowWrapperfor row-level integration (e.g. dnd-kit drag sources)extraTabs/defaultTab/onTabChangefor host-registered views alongside Schema/JSONjsonViewslot,beforeContent,basePath,title*props (PanelTitleBar)decorateNodeper-row annotations:label(display text replacing the raw key — key still drives paths/edits),sublabel, leadingicon, andchip { label?, icon?, tooltip?, tone? }(icon-only chips render bare withrole="img"+ tooltip). Search matches decoration labels/sublabels viaflattenValueTree'sdisplayTextsoptionschemaStatusDecoration) as an opt-inuseSafeLingui(canvas.json_value_panel.*; catalog keys added tolocales/en.json—lingui extractdoes not pick up_()descriptors)NodeModeSelect(src/canvas/components/NodeModeSelect/)DropdownMenuRadioGroupDEFAULT_NODE_MODES(English const) + localizeduseDefaultNodeModes()hook (canvas.node_mode_select.*);optionsprop for subsetting/overridesTesting
tsc --noEmitclean,biome formatcleanComponents/Panels/Json Value Panelincl. a new Grouped Sources story demonstrating the decoration APINotes for reviewers
ValueTreeNodenaming refers to tree nodes, not flow nodes