Skip to content

feat: Add badge to leaf nodes#138

Open
lornakelly wants to merge 1 commit intoserverlessworkflow:mainfrom
lornakelly:lk/85/leaf-node-styling-2
Open

feat: Add badge to leaf nodes#138
lornakelly wants to merge 1 commit intoserverlessworkflow:mainfrom
lornakelly:lk/85/leaf-node-styling-2

Conversation

@lornakelly
Copy link
Copy Markdown
Contributor

@lornakelly lornakelly commented May 8, 2026

Closes #85

Summary

Add badge rendering and subtype extraction for leaf nodes

Changes

  • Extract subtypes from Call, Run and Listen tasks
  • Add TaskNodeBadge component
  • Render known subtypes as text and unknown as info icon with tooltip
  • Add Catch leaf node and TryCatch container node with placeholder content
Screenshot 2026-05-08 at 09 22 39 Screenshot 2026-05-08 at 09 22 46 Screenshot 2026-05-08 at 09 26 39

Copilot AI review requested due to automatic review settings May 8, 2026 08:25
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds subtype “badges” to task leaf nodes in the React Flow diagram editor, along with subtype extraction helpers and initial support for TryCatch/Catch nodes to advance the agreed node styling/UX work.

Changes:

  • Introduces task subtype extraction utilities for Call, Run, and Listen tasks and exports them from src/core.
  • Adds badge rendering to leaf task nodes (text for known subtypes, info-icon with tooltip for unknown).
  • Adds Catch as a leaf node (incl. config + tests) and TryCatch as a placeholder container node; adjusts default node sizing and demo diagram data.

Reviewed changes

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

Show a summary per file
File Description
packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/taskNodeConfig.test.ts Updates leaf node config coverage to include Catch.
packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/Nodes.test.tsx Extends node rendering tests for TryCatch/Catch and adds badge rendering tests.
packages/serverless-workflow-diagram-editor/tests/core/taskSubType.test.ts Adds unit tests for subtype extraction utilities.
packages/serverless-workflow-diagram-editor/src/react-flow/nodes/taskNodeConfig.ts Adds Catch leaf node config (color/icon/type label).
packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx Adds TryCatch/Catch node types and implements TaskNodeBadge rendering.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx Updates hardcoded demo nodes to include badges and tweaks positions/edge waypoints.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css Adds badge styling and adjusts leaf node layout to accommodate badge + truncation.
packages/serverless-workflow-diagram-editor/src/core/taskSubType.ts Implements getCallSubType, getRunSubType, getListenSubType, getTaskSubType.
packages/serverless-workflow-diagram-editor/src/core/index.ts Exports the new taskSubType module.
packages/serverless-workflow-diagram-editor/src/core/autoLayout.ts Increases default node width to 200.

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

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx Outdated
Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx Outdated
Signed-off-by: lornakelly <lornakelly88@gmail.com>
@lornakelly lornakelly force-pushed the lk/85/leaf-node-styling-2 branch from 3d87847 to 21beae8 Compare May 8, 2026 08:33
@lornakelly lornakelly changed the title Add badge to leaf nodes feat: Add badge to leaf nodes May 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Apply node styling (UX)

2 participants