feat: add execution listeners for Zeebe

Related to camunda/camunda-modeler#3951

package.json

@@ -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,140 @@
+import { SelectEntry } from '@bpmn-io/properties-panel';
+
+import {
+  useService
+} from '../../../hooks';
+
+import { FeelEntryWithVariableContext } from '../../../entries/FeelEntryWithContext';
+
+
+export default function ExecutionListener(props) {
+
+  const {
+    idPrefix,
+    listener
+  } = props;
+
+  const entries = [
+    {
+      id: idPrefix + '-eventType',
+      component: EventType,
+      idPrefix,
+      listener
+    },
+    {
+      id: idPrefix + '-listenerType',
+      component: ListenerType,
+      idPrefix,
+      listener
+    },
+    {
+      id: idPrefix + '-retries',
+      component: Retries,
+      idPrefix,
+      listener
+    }
+  ];
+
+  return entries;
+}
+
+function EventType(props) {
+  const {
+    idPrefix,
+    element,
+    listener
+  } = props;
+
+  const modeling = useService('modeling');
+  const translate = useService('translate');
+
+  const getOptions = () => {
+    return [
+      { value: 'start', label: translate('Start') },
+      { value: 'end', label: translate('End') }
+    ];
+  };
+
+  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'
+  });
+}