feat: add execution listeners for Zeebe

Related to camunda/camunda-modeler#3951

deps: update to `camunda-bpmn-js-behaviors@1.4.0`

deps: update to `zeebe-bpmn-moddle@1.2.0`

package.json

@@ -75,7 +75,7 @@
     "bpmn-js": "^17.3.0",
     "bpmn-js-create-append-anything": "^0.5.1",
     "bpmn-moddle": "^9.0.1",
-    "camunda-bpmn-js-behaviors": "^1.3.0",
+    "camunda-bpmn-js-behaviors": "^1.4.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.92.1",
-    "zeebe-bpmn-moddle": "^1.1.0"
+    "zeebe-bpmn-moddle": "^1.2.0"
   },
   "peerDependencies": {
     "@bpmn-io/properties-panel": ">= 3.7",

src/provider/zeebe/ZeebePropertiesProvider.js

@@ -7,6 +7,7 @@ import {
   ConditionProps,
   ErrorProps,
   EscalationProps,
+  ExecutionListenersProps,
   FormProps,
   HeaderProps,
   InputPropagationProps,
@@ -51,6 +52,7 @@ const ZEEBE_GROUPS = [
   OutputPropagationGroup,
   OutputGroup,
   HeaderGroup,
+  ExecutionListenersGroup,
   ExtensionPropertiesGroup
 ];
 
@@ -299,6 +301,22 @@ function AssignmentDefinitionGroup(element, injector) {
   return group.entries.length ? group : null;
 }
 
+function ExecutionListenersGroup(element, injector) {
+  const translate = injector.get('translate');
+  const group = {
+    label: translate('Execution listeners'),
+    id: 'Zeebe__ExecutionListeners',
+    component: ListGroup,
+    ...ExecutionListenersProps({ element, injector })
+  };
+
+  if (group.items) {
+    return group;
+  }
+
+  return null;
+}
+
 function ExtensionPropertiesGroup(element, injector) {
   const translate = injector.get('translate');
   const group = {

src/provider/zeebe/properties/ExecutionListener.js

@@ -0,0 +1,176 @@
+import { SelectEntry } from '@bpmn-io/properties-panel';
+
+import {
+  is,
+  isAny
+} from 'bpmn-js/lib/util/ModelUtil';
+
+import {
+  useService
+} from '../../../hooks';
+
+import {
+  getErrorEventDefinition
+} from '../../../utils/EventDefinitionUtil';
+
+import { FeelEntryWithVariableContext } from '../../../entries/FeelEntryWithContext';
+
+
+export const EVENT_TO_LABEL = {
+  'start': 'Start',
+  'end': 'End'
+};
+
+export function ExecutionListenerEntries(props) {
+
+  const {
+    element,
+    idPrefix,
+    listener
+  } = props;
+
+  const eventTypes = getEventTypes(element);
+
+  const entries = eventTypes.length > 1 ? [
+    {
+      id: idPrefix + '-eventType',
+      component: EventType,
+      idPrefix,
+      listener,
+      eventTypes
+    }
+  ] : [];
+
+  entries.push({
+    id: idPrefix + '-listenerType',
+    component: ListenerType,
+    idPrefix,
+    listener
+  },
+  {
+    id: idPrefix + '-retries',
+    component: Retries,
+    idPrefix,
+    listener
+  });
+
+  return entries;
+}
+
+function EventType(props) {
+  const {
+    idPrefix,
+    element,
+    listener,
+    eventTypes
+  } = props;
+
+  const modeling = useService('modeling');
+  const translate = useService('translate');
+
+  const getOptions = () => {
+    return eventTypes.map(eventType => ({
+      value: eventType,
+      label: translate(EVENT_TO_LABEL[eventType])
+    }));
+  };
+
+  const setValue = (value) => {
+    modeling.updateModdleProperties(element, listener, {
+      eventType: value
+    });
+  };
+
+  const getValue = () => {
+    return listener.get('eventType');
+  };
+
+  return SelectEntry({
+    element,
+    id: idPrefix + '-eventType',
+    label: translate('Event type'),
+    getValue,
+    setValue,
+    getOptions
+  });
+}
+
+function ListenerType(props) {
+  const {
+    idPrefix,
+    element,
+    listener
+  } = props;
+
+  const modeling = useService('modeling');
+  const translate = useService('translate');
+  const debounce = useService('debounceInput');
+
+  const setValue = (value) => {
+    modeling.updateModdleProperties(element, listener, {
+      type: value
+    });
+  };
+
+  const getValue = () => {
+    return listener.get('type');
+  };
+
+  return FeelEntryWithVariableContext({
+    element,
+    id: idPrefix + '-listenerType',
+    label: translate('Listener type'),
+    getValue,
+    setValue,
+    debounce,
+    feel: 'optional'
+  });
+}
+
+function Retries(props) {
+  const {
+    idPrefix,
+    element,
+    listener
+  } = props;
+
+  const modeling = useService('modeling');
+  const translate = useService('translate');
+  const debounce = useService('debounceInput');
+
+  const setValue = (value) => {
+    modeling.updateModdleProperties(element, listener, {
+      retries: value
+    });
+  };
+
+  const getValue = () => {
+    return listener.get('retries');
+  };
+
+  return FeelEntryWithVariableContext({
+    element,
+    id: idPrefix + '-retries',
+    label: translate('Retries'),
+    getValue,
+    setValue,
+    debounce,
+    feel: 'optional'
+  });
+}
+
+export function getEventTypes(element) {
+  if (isAny(element, [ 'bpmn:BoundaryEvent', 'bpmn:StartEvent' ])) {
+    return [ 'end' ];
+  }
+
+  if (is(element, 'bpmn:EndEvent') && getErrorEventDefinition(element)) {
+    return [ 'start' ];
+  }
+
+  if (is(element, 'bpmn:Gateway')) {
+    return [ 'start' ];
+  }
+
+  return [ 'start', 'end' ];
+}