feat(apollo-react): add NodeManifestPanel with parameter form (Phase 1)#760
Draft
1980computer wants to merge 3 commits into
Draft
feat(apollo-react): add NodeManifestPanel with parameter form (Phase 1)#7601980computer wants to merge 3 commits into
1980computer wants to merge 3 commits into
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
1980computer
force-pushed
the
add-properties-panel-form-manifest
branch
3 times, most recently
from
a9b2cfc to
c862813
Compare
github-actions
Bot
added
size:XXL
1980computer
force-pushed
the
add-properties-panel-form-manifest
branch
2 times, most recently
from
b12cb77 to
b0f7264
Compare
8 tasks
1980computer
force-pushed
the
add-properties-panel-form-manifest
branch
9 times, most recently
from
96c6e06 to
aaf1f3f
Compare
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
1980computer
force-pushed
the
add-properties-panel-form-manifest
branch
2 times, most recently
from
5705e3b to
3b7ae8b
Compare
| render: () => { | ||
| const [panels, setPanels] = useState<NodePropertyPanelItem[]>(DEFAULT_PANELS); | ||
| const [behavior, setBehavior] = useState<NodePropertyPanelBehavior>('auto-hide'); | ||
| const [layout, setLayout] = useState<NodePropertyPanelLayout | undefined>(undefined); |
| render: () => { | ||
| const [panels, setPanels] = useState<NodePropertyPanelItem[]>(DEFAULT_PANELS); | ||
| const [behavior, setBehavior] = useState<NodePropertyPanelBehavior>('auto-hide'); | ||
| const [layout, setLayout] = useState<NodePropertyPanelLayout | undefined>(undefined); |
| { label: 'Output', enabled: true }, | ||
| ]); | ||
| const [behavior, setBehavior] = useState<NodePropertyPanelBehavior>('always-persist'); | ||
| const [layout, setLayout] = useState<NodePropertyPanelLayout | undefined>('right'); |
| render: () => { | ||
| const [panels, setPanels] = useState<NodePropertyPanelItem[]>(DEFAULT_PANELS); | ||
| const [behavior, setBehavior] = useState<NodePropertyPanelBehavior>('auto-hide'); | ||
| const [layout, setLayout] = useState<NodePropertyPanelLayout | undefined>(undefined); |
| render: () => { | ||
| const [panels, setPanels] = useState<NodePropertyPanelItem[]>(DEFAULT_PANELS); | ||
| const [behavior, setBehavior] = useState<NodePropertyPanelBehavior>('auto-hide'); | ||
| const [layout, setLayout] = useState<NodePropertyPanelLayout | undefined>(undefined); |
| { label: 'Output', enabled: true }, | ||
| ]); | ||
| const [behavior, setBehavior] = useState<NodePropertyPanelBehavior>('always-persist'); | ||
| const [layout, setLayout] = useState<NodePropertyPanelLayout | undefined>('right'); |
1980computer
force-pushed
the
add-properties-panel-form-manifest
branch
from
3b7ae8b to
38b0e57
Compare
…anel to Tailwind Phase 1 of the Properties Panel form manifest feature: - New NodeManifestPanel — docked main-UI panel with Parameters / Error handling / Advanced tabs and manifest-driven ParameterField list supporting text, number, boolean, and select types - NodePropertiesPanel migrated from @emotion/styled to Tailwind CSS; story title updated to "Node Flyout Panel" to distinguish it from the new main-UI panel variant - ParameterField component (UI-only; variable binding in Phase 2) - Storybook stories: HttpRequest, HumanTask, AiAgent, NoParameters, Interactive with live state output Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a new pill-trigger + popover control for configuring canvas panel visibility, behavior (auto-hide / always-persist), default layout, and saved presets. Pixel-matched to the flow-prototype reference using apollo-wind Future design tokens. Pure Tailwind, no Emotion. Story registered under Canvas/Components/Controls/CanvasPropertiesPanel with Default, States, and WithPresets variants. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… > Panels Move CanvasPropertiesPanel story to Canvas/Components/Panels/Node Property Panel alongside Node Manifest Panel and Node Flyout Panel, and add explicit storySort order so they appear as: Node Property Panel → Node Manifest Panel → Node Flyout Panel. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1980computer
force-pushed
the
add-properties-panel-form-manifest
branch
from
38b0e57 to
346eab9
Compare
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
2 participants
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
NodeManifestPanel— a docked, main-UI panel (not floating) for editing node parameters. Takes aPropertiesManifestwith aparametersarray and renders tab-based form with Parameters / Error handling / Advanced tabs.ParameterField— manifest-driven field row component supportingtext,number,boolean(toggle), andselecttypes. Phase 1 is UI only; variable binding (Phase 2) will add the{x}bind button and variable picker.NodePropertiesPanelfrom@emotion/styledto Tailwind CSS as required by CLAUDE.md when significantly editing a component. TheNodePropertiesPanel.styles.tsfile is deleted.NodePropertiesPanelstory renamed toCanvas/Components/Panels/Node Flyout Panelto distinguish from the newCanvas/Components/Panels/Node Manifest Panel.What this is NOT (Phase 2)
The
ParameterFielddeliberately has no variable binding in this PR. Phase 2 will add:{x}bind button that opens a variable picker popovervarName = value)Variables architecture decision: React context (matching flow-workbench's
VariablesContextpattern), not component props, so the schema stays static as the variable list changes.Test plan
Canvas/Components/Panels/Node Manifest Panel > HttpRequest— see node header, three tabs, five parameter fields with correct typesCanvas/Components/Panels/Node Manifest Panel > HumanTask— see required field asteriskCanvas/Components/Panels/Node Manifest Panel > Interactive— edit fields and watch live state update belowCanvas/Components/Panels/Node Manifest Panel > NoParameters— see empty state messageCanvas/Components/Panels/Node Flyout Panel > Default— existing story still works, panel opens on node click🤖 Generated with Claude Code