Merge remote-tracking branch 'origin/main' into feature/gateway_condition_expressions

app/spiffworkflow/helpers.js

@@ -0,0 +1,8 @@
+// https://stackoverflow.com/a/5767357/6090676
+export function removeFirstInstanceOfItemFromArrayInPlace(arr, value) {
+  const index = arr.indexOf(value);
+  if (index > -1) {
+    arr.splice(index, 1);
+  }
+  return arr;
+}

app/spiffworkflow/messages/MessageHelpers.js

@@ -4,13 +4,22 @@ import { is } from 'bpmn-js/lib/util/ModelUtil';
  * loops up until it can find the root.
  * @param element
  */
-export function getRoot(businessObject) {
+export function getRoot(businessObject, moddle) {
-  // todo: Do we want businessObject to be a shape or moddle object?
+  // HACK: get the root element. need a more formal way to do this
-  if (businessObject.$type === 'bpmn:Definitions') {
+  if (moddle) {
-    return businessObject;
+    for (const elementId in moddle.ids._seed.hats) {
-  }
+      if (elementId.startsWith('Definitions_')) {
-  if (typeof businessObject.$parent !== 'undefined') {
+        return moddle.ids._seed.hats[elementId];
-    return getRoot(businessObject.$parent);
+      }
+    }
+  } else {
+    // todo: Do we want businessObject to be a shape or moddle object?
+    if (businessObject.$type === 'bpmn:Definitions') {
+      return businessObject;
+    }
+    if (typeof businessObject.$parent !== 'undefined') {
+      return getRoot(businessObject.$parent);
+    }
   }
   return businessObject;
 }
@@ -59,23 +68,40 @@ export function getMessageRefElement(shapeElement) {
   return null;
 }
 
-export function findFormalExpressions(shapeElement) {
+export function findCorrelationKeyForCorrelationProperty(shapeElement, moddle) {
+  const correlationKeyElements = findCorrelationKeys(shapeElement, moddle);
+  for (const cke of correlationKeyElements) {
+    if (cke.correlationPropertyRef) {
+      for (const correlationPropertyRef of cke.correlationPropertyRef) {
+        if (correlationPropertyRef.id === shapeElement.id) {
+          return cke;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+export function findCorrelationPropertiesAndRetrievalExpressionsForMessage(
+  shapeElement
+) {
   const formalExpressions = [];
-  const messageRef = getMessageRefElement(shapeElement);
+  const messageRefElement = getMessageRefElement(shapeElement);
-  if (messageRef) {
+  if (messageRefElement) {
     const root = getRoot(shapeElement.businessObject);
     if (root.$type === 'bpmn:Definitions') {
       for (const childElement of root.rootElements) {
         if (childElement.$type === 'bpmn:CorrelationProperty') {
-          const retrievalExpression = processCorrelationProperty(
+          const retrievalExpression =
-            childElement,
+            getRetrievalExpressionFromCorrelationProperty(
-            messageRef
+              childElement,
-          );
+              messageRefElement
-          // todo: is there a better test for this than length === 1?
+            );
-          if (retrievalExpression.length === 1) {
+          if (retrievalExpression) {
             const formalExpression = {
-              correlationId: childElement.id,
+              correlationPropertyModdleElement: childElement,
-              expression: retrievalExpression[0],
+              correlationPropertyRetrievalExpressionModdleElement:
+                retrievalExpression,
             };
             formalExpressions.push(formalExpression);
           }
@@ -100,24 +126,27 @@ export function getMessageElementForShapeElement(shapeElement) {
   return null;
 }
 
-function processCorrelationProperty(correlationProperty, message) {
+function getRetrievalExpressionFromCorrelationProperty(
-  const expressions = [];
+  correlationProperty,
-  for (const retrievalExpression of correlationProperty.correlationPropertyRetrievalExpression) {
+  message
-    if (
+) {
-      retrievalExpression.$type ===
+  if (correlationProperty.correlationPropertyRetrievalExpression) {
-        'bpmn:CorrelationPropertyRetrievalExpression' &&
+    for (const retrievalExpression of correlationProperty.correlationPropertyRetrievalExpression) {
-      retrievalExpression.messageRef &&
+      if (
-      retrievalExpression.messageRef.id === message.id &&
+        retrievalExpression.$type ===
-      retrievalExpression.messagePath.body
+          'bpmn:CorrelationPropertyRetrievalExpression' &&
-    ) {
+        retrievalExpression.messageRef &&
-      expressions.push(retrievalExpression.messagePath.body);
+        retrievalExpression.messageRef.id === message.id
+      ) {
+        return retrievalExpression;
+      }
     }
   }
-  return expressions;
+  return null;
 }
 
-export function findCorrelationProperties(businessObject) {
+export function findCorrelationProperties(businessObject, moddle) {
-  const root = getRoot(businessObject);
+  const root = getRoot(businessObject, moddle);
   const correlationProperties = [];
   for (const rootElement of root.rootElements) {
     if (rootElement.$type === 'bpmn:CorrelationProperty') {
@@ -127,8 +156,8 @@ export function findCorrelationProperties(businessObject) {
   return correlationProperties;
 }
 
-export function findCorrelationKeys(businessObject) {
+export function findCorrelationKeys(businessObject, moddle) {
-  const root = getRoot(businessObject);
+  const root = getRoot(businessObject, moddle);
   const correlationKeys = [];
   for (const rootElement of root.rootElements) {
     if (rootElement.$type === 'bpmn:Collaboration') {
@@ -136,15 +165,6 @@ export function findCorrelationKeys(businessObject) {
       for (const correlationKey in currentKeys) {
         const currentCorrelation = rootElement.correlationKeys[correlationKey];
         correlationKeys.push(currentCorrelation);
-        // const currentProperty = {};
-        // currentProperty.name = currentCorrelation.name;
-        // currentProperty.refs = [];
-        // for (const correlationProperty in currentCorrelation.correlationPropertyRef) {
-        //   currentProperty.refs.push(
-        //     currentCorrelation.correlationPropertyRef[correlationProperty]
-        //   );
-        // }
-        // correlationKeys.push(currentProperty);
       }
     }
   }

app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js

@@ -1,6 +1,7 @@
 import { useService } from 'bpmn-js-properties-panel';
 import { SimpleEntry, TextFieldEntry } from '@bpmn-io/properties-panel';
 import { findCorrelationKeys, getRoot } from '../MessageHelpers';
+import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers';
 
 /**
  * Provides a list of data objects, and allows you to add / remove data objects, and change their ids.
@@ -10,18 +11,24 @@ import { findCorrelationKeys, getRoot } from '../MessageHelpers';
 export function CorrelationKeysArray(props) {
   const { element, moddle, commandStack } = props;
 
-  const correlationKeys = findCorrelationKeys(element.businessObject);
+  const correlationKeyElements = findCorrelationKeys(element.businessObject);
-  const items = correlationKeys.map((correlationKey, index) => {
+  const items = correlationKeyElements.map((correlationKeyElement, index) => {
     const id = `correlationGroup-${index}`;
     return {
       id,
-      label: correlationKey.name,
+      label: correlationKeyElement.name,
       entries: correlationGroup({
         id,
         element,
-        correlationKey,
+        correlationKeyElement,
         commandStack,
       }),
+      remove: removeFactory({
+        element,
+        correlationKeyElement,
+        commandStack,
+        moddle,
+      }),
       autoFocusEntry: id,
     };
   });
@@ -32,14 +39,14 @@ export function CorrelationKeysArray(props) {
       const newCorrelationKeyElement = moddle.create('bpmn:CorrelationKey');
       newCorrelationKeyElement.name =
         moddle.ids.nextPrefixed('CorrelationKey_');
-      const correlationKeyElements =
+      const currentCorrelationKeyElements =
         element.businessObject.get('correlationKeys');
-      correlationKeyElements.push(newCorrelationKeyElement);
+      currentCorrelationKeyElements.push(newCorrelationKeyElement);
       commandStack.execute('element.updateProperties', {
         element,
         moddleElement: moddle,
         properties: {
-          correlationKey: correlationKeyElements,
+          correlationKeys: currentCorrelationKeyElements,
         },
       });
     }
@@ -48,23 +55,44 @@ export function CorrelationKeysArray(props) {
   return { items, add };
 }
 
+function removeFactory(props) {
+  const { element, correlationKeyElement, moddle, commandStack } = props;
+
+  return function (event) {
+    event.stopPropagation();
+    const currentCorrelationKeyElements =
+      element.businessObject.get('correlationKeys');
+    removeFirstInstanceOfItemFromArrayInPlace(
+      currentCorrelationKeyElements,
+      correlationKeyElement
+    );
+    commandStack.execute('element.updateProperties', {
+      element,
+      moddleElement: moddle,
+      properties: {
+        correlationKey: currentCorrelationKeyElements,
+      },
+    });
+  };
+}
+
 // <bpmn:correlationKey name="lover"> <--- The correlationGroup
 //   <bpmn:correlationPropertyRef>lover_name</bpmn:correlationPropertyRef>
 //   <bpmn:correlationPropertyRef>lover_instrument</bpmn:correlationPropertyRef>
 // </bpmn:correlationKey>
 // <bpmn:correlationKey name="singer" />
 function correlationGroup(props) {
-  const { correlationKey, commandStack } = props;
+  const { correlationKeyElement, commandStack } = props;
-  const id = `correlation-${correlationKey.name}`;
+  const id = `correlation-${correlationKeyElement.name}`;
   const entries = [
     {
-      id: `${id}-${correlationKey.name}-key`,
+      id: `${id}-${correlationKeyElement.name}-key`,
       component: CorrelationKeyTextField,
-      correlationKey,
+      correlationKeyElement,
       commandStack,
     },
   ];
-  (correlationKey.correlationPropertyRef || []).forEach(
+  (correlationKeyElement.correlationPropertyRef || []).forEach(
     (correlationProperty) => {
       entries.push({
         id: `${id}-${correlationProperty.id}-group`,
@@ -77,13 +105,13 @@ function correlationGroup(props) {
 }
 
 function CorrelationKeyTextField(props) {
-  const { id, element, correlationKey, commandStack } = props;
+  const { id, element, correlationKeyElement, commandStack } = props;
 
   const debounce = useService('debounceInput');
   const setValue = (value) => {
     commandStack.execute('element.updateModdleProperties', {
       element,
-      moddleElement: correlationKey,
+      moddleElement: correlationKeyElement,
       properties: {
         name: value,
       },
@@ -91,7 +119,7 @@ function CorrelationKeyTextField(props) {
   };
 
   const getValue = () => {
-    return correlationKey.name;
+    return correlationKeyElement.name;
   };
 
   return TextFieldEntry({
@@ -105,7 +133,6 @@ function CorrelationKeyTextField(props) {
 
 function CorrelationPropertyText(props) {
   const { id, parameter, correlationProperty } = props;
-
   const debounce = useService('debounceInput');
 
   const getValue = () => {

app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js

@@ -1,11 +1,16 @@
 import { useService } from 'bpmn-js-properties-panel';
 import {
+  SelectEntry,
   isTextFieldEntryEdited,
-  ListGroup,
-  TextAreaEntry,
   TextFieldEntry,
 } from '@bpmn-io/properties-panel';
-import { findFormalExpressions } from '../MessageHelpers';
+import {
+  getRoot,
+  findCorrelationKeys,
+  findCorrelationProperties,
+  findCorrelationKeyForCorrelationProperty,
+} from '../MessageHelpers';
+import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers';
 
 /**
  * Allows the creation, or editing of messageCorrelations at the bpmn:sendTask level of a BPMN document.
@@ -14,93 +19,289 @@ export function CorrelationPropertiesArray(props) {
   const { moddle } = props;
   const { element } = props;
   const { commandStack } = props;
-  // const { elementRegistry } = props;
+  const { translate } = props;
 
-  const formalExpressions = findFormalExpressions(element);
+  const correlationPropertyArray = findCorrelationProperties(
-  const items = formalExpressions.map((formalExpression) => {
+    element.businessObject
-    const id = `correlation-${formalExpression.correlationId}`;
+  );
-    const entries = MessageCorrelationGroup({
+  const items = correlationPropertyArray.map(
-      idPrefix: id,
+    (correlationPropertyModdleElement, index) => {
-      formalExpression,
+      const id = `correlation-${index}`;
-    });
+      const entries = MessageCorrelationPropertyGroup({
-    return {
+        idPrefix: id,
-      id,
+        correlationPropertyModdleElement,
-      label: formalExpression.correlationId,
+        translate,
-      entries,
+        commandStack,
-      autoFocusEntry: id,
+        moddle,
-      // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry })
+      });
-    };
+      return {
-  });
+        id,
+        label: correlationPropertyModdleElement.id,
+        entries,
+        autoFocusEntry: id,
+        remove: removeFactory({
+          element,
+          correlationPropertyModdleElement,
+          commandStack,
+          moddle,
+        }),
+      };
+    }
+  );
 
   function add(event) {
     event.stopPropagation();
-    const newRetrievalExpression = moddle.create(
+    const newCorrelationPropertyElement = moddle.create(
-      'bpmn:CorrelationPropertyRetrievalExpression'
+      'bpmn:CorrelationProperty'
     );
-    const newElements = formalExpressions;
+    const correlationPropertyId = moddle.ids.nextPrefixed(
-    newRetrievalExpression.messageRef = element.businessObject.messageRef;
+      'CorrelationProperty_'
-    newElements.push(newRetrievalExpression);
+    );
-    commandStack.execute('element.updateModdleProperties', {
+    newCorrelationPropertyElement.id = correlationPropertyId;
+    newCorrelationPropertyElement.name = correlationPropertyId;
+    const rootElement = getRoot(element.businessObject);
+    const { rootElements } = rootElement;
+    rootElements.push(newCorrelationPropertyElement);
+
+    const correlationKeyElements = findCorrelationKeys(
+      newCorrelationPropertyElement,
+      moddle
+    );
+    const correlationKeyElement = correlationKeyElements[0];
+    if (correlationKeyElement.correlationPropertyRef) {
+      correlationKeyElement.correlationPropertyRef.push(
+        newCorrelationPropertyElement
+      );
+    } else {
+      correlationKeyElement.correlationPropertyRef = [
+        newCorrelationPropertyElement,
+      ];
+    }
+
+    commandStack.execute('element.updateProperties', {
       element,
-      moddleElement: element.businessObject,
+      properties: {},
     });
   }
 
   return { items, add };
 }
 
-function MessageCorrelationGroup(props) {
+function removeFactory(props) {
-  const { idPrefix, formalExpression } = props;
+  const { element, correlationPropertyModdleElement, moddle, commandStack } =
+    props;
 
+  return function (event) {
+    event.stopPropagation();
+    const rootElement = getRoot(element.businessObject);
+    const { rootElements } = rootElement;
+
+    const oldCorrelationKeyElement = findCorrelationKeyForCorrelationProperty(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    if (oldCorrelationKeyElement) {
+      removeFirstInstanceOfItemFromArrayInPlace(
+        oldCorrelationKeyElement.correlationPropertyRef,
+        correlationPropertyModdleElement
+      );
+    }
+
+    removeFirstInstanceOfItemFromArrayInPlace(
+      rootElements,
+      correlationPropertyModdleElement
+    );
+    commandStack.execute('element.updateProperties', {
+      element,
+      properties: {
+        messages: rootElements,
+      },
+    });
+  };
+}
+
+function MessageCorrelationPropertyGroup(props) {
+  const {
+    idPrefix,
+    correlationPropertyModdleElement,
+    translate,
+    commandStack,
+    moddle,
+  } = props;
   return [
     {
-      id: `${idPrefix}-group`,
+      id: `${idPrefix}-correlation-key`,
-      component: MessageCorrelationTextField,
+      component: MessageCorrelationKeySelect,
       isEdited: isTextFieldEntryEdited,
       idPrefix,
-      formalExpression,
+      correlationPropertyModdleElement,
+      translate,
+      moddle,
+    },
+    {
+      id: `${idPrefix}-correlation-property-id`,
+      component: CorrelationPropertyIdTextField,
+      isEdited: isTextFieldEntryEdited,
+      idPrefix,
+      correlationPropertyModdleElement,
+      translate,
+      commandStack,
+    },
+    {
+      id: `${idPrefix}-correlation-property-name`,
+      component: CorrelationPropertyNameTextField,
+      isEdited: isTextFieldEntryEdited,
+      idPrefix,
+      correlationPropertyModdleElement,
+      translate,
+      commandStack,
     },
   ];
 }
 
-function MessageCorrelationTextField(props) {
+function MessageCorrelationKeySelect(props) {
-  const { idPrefix, element, parameter, formalExpression } = props;
+  const {
-
+    idPrefix,
-  const commandStack = useService('commandStack');
+    correlationPropertyModdleElement,
+    translate,
+    parameter,
+    moddle,
+  } = props;
   const debounce = useService('debounceInput');
 
+  const setValue = (value) => {
+    const correlationKeyElements = findCorrelationKeys(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    let newCorrelationKeyElement;
+    for (const cke of correlationKeyElements) {
+      if (cke.name === value) {
+        newCorrelationKeyElement = cke;
+      }
+    }
+    const oldCorrelationKeyElement = findCorrelationKeyForCorrelationProperty(
+      correlationPropertyModdleElement,
+      moddle
+    );
+
+    if (newCorrelationKeyElement.correlationPropertyRef) {
+      newCorrelationKeyElement.correlationPropertyRef.push(
+        correlationPropertyModdleElement
+      );
+    } else {
+      newCorrelationKeyElement.correlationPropertyRef = [
+        correlationPropertyModdleElement,
+      ];
+    }
+
+    if (oldCorrelationKeyElement) {
+      removeFirstInstanceOfItemFromArrayInPlace(
+        oldCorrelationKeyElement.correlationPropertyRef,
+        correlationPropertyModdleElement
+      );
+    }
+  };
+
+  const getValue = () => {
+    const correlationKeyElement = findCorrelationKeyForCorrelationProperty(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    if (correlationKeyElement) {
+      return correlationKeyElement.name;
+    }
+    return null;
+  };
+
+  const getOptions = () => {
+    const correlationKeyElements = findCorrelationKeys(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    const options = [];
+    for (const correlationKeyElement of correlationKeyElements) {
+      options.push({
+        label: correlationKeyElement.name,
+        value: correlationKeyElement.name,
+      });
+    }
+    return options;
+  };
+
+  return SelectEntry({
+    id: `${idPrefix}-select`,
+    element: parameter,
+    label: translate('Correlation Key'),
+    getValue,
+    setValue,
+    getOptions,
+    debounce,
+  });
+}
+
+function CorrelationPropertyIdTextField(props) {
+  const {
+    id,
+    element,
+    correlationPropertyModdleElement,
+    commandStack,
+    translate,
+  } = props;
+
+  const debounce = useService('debounceInput');
   const setValue = (value) => {
     commandStack.execute('element.updateModdleProperties', {
       element,
-      moddleElement: formalExpression,
+      moddleElement: correlationPropertyModdleElement,
       properties: {
         id: value,
       },
     });
-
-    // Also update the label of all the references
-    // const references = findDataReferenceShapes(element, correlationProperty.id);
-    const references = ['hello1', 'hello2'];
-    for (const ref of references) {
-      commandStack.execute('element.updateProperties', {
-        element: ref,
-        moddleElement: ref.businessObject,
-        properties: {
-          name: value,
-        },
-        changed: [ref], // everything is already marked as changed, don't recalculate.
-      });
-    }
   };
 
-  const getValue = (_parameter) => {
+  const getValue = () => {
-    return formalExpression.expression;
+    return correlationPropertyModdleElement.id;
   };
 
   return TextFieldEntry({
-    element: parameter,
+    element,
-    id: `${idPrefix}-textField`,
+    id: `${id}-id-textField`,
-    label: 'Expression',
+    label: translate('ID'),
+    getValue,
+    setValue,
+    debounce,
+  });
+}
+
+function CorrelationPropertyNameTextField(props) {
+  const {
+    id,
+    element,
+    correlationPropertyModdleElement,
+    commandStack,
+    translate,
+  } = props;
+
+  const debounce = useService('debounceInput');
+  const setValue = (value) => {
+    commandStack.execute('element.updateModdleProperties', {
+      element,
+      moddleElement: correlationPropertyModdleElement,
+      properties: {
+        name: value,
+      },
+    });
+  };
+
+  const getValue = () => {
+    return correlationPropertyModdleElement.name;
+  };
+
+  return TextFieldEntry({
+    element,
+    id: `${id}-name-textField`,
+    label: translate('Name'),
     getValue,
     setValue,
     debounce,

app/spiffworkflow/messages/propertiesPanel/MessageArray.js

@@ -0,0 +1,158 @@
+import { useService } from 'bpmn-js-properties-panel';
+import { TextFieldEntry } from '@bpmn-io/properties-panel';
+import { without } from 'min-dash';
+import {
+  findCorrelationKeys,
+  getRoot,
+  findMessageModdleElements,
+} from '../MessageHelpers';
+import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers';
+
+/**
+ * Provides a list of data objects, and allows you to add / remove data objects, and change their ids.
+ * @param props
+ * @constructor
+ */
+export function MessageArray(props) {
+  const { element, moddle, commandStack, translate } = props;
+
+  const messageElements = findMessageModdleElements(element.businessObject);
+  const items = messageElements.map((messageElement, index) => {
+    const id = `messageElement-${index}`;
+    return {
+      id,
+      label: messageElement.name,
+      entries: messageGroup({
+        id,
+        element,
+        messageElement,
+        commandStack,
+        translate,
+      }),
+      autoFocusEntry: id,
+      remove: removeFactory({
+        element,
+        messageElement,
+        commandStack,
+        moddle,
+      }),
+    };
+  });
+
+  function add(event) {
+    event.stopPropagation();
+    if (element.type === 'bpmn:Collaboration') {
+      const newMessageElement = moddle.create('bpmn:Message');
+      const messageId = moddle.ids.nextPrefixed('Message_');
+      newMessageElement.id = messageId;
+      newMessageElement.name = messageId;
+      const rootElement = getRoot(element.businessObject);
+      const { rootElements } = rootElement;
+      rootElements.push(newMessageElement);
+      commandStack.execute('element.updateProperties', {
+        element,
+        moddleElement: moddle,
+        properties: {
+          messages: rootElements,
+        },
+      });
+    }
+  }
+
+  return { items, add };
+}
+
+function removeFactory(props) {
+  const { element, messageElement, moddle, commandStack } = props;
+
+  return function (event) {
+    event.stopPropagation();
+    const rootElement = getRoot(element.businessObject);
+    const { rootElements } = rootElement;
+    removeFirstInstanceOfItemFromArrayInPlace(rootElements, messageElement);
+    commandStack.execute('element.updateProperties', {
+      element,
+      moddleElement: moddle,
+      properties: {
+        messages: rootElements,
+      },
+    });
+  };
+}
+
+function messageGroup(props) {
+  const { messageElement, commandStack, translate } = props;
+  const id = `message-${messageElement.name}`;
+  return [
+    {
+      id: `${id}-${messageElement.name}-key`,
+      component: MessageIdTextField,
+      messageElement,
+      commandStack,
+      translate,
+    },
+    {
+      id: `${id}-${messageElement.name}-key`,
+      component: MessageNameTextField,
+      messageElement,
+      commandStack,
+      translate,
+    },
+  ];
+}
+
+function MessageIdTextField(props) {
+  const { id, element, messageElement, commandStack, translate } = props;
+
+  const debounce = useService('debounceInput');
+  const setValue = (value) => {
+    commandStack.execute('element.updateModdleProperties', {
+      element,
+      moddleElement: messageElement,
+      properties: {
+        id: value,
+      },
+    });
+  };
+
+  const getValue = () => {
+    return messageElement.id;
+  };
+
+  return TextFieldEntry({
+    element,
+    id: `${id}-id-textField`,
+    label: translate('ID'),
+    getValue,
+    setValue,
+    debounce,
+  });
+}
+
+function MessageNameTextField(props) {
+  const { id, element, messageElement, commandStack, translate } = props;
+
+  const debounce = useService('debounceInput');
+  const setValue = (value) => {
+    commandStack.execute('element.updateModdleProperties', {
+      element,
+      moddleElement: messageElement,
+      properties: {
+        name: value,
+      },
+    });
+  };
+
+  const getValue = () => {
+    return messageElement.name;
+  };
+
+  return TextFieldEntry({
+    element,
+    id: `${id}-name-textField`,
+    label: translate('Name'),
+    getValue,
+    setValue,
+    debounce,
+  });
+}

app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js

@@ -0,0 +1,278 @@
+import { useService } from 'bpmn-js-properties-panel';
+import {
+  SelectEntry,
+  isTextFieldEntryEdited,
+  TextFieldEntry,
+} from '@bpmn-io/properties-panel';
+import {
+  findCorrelationPropertiesAndRetrievalExpressionsForMessage,
+  findCorrelationProperties,
+  getMessageRefElement,
+} from '../MessageHelpers';
+import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers';
+
+/**
+ * Allows the creation, or editing of messageCorrelations at the bpmn:sendTask level of a BPMN document.
+ */
+export function MessageCorrelationPropertiesArray(props) {
+  const { moddle } = props;
+  const { element } = props;
+  const { commandStack } = props;
+  const { translate } = props;
+
+  const correlationPropertyObjectsForCurrentMessage =
+    findCorrelationPropertiesAndRetrievalExpressionsForMessage(element);
+  const allCorrelationPropertyModdleElements = findCorrelationProperties(
+    element,
+    moddle
+  );
+  const items = correlationPropertyObjectsForCurrentMessage.map(
+    (correlationPropertyObject, index) => {
+      const {
+        correlationPropertyModdleElement,
+        correlationPropertyRetrievalExpressionModdleElement,
+      } = correlationPropertyObject;
+      const id = `correlation-${index}`;
+      const entries = MessageCorrelationPropertyGroup({
+        idPrefix: id,
+        correlationPropertyModdleElement,
+        correlationPropertyRetrievalExpressionModdleElement,
+        translate,
+        moddle,
+        element,
+        commandStack,
+      });
+      return {
+        id,
+        label: correlationPropertyModdleElement.id,
+        entries,
+        autoFocusEntry: id,
+        remove: removeFactory({
+          element,
+          correlationPropertyModdleElement,
+          correlationPropertyRetrievalExpressionModdleElement,
+          commandStack,
+        }),
+      };
+    }
+  );
+
+  function add(event) {
+    event.stopPropagation();
+
+    let correlationPropertyElement;
+    allCorrelationPropertyModdleElements.forEach((cpe) => {
+      let foundElement = false;
+      correlationPropertyObjectsForCurrentMessage.forEach((cpo) => {
+        const cpme = cpo.correlationPropertyModdleElement;
+        if (cpme.id === cpe.id) {
+          foundElement = true;
+        }
+      });
+      if (!foundElement) {
+        correlationPropertyElement = cpe;
+      }
+    });
+
+    // TODO: we should have some way to show an error if element is not found instead
+    // we need to check this since the code assumes each message only has one ref
+    // and will not display all properties if there are multiple
+    if (correlationPropertyElement) {
+      const newRetrievalExpressionElement = moddle.create(
+        'bpmn:CorrelationPropertyRetrievalExpression'
+      );
+      const messageRefElement = getMessageRefElement(element);
+      const newFormalExpression = moddle.create('bpmn:FormalExpression');
+      newFormalExpression.body = '';
+
+      newRetrievalExpressionElement.messageRef = messageRefElement;
+      newRetrievalExpressionElement.messagePath = newFormalExpression;
+
+      if (!correlationPropertyElement.correlationPropertyRetrievalExpression) {
+        correlationPropertyElement.correlationPropertyRetrievalExpression = [];
+      }
+      correlationPropertyElement.correlationPropertyRetrievalExpression.push(
+        newRetrievalExpressionElement
+      );
+      commandStack.execute('element.updateProperties', {
+        element,
+        properties: {},
+      });
+    } else {
+      console.log(
+        'ERROR: There are not any more correlation properties this message can be added to'
+      );
+    }
+  }
+
+  const returnObject = { items };
+  if (allCorrelationPropertyModdleElements.length !== 0) {
+    returnObject.add = add;
+  }
+  return returnObject;
+}
+
+function removeFactory(props) {
+  const {
+    element,
+    correlationPropertyModdleElement,
+    correlationPropertyRetrievalExpressionModdleElement,
+    commandStack,
+  } = props;
+
+  return function (event) {
+    event.stopPropagation();
+    removeFirstInstanceOfItemFromArrayInPlace(
+      correlationPropertyModdleElement.correlationPropertyRetrievalExpression,
+      correlationPropertyRetrievalExpressionModdleElement
+    );
+    commandStack.execute('element.updateProperties', {
+      element,
+      properties: {},
+    });
+  };
+}
+
+function MessageCorrelationPropertyGroup(props) {
+  const {
+    idPrefix,
+    correlationPropertyModdleElement,
+    correlationPropertyRetrievalExpressionModdleElement,
+    translate,
+    moddle,
+    element,
+    commandStack,
+  } = props;
+  return [
+    {
+      id: `${idPrefix}-correlation-key`,
+      component: MessageCorrelationPropertySelect,
+      isEdited: isTextFieldEntryEdited,
+      idPrefix,
+      correlationPropertyModdleElement,
+      correlationPropertyRetrievalExpressionModdleElement,
+      translate,
+      moddle,
+      element,
+      commandStack,
+    },
+    {
+      id: `${idPrefix}-expression`,
+      component: MessageCorrelationExpressionTextField,
+      isEdited: isTextFieldEntryEdited,
+      idPrefix,
+      correlationPropertyRetrievalExpressionModdleElement,
+      translate,
+    },
+  ];
+}
+
+function MessageCorrelationPropertySelect(props) {
+  const {
+    idPrefix,
+    correlationPropertyModdleElement,
+    correlationPropertyRetrievalExpressionModdleElement,
+    translate,
+    parameter,
+    moddle,
+    element,
+    commandStack,
+  } = props;
+  const debounce = useService('debounceInput');
+
+  const setValue = (value) => {
+    const allCorrelationPropertyModdleElements = findCorrelationProperties(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    const newCorrelationPropertyElement =
+      allCorrelationPropertyModdleElements.find((cpe) => cpe.id === value);
+
+    if (!newCorrelationPropertyElement.correlationPropertyRetrievalExpression) {
+      newCorrelationPropertyElement.correlationPropertyRetrievalExpression = [];
+    }
+    newCorrelationPropertyElement.correlationPropertyRetrievalExpression.push(
+      correlationPropertyRetrievalExpressionModdleElement
+    );
+    removeFirstInstanceOfItemFromArrayInPlace(
+      correlationPropertyModdleElement.correlationPropertyRetrievalExpression,
+      correlationPropertyRetrievalExpressionModdleElement
+    );
+    commandStack.execute('element.updateProperties', {
+      element,
+      properties: {},
+    });
+  };
+
+  const getValue = () => {
+    return correlationPropertyModdleElement.id;
+  };
+
+  const getOptions = () => {
+    const allCorrelationPropertyModdleElements = findCorrelationProperties(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    const correlationPropertyObjectsForCurrentMessage =
+      findCorrelationPropertiesAndRetrievalExpressionsForMessage(element);
+    const options = [];
+    for (const cpe of allCorrelationPropertyModdleElements) {
+      const foundElement = correlationPropertyObjectsForCurrentMessage.find(
+        (cpo) => {
+          const cpme = cpo.correlationPropertyModdleElement;
+          return cpme.id === cpe.id;
+        }
+      );
+      if (
+        !foundElement ||
+        foundElement.correlationPropertyModdleElement ===
+          correlationPropertyModdleElement
+      ) {
+        options.push({
+          label: cpe.name,
+          value: cpe.id,
+        });
+      }
+    }
+    return options;
+  };
+
+  return SelectEntry({
+    id: `${idPrefix}-select`,
+    element: parameter,
+    label: translate('Correlation Property'),
+    getValue,
+    setValue,
+    getOptions,
+    debounce,
+  });
+}
+
+function MessageCorrelationExpressionTextField(props) {
+  const {
+    idPrefix,
+    parameter,
+    correlationPropertyRetrievalExpressionModdleElement,
+    translate,
+  } = props;
+
+  const debounce = useService('debounceInput');
+
+  const setValue = (value) => {
+    correlationPropertyRetrievalExpressionModdleElement.messagePath.body =
+      value;
+  };
+
+  const getValue = (_parameter) => {
+    return correlationPropertyRetrievalExpressionModdleElement.messagePath.body;
+  };
+
+  return TextFieldEntry({
+    element: parameter,
+    id: `${idPrefix}-textField`,
+    label: translate('Expression'),
+    getValue,
+    setValue,
+    debounce,
+  });
+}

app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js

@@ -5,6 +5,8 @@ import { MessageSelect } from './MessageSelect';
 import { MessagePayload } from './MessagePayload';
 import { MessageVariable } from './MessageVariable';
 import { CorrelationPropertiesArray } from './CorrelationPropertiesArray';
+import { MessageCorrelationPropertiesArray } from './MessageCorrelationPropertiesArray';
+import { MessageArray } from './MessageArray';
 import { isMessageElement, canReceiveMessage } from '../MessageHelpers';
 
 const LOW_PRIORITY = 500;
@@ -20,7 +22,7 @@ export default function MessagesPropertiesProvider(
     return function pushGroup(groups) {
       if (is(element, 'bpmn:Collaboration')) {
         groups.push(
-          createCollaborationGroup(
+          ...createCollaborationGroup(
             element,
             translate,
             moddle,
@@ -80,12 +82,44 @@ function createCollaborationGroup(
   commandStack,
   elementRegistry
 ) {
-  return {
+  return [
-    id: 'correlation_keys',
+    {
-    label: translate('Correlation Keys'),
+      id: 'correlation_keys',
-    component: ListGroup,
+      label: translate('Correlation Keys'),
-    ...CorrelationKeysArray({ element, moddle, commandStack, elementRegistry }),
+      component: ListGroup,
-  };
+      ...CorrelationKeysArray({
+        element,
+        moddle,
+        commandStack,
+        elementRegistry,
+        translate,
+      }),
+    },
+    {
+      id: 'correlation_properties',
+      label: translate('Correlation Properties'),
+      component: ListGroup,
+      ...CorrelationPropertiesArray({
+        element,
+        moddle,
+        commandStack,
+        elementRegistry,
+        translate,
+      }),
+    },
+    {
+      id: 'messages',
+      label: translate('Messages'),
+      component: ListGroup,
+      ...MessageArray({
+        element,
+        moddle,
+        commandStack,
+        elementRegistry,
+        translate,
+      }),
+    },
+  ];
 }
 
 /**
@@ -133,13 +167,14 @@ function createMessageGroup(
 
   entries.push({
     id: 'correlationProperties',
-    label: translate('Correlation Properties'),
+    label: translate('Correlation'),
     component: ListGroup,
-    ...CorrelationPropertiesArray({
+    ...MessageCorrelationPropertiesArray({
       element,
       moddle,
       commandStack,
       elementRegistry,
+      translate,
     }),
   });
 

package-lock.json

@@ -9,9 +9,9 @@
       "version": "0.0.8",
       "license": "MIT",
       "dependencies": {
-        "@bpmn-io/properties-panel": "^0.18.0",
+        "@bpmn-io/properties-panel": "^0.19.0",
-        "bpmn-js": "^9.2.2",
+        "bpmn-js": "^9.4.0",
-        "bpmn-js-properties-panel": "^1.2.0",
+        "bpmn-js-properties-panel": "^1.5.0",
         "diagram-js": "^8.5.0",
         "inherits": "^2.0.4",
         "inherits-browser": "^0.0.1",
@@ -1929,9 +1929,9 @@
       }
     },
     "node_modules/@bpmn-io/properties-panel": {
-      "version": "0.18.0",
+      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.19.0.tgz",
-      "integrity": "sha512-2OCc6QplFKlCG8hmsAuUvd0JJTPjGvTJ6zxO73R9TpnUw7PKsXq2oIJjJfWsNdmvpmkxeyHoklOf5XpQXFjygw==",
+      "integrity": "sha512-cw+MfA2gpCBsa9Q0+JT3Gc7OvR1NGXuyQj4yOk5QoQHNzxuIMNuz6EX2NvDsCrf0oSzc9z0FapbzDuJB+DSC1g==",
       "dependencies": {
         "@bpmn-io/feel-editor": "0.2.0",
         "classnames": "^2.3.1",
@@ -3019,26 +3019,26 @@
       "dev": true
     },
     "node_modules/bpmn-js": {
-      "version": "9.2.2",
+      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.4.0.tgz",
-      "integrity": "sha512-Zs0e3fKEKIrnfVt+r4hkcqSg2XyMdXwp6x4xM0TDfGlduxyQWQ8rrqsjvnL4UEg4K0noBPqDce2vRawOilwReg==",
+      "integrity": "sha512-7dusZBYCFognA0TmspWaKZ47UjFhyRT+//hMdyLtPCKY1M0uAPXHoFv73MohlsEa7a75h0q6zjCj5W0/RHBwvg==",
       "dependencies": {
-        "bpmn-moddle": "^7.1.2",
+        "bpmn-moddle": "^7.1.3",
         "css.escape": "^1.5.1",
-        "diagram-js": "^8.5.0",
+        "diagram-js": "^8.9.0",
         "diagram-js-direct-editing": "^1.7.0",
         "ids": "^1.0.0",
         "inherits-browser": "0.0.1",
         "min-dash": "^3.5.2",
-        "min-dom": "^3.2.0",
+        "min-dom": "^3.2.1",
         "object-refs": "^0.3.0",
-        "tiny-svg": "^2.2.2"
+        "tiny-svg": "^2.2.4"
       }
     },
     "node_modules/bpmn-js-properties-panel": {
-      "version": "1.4.0",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.5.0.tgz",
-      "integrity": "sha512-+15Yg7FohrdpDuKqegxU9OyGgYcH6sZM06DjwBLKrpqHgmXEXMA0yD0UI9Rc95P4mRfsT4rAzGpZjYnsYgOshg==",
+      "integrity": "sha512-0VAPk6xK/u+GepjGjt8HAXtBa2ab5o4Dkn5II8UgnFMoQThpvrsLras3vh1il8j/2vPhngAsfiA8z7Y9nJ6/Hw==",
       "dependencies": {
         "@bpmn-io/element-templates-validator": "^0.9.0",
         "@bpmn-io/extract-process-variables": "^0.5.0",
@@ -3051,20 +3051,20 @@
         "semver-compare": "^1.0.0"
       },
       "peerDependencies": {
-        "@bpmn-io/properties-panel": "0.18.x",
+        "@bpmn-io/properties-panel": "0.19.x",
         "bpmn-js": "8.x || 9.x",
         "camunda-bpmn-js-behaviors": "0.1.x",
         "diagram-js": "7.x || 8.x"
       }
     },
     "node_modules/bpmn-moddle": {
-      "version": "7.1.2",
+      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz",
-      "integrity": "sha512-Sax4LokRCTqlg26njjULN3ZGtCmwH5gZVUZTRF0jwJk+YpMQhSfSoUECxjNv8OROoLxu8Z+MjdOHIxgvJf7KwA==",
+      "integrity": "sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==",
       "dependencies": {
         "min-dash": "^3.5.2",
         "moddle": "^5.0.2",
-        "moddle-xml": "^9.0.5"
+        "moddle-xml": "^9.0.6"
       }
     },
     "node_modules/brace-expansion": {
@@ -3723,12 +3723,12 @@
       "dev": true
     },
     "node_modules/diagram-js": {
-      "version": "8.5.0",
+      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.9.0.tgz",
-      "integrity": "sha512-UHA/Zfs7kG22M9wXAifAyPb2OZ4lG4lFi0CZ0GC6/lXmOsSHwHVZ1s/h9UqaIXnzIKW8SnZoP3Rwqel1ZhZLzg==",
+      "integrity": "sha512-577bUEbkwZ7id4SCXcD2qrlKoRPXry2SDSPt5T6tEOjwKrTllKr5d1HZoJzGws4VMQq5fmY51Gce1iFT9S4Dlw==",
       "dependencies": {
         "css.escape": "^1.5.1",
-        "didi": "^8.0.0",
+        "didi": "^8.0.1",
         "hammerjs": "^2.0.1",
         "inherits-browser": "0.0.1",
         "min-dash": "^3.5.2",
@@ -3751,9 +3751,9 @@
       }
     },
     "node_modules/didi": {
-      "version": "8.0.0",
+      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.1.tgz",
-      "integrity": "sha512-PwqTBaYzzfJSyxvpXPcTWF6nDdCKx2mFAU5eup1ZSb5wbaAS9a/HiKdtcAUdie/VMLHoFI50jkYZcA+bhUOugw=="
+      "integrity": "sha512-7oXiXbp8DHE3FfQsVBkc2pwePo3Jy2uyGS9trAeBmfxiZAP4WV23LWokRpMmyl3hlu8OEAsyMxx19i5P6TVaJQ=="
     },
     "node_modules/diff": {
       "version": "5.0.0",
@@ -6622,9 +6622,9 @@
       }
     },
     "node_modules/moddle-xml": {
-      "version": "9.0.5",
+      "version": "9.0.6",
-      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.6.tgz",
-      "integrity": "sha512-1t9N35ZMQZTYZmRDoh1mBVd0XwLB34BkBywNJ0+YlLLYxaDBjFR/I+fqwsY746ayYPBz6yNRg8JpLyFgNF+eHg==",
+      "integrity": "sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==",
       "dependencies": {
         "min-dash": "^3.5.2",
         "moddle": "^5.0.2",
@@ -8471,9 +8471,9 @@
       "dev": true
     },
     "node_modules/tiny-svg": {
-      "version": "2.2.3",
+      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.4.tgz",
-      "integrity": "sha512-u5KGg889pD1W2c9GlLrTnAGzIkAO00/VXZGyzeiGHw+b9er8McLO0SnhxPQQDwDqFO0MrJ825AEsRUoTiDZFuQ=="
+      "integrity": "sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ=="
     },
     "node_modules/tinydate": {
       "version": "1.3.0",
@@ -10489,9 +10489,9 @@
       }
     },
     "@bpmn-io/properties-panel": {
-      "version": "0.18.0",
+      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.19.0.tgz",
-      "integrity": "sha512-2OCc6QplFKlCG8hmsAuUvd0JJTPjGvTJ6zxO73R9TpnUw7PKsXq2oIJjJfWsNdmvpmkxeyHoklOf5XpQXFjygw==",
+      "integrity": "sha512-cw+MfA2gpCBsa9Q0+JT3Gc7OvR1NGXuyQj4yOk5QoQHNzxuIMNuz6EX2NvDsCrf0oSzc9z0FapbzDuJB+DSC1g==",
       "requires": {
         "@bpmn-io/feel-editor": "0.2.0",
         "classnames": "^2.3.1",
@@ -11408,26 +11408,26 @@
       }
     },
     "bpmn-js": {
-      "version": "9.2.2",
+      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.4.0.tgz",
-      "integrity": "sha512-Zs0e3fKEKIrnfVt+r4hkcqSg2XyMdXwp6x4xM0TDfGlduxyQWQ8rrqsjvnL4UEg4K0noBPqDce2vRawOilwReg==",
+      "integrity": "sha512-7dusZBYCFognA0TmspWaKZ47UjFhyRT+//hMdyLtPCKY1M0uAPXHoFv73MohlsEa7a75h0q6zjCj5W0/RHBwvg==",
       "requires": {
-        "bpmn-moddle": "^7.1.2",
+        "bpmn-moddle": "^7.1.3",
         "css.escape": "^1.5.1",
-        "diagram-js": "^8.5.0",
+        "diagram-js": "^8.9.0",
         "diagram-js-direct-editing": "^1.7.0",
         "ids": "^1.0.0",
         "inherits-browser": "0.0.1",
         "min-dash": "^3.5.2",
-        "min-dom": "^3.2.0",
+        "min-dom": "^3.2.1",
         "object-refs": "^0.3.0",
-        "tiny-svg": "^2.2.2"
+        "tiny-svg": "^2.2.4"
       }
     },
     "bpmn-js-properties-panel": {
-      "version": "1.4.0",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.5.0.tgz",
-      "integrity": "sha512-+15Yg7FohrdpDuKqegxU9OyGgYcH6sZM06DjwBLKrpqHgmXEXMA0yD0UI9Rc95P4mRfsT4rAzGpZjYnsYgOshg==",
+      "integrity": "sha512-0VAPk6xK/u+GepjGjt8HAXtBa2ab5o4Dkn5II8UgnFMoQThpvrsLras3vh1il8j/2vPhngAsfiA8z7Y9nJ6/Hw==",
       "requires": {
         "@bpmn-io/element-templates-validator": "^0.9.0",
         "@bpmn-io/extract-process-variables": "^0.5.0",
@@ -11441,13 +11441,13 @@
       }
     },
     "bpmn-moddle": {
-      "version": "7.1.2",
+      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz",
-      "integrity": "sha512-Sax4LokRCTqlg26njjULN3ZGtCmwH5gZVUZTRF0jwJk+YpMQhSfSoUECxjNv8OROoLxu8Z+MjdOHIxgvJf7KwA==",
+      "integrity": "sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==",
       "requires": {
         "min-dash": "^3.5.2",
         "moddle": "^5.0.2",
-        "moddle-xml": "^9.0.5"
+        "moddle-xml": "^9.0.6"
       }
     },
     "brace-expansion": {
@@ -11943,12 +11943,12 @@
       "dev": true
     },
     "diagram-js": {
-      "version": "8.5.0",
+      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.9.0.tgz",
-      "integrity": "sha512-UHA/Zfs7kG22M9wXAifAyPb2OZ4lG4lFi0CZ0GC6/lXmOsSHwHVZ1s/h9UqaIXnzIKW8SnZoP3Rwqel1ZhZLzg==",
+      "integrity": "sha512-577bUEbkwZ7id4SCXcD2qrlKoRPXry2SDSPt5T6tEOjwKrTllKr5d1HZoJzGws4VMQq5fmY51Gce1iFT9S4Dlw==",
       "requires": {
         "css.escape": "^1.5.1",
-        "didi": "^8.0.0",
+        "didi": "^8.0.1",
         "hammerjs": "^2.0.1",
         "inherits-browser": "0.0.1",
         "min-dash": "^3.5.2",
@@ -11968,9 +11968,9 @@
       }
     },
     "didi": {
-      "version": "8.0.0",
+      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.1.tgz",
-      "integrity": "sha512-PwqTBaYzzfJSyxvpXPcTWF6nDdCKx2mFAU5eup1ZSb5wbaAS9a/HiKdtcAUdie/VMLHoFI50jkYZcA+bhUOugw=="
+      "integrity": "sha512-7oXiXbp8DHE3FfQsVBkc2pwePo3Jy2uyGS9trAeBmfxiZAP4WV23LWokRpMmyl3hlu8OEAsyMxx19i5P6TVaJQ=="
     },
     "diff": {
       "version": "5.0.0",
@@ -14157,9 +14157,9 @@
       }
     },
     "moddle-xml": {
-      "version": "9.0.5",
+      "version": "9.0.6",
-      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.6.tgz",
-      "integrity": "sha512-1t9N35ZMQZTYZmRDoh1mBVd0XwLB34BkBywNJ0+YlLLYxaDBjFR/I+fqwsY746ayYPBz6yNRg8JpLyFgNF+eHg==",
+      "integrity": "sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==",
       "requires": {
         "min-dash": "^3.5.2",
         "moddle": "^5.0.2",
@@ -15527,9 +15527,9 @@
       "dev": true
     },
     "tiny-svg": {
-      "version": "2.2.3",
+      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.4.tgz",
-      "integrity": "sha512-u5KGg889pD1W2c9GlLrTnAGzIkAO00/VXZGyzeiGHw+b9er8McLO0SnhxPQQDwDqFO0MrJ825AEsRUoTiDZFuQ=="
+      "integrity": "sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ=="
     },
     "tinydate": {
       "version": "1.3.0",

package.json

@@ -73,9 +73,9 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "@bpmn-io/properties-panel": "^0.18.0",
+    "@bpmn-io/properties-panel": "^0.19.0",
-    "bpmn-js": "^9.2.2",
+    "bpmn-js": "^9.4.0",
-    "bpmn-js-properties-panel": "^1.2.0",
+    "bpmn-js-properties-panel": "^1.5.0",
     "diagram-js": "^8.5.0",
     "inherits": "^2.0.4",
     "inherits-browser": "^0.0.1",

test/spec/bpmn/basic_message.bpmn

@@ -6,6 +6,9 @@
     <bpmn:messageFlow id="message_send_flow" name="Message Send Flow" sourceRef="send_message" targetRef="receive_message" />
     <bpmn:messageFlow id="message_response_flow" name="Message Response Flow" sourceRef="respond_to_message" targetRef="receive_message_response" />
     <bpmn:correlationKey name="message_correlation_key">
+      <bpmn:correlationPropertyRef>correlation_property_one</bpmn:correlationPropertyRef>
+    </bpmn:correlationKey>
+    <bpmn:correlationKey name="new_key">
       <bpmn:correlationPropertyRef>message_correlation_property</bpmn:correlationPropertyRef>
     </bpmn:correlationKey>
   </bpmn:collaboration>
@@ -63,24 +66,17 @@
       <bpmn:messageEventDefinition id="MessageEventDefinition_0kakria" />
     </bpmn:intermediateThrowEvent>
   </bpmn:process>
+  <bpmn:correlationProperty id="correlation_property_one" name="Correlation Property One">
+    <bpmn:correlationPropertyRetrievalExpression messageRef="message_send">
+      <bpmn:formalExpression>new</bpmn:formalExpression>
+    </bpmn:correlationPropertyRetrievalExpression>
+  </bpmn:correlationProperty>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_0oye1os">
       <bpmndi:BPMNShape id="Participant_0bjh770_di" bpmnElement="message_initiator" isHorizontal="true">
         <dc:Bounds x="120" y="52" width="600" height="250" />
         <bpmndi:BPMNLabel />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="Flow_176e02g_di" bpmnElement="Flow_176e02g">
-        <di:waypoint x="215" y="177" />
-        <di:waypoint x="280" y="177" />
-      </bpmndi:BPMNEdge>
-      <bpmndi:BPMNEdge id="Flow_1qgz6p0_di" bpmnElement="Flow_1qgz6p0">
-        <di:waypoint x="478" y="177" />
-        <di:waypoint x="552" y="177" />
-      </bpmndi:BPMNEdge>
-      <bpmndi:BPMNEdge id="Flow_037vpjk_di" bpmnElement="Flow_037vpjk">
-        <di:waypoint x="380" y="177" />
-        <di:waypoint x="442" y="177" />
-      </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
         <dc:Bounds x="179" y="159" width="36" height="36" />
       </bpmndi:BPMNShape>
@@ -97,17 +93,21 @@
       <bpmndi:BPMNShape id="Event_0kndoyu_di" bpmnElement="Event_0kndoyu">
         <dc:Bounds x="552" y="159" width="36" height="36" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_037vpjk_di" bpmnElement="Flow_037vpjk">
+        <di:waypoint x="380" y="177" />
+        <di:waypoint x="442" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1qgz6p0_di" bpmnElement="Flow_1qgz6p0">
+        <di:waypoint x="478" y="177" />
+        <di:waypoint x="552" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_176e02g_di" bpmnElement="Flow_176e02g">
+        <di:waypoint x="215" y="177" />
+        <di:waypoint x="280" y="177" />
+      </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="Participant_0mr0gg1_di" bpmnElement="message_receiver" isHorizontal="true">
         <dc:Bounds x="120" y="350" width="600" height="250" />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="Flow_0505x87_di" bpmnElement="Flow_0505x87">
-        <di:waypoint x="248" y="480" />
-        <di:waypoint x="372" y="480" />
-      </bpmndi:BPMNEdge>
-      <bpmndi:BPMNEdge id="Flow_1273yit_di" bpmnElement="Flow_1273yit">
-        <di:waypoint x="408" y="480" />
-        <di:waypoint x="532" y="480" />
-      </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="Event_052nccg_di" bpmnElement="receive_message">
         <dc:Bounds x="212" y="462" width="36" height="36" />
         <bpmndi:BPMNLabel>
@@ -123,6 +123,14 @@
           <dc:Bounds x="362" y="505" width="57" height="27" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_0505x87_di" bpmnElement="Flow_0505x87">
+        <di:waypoint x="248" y="480" />
+        <di:waypoint x="372" y="480" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1273yit_di" bpmnElement="Flow_1273yit">
+        <di:waypoint x="408" y="480" />
+        <di:waypoint x="532" y="480" />
+      </bpmndi:BPMNEdge>
       <bpmndi:BPMNEdge id="Flow_1ueajoz_di" bpmnElement="message_send_flow">
         <di:waypoint x="300" y="217" />
         <di:waypoint x="300" y="340" />