Commit for Dan to play with

app/spiffworkflow/messages/propertiesPanel/MessageCorrelations.js

@@ -1,5 +1,5 @@
 import { useService } from 'bpmn-js-properties-panel';
-import { ListGroup, TextAreaEntry } from '@bpmn-io/properties-panel';
+import { isTextFieldEntryEdited, ListGroup, TextAreaEntry, TextFieldEntry } from '@bpmn-io/properties-panel';
 import { findFormalExpressions, getRoot } from '../MessageHelpers';
 import { findCorrelationKeys } from '../MessageHelpers';
 import { CorrelationKeysArray } from './CorrelationKeysArray';
@@ -8,32 +8,119 @@ import translate from 'diagram-js/lib/i18n/translate';
 /**
  * Allows the creation, or editing of messageCorrelations at the bpmn:sendTask level of a BPMN document.
  */
-export function MessageCorrelations(props) {
-  const shapeElement = props.element;
+export function MessageCorrelationsArray(props) {
+  const { moddle } = props;
+  const { element } = props; // fixme:  Is it a shape or a moddle element?
   const { commandStack } = props;
-  const debounce = useService('debounceInput');
-  const translate = useService('translate');
+  const { elementRegistry } = props;
 
-  const getValue = () => {
-    const formalExpressions = findFormalExpressions(shapeElement.businessObject)
-    return formalExpressions
-  };
+  const formalExpressions = findFormalExpressions(element.businessObject);
+  const items = formalExpressions.map((formalExpression, index) => {
+    const id = `correlation-${formalExpression.correlationId}`;
+    const entries = MessageCorrelationGroup({
+      idPrefix: id,
+      element,
+      formalExpression,
+    })
+    return {
+      id,
+      label: formalExpression.correlationId,
+      entries: entries,
+      autoFocusEntry: id,
+      // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry })
+    };
+  });
 
-  const setValue = (value) => {
-    return;
-  };
+  function add(event) {}
 
-
-  return (
-    <TextAreaEntry
-      id="messageCorrelations"
-      element={shapeElement}
-      description="The message correlations"
-      label="Correlations"
-      getValue={getValue}
-      setValue={setValue}
-      debounce={debounce}
-    />
-  );
+  return { items, add }
 
 }
+
+function MessageCorrelationGroup(props) {
+  const { idPrefix, formalExpression } = props;
+
+  return [
+    {
+      id: `${idPrefix}-group`,
+      component: MessageCorrelationTextField,
+      isEdited: isTextFieldEntryEdited,
+      idPrefix,
+      formalExpression,
+    },
+  ];
+}
+
+function MessageCorrelationTextField(props) {
+  const { idPrefix, element, parameter, formalExpression } = props;
+
+  const commandStack = useService('commandStack');
+  const debounce = useService('debounceInput');
+
+  const setValue = (value) => {
+    commandStack.execute('element.updateModdleProperties', {
+      element,
+      moddleElement: formalExpression,
+      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) => {
+    return formalExpression.name;
+  };
+
+  return TextFieldEntry({
+    element: parameter,
+    id: `${idPrefix}-textField`,
+    label: 'Message Correlation',
+    getValue,
+    setValue,
+    debounce,
+  });
+}
+
+// export function MessageCorrelations(props) {
+//   const shapeElement = props.element;
+//   const { commandStack } = props;
+//   const debounce = useService('debounceInput');
+//   const translate = useService('translate');
+//
+//   const getValue = () => {
+//     const formalExpressions = findFormalExpressions(shapeElement.businessObject)
+//     return formalExpressions
+//   };
+//
+//   const setValue = (value) => {
+//     return;
+//   };
+//
+//
+//   return (
+//     <TextAreaEntry
+//       id="messageCorrelations"
+//       element={shapeElement}
+//       description="The message correlations"
+//       label="Correlations"
+//       getValue={getValue}
+//       setValue={setValue}
+//       debounce={debounce}
+//     />
+//   );
+//
+// }

app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js

@@ -10,7 +10,7 @@ import { CorrelationKeysArray } from './CorrelationKeysArray';
 import {DataObjectSelect} from '../../DataObject/propertiesPanel/DataObjectSelect';
 import {MessageSelect} from './MessageSelect';
 import {MessagePayload} from './MessagePayload';
-import { MessageCorrelations } from './MessageCorrelations';
+import { MessageCorrelations, MessageCorrelationsArray } from './MessageCorrelations';
 
 // import { SpiffExtensionCalledDecision } from './SpiffExtensionCalledDecision';
 // import { SpiffExtensionTextInput } from './SpiffExtensionTextInput';
@@ -161,7 +161,7 @@ function createMessageGroup(element, translate, moddle, commandStack, elementReg
       {
         id: 'messageCorrelations',
         element,
-        component: MessageCorrelations,
+        component: MessageCorrelationsArray,
         isEdited: isTextFieldEntryEdited,
         moddle,
         commandStack,

test/spec/MessagesSpec.js

@@ -84,7 +84,7 @@ describe('Messages should work', function() {
     expect(send_shape, "Can't find Send Task").to.exist;
 
     // THEN - there are correlations.
-    let correlations = findTextarea('bio-properties-panel-messageCorrelations', container);
+    let correlations = findEntry('messageCorrelations', container);
     expect(correlations, "Can't find the message correlations").to.exist;
 
     console.log("Message Correlations: ");