feat(zeebe): add _Version tag_ field to linked resources

Related to camunda/camunda-modeler#4460
Related to camunda/camunda-modeler#4461
Related to camunda/camunda-modeler#4462

src/contextProvider/zeebe/TooltipProvider.js

@@ -297,16 +297,41 @@ const TooltipProvider = {
     );
   },
   '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>
-    );
+    if (is(element, 'bpmn:Process')) {
+      return (
+        <div>
+          <p>
+            { translate('Version tag by which this process can be referenced.') }
+          </p>
+        </div>
+      );
+    } else if (is(element, 'bpmn:CallActivity')) {
+      return (
+        <div>
+          <p>
+            { translate('Version tag by which the called process will be referenced.') }
+          </p>
+        </div>
+      );
+    } else if (is(element, 'bpmn:BusinessRuleTask')) {
+      return (
+        <div>
+          <p>
+            { translate('Version tag by which the called decision will be referenced.') }
+          </p>
+        </div>
+      );
+    } else if (is(element, 'bpmn:UserTask')) {
+      return (
+        <div>
+          <p>
+            { translate('Version tag by which the linked form will be referenced.') }
+          </p>
+        </div>
+      );
+    }
   },
   'priorityDefinitionPriority': (element) => {
 

src/provider/zeebe/properties/CalledDecisionProps.js

@@ -10,7 +10,8 @@ import {
   TextFieldEntry
 } from '@bpmn-io/properties-panel';
 
-import Binding from './shared/Binding';
+import Binding, { getBindingType } from './shared/Binding';
+import VersionTag from './shared/VersionTag.js';
 
 import {
   getExtensionElementsList
@@ -36,7 +37,7 @@ export function CalledDecisionProps(props) {
     return [];
   }
 
-  return [
+  const entries = [
     {
       id: 'decisionId',
       component: DecisionID,
@@ -46,13 +47,24 @@ export function CalledDecisionProps(props) {
       id: 'bindingType',
       component: withProps(Binding, { type: 'zeebe:CalledDecision' }),
       isEdited: isSelectEntryEdited
-    },
-    {
-      id: 'resultVariable',
-      component: ResultVariable,
-      isEdited: isTextFieldEntryEdited
     }
   ];
+
+  if (getBindingType(element, 'zeebe:CalledDecision') === 'versionTag') {
+    entries.push({
+      id: 'versionTag',
+      component: withProps(VersionTag, { type: 'zeebe:CalledDecision' }),
+      isEdited: isTextFieldEntryEdited
+    });
+  }
+
+  entries.push({
+    id: 'resultVariable',
+    component: ResultVariable,
+    isEdited: isTextFieldEntryEdited
+  });
+
+  return entries;
 }
 
 function DecisionID(props) {

src/provider/zeebe/properties/FormProps.js

@@ -18,7 +18,8 @@ import {
   isTextAreaEntryEdited
 } from '@bpmn-io/properties-panel';
 
-import Binding from './shared/Binding';
+import Binding, { getBindingType } from './shared/Binding';
+import VersionTag from './shared/VersionTag';
 
 import { FeelEntryWithVariableContext } from '../../../entries/FeelEntryWithContext';
 
@@ -89,6 +90,14 @@ export function FormProps(props) {
       component: withProps(Binding, { type: 'zeebe:FormDefinition' }),
       isEdited: isSelectEntryEdited
     });
+
+    if (getBindingType(element, 'zeebe:FormDefinition') === 'versionTag') {
+      entries.push({
+        id: 'versionTag',
+        component: withProps(VersionTag, { type: 'zeebe:FormDefinition' }),
+        isEdited: isTextFieldEntryEdited
+      });
+    }
   }
 
   return entries;

src/provider/zeebe/properties/TargetProps.js

@@ -5,10 +5,12 @@ import {
 
 import {
   isFeelEntryEdited,
-  isSelectEntryEdited
+  isSelectEntryEdited,
+  isTextFieldEntryEdited
 } from '@bpmn-io/properties-panel';
 
-import Binding from './shared/Binding';
+import Binding, { getBindingType } from './shared/Binding';
+import VersionTag from './shared/VersionTag.js';
 
 import {
   createElement
@@ -35,7 +37,7 @@ export function TargetProps(props) {
     return [];
   }
 
-  return [
+  const entries = [
     {
       id: 'targetProcessId',
       component: TargetProcessId,
@@ -47,6 +49,16 @@ export function TargetProps(props) {
       isEdited: isSelectEntryEdited
     }
   ];
+
+  if (getBindingType(element, 'zeebe:CalledElement') === 'versionTag') {
+    entries.push({
+      id: 'versionTag',
+      component: withProps(VersionTag, { type: 'zeebe:CalledElement' }),
+      isEdited: isTextFieldEntryEdited
+    });
+  }
+
+  return entries;
 }
 
 function TargetProcessId(props) {

src/provider/zeebe/properties/shared/Binding.js

@@ -18,17 +18,7 @@ export default function Binding(props) {
         commandStack = useService('commandStack'),
         translate = useService('translate');
 
-  const getValue = () => {
-    const businessObject = getBusinessObject(element);
-
-    const extensionElement = getExtensionElementsList(businessObject, type)[ 0 ];
-
-    if (!extensionElement) {
-      return 'latest';
-    }
-
-    return extensionElement.get('bindingType');
-  };
+  const getValue = () => getBindingType(element, type);
 
   const setValue = value => {
     const commands = [];
@@ -98,7 +88,8 @@ export default function Binding(props) {
 
   const getOptions = () => ([
     { value: 'latest', label: translate('latest') },
-    { value: 'deployment', label: translate('deployment') }
+    { value: 'deployment', label: translate('deployment') },
+    { value: 'versionTag', label: translate('version tag') }
   ]);
 
   return <SelectEntry
@@ -109,4 +100,16 @@ export default function Binding(props) {
     setValue={ setValue }
     getOptions={ getOptions }
   />;
+}
+
+export function getBindingType(element, type) {
+  const businessObject = getBusinessObject(element);
+
+  const extensionElement = getExtensionElementsList(businessObject, type)[ 0 ];
+
+  if (!extensionElement) {
+    return 'latest';
+  }
+
+  return extensionElement.get('bindingType');
 }

src/provider/zeebe/properties/shared/VersionTag.js

@@ -0,0 +1,110 @@
+import { getBusinessObject } from 'bpmn-js/lib/util/ModelUtil';
+
+import { TextFieldEntry } from '@bpmn-io/properties-panel';
+
+import { createElement } from '../../../../utils/ElementUtil';
+
+import { useService } from '../../../../hooks';
+
+import { getExtensionElementsList } from '../../../../utils/ExtensionElementsUtil';
+
+export default function VersionTag(props) {
+  const {
+    element,
+    type
+  } = props;
+
+  const bpmnFactory = useService('bpmnFactory'),
+        commandStack = useService('commandStack'),
+        debounce = useService('debounceInput'),
+        translate = useService('translate');
+
+  const getValue = () => getVersionTag(element, type);
+
+  const setValue = value => {
+    const commands = [];
+
+    const businessObject = getBusinessObject(element);
+
+    // (1) ensure extension elements
+    let extensionElements = businessObject.get('extensionElements');
+
+    if (!extensionElements) {
+      extensionElements = createElement(
+        'bpmn:ExtensionElements',
+        { values: [] },
+        businessObject,
+        bpmnFactory
+      );
+
+      commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+          element,
+          moddleElement: businessObject,
+          properties: { extensionElements }
+        }
+      });
+    }
+
+    // (2) ensure extension element
+    let extensionElement = getExtensionElementsList(businessObject, type)[ 0 ];
+
+    if (!extensionElement) {
+      extensionElement = createElement(
+        type,
+        {},
+        extensionElements,
+        bpmnFactory
+      );
+
+      commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+          element,
+          moddleElement: extensionElements,
+          properties: {
+            values: [ ...extensionElements.get('values'), extensionElement ]
+          }
+        }
+      });
+
+    }
+
+    // (3) Update versionTag attribute
+    commands.push({
+      cmd: 'element.updateModdleProperties',
+      context: {
+        element,
+        moddleElement: extensionElement,
+        properties: {
+          versionTag: value
+        }
+      }
+    });
+
+    // (4) Execute the commands
+    commandStack.execute('properties-panel.multi-command-executor', commands);
+  };
+
+  return TextFieldEntry({
+    element,
+    id: 'versionTag',
+    label: translate('Version tag'),
+    getValue,
+    setValue,
+    debounce
+  });
+}
+
+export function getVersionTag(element, type) {
+  const businessObject = getBusinessObject(element);
+
+  const extensionElement = getExtensionElementsList(businessObject, type)[ 0 ];
+
+  if (!extensionElement) {
+    return '';
+  }
+
+  return extensionElement.get('versionTag') || '';
+}

test/spec/provider/zeebe/CalledDecisionProps.bpmn

@@ -7,7 +7,11 @@
         <zeebe:calledDecision decisionId="myDecisionId" resultVariable="myResultVariable" />
       </bpmn:extensionElements>
     </bpmn:businessRuleTask>
-    <bpmn:businessRuleTask id="BusinessRuleTask_2" name="BusinessRuleTask_2" />
+    <bpmn:businessRuleTask id="BusinessRuleTask_2" name="BusinessRuleTask_2">
+      <bpmn:extensionElements>
+        <zeebe:calledDecision decisionId="myDecisionId" resultVariable="myResultVariable" bindingType="versionTag" versionTag="v1.0.0" />
+      </bpmn:extensionElements>
+    </bpmn:businessRuleTask>
   </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0mgn9vm">
@@ -22,4 +26,4 @@
       </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
-</bpmn:definitions>
+</bpmn:definitions>