kie-tools-issues#3097: [SonataFlow] Dev UI does not render object input

[fantonangeli]

Closes #3097

This PR reopens: #3100
This introduces a Code Editor which supports multiple languages and shows validation results.
In this initial version, only JSON is supported via the JSON Schema definition, but the underlying React component supports other languages and can be extended easily.

To use it, define a field like this in your JSON Schema:

"customData": {
    "title": "custom JSON data",
    "description": "Use the CodeEditor to write your custom JSON",
    "type": "object"
}

Then the form will send customData as an object type to the endpoint.

How to test on SonataFlow Deployment Webapp with a mocked backend:

• build kie-tools/packages/sonataflow-deployment-webapp
• pnpm start
• Start the service workflow

How to test on SonataFlow Deployment Webapp with a real backend:

• clone https://github.com/fantonangeli/kie-tools-issues-3097
• mvn quarkus:dev
• on a new terminal build kie-tools/packages/sonataflow-deployment-webapp
• pnpm start:dev-webapp
• Start the hello workflow

Preview:
https://github.com/user-attachments/assets/e7e3491a-d6c7-4b70-bada-974b9e9de246

[fantonangeli]

@ricardozanini @domhanak I see we are having this GH error on main branch CI as well:
"You have exceeded a secondary rate limit"
It comes from chrome-extension-pack-kogito-kie-editors package.
I think we should not block this PR and you can review this.

[ricardozanini]

I'm not a specialist on typescript, but this sounds good to me :)

[tiagobento]

@ljmotta Would be an SME here. Tagging him for awareness.

[tiagobento]

@fantonangeli Are we creating a new convention here with the uniforms property?

        "customData": {
          "type": "string",
          "description": "Custom JSON data",
          "uniforms": { "language": "json" }
        }

Or is this a convention that already exists?

[fantonangeli]

🆘 Help wanted 🆘
@tiagobento @ljmotta @ricardozanini @fjtirado

@tiagobento I used a convention already defined in Uniforms:
https://github.com/vazco/uniforms/blob/60080e0fd49ad05d567137e910ebba5caf4de3e7/packages/uniforms/src/createAutoField.tsx#L26
But I still have to discover a better way to tell @kie-tools/uniforms-patternfly to show a Code Editor:
Let me share my analysis:

1. {"type": "string", "uniforms": { "language": "json" }}
   🟢 Uniforms-patternfly
   🔴 Quarkus: the propriety is missing in /q/openapi.json
2. {"type": "string", "format": "json"}
   🔴 Uniforms-patternfly: Invalid definition for x field: "format" is not a supported property
   🟢 Quarkus
3. {"type": "string", "language": "json"}
   🔴 Uniforms-patternfly: Invalid definition for x field: "language" is not a supported property
   🔴 Quarkus: the propriety is missing in /q/openapi.json
4. {"type": "json"}, this is not a valid "primitive" type
   🔴 Uniforms-patternfly: Invalid definition for x field: "type" may not be an object. Change it to Object
   🔴 Quarkus: Cannot deserialize value of type org.eclipse.microprofile.openapi.models.media.Schema$SchemaType from String "json"
5. {type: "object"} without a defined properties: {} inside means JSON Code Editor, with properties:{...} is a nested object (original way)
   🟢 Uniforms-patternfly
   🟢 Quarkus
6. {type: String, additionalProperties:{ codeEditorFormat:"json" }}
   🔴 Uniforms-patternfly: Invalid definition for x field: "additionalProperties" is not a supported property
   🔴 Quarkus: the propriety is missing in /q/openapi.json

IMO Solution 5 is a kind of workaround, but it's the only working ATM.
If there is a way to send custom properties in the openapi.json and receive in the uniforms, we are open to new possible feature in the future.
Please let me know your suggestions.

[ricardozanini]

I'll just share my experience with users.

If the data input schema attribute is a complex object without attributes, e.g., type: object, we don't know what to render on the screen, hence the open field with JSON snippet support. This support is unnecessary, but it was a nice addition.

[ljmotta]

@fantonangeli Hi there. To make Uniforms stop complaning, you'll need to modify the validator, adding this new type. We have this on the dmn-runner package. In the packages/dmn-runner/src/ajv.ts file we add a few keywords on it.

[fantonangeli]

@ljmotta Awesome, thank you so much. This means that solution 2 is feasible.

Because the request for a Code Editor is not SonataFlow specific, I still think other packages can benefit from having this feature on uniform-patternfly and I would avoid creating a specific uniform-patternfly package for SonataFlow.

@tiagobento @ljmotta @ricardozanini @fjtirado
I would open a vote about solutions 2 and 5, and also a vote to have this Code Editor in the main uniform-patternfly package or in a separate specific package.

[ljmotta]

@fantonangeli I think the option 2 is better. This way we will have a specific field for a specific format. I don't like the idea of changing the generic object field to a code editor, as I'm unsure about the impact of this choice.

[ricardozanini]

Can't we have 5 only in sonataflow side?

[domhanak]

suggestion: list the additional components we define and their purpose. Also a guide on how to use the component would be nice imho.

We could also include or reference some docs on how to add new or when to add new components for easier contributions and maintenance of this package.