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>