feat(element-templates): add zeebe:property

src/provider/cloud-element-templates/CreateHelper.js

@@ -80,6 +80,24 @@ export function createTaskDefinitionWithType(value, bpmnFactory) {
   });
 }
 
+/**
+ * Create zeebe:Property from the given binding.
+ *
+ * @param {PropertyBinding} binding
+ * @param {String} value
+ * @param {BpmnFactory} bpmnFactory
+ *
+ * @return {ModdleElement}
+ */
+export function createZeebeProperty(binding, value = '', bpmnFactory) {
+  const { name } = binding;
+
+  return bpmnFactory.create('zeebe:Property', {
+    name,
+    value
+  });
+}
+
 /**
  * Retrieves whether an element should be updated for a given property.
  *

src/provider/cloud-element-templates/Helper.js

@@ -100,6 +100,12 @@ export function findExtensions(element, types) {
   });
 }
 
+export function findZeebeProperty(zeebeProperties, binding) {
+  return zeebeProperties.get('properties').find((value) => {
+    return value.name === binding.name;
+  });
+}
+
 export function findInputParameter(ioMapping, binding) {
   const parameters = ioMapping.get('inputParameters');
 

src/provider/cloud-element-templates/cmd/ChangeElementTemplateHandler.js

@@ -12,6 +12,7 @@ import {
   createOutputParameter,
   createTaskDefinitionWithType,
   createTaskHeader,
+  createZeebeProperty,
   shouldUpdate
 } from '../CreateHelper';
 
@@ -76,6 +77,9 @@ export default class ChangeElementTemplateHandler {
 
       // update zeebe:Header properties
       this._updateZeebeTaskHeaderProperties(element, oldTemplate, newTemplate);
+
+      // update zeebe:Property properties
+      this._updateZeebePropertyProperties(element, oldTemplate, newTemplate);
     }
   }
 
@@ -497,6 +501,107 @@ export default class ChangeElementTemplateHandler {
     }
   }
 
+  /**
+   * Update zeebe:Property properties of zeebe:Properties extension element.
+   *
+   * @param {djs.model.Base} element
+   * @param {Object} oldTemplate
+   * @param {Object} newTemplate
+   */
+  _updateZeebePropertyProperties(element, oldTemplate, newTemplate) {
+    const bpmnFactory = this._bpmnFactory,
+          commandStack = this._commandStack;
+
+    const newProperties = newTemplate.properties.filter((newProperty) => {
+      const newBinding = newProperty.binding,
+            newBindingType = newBinding.type;
+
+      return newBindingType === 'zeebe:property';
+    });
+
+    const businessObject = this._getOrCreateExtensionElements(element);
+
+    let zeebeProperties = findExtension(businessObject, 'zeebe:Properties');
+
+    // (1) remove old zeebe:Properties if no new zeebe:Property properties
+    if (!newProperties.length) {
+      if (!zeebeProperties) {
+        return;
+      }
+
+      commandStack.execute('element.updateModdleProperties', {
+        element,
+        moddleElement: businessObject,
+        properties: {
+          values: without(businessObject.get('values'), zeebeProperties)
+        }
+      });
+    }
+
+    if (!zeebeProperties) {
+      zeebeProperties = bpmnFactory.create('zeebe:Properties');
+
+      commandStack.execute('element.updateModdleProperties', {
+        element,
+        moddleElement: businessObject,
+        properties: {
+          values: [ ...businessObject.get('values'), zeebeProperties ]
+        }
+      });
+    }
+
+    const oldZeebeProperties = zeebeProperties.get('properties')
+      ? zeebeProperties.get('properties').slice()
+      : [];
+
+    newProperties.forEach((newProperty) => {
+      const oldProperty = findOldProperty(oldTemplate, newProperty),
+            oldZeebeProperty = findBusinessObject(businessObject, newProperty),
+            newPropertyValue = newProperty.value,
+            newBinding = newProperty.binding;
+
+      // (2) update old zeebe:Property
+      if (oldZeebeProperty) {
+
+        if (!shouldKeepValue(oldZeebeProperty, oldProperty, newProperty)) {
+          commandStack.execute('element.updateModdleProperties', {
+            element,
+            moddleElement: oldZeebeProperty,
+            properties: {
+              value: newPropertyValue
+            }
+          });
+        }
+
+        remove(oldZeebeProperties, oldZeebeProperty);
+      }
+
+      // (3) add new zeebe:Property
+      else {
+        const newProperty = createZeebeProperty(newBinding, newPropertyValue, bpmnFactory);
+
+        commandStack.execute('element.updateModdleProperties', {
+          element,
+          moddleElement: zeebeProperties,
+          properties: {
+            properties: [ ...zeebeProperties.get('properties'), newProperty ]
+          }
+        });
+      }
+    });
+
+    // (4) remove old zeebe:Property
+    if (oldZeebeProperties.length) {
+      commandStack.execute('element.updateModdleProperties', {
+        element,
+        moddleElement: zeebeProperties,
+        properties: {
+          properties: without(zeebeProperties.get('properties'), zeebeProperty => oldZeebeProperties.includes(zeebeProperty))
+        }
+      });
+    }
+  }
+
   /**
    * Replaces the element with the specified elementType
    *
@@ -580,6 +685,18 @@ function findBusinessObject(element, property) {
       return value.get('zeebe:key') === binding.key;
     });
   }
+
+  if (bindingType === 'zeebe:property') {
+    const zeebeProperties = findExtension(businessObject, 'zeebe:Properties');
+
+    if (!zeebeProperties) {
+      return;
+    }
+
+    return zeebeProperties.get('properties').find((value) => {
+      return value.get('name') === binding.name;
+    });
+  }
 }
 
 /**
@@ -658,6 +775,19 @@ export function findOldProperty(oldTemplate, newProperty) {
       return oldBinding.key === newBinding.key;
     });
   }
+
+  if (newBindingType === 'zeebe:property') {
+    return oldProperties.find((oldProperty) => {
+      const oldBinding = oldProperty.binding,
+            oldBindingType = oldBinding.type;
+
+      if (oldBindingType !== 'zeebe:property') {
+        return;
+      }
+
+      return oldBinding.name === newBinding.name;
+    });
+  }
 }
 
 /**
@@ -724,6 +854,10 @@ function getPropertyValue(element, property) {
   if (bindingType === 'zeebe:taskHeader') {
     return businessObject.get('zeebe:value');
   }
+
+  if (bindingType === 'zeebe:property') {
+    return businessObject.get('zeebe:value');
+  }
 }
 
 function remove(array, item) {

src/provider/cloud-element-templates/properties/CustomProperties.js

@@ -27,6 +27,7 @@ import {
   ZEEBE_TASK_DEFINITION_TYPE_TYPE,
   ZEBBE_INPUT_TYPE,
   ZEEBE_OUTPUT_TYPE,
+  ZEEBE_PROPERTY_TYPE,
   ZEEBE_TASK_HEADER_TYPE
 } from '../util/bindingTypes';
 
@@ -185,6 +186,7 @@ function getDefaultType(property) {
     ZEEBE_TASK_DEFINITION_TYPE_TYPE,
     ZEBBE_INPUT_TYPE,
     ZEEBE_OUTPUT_TYPE,
+    ZEEBE_PROPERTY_TYPE,
     ZEEBE_TASK_HEADER_TYPE
   ].includes(type)) {
     return 'String';

src/provider/cloud-element-templates/util/bindingTypes.js

@@ -2,12 +2,14 @@ export const PROPERTY_TYPE = 'property';
 
 export const ZEBBE_INPUT_TYPE = 'zeebe:input';
 export const ZEEBE_OUTPUT_TYPE = 'zeebe:output';
+export const ZEEBE_PROPERTY_TYPE = 'zeebe:property';
 export const ZEEBE_TASK_DEFINITION_TYPE_TYPE = 'zeebe:taskDefinition:type';
 export const ZEEBE_TASK_HEADER_TYPE = 'zeebe:taskHeader';
 
 export const EXTENSION_BINDING_TYPES = [
   ZEBBE_INPUT_TYPE,
   ZEEBE_OUTPUT_TYPE,
+  ZEEBE_PROPERTY_TYPE,
   ZEEBE_TASK_DEFINITION_TYPE_TYPE,
   ZEEBE_TASK_HEADER_TYPE
 ];

src/provider/cloud-element-templates/util/propertyUtil.js

@@ -10,6 +10,7 @@ import {
   ZEEBE_TASK_DEFINITION_TYPE_TYPE,
   ZEBBE_INPUT_TYPE,
   ZEEBE_OUTPUT_TYPE,
+  ZEEBE_PROPERTY_TYPE,
   ZEEBE_TASK_HEADER_TYPE,
   EXTENSION_BINDING_TYPES
 } from '../util/bindingTypes';
@@ -18,14 +19,16 @@ import {
   findExtension,
   findTaskHeader,
   findInputParameter,
-  findOutputParameter
+  findOutputParameter,
+  findZeebeProperty
 } from '../Helper';
 
 import {
   createInputParameter,
   createOutputParameter,
   createTaskDefinitionWithType,
   createTaskHeader,
+  createZeebeProperty,
   shouldUpdate
 } from '../CreateHelper';
 
@@ -123,6 +126,21 @@ export function getPropertyValue(element, property, scope) {
     return defaultValue;
   }
 
+  // zeebe:Property
+  if (type === ZEEBE_PROPERTY_TYPE) {
+    const zeebeProperties = findExtension(businessObject, 'zeebe:Properties');
+
+    if (zeebeProperties) {
+      const zeebeProperty = findZeebeProperty(zeebeProperties, binding);
+
+      if (zeebeProperty) {
+        return zeebeProperty.get('value');
+      }
+    }
+
+    return defaultValue;
+  }
+
   // should never throw as templates are validated beforehand
   throw unknownBindingError(element, property);
 }
@@ -332,6 +350,43 @@ export function setPropertyValue(bpmnFactory, commandStack, element, property, v
     });
   }
 
+  // zeebe:Property
+  if (type === ZEEBE_PROPERTY_TYPE) {
+    let zeebeProperties = findExtension(extensionElements, 'zeebe:Properties');
+
+    if (!zeebeProperties) {
+      zeebeProperties = createElement('zeebe:Properties', null, businessObject, bpmnFactory);
+
+      commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+          element,
+          moddleElement: extensionElements,
+          properties: {
+            values: [ ...extensionElements.get('values'), zeebeProperties ]
+          }
+        }
+      });
+    }
+
+    const oldZeebeProperty = findZeebeProperty(zeebeProperties, binding);
+
+    const newZeebeProperty = createZeebeProperty(binding, value, bpmnFactory);
+
+    const properties = zeebeProperties.get('properties').filter((property) => property !== oldZeebeProperty);
+
+    commands.push({
+      cmd: 'element.updateModdleProperties',
+      context: {
+        element,
+        moddleElement: zeebeProperties,
+        properties: {
+          properties: [ ...properties, newZeebeProperty ]
+        }
+      }
+    });
+  }
+
   if (commands.length) {
     commandStack.execute(
       'properties-panel.multi-command-executor',
@@ -492,6 +547,42 @@ export function unsetProperty(commandStack, element, property) {
     }
   }
 
+  // zeebe:Property
+  if (type === ZEEBE_PROPERTY_TYPE) {
+    let zeebeProperties = findExtension(extensionElements, 'zeebe:Properties');
+
+    if (!zeebeProperties)
+      return;
+
+    const oldZeebeProperty = findZeebeProperty(zeebeProperties, binding);
+
+    const properties = zeebeProperties.get('properties').filter((property) => property !== oldZeebeProperty);
+
+    if (!properties.length) {
+      commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+          ...context,
+          moddleElement: extensionElements,
+          properties: {
+            values: without(extensionElements.get('values'), zeebeProperties)
+          }
+        }
+      });
+    } else {
+      commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+          ...context,
+          moddleElement: zeebeProperties,
+          properties: {
+            properties: [ ...properties ]
+          }
+        }
+      });
+    }
+  }
+
   if (commands.length) {
     commandStack.execute(
       'properties-panel.multi-command-executor',

src/provider/element-templates/properties/CustomProperties.js

@@ -457,7 +457,7 @@ function propertyGetter(element, property, scope) {
 
       if (scope) {
 
-        // TODO(philippfromme): as ony bpmn:Error and camunda:Connector are supported this code is practically dead
+        // TODO(philippfromme): as only bpmn:Error and camunda:Connector are supported this code is practically dead
         camundaProperties = businessObject.get('properties');
       } else {
         camundaProperties = findExtension(businessObject, 'camunda:Properties');