Skip to content

feat: Define edge types and create React Flow edge components #52

@lornakelly

Description

@lornakelly

Description

Create react flow edge types and the node components associated with them ( Custom Edges ).

Motivation

Edges carry meaning in a workflow diagram - a user needs to be able to distinguish at a glance between a normal sequential transition, a conditional branch, and an error path. Defining the edge types now ensures that meaning is captured correctly in the diagram from the start.

Proposed Implementation

  • Create a directory named "edges" under "react-flow" to host edge custom components specifics. The following three edge types are required:
    • Default/regular - simple line, used for sequential flow between tasks
    • conditional - line with a condition label, used for switch branches
    • error - solid red line, used for error transitions
  • Update the hardcoded diagram to showcase all edge types.

Definition of Done

  • Implementation: Fully implemented according to the Serverless Workflow spec.
  • Unit Tests: Comprehensive unit tests are included and passing.
  • Integration Tests: Verified within the monorepo and target environments (Web/VS Code).
  • Documentation: Updated README.md, ADRs, or official docs.
  • Performance: No significant regression in editor responsiveness.
  • Accessibility: UI changes comply with accessibility standards.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

Status

Backlog

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions