fix #523 - feat: Integrate Serverless Workflow Editor package into DevUI

[fantonangeli]

Closes #523

Required PRs:

• fix #187: Dynamic require error from bundled use-sync-external-store shim open-workflow-specification/editor#188
• [Fix #1489] Serializing java defined files open-workflow-specification/sdk-java#1514
• fix #260 - bug: Start/End node styles reference unavailable Tailwind CSS variables inside Shadow DOM open-workflow-specification/editor#261
• feat: Update sdk open-workflow-specification/editor#265 (good to have) to rely on @openworkflowspec/sdk as the pom.xml still have to reference @serverlessworkflow/sdk

The problem

The goal is to replace the current Mermaid-based diagram visualization with the Serverless Workflow Diagram Editor component in the Quarkus Dev UI.

Quarkus Flow should not require pnpm, npm, or Node.js to build the Quarkus extension modules. Users should be able to add Quarkus Flow as a dependency and have the Dev UI work without any frontend setup.

Proposed solution / API

Consume @serverlessworkflow/diagram-editor directly through mvnpm, as a Maven-resolvable web dependency. Do not create a separate /editor module or a quarkus-flow-editor wrapper artifact.

This keeps the Quarkus extension build Maven-based and avoids introducing a separate editor artifact, nightly publishing, or additional GH Actions workflows.

How to test:

• from Quarkus Flow:

  • mvn clean install -DskipTests

• Run an example:

cd examples/suspend-resume-abort
#or this one to have multiple WFs
#cd examples/micrometer-prometheus
mvn clean quarkus:dev

Known issues:

• In the first video, there are 2 workflows which the DiagramEditor fails to render. Those workflows are Java-defined, and the Java code is returning a definition not fully compliant with the spec.
  This can be replicated with the micrometer-prometheus example.
  CC @ricardozanini @fjtirado
  [Fix #1489] Serializing java defined files open-workflow-specification/sdk-java#1514
• Start and End nodes are missing the border. The fix needs merge and a new DiagramEditor release:
  fix #260 - bug: Start/End node styles reference unavailable Tailwind CSS variables inside Shadow DOM open-workflow-specification/editor#261

Preview:

Deployment with multiple WFs:
https://github.com/user-attachments/assets/58f88dfa-2d3d-40bf-ab10-e1420a52e51a

Loading message for slow jsonRPC communication:
https://github.com/user-attachments/assets/c696e31c-8c2b-4711-8007-7b938711d559

[fantonangeli]

After a long investigation, it seems the React import issue was a bundling issue related to use-sync-external-store, similar to react/react#24590, where the library is built into the library bundle in a CJS form and later fails in ESM/browser consumers.

I found a way to keep use-sync-external-store external and declare it as a runtime dependency, letting Quarkus resolve it as ESM instead of CJS.

Currently I can see the Diagram Editor internal Error page.
I'm still refining my solution.

[fantonangeli]

This line show a fixed WF example because the definition from the service seems not compatible with the typescript SDK.
You can comment this line to try.

[fantonangeli]

This POM is only for PR reviewers until my fix on the Diagram Editor lands on a published version.
We can remove this file before merge this PR or after a new DE release.

[fantonangeli]

I think I found a useful error from the SDK, which is hidden by another try..catch:

Error: 'Workflow' is invalid - The DSL version of the workflow '1.0.0' doesn't match the supported version of the SDK '1.0.3'.

and the value of document.dsl is 1.0.0.
For what I understand, it seems a DSL compatibility error

[fantonangeli]

@fjtirado @lornakelly @ricardozanini @handreyrc I updated the PR description and now this is ready for review

[ricardozanini]

@fantonangeli can you do a new alpha editor release with the bugs fixed?

[ricardozanini]

🎉

[ricardozanini]

@fantonangeli the CI errors are unrelated, I'm fixing on another PR.

[fantonangeli]

I guess the Langchain4J failures are not related to this PR.
I published the @openworkflowspec/diagram-editor 0.2.0 and updated all the references here.
I would need one more review, @lornakelly can you please review this?

[ricardozanini]

@fantonangeli can you rebase?