Add Version tag field

package.json

@@ -75,7 +75,7 @@
     "bpmn-js": "^17.9.1",
     "bpmn-js-create-append-anything": "^0.5.2",
     "bpmn-moddle": "^9.0.1",
-    "camunda-bpmn-js-behaviors": "^1.5.0",
+    "camunda-bpmn-js-behaviors": "^1.6.0",
     "camunda-bpmn-moddle": "^7.0.1",
     "chai": "^4.4.1",
     "cross-env": "^7.0.3",
@@ -106,7 +106,7 @@
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "webpack": "^5.93.0",
-    "zeebe-bpmn-moddle": "^1.5.1"
+    "zeebe-bpmn-moddle": "^1.6.0"
   },
   "peerDependencies": {
     "@bpmn-io/properties-panel": ">= 3.7",

src/contextProvider/zeebe/TooltipProvider.js

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
-  is
+  is,
+  isAny
 } from 'bpmn-js/lib/util/ModelUtil';
 
 import {
@@ -293,9 +294,50 @@ const TooltipProvider = {
           <h1>{ translate('Deployment binding') }</h1>
           { translate('Uses the resource found in the same deployment.') }
         </p>
+        <p>
+          <h1>{ translate('Version tag binding') }</h1>
+          { translate('Uses the most recent deployed resource with the given version tag.') }
+        </p>
       </div>
     );
   },
+  'versionTag': (element) => {
+    const translate = useService('translate');
+
+    if (isAny(element, [ 'bpmn:Process', 'bpmn:Participant' ])) {
+      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) => {
 
     const translate = useService('translate');

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,
@@ -24,7 +26,8 @@ import {
   TaskDefinitionProps,
   TaskScheduleProps,
   TimerProps,
-  UserTaskImplementationProps
+  UserTaskImplementationProps,
+  VersionTagProps
 } from './properties';
 
 import { ExtensionPropertiesProps } from '../shared/ExtensionPropertiesProps';
@@ -72,6 +75,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);
@@ -335,6 +339,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/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) {