Zeebe Diagrams: support UserTasks

[MaxTru]

Is your feature request related to a problem? Please describe.

(Note that I am creating this issue here and not in Zeebe-Modeler in expectation that Zeebe-Modeler will be merged with Camunda Modeler)

With the april release, Zeebe will support Users Tasks. (See https://github.com/zeebe-io/zeebe/issues/6116)

The basic spec can be taken from this example:

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:zeebe="http://camunda.org/schema/zeebe/1.0" id="Definitions_1oquk3q">
  <bpmn:process id="user-task-process" name="User Task Process" isExecutable="true">
    <bpmn:extensionElements>
      <zeebe:userTaskForm id="userTaskForm_1">{"fields": [...]}</zeebe:userTaskForm>
    </bpmn:extensionElements>
    <bpmn:sequenceFlow id="Flow_1qwoyep" sourceRef="start" targetRef="user-task" />
    <bpmn:endEvent id="end" name="End">
      <bpmn:incoming>Flow_0xt42si</bpmn:incoming>
    </bpmn:endEvent>
    <bpmn:sequenceFlow id="Flow_0xt42si" sourceRef="user-task" targetRef="end" />
    <bpmn:userTask id="user-task" name="User Task">
      <bpmn:extensionElements>
        <zeebe:formDefinition formKey="camunda-forms:bpmn:userTaskForm_1" />
      </bpmn:extensionElements>
      <bpmn:incoming>Flow_1qwoyep</bpmn:incoming>
      <bpmn:outgoing>Flow_0xt42si</bpmn:outgoing>
    </bpmn:userTask>
    <bpmn:startEvent id="start" name="Start">
      <bpmn:outgoing>Flow_1qwoyep</bpmn:outgoing>
    </bpmn:startEvent>
  </bpmn:process>
</bpmn:definitions>

Note that only one formDefinition is possible per UserTask.

We need to support UserTask in Zeebe Diagrams.

Describe the solution you'd like

To support UserTasks in ZeebeDiagrams I see the following to-dos (note that these might change based on insights gained during the process):

• [ ] Adjust the zeebe-bpmn-moddle
• [ ] Allow BPMN element UserTask to be modeled analog to how it is allowed within Camunda Diagrams (incl. pallette, morph)
• [ ] When having selected a UserTask, the properties-panel shall show a simple textInput Camunda-Forms json configuration
  • [ ] When pasting a json string into this field, the zeebe:userTaskForm extension element shall automatically be created on process level and filled with the pasted json
  • [ ] The zeebe:userTaskForm extension element shall be linked using a generated ID in the format of camunda-forms:bpmn:userTaskForm_<UUID>
  • [ ] When updating the input, the existing zeebe:userTaskForm extension element should be maintained
  • [ ] When deleting the input's content, the existing zeebe:userTaskForm extension element shall be deleted (so that we never have unreferenced zeebe:userTaskForm extension element in the BPMN)

Describe alternatives you've considered

n/a

Additional context

See https://github.com/zeebe-io/zeebe/issues/6116

Basic User Task support has to be implemented inside https://github.com/camunda/camunda-bpmn-js.

[pinussilvestrus]

UI Sketches to be found here: https://miro.com/app/board/o9J_lT5-zcw=/

[pinussilvestrus]

Further outcomes after (small) discussions with @volkergersabeck and @andreasgeier

• We will have a separate tab for the Forms
• We will have a one-liner, rationale: prevent users from writing the JSON inside the input, it should be only pasted
• We should clarify whether to add Headers, Input & Output parameters to user tasks as well (cf. https://github.com/zeebe-io/zeebe/issues/6116#issuecomment-783264730)

[pinussilvestrus]

Done via https://github.com/camunda/camunda-bpmn-js/issues/14. Will be closed once changes got released and integrated.