camunda-bpmn-js 4.1.1 → 4.3.0

package/dist/camunda-cloud-modeler.development.js

@@ -119228,6 +119228,50 @@
     return values;
   }
 
+  /**
+   * Add one or more extension elements. Create bpmn:ExtensionElements if it doesn't exist.
+   *
+   * @param {ModdleElement} element
+   * @param {ModdleElement} businessObject
+   * @param {ModdleElement|Array<ModdleElement>} extensionElementsToAdd
+   * @param {CommandStack} commandStack
+   */
+  function addExtensionElements(element, businessObject, extensionElementToAdd, bpmnFactory, commandStack) {
+    const commands = [];
+    let extensionElements = businessObject.get('extensionElements');
+
+    // (1) create bpmn:ExtensionElements if it doesn't exist
+    if (!extensionElements) {
+      extensionElements = createElement$3('bpmn:ExtensionElements', {
+        values: []
+      }, businessObject, bpmnFactory);
+      commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+          element,
+          moddleElement: businessObject,
+          properties: {
+            extensionElements
+          }
+        }
+      });
+    }
+    extensionElementToAdd.$parent = extensionElements;
+
+    // (2) add extension element to list
+    commands.push({
+      cmd: 'element.updateModdleProperties',
+      context: {
+        element,
+        moddleElement: extensionElements,
+        properties: {
+          values: [...extensionElements.get('values'), extensionElementToAdd]
+        }
+      }
+    });
+    commandStack.execute('properties-panel.multi-command-executor', commands);
+  }
+
   /**
    * Remove one or more extension elements. Remove bpmn:ExtensionElements afterwards if it's empty.
    *
@@ -119622,7 +119666,7 @@
   }
 
   const DMN_IMPLEMENTATION_OPTION = 'dmn',
-    JOB_WORKER_IMPLEMENTATION_OPTION$1 = 'jobWorker',
+    JOB_WORKER_IMPLEMENTATION_OPTION$2 = 'jobWorker',
     DEFAULT_IMPLEMENTATION_OPTION$1 = '';
   function BusinessRuleImplementationProps(props) {
     const {
@@ -119650,7 +119694,7 @@
         return DMN_IMPLEMENTATION_OPTION;
       }
       if (getTaskDefinition$2(element)) {
-        return JOB_WORKER_IMPLEMENTATION_OPTION$1;
+        return JOB_WORKER_IMPLEMENTATION_OPTION$2;
       }
       return DEFAULT_IMPLEMENTATION_OPTION$1;
     };
@@ -119665,7 +119709,7 @@
       if (value === DMN_IMPLEMENTATION_OPTION) {
         extensionElement = getCalledDecision$1(element);
         extensionElementType = 'zeebe:CalledDecision';
-      } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION$1) {
+      } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION$2) {
         extensionElement = getTaskDefinition$2(element);
         extensionElementType = 'zeebe:TaskDefinition';
       } else {
@@ -119684,7 +119728,7 @@
         value: DMN_IMPLEMENTATION_OPTION,
         label: translate('DMN decision')
       }, {
-        value: JOB_WORKER_IMPLEMENTATION_OPTION$1,
+        value: JOB_WORKER_IMPLEMENTATION_OPTION$2,
         label: translate('Job worker')
       }];
       return options;
@@ -120143,7 +120187,8 @@
   const FORM_TYPES = {
     CAMUNDA_FORM_EMBEDDED: 'camunda-form-embedded',
     CAMUNDA_FORM_LINKED: 'camunda-form-linked',
-    CUSTOM_FORM: 'custom-form'
+    CUSTOM_FORM: 'custom-form',
+    EXTERNAL_REFERENCE: 'external-reference'
   };
   function getFormDefinition$1(element) {
     const businessObject = getBusinessObject$2(element);
@@ -120182,10 +120227,14 @@
       return;
     }
     const formId = formDefinition.get('formId'),
-      formKey = formDefinition.get('formKey');
+      formKey = formDefinition.get('formKey'),
+      externalReference = formDefinition.get('externalReference');
     if (isDefined$1(formId)) {
       return FORM_TYPES.CAMUNDA_FORM_LINKED;
     }
+    if (isDefined$1(externalReference)) {
+      return FORM_TYPES.EXTERNAL_REFERENCE;
+    }
     if (isDefined$1(formKey)) {
       if (getUserTaskForm$1(element)) {
         return FORM_TYPES.CAMUNDA_FORM_EMBEDDED;
@@ -120193,7 +120242,12 @@
       return FORM_TYPES.CUSTOM_FORM;
     }
   }
+  function isZeebeUserTask(element) {
+    const bo = getBusinessObject$2(element);
+    return getExtensionElementsList$2(bo, 'zeebe:UserTask').length > 0;
+  }
 
+  const NONE_VALUE = 'none';
   function FormProps$1(props) {
     const {
       element
@@ -120204,7 +120258,7 @@
     const entries = [{
       id: 'formType',
       component: FormType$1,
-      isEdited: isEdited$3
+      isEdited: node => node.value !== NONE_VALUE
     }];
     const formType = getFormType$1(element);
     if (formType === FORM_TYPES.CAMUNDA_FORM_EMBEDDED) {
@@ -120222,9 +120276,15 @@
     } else if (formType === FORM_TYPES.CUSTOM_FORM) {
       entries.push({
         id: 'customFormKey',
-        component: CustomFormKey,
+        component: CustomForm,
         isEdited: isEdited
       });
+    } else if (formType === FORM_TYPES.EXTERNAL_REFERENCE) {
+      entries.push({
+        id: 'externalReference',
+        component: ExternalReference,
+        isEdited: isEdited$6
+      });
     }
     return entries;
   }
@@ -120235,33 +120295,13 @@
     const injector = useService$1('injector'),
       translate = useService$1('translate');
     const getValue = () => {
-      return getFormType$1(element) || '';
+      return getFormType$1(element) || NONE_VALUE;
     };
     const setValue = value => {
-      if (value === FORM_TYPES.CAMUNDA_FORM_EMBEDDED) {
-        setUserTaskForm(injector, element, '');
-      } else if (value === FORM_TYPES.CAMUNDA_FORM_LINKED) {
-        setFormId(injector, element, '');
-      } else if (value === FORM_TYPES.CUSTOM_FORM) {
-        setCustomFormKey(injector, element, '');
-      } else {
-        removeFormDefinition(injector, element);
-      }
+      setFormType(injector, element, value);
     };
     const getOptions = () => {
-      return [{
-        value: '',
-        label: translate('<none>')
-      }, {
-        value: FORM_TYPES.CAMUNDA_FORM_LINKED,
-        label: translate('Camunda Form (linked)')
-      }, {
-        value: FORM_TYPES.CAMUNDA_FORM_EMBEDDED,
-        label: translate('Camunda Form (embedded)')
-      }, {
-        value: FORM_TYPES.CUSTOM_FORM,
-        label: translate('Custom form key')
-      }];
+      return getFormTypeOptions(translate, element);
     };
     return SelectEntry({
       element,
@@ -120272,6 +120312,46 @@
       getOptions
     });
   }
+  function setFormType(injector, element, value) {
+    if (value === FORM_TYPES.CAMUNDA_FORM_EMBEDDED) {
+      setUserTaskForm(injector, element, '');
+    } else if (value === FORM_TYPES.CAMUNDA_FORM_LINKED) {
+      setFormId(injector, element, '');
+    } else if (value === FORM_TYPES.CUSTOM_FORM) {
+      setCustomFormKey(injector, element, '');
+    } else if (value === FORM_TYPES.EXTERNAL_REFERENCE) {
+      setExternalReference(injector, element, '');
+    } else {
+      removeFormDefinition(injector, element);
+    }
+  }
+  function getFormTypeOptions(translate, element) {
+    if (isZeebeUserTask(element)) {
+      return [{
+        value: NONE_VALUE,
+        label: translate('<none>')
+      }, {
+        value: FORM_TYPES.CAMUNDA_FORM_LINKED,
+        label: translate('Camunda Form')
+      }, {
+        value: FORM_TYPES.EXTERNAL_REFERENCE,
+        label: translate('External form reference')
+      }];
+    }
+    return [{
+      value: NONE_VALUE,
+      label: translate('<none>')
+    }, {
+      value: FORM_TYPES.CAMUNDA_FORM_LINKED,
+      label: translate('Camunda Form (linked)')
+    }, {
+      value: FORM_TYPES.CAMUNDA_FORM_EMBEDDED,
+      label: translate('Camunda Form (embedded)')
+    }, {
+      value: FORM_TYPES.CUSTOM_FORM,
+      label: translate('Custom form key')
+    }];
+  }
   function FormConfiguration(props) {
     const {
       element
@@ -120317,7 +120397,7 @@
       debounce
     });
   }
-  function CustomFormKey(props) {
+  function CustomForm(props) {
     const {
       element
     } = props;
@@ -120325,7 +120405,8 @@
       injector = useService$1('injector'),
       translate = useService$1('translate');
     const getValue = () => {
-      return getFormDefinition$1(element).get('formKey');
+      const formDefinition = getFormDefinition$1(element);
+      return formDefinition.get('formKey');
     };
     const setValue = value => {
       setCustomFormKey(injector, element, isUndefined$6(value) ? '' : value);
@@ -120333,7 +120414,31 @@
     return TextfieldEntry({
       element,
       id: 'customFormKey',
-      label: translate('Form key'),
+      label: translate('Custom form key'),
+      getValue,
+      setValue,
+      debounce
+    });
+  }
+  function ExternalReference(props) {
+    const {
+      element
+    } = props;
+    const debounce = useService$1('debounceInput'),
+      injector = useService$1('injector'),
+      translate = useService$1('translate');
+    const getValue = () => {
+      const formDefinition = getFormDefinition$1(element);
+      return formDefinition.get('externalReference');
+    };
+    const setValue = value => {
+      setExternalReference(injector, element, isUndefined$6(value) ? '' : value);
+    };
+    return FeelEntryWithVariableContext$1({
+      element,
+      id: 'externalReference',
+      label: translate('External form reference'),
+      feel: 'optional',
       getValue,
       setValue,
       debounce
@@ -120474,6 +120579,16 @@
       formKey
     })]);
   }
+  function setExternalReference(injector, element, externalReference) {
+    let {
+      commands,
+      formDefinition
+    } = getOrCreateFormDefintition(injector, element);
+    const commandStack = injector.get('commandStack');
+    commandStack.execute('properties-panel.multi-command-executor', [...commands, createUpdateModdlePropertiesCommand(element, formDefinition, {
+      externalReference
+    })]);
+  }
   function setUserTaskForm(injector, element, body) {
     let {
       commands,
@@ -121861,7 +121976,7 @@
   }
 
   const SCRIPT_IMPLEMENTATION_OPTION = 'script',
-    JOB_WORKER_IMPLEMENTATION_OPTION = 'jobWorker',
+    JOB_WORKER_IMPLEMENTATION_OPTION$1 = 'jobWorker',
     DEFAULT_IMPLEMENTATION_OPTION = '';
   function ScriptImplementationProps(props) {
     const {
@@ -121889,7 +122004,7 @@
         return SCRIPT_IMPLEMENTATION_OPTION;
       }
       if (getTaskDefinition$1(element)) {
-        return JOB_WORKER_IMPLEMENTATION_OPTION;
+        return JOB_WORKER_IMPLEMENTATION_OPTION$1;
       }
       return DEFAULT_IMPLEMENTATION_OPTION;
     };
@@ -121904,7 +122019,7 @@
       if (value === SCRIPT_IMPLEMENTATION_OPTION) {
         extensionElement = getScript$1(element);
         extensionElementType = 'zeebe:Script';
-      } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION) {
+      } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION$1) {
         extensionElement = getTaskDefinition$1(element);
         extensionElementType = 'zeebe:TaskDefinition';
       } else {
@@ -121923,7 +122038,7 @@
         value: SCRIPT_IMPLEMENTATION_OPTION,
         label: translate('FEEL expression')
       }, {
-        value: JOB_WORKER_IMPLEMENTATION_OPTION,
+        value: JOB_WORKER_IMPLEMENTATION_OPTION$1,
         label: translate('Job worker')
       }];
       return options;
@@ -122990,6 +123105,86 @@
     }
   }
 
+  const ZEEBE_USER_TASK_IMPLEMENTATION_OPTION = 'zeebeUserTask',
+    JOB_WORKER_IMPLEMENTATION_OPTION = 'jobWorker';
+  function UserTaskImplementationProps(props) {
+    const {
+      element
+    } = props;
+    if (!is$6(element, 'bpmn:UserTask')) {
+      return [];
+    }
+    return [{
+      id: 'userTaskImplementation',
+      component: UserTaskImplementation,
+      isEdited: () => isUserTaskImplementationEdited(element)
+    }];
+  }
+  function UserTaskImplementation(props) {
+    const {
+      element,
+      id
+    } = props;
+    const commandStack = useService$1('commandStack');
+    const bpmnFactory = useService$1('bpmnFactory');
+    const translate = useService$1('translate');
+    const getValue = () => {
+      if (getZeebeUserTask(element)) {
+        return ZEEBE_USER_TASK_IMPLEMENTATION_OPTION;
+      }
+      return JOB_WORKER_IMPLEMENTATION_OPTION;
+    };
+
+    /**
+     * Set value by either creating or removing zeebe:userTask extension element.
+     * Note that they must not exist both at the same time, however this
+     * will be ensured by a camunda-bpmn-js behavior (and not by the propPanel).
+     */
+    const setValue = value => {
+      if (value === ZEEBE_USER_TASK_IMPLEMENTATION_OPTION) {
+        createZeebeUserTask(element, bpmnFactory, commandStack);
+      } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION) {
+        removeZeebeUserTask(element, commandStack);
+      }
+    };
+    const getOptions = () => {
+      const options = [{
+        value: ZEEBE_USER_TASK_IMPLEMENTATION_OPTION,
+        label: translate('Zeebe user task')
+      }, {
+        value: JOB_WORKER_IMPLEMENTATION_OPTION,
+        label: translate('Job worker')
+      }];
+      return options;
+    };
+    return SelectEntry({
+      element,
+      id,
+      label: translate('Type'),
+      getValue,
+      setValue,
+      getOptions
+    });
+  }
+
+  // helper ///////////////////////
+  function createZeebeUserTask(element, bpmnFactory, commandStack) {
+    const businessObject = getBusinessObject$2(element);
+    const zeebeUserTask = createElement$3('zeebe:UserTask', {}, businessObject, bpmnFactory);
+    addExtensionElements(element, businessObject, zeebeUserTask, bpmnFactory, commandStack);
+  }
+  function removeZeebeUserTask(element, commandStack) {
+    const zeebeUserTask = getZeebeUserTask(element);
+    removeExtensionElements$1(element, getBusinessObject$2(element), zeebeUserTask, commandStack);
+  }
+  function isUserTaskImplementationEdited(element) {
+    return getZeebeUserTask(element);
+  }
+  function getZeebeUserTask(element) {
+    const businessObject = getBusinessObject$2(element);
+    return getExtensionElementsList$2(businessObject, 'zeebe:UserTask')[0];
+  }
+
   function ExtensionProperty(props) {
     const {
       idPrefix,
@@ -123256,7 +123451,7 @@
    */
 
   const LOW_PRIORITY$1$1 = 500;
-  const ZEEBE_GROUPS = [BusinessRuleImplementationGroup, CalledDecisionGroup, ScriptImplementationGroup, ScriptGroup$1, TaskDefinitionGroup, AssignmentDefinitionGroup, FormGroup$1, ConditionGroup$1, TargetGroup, InputPropagationGroup, InputGroup$1, OutputPropagationGroup, OutputGroup$1, HeaderGroup, ExtensionPropertiesGroup$1];
+  const ZEEBE_GROUPS = [BusinessRuleImplementationGroup, CalledDecisionGroup, ScriptImplementationGroup, ScriptGroup$1, UserTaskImplementationGroup, TaskDefinitionGroup, AssignmentDefinitionGroup, FormGroup$1, ConditionGroup$1, TargetGroup, InputPropagationGroup, InputGroup$1, OutputPropagationGroup, OutputGroup$1, HeaderGroup, ExtensionPropertiesGroup$1];
   let ZeebePropertiesProvider$1 = class ZeebePropertiesProvider {
     constructor(propertiesPanel, injector) {
       propertiesPanel.registerProvider(LOW_PRIORITY$1$1, this);
@@ -123433,6 +123628,17 @@
     };
     return group.entries.length ? group : null;
   }
+  function UserTaskImplementationGroup(element) {
+    const group = {
+      id: 'userTaskImplementation',
+      label: 'Implementation',
+      entries: [...UserTaskImplementationProps({
+        element
+      })],
+      component: Group$1
+    };
+    return group.entries.length ? group : null;
+  }
   function AssignmentDefinitionGroup(element) {
     const group = {
       id: 'assignmentDefinition',
@@ -123556,7 +123762,7 @@
   };
 
   /* eslint-disable react-hooks/rules-of-hooks */
-  const TooltipProvider = {
+  const TooltipProvider$1 = {
     'group-assignmentDefinition': element => {
       const translate = useService$1('translate');
       return u("div", {
@@ -124644,6 +124850,8 @@
     constructor(bpmnFactory, eventBus, modeling) {
       super(eventBus);
 
+      this._modeling = modeling;
+
       function removeUserTaskForm(element, moddleElement, userTaskForm) {
         const extensionElements = moddleElement.get('extensionElements');
 
@@ -124752,6 +124960,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 {
@@ -124762,8 +124971,13 @@
         if (is$6(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);
@@ -124806,6 +125020,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$6(element, 'bpmn:UserTask') || !hasZeebeUserTask(element)) {
+          return;
+        }
+
+        const formDefinition = getFormDefinition(element);
+
+        if (!formDefinition) {
+          return;
+        }
+
+        const formKey = formDefinition.get('formKey');
+
+        if (isUndefined$6(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$6(element, 'bpmn:UserTask') || hasZeebeUserTask(element)) {
+          return;
+        }
+
+        const formDefinition = getFormDefinition(element);
+
+        if (!formDefinition) {
+          return;
+        }
+
+        const externalReference = formDefinition.get('externalReference');
+
+        if (isUndefined$6(externalReference)) {
+          return;
+        }
+
+        this._modeling.updateModdleProperties(element, formDefinition, {
+          externalReference: undefined,
+          formKey: externalReference
+        });
+      }, true);
     }
   }
 
@@ -124829,6 +125106,10 @@
       && !properties.values.find(value => is$6(value, type));
   }
 
+  function hasZeebeUserTask(userTask) {
+    return getExtensionElementsList$1(userTask, 'zeebe:UserTask').length;
+  }
+
   const HIGH_PRIORITY$4 = 5000;
 
 
@@ -155934,9 +156215,27 @@
   				name: "formId",
   				type: "String",
   				isAttr: true
+  			},
+  			{
+  				name: "externalReference",
+  				type: "String",
+  				isAttr: true
   			}
   		]
   	},
+  	{
+  		name: "UserTask",
+  		superClass: [
+  			"Element"
+  		],
+  		meta: {
+  			allowedIn: [
+  				"bpmn:UserTask"
+  			]
+  		},
+  		properties: [
+  		]
+  	},
   	{
   		name: "CalledDecision",
   		superClass: [
@@ -159986,9 +160285,9 @@
         ...options.moddleExtensions
       },
       propertiesPanel: {
-        tooltip: TooltipProvider,
+        tooltip: TooltipProvider$1,
         ...options.propertiesPanel
-      },
+      }
     };
 
     this._addElementTemplateChooserModule(options);