Support zeebe:UserTask

lib/camunda-cloud/FormsBehavior.js

@@ -1,8 +1,9 @@
-import { without } from 'min-dash';
+import { isUndefined, without } from 'min-dash';
 
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 
 import { createElement } from '../util/ElementUtil';
+import { getExtensionElementsList } from '../util/ExtensionElementsUtil';
 
 import {
   getBusinessObject,
@@ -26,6 +27,8 @@
   constructor(bpmnFactory, eventBus, modeling) {
     super(eventBus);
 
+    this._modeling = modeling;
+
     function removeUserTaskForm(element, moddleElement, userTaskForm) {
       const extensionElements = moddleElement.get('extensionElements');
 
@@ -134,6 +137,7 @@
      * 1. zeebe:FormDefinition with zeebe:formId (linked Camunda form)
      * 2. zeebe:FormDefinition with zeebe:formKey in the format of camunda-forms:bpmn:UserTaskForm_1 (embedded Camunda form)
      * 3. zeebe:FormDefinition with zeebe:formKey (custom form)
+     * 4. zeebe:FormDefinition with zeebe:externalReference (external form)
      */
     this.preExecute('element.updateModdleProperties', function(context) {
       const {
@@ -144,8 +148,13 @@
       if (is(moddleElement, 'zeebe:FormDefinition')) {
         if ('formId' in properties) {
           properties.formKey = undefined;
+          properties.externalReference = undefined;
         } else if ('formKey' in properties) {
           properties.formId = undefined;
+          properties.externalReference = undefined;
+        } else if ('externalReference' in properties) {
+          properties.formId = undefined;
+          properties.formKey = undefined;
         }
       }
     }, true);
@@ -188,6 +197,69 @@
       }
     }, true);
 
+    this._registerZeebeUserTaskSupport();
+  }
+
+  _registerZeebeUserTaskSupport() {
+
+    /**
+     * Handle `formKey` for `zeebe:UserTask`.
+     * 1. Remove if embedded form is used.
+     * 2. Convert to externalReference if custom form key.
+     */
+    this.postExecute('element.updateModdleProperties', ({ element }) => {
+
+      if (!is(element, 'bpmn:UserTask') || !hasZeebeUserTask(element)) {
+        return;
+      }
+
+      const formDefinition = getFormDefinition(element);
+
+      if (!formDefinition) {
+        return;
+      }
+
+      const formKey = formDefinition.get('formKey');
+
+      if (isUndefined(formKey)) {
+        return;
+      }
+
+      if (isUserTaskFormKey(formKey)) {
+        this._modeling.updateModdleProperties(element, formDefinition, { formKey: undefined });
+      } else {
+        this._modeling.updateModdleProperties(element, formDefinition, {
+          externalReference: formKey
+        });
+      }
+    }, true);
+
+    /**
+     * Replace `externalReference` with `formKey` for non-`zeebe:UserTask`.
+     */
+    this.postExecute('element.updateModdleProperties', ({ element }) => {
+
+      if (!is(element, 'bpmn:UserTask') || hasZeebeUserTask(element)) {
+        return;
+      }
+
+      const formDefinition = getFormDefinition(element);
+
+      if (!formDefinition) {
+        return;
+      }
+
+      const externalReference = formDefinition.get('externalReference');
+
+      if (isUndefined(externalReference)) {
+        return;
+      }
+
+      this._modeling.updateModdleProperties(element, formDefinition, {
+        externalReference: undefined,
+        formKey: externalReference
+      });
+    }, true);
   }
 }
 
@@ -209,4 +281,8 @@
     && 'values' in properties
     && oldProperties.values.find(value => is(value, type))
     && !properties.values.find(value => is(value, type));
-}
+}
+
+function hasZeebeUserTask(userTask) {
+  return getExtensionElementsList(userTask, 'zeebe:UserTask').length;
+}

package.json

@@ -66,7 +66,7 @@
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "webpack": "^5.74.0",
-    "zeebe-bpmn-moddle": "^1.0.0"
+    "zeebe-bpmn-moddle": "^1.1.0"
   },
   "peerDependencies": {
     "bpmn-js": ">= 9",

test/camunda-cloud/FormDefinitionBehaviorSpec.js

@@ -2,12 +2,13 @@ import { without } from 'min-dash';
 
 import {
   bootstrapCamundaCloudModeler,
+  getBpmnJS,
   inject
 } from 'test/TestHelper';
 
 import { getExtensionElementsList } from 'lib/util/ExtensionElementsUtil';
 
-import { getBusinessObject } from 'bpmn-js/lib/util/ModelUtil';
+import { getBusinessObject, is } from 'bpmn-js/lib/util/ModelUtil';
 
 import {
   getFormDefinition,
@@ -406,6 +407,26 @@ describe('camunda-cloud/features/modeling - FormsBehavior', function() {
     });
 
 
+    describe('set external reference', function() {
+
+      it('should remove form ID', inject(function(elementRegistry, modeling) {
+
+        // given
+        const userTask = elementRegistry.get('withFormId');
+
+        const formDefinition = getFormDefinition(userTask);
+
+        // when
+        modeling.updateModdleProperties(userTask, formDefinition, {
+          externalReference: 'foobar'
+        });
+
+        // then
+        expect(formDefinition.get('formId')).not.to.exist;
+      }));
+    });
+
+
     describe('remove form definition', function() {
 
       it('should remove user task form', inject(function(canvas, elementRegistry, modeling) {
@@ -449,17 +470,180 @@ describe('camunda-cloud/features/modeling - FormsBehavior', function() {
 
     });
 
+
+    describe('change to Zeebe User Task', function() {
+
+      it('should remove embedded form', inject(function(elementRegistry) {
+
+        // given
+        const userTask = elementRegistry.get('UserTask_1');
+
+        // when
+        addZeebeUserTask(userTask);
+
+        // then
+        const userTaskForms = getUserTaskForms();
+
+        expect(hasUsertaskForm('UserTaskForm_1', userTaskForms)).to.be.false;
+
+        const formDefinition = getFormDefinition(userTask);
+        expect(formDefinition.formKey).not.to.exist;
+      }));
+
+
+      it('should keep custom form reference as externalReference', inject(function(elementRegistry) {
+
+        // given
+        const userTask = elementRegistry.get('UserTask_11');
+        const originalFormKey = getFormDefinition(userTask).get('formKey');
+
+        // when
+        addZeebeUserTask(userTask);
+
+        // then
+        const formDefinition = getFormDefinition(userTask);
+
+        expect(formDefinition.formKey).not.to.exist;
+        expect(formDefinition.externalReference).to.eql(originalFormKey);
+        expect(formDefinition.formId).not.to.exist;
+      }));
+
+
+      it('should keep empty custom form reference as externalReference', inject(function(elementRegistry) {
+
+        // given
+        const userTask = elementRegistry.get('UserTask_13');
+        const originalFormKey = getFormDefinition(userTask).get('formKey');
+
+        // when
+        addZeebeUserTask(userTask);
+
+        // then
+        const formDefinition = getFormDefinition(userTask);
+
+        expect(formDefinition.formKey).not.to.exist;
+        expect(formDefinition.externalReference).to.eql(originalFormKey);
+        expect(formDefinition.formId).not.to.exist;
+      }));
+
+
+      it('should keep Camunda Form (linked)', inject(function(elementRegistry) {
+
+        // given
+        const userTask = elementRegistry.get('UserTask_12');
+        const originalFormId = getFormDefinition(userTask).get('formId');
+
+        // when
+        addZeebeUserTask(userTask);
+
+        // then
+        const formDefinition = getFormDefinition(userTask);
+
+        expect(formDefinition.formKey).not.to.exist;
+        expect(formDefinition.externalReference).not.to.exist;
+        expect(formDefinition.formId).to.eql(originalFormId);
+      }));
+    });
+
+
+    describe('change from Zeebe User Task', function() {
+
+      it('should keep externalReference as formKey', inject(function(elementRegistry) {
+
+        // given
+        const userTask = elementRegistry.get('withExternalReference');
+        const externalReference = getFormDefinition(userTask).get('externalReference');
+
+        // when
+        removeZeebeUserTask(userTask);
+
+        // then
+        const formDefinition = getFormDefinition(userTask);
+
+        expect(formDefinition.externalReference).not.to.exist;
+        expect(formDefinition.formId).not.to.exist;
+        expect(formDefinition.formKey).to.eql(externalReference);
+      }));
+
+
+      it('should keep externalReference as formKey (empty value)', inject(function(elementRegistry) {
+
+        // given
+        const userTask = elementRegistry.get('withEmptyExternalReference');
+        const externalReference = getFormDefinition(userTask).get('externalReference');
+
+        // when
+        removeZeebeUserTask(userTask);
+
+        // then
+        const formDefinition = getFormDefinition(userTask);
+
+        expect(formDefinition.externalReference).not.to.exist;
+        expect(formDefinition.formId).not.to.exist;
+        expect(formDefinition.formKey).to.eql(externalReference);
+      }));
+
+
+      it('should keep Camunda Form (linked)', inject(function(elementRegistry) {
+
+        // given
+        const userTask = elementRegistry.get('withFormId');
+        const originalFormId = getFormDefinition(userTask).get('formId');
+
+        // when
+        removeZeebeUserTask(userTask);
+
+        // then
+        const formDefinition = getFormDefinition(userTask);
+
+        expect(formDefinition.formKey).not.to.exist;
+        expect(formDefinition.externalReference).not.to.exist;
+        expect(formDefinition.formId).to.eql(originalFormId);
+      }));
+
+    });
+
   });
 
 });
 
 
 // helpers //////////
 
-function getUserTaskForms(rootElement) {
-  const businessObject = getBusinessObject(rootElement);
+function getUserTaskForms() {
+  const BPMN_JS = getBpmnJS();
+
+  return BPMN_JS.invoke(function(canvas) {
+    const rootElement = canvas.getRootElement();
+    const businessObject = getBusinessObject(rootElement);
+
+    return getExtensionElementsList(businessObject, 'zeebe:UserTaskForm');
+  });
+}
+
+function addZeebeUserTask(element) {
+  getBpmnJS().invoke(function(bpmnFactory, modeling) {
+    const extensionElements = getBusinessObject(element).get('extensionElements'),
+          values = extensionElements.get('values'),
+          zeebeUserTask = bpmnFactory.create('zeebe:UserTask');
 
-  return getExtensionElementsList(businessObject, 'zeebe:UserTaskForm');
+    // when
+    modeling.updateModdleProperties(element, extensionElements, {
+      values: values.concat(zeebeUserTask)
+    });
+  });
+}
+
+function removeZeebeUserTask(element) {
+  getBpmnJS().invoke(function(modeling) {
+    const extensionElements = getBusinessObject(element).get('extensionElements'),
+          values = extensionElements.get('values');
+
+    // when
+    modeling.updateModdleProperties(element, extensionElements, {
+      values: values.filter(value => !is(value, 'zeebe:UserTask'))
+    });
+  });
 }
 
 function hasUsertaskForm(id, userTaskForms) {