feat: add task listeners for Zeebe

related to camunda/camunda-modeler#4590

Author: misiekhardcore

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes to [bpmn-js-properties-panel](https://github.com/bpmn-io/bpm
 
 ___Note:__ Yet to be released changes appear here._
 
+* `FEAT`: support Zeebe task listeners ([#1088](https://github.com/bpmn-io/bpmn-js-properties-panel/pull/1088))
+
 ## 5.26.0
 
 * `FEAT`: make FEEL popup links configurable ([#1083](https://github.com/bpmn-io/bpmn-js-properties-panel/pull/1083))

src/provider/zeebe/ZeebePropertiesProvider.js

@@ -24,6 +24,7 @@ import {
   SignalProps,
   TargetProps,
   TaskDefinitionProps,
+  TaskListenersProps,
   TaskScheduleProps,
   TimerProps,
   UserTaskImplementationProps,
@@ -56,6 +57,7 @@ const ZEEBE_GROUPS = [
   OutputPropagationGroup,
   OutputGroup,
   HeaderGroup,
+  TaskListenersGroup,
   ExecutionListenersGroup,
   ExtensionPropertiesGroup
 ];
@@ -323,6 +325,22 @@ function ExecutionListenersGroup(element, injector) {
   return null;
 }
 
+function TaskListenersGroup(element, injector) {
+  const translate = injector.get('translate');
+  const group = {
+    label: translate('Task listeners'),
+    id: 'Zeebe__TaskListeners',
+    component: ListGroup,
+    ...TaskListenersProps({ 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

@@ -13,7 +13,7 @@ import {
   getErrorEventDefinition
 } from '../../../utils/EventDefinitionUtil';
 
-import { FeelEntryWithVariableContext } from '../../../entries/FeelEntryWithContext';
+import { ListenerType, Retries } from './shared/Listener';
 
 
 export const EVENT_TO_LABEL = {
@@ -95,70 +95,6 @@ function EventType(props) {
   });
 }
 
-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' ];

src/provider/zeebe/properties/TaskListener.js

@@ -0,0 +1,84 @@
+import { SelectEntry } from '@bpmn-io/properties-panel';
+
+import {
+  useService
+} from '../../../hooks';
+
+import { ListenerType, Retries } from './shared/Listener';
+
+export const EVENT_TYPE = [ 'complete', 'assignment' ];
+
+export const EVENT_TO_LABEL = {
+  complete: 'Complete',
+  assignment: 'Assignment'
+};
+
+export function TaskListenerEntries(props) {
+
+  const {
+    idPrefix,
+    listener
+  } = props;
+
+  return [
+    {
+      id: idPrefix + '-eventType',
+      component: EventType,
+      idPrefix,
+      listener,
+      eventTypes: EVENT_TYPE
+    },
+    {
+      id: idPrefix + '-listenerType',
+      component: ListenerType,
+      idPrefix,
+      listener
+    },
+    {
+      id: idPrefix + '-retries',
+      component: Retries,
+      idPrefix,
+      listener
+    }
+  ];
+}
+
+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
+  });
+}
+
+