feat: ensure that only one type of form is set at a time

Related to bpmn-io/bpmn-js-properties-panel#949

lib/camunda-cloud/FormsBehavior.js

@@ -1,3 +1,5 @@
+import { without } from 'min-dash';
+
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 
 import { createElement } from '../util/ElementUtil';
@@ -12,6 +14,7 @@ import {
   getFormDefinition,
   getRootElement,
   getUserTaskForm,
+  isUserTaskFormKey,
   userTaskFormIdToFormKey
 } from './util/FormsUtil';
 
@@ -42,11 +45,9 @@ export default class FormsBehavior extends CommandInterceptor {
 
       const rootExtensionElements = rootElement.get('extensionElements');
 
-      const values = rootExtensionElements.get('values').filter((element) => {
-        return element !== userTaskForm;
+      modeling.updateModdleProperties(shape, rootExtensionElements, {
+        values: without(rootExtensionElements.get('values'), userTaskForm)
       });
-
-      modeling.updateModdleProperties(shape, rootExtensionElements, { values });
     }, true);
 
 
@@ -114,6 +115,62 @@ export default class FormsBehavior extends CommandInterceptor {
       });
     }, true);
 
+
+    /**
+     * Ensure that a user task only has one of
+     * the following:
+     *
+     * 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)
+     */
+    this.preExecute('element.updateModdleProperties', function(context) {
+      const {
+        element,
+        moddleElement,
+        properties
+      } = context;
+
+      if (!is(moddleElement, 'zeebe:FormDefinition')) {
+        return;
+      }
+
+      const {
+        formId,
+        formKey
+      } = properties;
+
+      const userTaskForm = getUserTaskForm(element);
+
+      if (formId) {
+        if (userTaskForm) {
+          const rootElement = getRootElement(element),
+                rootExtensionElements = rootElement.get('extensionElements');
+
+          modeling.updateModdleProperties(element, rootExtensionElements, {
+            values: without(rootExtensionElements.get('values'), userTaskForm)
+          });
+        }
+
+        modeling.updateModdleProperties(element, moddleElement, {
+          formKey: undefined
+        });
+      } else if (formKey) {
+        if (!isUserTaskFormKey(formKey) && userTaskForm) {
+          const rootElement = getRootElement(element),
+                extensionElements = rootElement.get('extensionElements');
+
+          modeling.updateModdleProperties(element, extensionElements, {
+            values: without(extensionElements.get('values'), userTaskForm)
+          });
+        }
+
+        modeling.updateModdleProperties(element, moddleElement, {
+          formId: undefined
+        });
+      }
+    }, true);
+
   }
 }
 

test/camunda-cloud/FormDefinitionBehaviorSpec.js

@@ -20,7 +20,7 @@ describe('camunda-cloud/features/modeling - FormsBehavior', function() {
   beforeEach(bootstrapCamundaCloudModeler(diagramXML));
 
 
-  describe('cleanup user task forms', function() {
+  describe('remove user task form', function() {
 
     describe('on remove user task', function() {
 
@@ -150,7 +150,7 @@ describe('camunda-cloud/features/modeling - FormsBehavior', function() {
   });
 
 
-  describe('create new user task form', function() {
+  describe('create user task form', function() {
 
     describe('on copy user task', function() {
 
@@ -247,6 +247,96 @@ describe('camunda-cloud/features/modeling - FormsBehavior', function() {
 
   });
 
+
+  describe('update form definition', function() {
+
+    describe('set form ID', function() {
+
+      it('should remove custom form key', inject(function(elementRegistry, modeling) {
+
+        // given
+        const userTask = elementRegistry.get('UserTask_11');
+
+        const formDefinition = getFormDefinition(userTask);
+
+        // when
+        modeling.updateModdleProperties(userTask, formDefinition, {
+          formId: 'foobar'
+        });
+
+        // then
+        expect(formDefinition.get('formKey')).not.to.exist;
+      }));
+
+
+      it('should remove user task form', inject(function(canvas, elementRegistry, modeling) {
+
+        // given
+        const userTask = elementRegistry.get('UserTask_1');
+
+        const formDefinition = getFormDefinition(userTask);
+
+        // when
+        modeling.updateModdleProperties(userTask, formDefinition, {
+          formId: 'foobar'
+        });
+
+        // then
+        expect(formDefinition.get('formKey')).not.to.exist;
+
+        const rootElement = canvas.getRootElement();
+
+        const userTaskForms = getUserTaskForms(rootElement);
+
+        expect(hasUsertaskForm('UserTaskForm_1', userTaskForms)).to.be.false;
+      }));
+
+    });
+
+
+    describe('set form key', function() {
+
+      it('should remove form ID', inject(function(elementRegistry, modeling) {
+
+        // given
+        const userTask = elementRegistry.get('UserTask_12');
+
+        const formDefinition = getFormDefinition(userTask);
+
+        // when
+        modeling.updateModdleProperties(userTask, formDefinition, {
+          formKey: 'foobar'
+        });
+
+        // then
+        expect(formDefinition.get('formId')).not.to.exist;
+      }));
+
+
+      it('should remove user task form', inject(function(canvas, elementRegistry, modeling) {
+
+        // given
+        const userTask = elementRegistry.get('UserTask_1');
+
+        const formDefinition = getFormDefinition(userTask);
+
+        // when
+        modeling.updateModdleProperties(userTask, formDefinition, {
+          formKey: 'foobar'
+        });
+
+        // then
+        const rootElement = canvas.getRootElement();
+
+        const userTaskForms = getUserTaskForms(rootElement);
+
+        expect(hasUsertaskForm('UserTaskForm_1', userTaskForms)).to.be.false;
+      }));
+
+    });
+
+  });
+
 });
 
 

test/camunda-cloud/process-user-tasks.bpmn

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:zeebe="http://camunda.org/schema/zeebe/1.0" id="Definitions_1mcvv1o" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.8.0-rc.0">
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:zeebe="http://camunda.org/schema/zeebe/1.0" id="Definitions_1mcvv1o" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.15.0">
   <bpmn:process id="Process_1" isExecutable="true">
     <bpmn:extensionElements>
       <zeebe:userTaskForm id="UserTaskForm_1">{ components: [ { label: "field", key: "field" } ] }</zeebe:userTaskForm>
@@ -58,6 +58,16 @@
         <zeebe:taskSchedule followUpDate="=followUpDate" />
       </bpmn:extensionElements>
     </bpmn:userTask>
+    <bpmn:userTask id="UserTask_11" name="UserTask_11">
+      <bpmn:extensionElements>
+        <zeebe:formDefinition formKey="foobar" />
+      </bpmn:extensionElements>
+    </bpmn:userTask>
+    <bpmn:userTask id="UserTask_12" name="UserTask_12">
+      <bpmn:extensionElements>
+        <zeebe:formDefinition formId="foobar" />
+      </bpmn:extensionElements>
+    </bpmn:userTask>
     <bpmn:group id="Group_1iij674" categoryValueRef="CategoryValue_1ls7csf" />
     <bpmn:group id="Group_03ciaww" categoryValueRef="CategoryValue_1e18h7j" />
     <bpmn:group id="Group_0pfvk8p" categoryValueRef="CategoryValue_1efmoxk" />
@@ -106,8 +116,15 @@
       <bpmndi:BPMNShape id="Activity_0jt9scz_di" bpmnElement="UserTask_10">
         <dc:Bounds x="990" y="150" width="100" height="80" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_0db7jhq_di" bpmnElement="UserTask_11">
+        <dc:Bounds x="190" y="330" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_1gtn2y5_di" bpmnElement="UserTask_12">
+        <dc:Bounds x="190" y="420" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="Group_1iij674_di" bpmnElement="Group_1iij674">
-        <dc:Bounds x="160" y="80" width="160" height="300" />
+        <dc:Bounds x="160" y="80" width="160" height="480" />
         <bpmndi:BPMNLabel>
           <dc:Bounds x="203" y="87" width="75" height="14" />
         </bpmndi:BPMNLabel>