Parse and store SDK validation errors in state (#173)

[lornakelly]

Closes: #147

Summary

Renders SDK validation errors on the diagram and in the sidepanel

Changes

• Helper functions to filter, sort, and slice that error list for the UI
• De-duplicates repeated SDK errors*
• Add badge and outline to invalid nodes
• Add sidepenel error badge for workflow-level errors (i.e those not associated with a node)
• Add error section to sidepanel
• Rename taskId on errors to path for less confusion between nodeId versus taskId
• Add stories for types of errors

* The duplication of errors the SDK returns is likely a bug but needs to be investigated separately (ticket to be created). The helper function is harmless as when the SDK has a fix (if verified as a bug), the helper function can be removed at any point after

[netlify]

✅ Deploy Preview for swf-editor ready!

Name	Link
🔨 Latest commit	7a69e3c
🔍 Latest deploy log	https://app.netlify.com/projects/swf-editor/deploys/6a33fd6ba517a6000850d5b3
😎 Deploy Preview	https://deploy-preview-183--swf-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds end-to-end validation error UX to the diagram editor: dedupes SDK validation errors, splits errors into node-owned vs general, highlights nodes with errors, and surfaces general/node errors in the side panel (plus a trigger badge).

Changes:

• Introduces core helpers to classify/dedupe validation errors and compute node/general error sets.
• Updates diagram + side panel UI to render error sections, node error badges/outlines, and a top-right trigger badge.
• Expands test coverage and adds Storybook scenarios for validation error states.

Reviewed changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/serverless-workflow-diagram-editor/tests/test-utils/render-helpers.tsx	Extends mock context with nodeIds needed for error ownership logic.
packages/serverless-workflow-diagram-editor/tests/side-panel/WorkflowInfoView.test.tsx	Adds assertions for rendering general (workflow-level) errors.
packages/serverless-workflow-diagram-editor/tests/side-panel/SidePanelTrigger.test.tsx	New tests for general-error badge count and click behavior.
packages/serverless-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx	Adds test coverage for node-owned error rendering and fields-only nodes.
packages/serverless-workflow-diagram-editor/tests/side-panel/ErrorsSection.test.tsx	New unit tests for the reusable errors UI section.
packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/Nodes.test.tsx	Tests error badge + has-error class rendering on nodes.
packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/diagramBuilder.test.ts	Tests hasError attribution from validation errors to nodes.
packages/serverless-workflow-diagram-editor/tests/diagram-editor/error-pages/ParsingErrorPage.test.tsx	Renames taskId to path in validation error test helper.
packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx	Adds test for falling back to parsing error page on unparseable content.
packages/serverless-workflow-diagram-editor/tests/core/workflowSdk.integration.test.ts	Updates expectations to use path and adds dedupe validation test.
packages/serverless-workflow-diagram-editor/tests/core/validationErrors.test.ts	New tests for error classification/splitting helpers.
packages/serverless-workflow-diagram-editor/tests/core/snapshots/workflowSdk.integration.test.ts.snap	Snapshot updates reflecting path rename and deduped outputs.
packages/serverless-workflow-diagram-editor/stories/features/ValidationErrors.stories.tsx	New Storybook stories showcasing validation error scenarios.
packages/serverless-workflow-diagram-editor/src/styles.css	Adds CSS variables for error accent/glow colors.
packages/serverless-workflow-diagram-editor/src/store/DiagramEditorContextProvider.tsx	Computes and exposes nodeIds in context for ownership checks.
packages/serverless-workflow-diagram-editor/src/store/DiagramEditorContext.tsx	Adds nodeIds to context type.
packages/serverless-workflow-diagram-editor/src/side-panel/WorkflowInfoView.tsx	Renders workflow-level errors above the document section.
packages/serverless-workflow-diagram-editor/src/side-panel/SidePanelTrigger.tsx	New trigger with general-error count badge + click behavior.
packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.css	Styles for errors section and trigger badge.
packages/serverless-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx	Renders node-owned errors and derives field labels from error paths.
packages/serverless-workflow-diagram-editor/src/side-panel/ErrorsSection.tsx	New reusable errors section component.
packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx	Adds hasError to node data and renders node error badge/class.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/diagramBuilder.ts	Attributes validation errors to nodes and sets data.hasError.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	Passes errors into diagram builder and swaps in SidePanelTrigger.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css	Styles node error outline/glow and error edge stroke variable usage.
packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts	Adds translations for “Errors” section and node badge label.
packages/serverless-workflow-diagram-editor/src/core/workflowSdk.ts	Renames taskId → path and dedupes exact duplicate validation errors.
packages/serverless-workflow-diagram-editor/src/core/validationErrors.ts	New helper module for filtering noise + splitting node vs general errors.
packages/serverless-workflow-diagram-editor/src/core/index.ts	Exports new validation error helpers.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[fantonangeli]

@lornakelly should we add a changeset for this?

[lornakelly]

@lornakelly should we add a changeset for this?

@fantonangeli Yes, sorry, added one

[Copilot]

Pull request overview

Copilot reviewed 30 out of 30 changed files in this pull request and generated 1 comment.

[handreyrc]

@lornakelly,

LGTM!

I really do like the error highlighting on the task.

[lornakelly]

@ricardo please merge when you get a chance