feat(zeebe): add _Version tag_ field

Closes #1062

src/contextProvider/zeebe/TooltipProvider.js

@@ -278,6 +278,18 @@ const TooltipProvider = {
         </p>
       </div>
     );
+  },
+  'versionTag': (element) => {
+
+    const translate = useService('translate');
+
+    return (
+      <div>
+        <p>
+          { translate('Specifying a version tag will allow you to reference this process in another process.') }
+        </p>
+      </div>
+    );
   }
 };
 

src/provider/zeebe/ZeebePropertiesProvider.js

@@ -1,5 +1,7 @@
 import { Group, ListGroup } from '@bpmn-io/properties-panel';
 
+import { findIndex } from 'min-dash';
+
 import {
   AssignmentDefinitionProps,
   BusinessRuleImplementationProps,
@@ -22,7 +24,8 @@ import {
   TaskDefinitionProps,
   TaskScheduleProps,
   TimerProps,
-  UserTaskImplementationProps
+  UserTaskImplementationProps,
+  VersionTagProps
 } from './properties';
 
 import { ExtensionPropertiesProps } from '../shared/ExtensionPropertiesProps';
@@ -69,6 +72,7 @@ export default class ZeebePropertiesProvider {
       groups = groups.concat(this._getGroups(element));
 
       // (2) update existing groups with zeebe specific properties
+      updateGeneralGroup(groups, element);
       updateErrorGroup(groups, element);
       updateEscalationGroup(groups, element);
       updateMessageGroup(groups, element);
@@ -315,6 +319,22 @@ function ExtensionPropertiesGroup(element, injector) {
   return null;
 }
 
+function updateGeneralGroup(groups, element) {
+
+  const generalGroup = findGroup(groups, 'general');
+
+  if (!generalGroup) {
+    return;
+  }
+
+  const { entries } = generalGroup;
+
+  const executableEntry = findIndex(entries, (entry) => entry.id === 'isExecutable');
+  const insertIndex = executableEntry >= 0 ? executableEntry : entries.length;
+
+  entries.splice(insertIndex, 0, ...VersionTagProps({ element }));
+}
+
 function updateErrorGroup(groups, element) {
   const errorGroup = findGroup(groups, 'error');
 

src/provider/zeebe/properties/VersionTagProps.js

@@ -0,0 +1,139 @@
+import {
+  getBusinessObject,
+  is
+} from 'bpmn-js/lib/util/ModelUtil';
+
+import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
+
+import {
+  useService
+} from '../../../hooks';
+
+import { createElement } from '../../../utils/ElementUtil';
+
+import { getExtensionElementsList } from '../../../utils/ExtensionElementsUtil';
+
+
+export function VersionTagProps(props) {
+  const {
+    element
+  } = props;
+
+  const businessObject = getBusinessObject(element);
+
+  if (!is(element, 'bpmn:Process') &&
+      !(is(element, 'bpmn:Participant') && businessObject.get('processRef'))) {
+    return [];
+  }
+
+  return [
+    {
+      id: 'versionTag',
+      component: VersionTag,
+      isEdited: isTextFieldEntryEdited
+    },
+  ];
+}
+
+function VersionTag(props) {
+  const { element } = props;
+
+  const bpmnFactory = useService('bpmnFactory');
+  const commandStack = useService('commandStack');
+  const debounce = useService('debounceInput');
+  const translate = useService('translate');
+
+  const getValue = () => {
+    const versionTag = getVersionTag(element);
+
+    if (versionTag) {
+      return versionTag.get('value');
+    }
+  };
+
+  const setValue = (value) => {
+    let commands = [];
+
+    const businessObject = getProcess(element);
+
+    let extensionElements = businessObject.get('extensionElements');
+
+    // (1) ensure extension elements
+    if (!extensionElements) {
+      extensionElements = createElement(
+        'bpmn:ExtensionElements',
+        { values: [] },
+        businessObject,
+        bpmnFactory
+      );
+
+      commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+          element,
+          moddleElement: businessObject,
+          properties: { extensionElements }
+        }
+      });
+    }
+
+    // (2) ensure version tag
+    let versionTag = getVersionTag(element);
+
+    if (!versionTag) {
+      versionTag = createElement(
+        'zeebe:VersionTag',
+        {},
+        extensionElements,
+        bpmnFactory
+      );
+
+      commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+          element,
+          moddleElement: extensionElements,
+          properties: {
+            values: [ ...extensionElements.get('values'), versionTag ]
+          }
+        }
+      });
+    }
+
+    // (3) update version tag value
+    commands.push({
+      cmd: 'element.updateModdleProperties',
+      context: {
+        element,
+        moddleElement: versionTag,
+        properties: { value }
+      }
+    });
+
+    commandStack.execute('properties-panel.multi-command-executor', commands);
+  };
+
+  return TextFieldEntry({
+    element,
+    id: 'versionTag',
+    label: translate('Version tag'),
+    getValue,
+    setValue,
+    debounce
+  });
+}
+
+
+// helper //////////////////
+
+function getProcess(element) {
+  return is(element, 'bpmn:Process') ?
+    getBusinessObject(element) :
+    getBusinessObject(element).get('processRef');
+}
+
+function getVersionTag(element) {
+  const businessObject = getProcess(element);
+
+  return getExtensionElementsList(businessObject, 'zeebe:VersionTag')[ 0 ];
+}

src/provider/zeebe/properties/index.js

@@ -19,4 +19,5 @@ export { TargetProps } from './TargetProps';
 export { TaskDefinitionProps } from './TaskDefinitionProps';
 export { TaskScheduleProps } from './TaskScheduleProps';
 export { TimerProps } from './TimerProps';
-export { UserTaskImplementationProps } from './UserTaskImplementationProps';
+export { UserTaskImplementationProps } from './UserTaskImplementationProps';
+export { VersionTagProps } from './VersionTagProps';

test/spec/provider/zeebe/VersionTagProps-collaboration.bpmn

@@ -0,0 +1,25 @@
+<?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:zeebe="http://camunda.org/schema/zeebe/1.0" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.23.0" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="8.5.0">
+  <bpmn:collaboration id="Collaboration_1pt34ye">
+    <bpmn:participant id="Participant_1" processRef="Process_1" />
+  </bpmn:collaboration>
+  <bpmn:process id="Process_1" isExecutable="true">
+    <bpmn:extensionElements>
+      <zeebe:versionTag value="v1.0.0" />
+      <zeebe:properties>
+        <zeebe:property name="foo" value="bar" />
+      </zeebe:properties>
+    </bpmn:extensionElements>
+    <bpmn:task id="Task_1" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1pt34ye">
+      <bpmndi:BPMNShape id="Participant_02oh0k3_di" bpmnElement="Participant_1" isHorizontal="true">
+        <dc:Bounds x="160" y="85" width="600" height="250" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_0kx78hk_di" bpmnElement="Task_1">
+        <dc:Bounds x="410" y="170" width="100" height="80" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/provider/zeebe/VersionTagProps-process.bpmn

@@ -0,0 +1,19 @@
+<?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:zeebe="http://camunda.org/schema/zeebe/1.0" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.23.0" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="8.5.0">
+  <bpmn:process id="Process_1" isExecutable="true">
+    <bpmn:extensionElements>
+      <zeebe:versionTag value="v1.0.0" />
+      <zeebe:properties>
+        <zeebe:property name="foo" value="bar" />
+      </zeebe:properties>
+    </bpmn:extensionElements>
+    <bpmn:task id="Task_1" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="Activity_0kx78hk_di" bpmnElement="Task_1">
+        <dc:Bounds x="160" y="80" width="100" height="80" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>