feat: Add selected node details to sidebar#168
Conversation
✅ Deploy Preview for swf-editor ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds node selection support to the diagram editor and surfaces selected node task details in the right-hand SidePanel (including flattened task properties and a JSON source view).
Changes:
- Extend
DiagramEditorContextto trackselectedNodeId, update it from React Flow selection, and clear it when workflow content changes. - Introduce
getTaskDetails()to flatten SWF task fields for display, plus a newNodeDetailsViewUI and shared SidePanel field components. - Update SidePanel header/content to switch between workflow info and selected node details; add i18n strings and styling.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/serverless-workflow-diagram-editor/tests/test-utils/render-helpers.tsx | Extends mocked context with selectedNodeId + setter for tests. |
| packages/serverless-workflow-diagram-editor/tests/store/DiagramEditorContextProvider.test.tsx | Adds coverage for clearing selection when content changes. |
| packages/serverless-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx | Adds tests for rendering flattened task properties and source JSON. |
| packages/serverless-workflow-diagram-editor/tests/core/taskDetails.test.ts | Adds unit tests for the new task-flattening logic. |
| packages/serverless-workflow-diagram-editor/src/store/DiagramEditorContextProvider.tsx | Stores selection in context and resets it when the model changes. |
| packages/serverless-workflow-diagram-editor/src/store/DiagramEditorContext.tsx | Adds selectedNodeId and setSelectedNodeId to context type. |
| packages/serverless-workflow-diagram-editor/src/side-panel/WorkflowInfoView.tsx | Refactors shared field components into Fields.tsx. |
| packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx | Renders node details when a node is selected; updates header icon/title/subtitle and auto-opens on selection. |
| packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.css | Adds styling for property rows, JSON section, and colored node icon wrapper. |
| packages/serverless-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx | New view that renders flattened task properties + a Source JSON section. |
| packages/serverless-workflow-diagram-editor/src/side-panel/Fields.tsx | New shared components for SidePanel field rendering and JSON collapsible block. |
| packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx | Wires React Flow selection changes into selectedNodeId. |
| packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts | Adds new sidebar translation keys for node/details UI. |
| packages/serverless-workflow-diagram-editor/src/core/taskDetails.ts | Implements task flattening into displayable detail fields. |
| packages/serverless-workflow-diagram-editor/src/core/index.ts | Exports the new taskDetails module. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
a81c447 to
21d1360
Compare
21d1360 to
a29e5aa
Compare
8793622 to
2953065
Compare
|
@handreyrc If you can review when you get a chance please |
|
@ricardozanini please merge when you get a chance |
|
Can you solve the conflicts? |
Signed-off-by: lornakelly <lornakelly88@gmail.com>
2953065 to
f00d1d3
Compare
Done, thanks |
|
@lornakelly, unrelated to this PR, but since I saw this in the video you posted, can you please consider defaulting source code to YAML always? YAML is the first-class citizen in the spec. |
Closes #101
Summary
Selecting a node opens the side panel and renders that task's details, changing selection updates the content and deselecting returns the panel to the workflow info state
Changes
taskDetailsto flatten task into dot-notation and expand nested objects up toMAX_DEPTHNodeDetailsViewto sidepanelselectedNodeIdto storenode.data.taskwhich is deep clone of the task in the modelFieldsScreen.Recording.2026-06-04.at.09.00.16.mov