feat(zeebe): add _Version tag_ field

package.json

@@ -15,7 +15,8 @@
     "dev": "npm test -- --auto-watch --no-single-run",
     "test": "karma start karma.config.js",
     "test:build": "mocha --reporter=spec --recursive test/distro",
-    "start": "cross-env SINGLE_START=platform npm run dev",
+    "start": "npm run start:cloud",
+    "start:cloud": "cross-env SINGLE_START=cloud npm run dev",
     "start:platform": "cross-env SINGLE_START=platform npm run dev",
     "start:dmn": "cross-env SINGLE_START=dmn npm run dev",
     "prepare": "run-s bundle"
@@ -62,9 +63,9 @@
     "camunda-dmn-moddle": "^1.3.0",
     "chai": "^4.4.1",
     "cross-env": "^7.0.3",
-    "dmn-js": "^16.4.0",
-    "dmn-js-drd": "^16.4.0",
-    "dmn-js-shared": "^16.4.0",
+    "dmn-js": "^16.6.0",
+    "dmn-js-drd": "^16.6.0",
+    "dmn-js-shared": "^16.5.0",
     "eslint": "^8.57.0",
     "eslint-plugin-bpmn-io": "^1.0.0",
     "eslint-plugin-import": "^2.29.1",
@@ -85,7 +86,8 @@
     "rollup-plugin-copy": "^3.4.0",
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
-    "webpack": "^5.92.1"
+    "webpack": "^5.92.1",
+    "zeebe-dmn-moddle": "^1.0.0"
   },
   "peerDependencies": {
     "@bpmn-io/properties-panel": ">=3.7",

src/cmd/MultiCommandHandler.js

@@ -0,0 +1,25 @@
+import {
+  forEach
+} from 'min-dash';
+
+/**
+ * A handler that combines and executes multiple commands.
+ *
+ * All updates are bundled on the command stack and executed in one step.
+ * This also makes it possible to revert the changes in one step.
+ */
+export default class MultiCommandHandler {
+  constructor(commandStack) {
+    this._commandStack = commandStack;
+  }
+
+  preExecute(context) {
+    const commandStack = this._commandStack;
+
+    forEach(context, function(command) {
+      commandStack.execute(command.cmd, command.context);
+    });
+  }
+}
+
+MultiCommandHandler.$inject = [ 'commandStack' ];

src/cmd/index.js

@@ -0,0 +1,25 @@
+import {
+  forEach
+} from 'min-dash';
+
+import MultiCommandHandler from './MultiCommandHandler';
+
+const HANDLERS = {
+  'properties-panel.multi-command-executor': MultiCommandHandler
+};
+
+
+function CommandInitializer(eventBus, commandStack) {
+
+  eventBus.on('diagram.init', function() {
+    forEach(HANDLERS, function(handler, id) {
+      commandStack.registerHandler(id, handler);
+    });
+  });
+}
+
+CommandInitializer.$inject = [ 'eventBus', 'commandStack' ];
+
+export default {
+  __init__: [ CommandInitializer ]
+};

src/contextProvider/zeebe/TooltipProvider.js

@@ -0,0 +1,21 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import {
+  useService
+} from '../../hooks';
+
+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>
+    );
+  }
+};
+
+export default TooltipProvider;

src/index.js

@@ -2,5 +2,7 @@ export { default as DmnPropertiesPanelModule } from './render';
 export { default as DmnPropertiesProviderModule } from './provider/dmn';
 export { default as CamundaPropertiesProviderModule } from './provider/camunda';
 
+export { TooltipProvider as ZeebeTooltipProvider } from './contextProvider/zeebe';
+
 // hooks
 export { useService } from './hooks';

src/provider/utils/ElementUtil.js

@@ -0,0 +1,12 @@
+/**
+ * Create a new element and (optionally) set its parent.
+ */
+export function createElement(type, properties, parent, dmnFactory) {
+  const element = dmnFactory.create(type, properties);
+
+  if (parent) {
+    element.$parent = parent;
+  }
+
+  return element;
+}

src/provider/utils/ExtensionElementsUtil.js

@@ -0,0 +1,96 @@
+import { is } from 'dmn-js-shared/lib/util/ModelUtil';
+
+import { createElement } from './ElementUtil';
+
+import { isArray } from 'min-dash';
+
+/**
+ * Get extension elements of business object. Optionally filter by type.
+ */
+export function getExtensionElementsList(businessObject, type = undefined) {
+  const extensionElements = businessObject.get('extensionElements');
+
+  if (!extensionElements) {
+    return [];
+  }
+
+  const values = extensionElements.get('values');
+
+  if (!values || !values.length) {
+    return [];
+  }
+
+  if (type) {
+    return values.filter(value => is(value, type));
+  }
+
+  return values;
+}
+
+/**
+ * Add one or more extension elements. Create dmn:ExtensionElements if it doesn't exist.
+ */
+export function addExtensionElements(element, businessObject, extensionElementToAdd, dmnFactory, commandStack) {
+  const commands = [];
+
+  let extensionElements = businessObject.get('extensionElements');
+
+  // (1) create dmn:ExtensionElements if it doesn't exist
+  if (!extensionElements) {
+    extensionElements = createElement(
+      'dmn:ExtensionElements',
+      {
+        values: []
+      },
+      businessObject,
+      dmnFactory
+    );
+
+    commands.push({
+      cmd: 'element.updateModdleProperties',
+      context: {
+        element,
+        moddleElement: businessObject,
+        properties: {
+          extensionElements
+        }
+      }
+    });
+  }
+
+  extensionElementToAdd.$parent = extensionElements;
+
+  // (2) add extension element to list
+  commands.push({
+    cmd: 'element.updateModdleProperties',
+    context: {
+      element,
+      moddleElement: extensionElements,
+      properties: {
+        values: [ ...extensionElements.get('values'), extensionElementToAdd ]
+      }
+    }
+  });
+
+  commandStack.execute('properties-panel.multi-command-executor', commands);
+}
+
+/**
+ * Remove one or more extension elements. Remove dmn:ExtensionElements afterwards if it's empty.
+ */
+export function removeExtensionElements(element, businessObject, extensionElementsToRemove, commandStack) {
+  if (!isArray(extensionElementsToRemove)) {
+    extensionElementsToRemove = [ extensionElementsToRemove ];
+  }
+
+  const extensionElements = businessObject.get('extensionElements'),
+        values = extensionElements.get('values').filter(value => !extensionElementsToRemove.includes(value));
+
+  commandStack.execute('element.updateModdleProperties', {
+    element,
+    moddleElement: extensionElements,
+    properties: {
+      values
+    }
+  });
+}

src/provider/zeebe/ZeebePropertiesProvider.js

@@ -0,0 +1,73 @@
+import { findIndex } from 'min-dash';
+
+import {
+  VersionTagProps
+} from './properties';
+
+
+const LOW_PRIORITY = 500;
+
+/**
+ * Provides `zeebe` namespace properties.
+ *
+ * @example
+ * ```javascript
+ * import DmnModeler from 'dmn-js/lib/Modeler';
+ * import {
+ *   DmnPropertiesPanelModule,
+ *   DmnPropertiesProviderModule,
+ *   ZeebePropertiesProviderModule
+ * } from 'dmn-js-properties-panel';
+ *
+ * const modeler = new DmnModeler({
+ *   container: '#canvas',
+ *   propertiesPanel: {
+ *     parent: '#properties'
+ *   },
+ *   additionalModules: [
+ *     DmnPropertiesPanelModule,
+ *     DmnPropertiesProviderModule,
+ *     ZeebePropertiesProviderModule
+ *   ]
+ * });
+ * ```
+ */
+export default class ZeebePropertiesProvider {
+
+  constructor(propertiesPanel, injector) {
+    propertiesPanel.registerProvider(LOW_PRIORITY, this);
+
+    this._injector = injector;
+  }
+
+  getGroups(element) {
+    return (groups) => {
+      updateGeneralGroup(groups, element);
+
+      return groups;
+    };
+  }
+}
+
+ZeebePropertiesProvider.$inject = [ 'propertiesPanel', 'injector' ];
+
+function updateGeneralGroup(groups, element) {
+
+  const generalGroup = findGroup(groups, 'general');
+
+  if (!generalGroup) {
+    return;
+  }
+
+  const { entries } = generalGroup;
+
+  const idIndex = findIndex(entries, (entry) => entry.id === 'id');
+
+  entries.splice(idIndex + 1, 0, ...VersionTagProps({ element }));
+}
+
+// helper /////////////////////
+
+function findGroup(groups, id) {
+  return groups.find(g => g.id === id);
+}

src/provider/zeebe/index.js

@@ -0,0 +1,6 @@
+import ZeebePropertiesProvider from './ZeebePropertiesProvider';
+
+export default {
+  __init__: [ 'ZeebePropertiesProvider' ],
+  ZeebePropertiesProvider: [ 'type', ZeebePropertiesProvider ]
+};