feat(zeebe): add zeebe extension properties

* share extension properties group between Platform 7 and 8
bpmn-io · Aug 31, 2022 · 2d84ae0 · 2d84ae0
1 parent 9ae0c2b
commit 2d84ae0
Show file tree

Hide file tree

Showing 11 changed files with 398 additions and 294 deletions.
diff --git a/src/provider/camunda-platform/CamundaPlatformPropertiesProvider.js b/src/provider/camunda-platform/CamundaPlatformPropertiesProvider.js
@@ -15,7 +15,6 @@ import {
   ErrorProps,
   ErrorsProps,
   EscalationProps,
-  ExtensionPropertiesProps,
   ExternalTaskPriorityProps,
   FieldInjectionProps,
   FormDataProps,
@@ -40,6 +39,7 @@ import {
   VersionTagProps
 } from './properties';
 
+import { ExtensionPropertiesProps } from '../shared/ExtensionPropertiesProps';
 
 const LOW_PRIORITY = 500;
 
@@ -72,7 +72,7 @@ const CAMUNDA_PLATFORM_GROUPS = [
   ExecutionListenerGroup,
   ExtensionPropertiesGroup,
   FieldInjectionGroup,
-  BusinessKeyGroup,
+  BusinessKeyGroup
 ];
 
 /**

diff --git a/src/provider/camunda-platform/properties/index.js b/src/provider/camunda-platform/properties/index.js
@@ -8,7 +8,6 @@ export { ConnectorOutputProps } from './ConnectorOutputProps';
 export { ErrorProps } from './ErrorProps';
 export { ErrorsProps } from './ErrorsProps';
 export { EscalationProps } from './EscalationProps';
-export { ExtensionPropertiesProps } from './ExtensionPropertiesProps';
 export { ExternalTaskPriorityProps } from './ExternalTaskPriorityProps';
 export { FieldInjectionProps } from './FieldInjectionProps';
 export { FormDataProps } from './FormDataProps';

diff --git a/...rm/properties/ExtensionPropertiesProps.js → ...ovider/shared/ExtensionPropertiesProps.js b/...rm/properties/ExtensionPropertiesProps.js → ...ovider/shared/ExtensionPropertiesProps.js
@@ -7,16 +7,19 @@ import ExtensionProperty from './ExtensionProperty';
 
 import {
   createElement
-} from '../../../utils/ElementUtil';
+} from '../../utils/ElementUtil';
 
 import {
   getExtensionElementsList
-} from '../../../utils/ExtensionElementsUtil';
+} from '../../utils/ExtensionElementsUtil';
 
 import { without } from 'min-dash';
 
 
-export function ExtensionPropertiesProps({ element, injector }) {
+export function ExtensionPropertiesProps({ element, injector, namespace = 'camunda' }) {
+  if (namespace === 'zeebe' && !is(element, 'zeebe:PropertiesHolder')) {
+    return [];
+  }
 
   let businessObject = getRelevantBusinessObject(element);
 
@@ -25,7 +28,7 @@ export function ExtensionPropertiesProps({ element, injector }) {
     return;
   }
 
-  const properties = getPropertiesList(businessObject) || [];
+  const properties = getPropertiesList(businessObject, namespace) || [];
 
   const bpmnFactory = injector.get('bpmnFactory'),
         commandStack = injector.get('commandStack');
@@ -42,38 +45,40 @@ export function ExtensionPropertiesProps({ element, injector }) {
         property
       }),
       autoFocusEntry: id + '-name',
-      remove: removeFactory({ commandStack, element, property })
+      remove: removeFactory({ commandStack, element, property, namespace })
     };
   });
 
   return {
     items,
-    add: addFactory({ bpmnFactory, commandStack, element })
+    add: addFactory({ bpmnFactory, commandStack, element, namespace })
   };
 }
 
-function removeFactory({ commandStack, element, property }) {
+function removeFactory({ commandStack, element, property, namespace }) {
   return function(event) {
     event.stopPropagation();
 
     const commands = [];
 
     const businessObject = getRelevantBusinessObject(element);
-    const properties = getProperties(businessObject);
+    const properties = getProperties(businessObject, namespace);
 
     if (!properties) {
       return;
     }
 
-    const values = without(properties.get('values'), property);
+    const propertyName = getPropertyName(namespace);
+
+    const values = without(properties.get(propertyName), property);
 
     commands.push({
       cmd: 'element.updateModdleProperties',
       context: {
         element,
         moddleElement: properties,
         properties: {
-          values
+          [ propertyName ]: values
         }
       }
     });
@@ -99,7 +104,7 @@ function removeFactory({ commandStack, element, property }) {
   };
 }
 
-function addFactory({ bpmnFactory, commandStack, element }) {
+function addFactory({ bpmnFactory, commandStack, element, namespace }) {
   return function(event) {
     event.stopPropagation();
 
@@ -128,14 +133,16 @@ function addFactory({ bpmnFactory, commandStack, element }) {
       });
     }
 
+    const propertyName = getPropertyName(namespace);
+
     // (2) ensure camunda:Properties
-    let properties = getProperties(businessObject);
+    let properties = getProperties(businessObject, namespace);
 
     if (!properties) {
       const parent = extensionElements;
 
-      properties = createElement('camunda:Properties', {
-        values: []
+      properties = createElement(`${ namespace }:Properties`, {
+        [ propertyName ]: []
       }, parent, bpmnFactory);
 
       commands.push({
@@ -151,7 +158,7 @@ function addFactory({ bpmnFactory, commandStack, element }) {
     }
 
     // (3) create camunda:Property
-    const property = createElement('camunda:Property', {}, properties, bpmnFactory);
+    const property = createElement(`${ namespace }:Property`, {}, properties, bpmnFactory);
 
     // (4) add property to list
     commands.push({
@@ -160,7 +167,7 @@ function addFactory({ bpmnFactory, commandStack, element }) {
         element,
         moddleElement: properties,
         properties: {
-          values: [ ...properties.get('values'), property ]
+          [ propertyName ]: [ ...properties.get(propertyName), property ]
         }
       }
     });
@@ -183,11 +190,20 @@ function getRelevantBusinessObject(element) {
   return businessObject;
 }
 
-function getProperties(businessObject) {
-  return getExtensionElementsList(businessObject, 'camunda:Properties')[0];
+function getPropertyName(namespace = 'camunda') {
+  if (namespace === 'zeebe') {
+    return 'properties';
+  }
+
+  return 'values';
+}
+
+export function getProperties(element, namespace = 'camunda') {
+  return getExtensionElementsList(getBusinessObject(element), `${namespace}:Properties`)[ 0 ];
 }
 
-function getPropertiesList(businessObject) {
-  const properties = getProperties(businessObject);
-  return properties && properties.get('values');
+export function getPropertiesList(element, namespace = 'camunda') {
+  const properties = getProperties(getBusinessObject(element), namespace);
+
+  return properties && properties.get(getPropertyName(namespace));
 }
diff --git a/...-platform/properties/ExtensionProperty.js → src/provider/shared/ExtensionProperty.js b/...-platform/properties/ExtensionProperty.js → src/provider/shared/ExtensionProperty.js
@@ -2,7 +2,7 @@ import { TextFieldEntry } from '@bpmn-io/properties-panel';
 
 import {
   useService
-} from '../../../hooks';
+} from '../../hooks';
 
 
 export default function ExtensionProperty(props) {

diff --git a/src/provider/zeebe/ZeebePropertiesProvider.js b/src/provider/zeebe/ZeebePropertiesProvider.js
@@ -16,6 +16,9 @@ import {
   TaskDefinitionProps,
   TimerProps
 } from './properties';
+
+import { ExtensionPropertiesProps } from '../shared/ExtensionPropertiesProps';
+
 import { isMessageEndEvent, isMessageThrowEvent } from './utils/ZeebeServiceTaskUtil';
 
 const LOW_PRIORITY = 500;
@@ -31,7 +34,8 @@ const ZEEBE_GROUPS = [
   InputGroup,
   OutputPropagationGroup,
   OutputGroup,
-  HeaderGroup
+  HeaderGroup,
+  ExtensionPropertiesGroup
 ];
 
 export default class ZeebePropertiesProvider {
@@ -208,6 +212,21 @@ function AssignmentDefinitionGroup(element) {
   return group.entries.length ? group : null;
 }
 
+function ExtensionPropertiesGroup(element, injector) {
+  const group = {
+    label: 'Extension properties',
+    id: 'Zeebe__ExtensionProperties',
+    component: ListGroup,
+    ...ExtensionPropertiesProps({ element, injector, namespace: 'zeebe' })
+  };
+
+  if (group.items) {
+    return group;
+  }
+
+  return null;
+}
+
 function updateMessageGroup(groups, element) {
   const messageGroup = findGroup(groups, 'message');