adding the ability to see a list of messages that can be associated with a Send Task. (wip!)

app/spiffworkflow/messages/MessageHelpers.js

@@ -0,0 +1,33 @@
+/**
+ * loops up until it can find the root.
+ * @param element
+ */
+export function getRoot(element) {
+  if(element.$parent) {
+    return getRoot(element.$parent)
+  } else {
+    return element
+  }
+}
+
+export function findCorrelationKeys(element) {
+  const root = getRoot(element)
+  const correlationProperties = [];
+  for (const rootElement of root.rootElements) {
+    if (rootElement.$type === 'bpmn:CorrelationProperty') {
+      correlationProperties.push(rootElement);
+    }
+  }
+  return correlationProperties;
+}
+
+export function findMessages(element) {
+  const messages = [];
+  const root = getRoot(element)
+  for (const rootElement of root.rootElements) {
+    if (rootElement.$type === 'bpmn:Message') {
+      messages.push(rootElement);
+    }
+  }
+  return messages;
+}

app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js

@@ -9,16 +9,9 @@ import {
   findDataObjects,
   findDataReferenceShapes,
 } from '../../DataObject/DataObjectHelpers';
+import {findCorrelationKeys} from '../MessageHelpers';
+
 
-export function findCorrelationKeys(element) {
-  const correlationProperties = [];
-  for (const rootElement of element.businessObject.$parent.rootElements) {
-    if (rootElement.$type === 'bpmn:CorrelationProperty') {
-      correlationProperties.push(rootElement);
-    }
-  }
-  return correlationProperties;
-}
 
 /**
  * Provides a list of data objects, and allows you to add / remove data objects, and change their ids.
@@ -27,11 +20,11 @@ export function findCorrelationKeys(element) {
  */
 export function CorrelationKeysArray(props) {
   const { moddle } = props;
-  const { element } = props;
+  const { element } = props; // fixme:  Is it a shape or a moddle element?
   const { commandStack } = props;
   const { elementRegistry } = props;
 
-  const correlationProperties = findCorrelationKeys(element);
+  const correlationProperties = findCorrelationKeys(element.businessObject);
   const items = correlationProperties.map((correlationProperty, index) => {
     const id = `correlation-${correlationProperty.id}`;
     return {

app/spiffworkflow/messages/propertiesPanel/MessageSelect.js

@@ -0,0 +1,62 @@
+import {useService } from 'bpmn-js-properties-panel';
+import { SelectEntry } from '@bpmn-io/properties-panel';
+import {findMessages} from '../MessageHelpers';
+
+/**
+ * Allows the selection, or creation, of Message at the Definitions level of a BPMN document.
+ */
+export function MessageSelect(props) {
+  const shapeElement = props.element;
+  const commandStack = props.commandStack;
+  const debounce = useService('debounceInput');
+
+  const getValue = () => {
+    return "";
+  }
+
+  const setValue = value => {
+    return;
+    /*
+    const businessObject = element.businessObject;
+    for (const flowElem of businessObject.$parent.flowElements) {
+      if (flowElem.$type === 'bpmn:DataObject' && flowElem.id === value) {
+        commandStack.execute('element.updateModdleProperties', {
+          element,
+          moddleElement: businessObject,
+          properties: {
+            dataObjectRef: flowElem
+          }
+        });
+        commandStack.execute('element.updateProperties', {
+          element,
+          moddleElement: businessObject,
+          properties: {
+            'name': flowElem.id
+          }
+        });
+      }
+    }
+  */
+  }
+
+  const getOptions = value => {
+    const messages = findMessages(shapeElement.businessObject)
+    let options = []
+    for (const message of messages) {
+      options.push({label: message.id, value: message.name})
+    }
+    return options
+  }
+
+  return <SelectEntry
+    id={'selectMessage'}
+    element={shapeElement}
+    description={"Select the Message to associate with this task or event."}
+    label={"Which message is this associated with?"}
+    getValue={ getValue }
+    setValue={ setValue }
+    getOptions={ getOptions }
+    debounce={debounce}
+  />;
+
+}

app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js

@@ -7,6 +7,8 @@ import {
 import { useService } from 'bpmn-js-properties-panel';
 import { is, isAny } from 'bpmn-js/lib/util/ModelUtil';
 import { CorrelationKeysArray } from './CorrelationKeysArray';
+import {DataObjectSelect} from '../../DataObject/propertiesPanel/DataObjectSelect';
+import {MessageSelect} from './MessageSelect';
 
 // import { SpiffExtensionCalledDecision } from './SpiffExtensionCalledDecision';
 // import { SpiffExtensionTextInput } from './SpiffExtensionTextInput';
@@ -24,7 +26,9 @@ export default function MessagesPropertiesProvider(
       if (is(element, 'bpmn:Collaboration')) {
         groups.push(createCollaborationGroup(element, translate, moddle, commandStack, elementRegistry));
       }
-
+      if (is(element, 'bpmn:SendTask')) {
+        groups.push(createMessageGroup(element, translate, moddle, commandStack, elementRegistry));
+      }
       return groups;
     };
   };
@@ -125,3 +129,26 @@ function createCollaborationGroup(element, translate, moddle, commandStack, elem
     ...CorrelationKeysArray({ element, moddle, commandStack, elementRegistry }),
   };
 }
+
+/**
+ * Adds a group to the properties panel for editing messages for the SendTask
+ * @param element
+ * @param translate
+ * @returns The components to add to the properties panel. */
+function createMessageGroup(element, translate, moddle, commandStack, elementRegistry) {
+  return {
+    id: 'messages',
+    label: translate('Message'),
+    entries: [
+      {
+        id: 'selectMessage',
+        element,
+        component: MessageSelect,
+        isEdited: isTextFieldEntryEdited,
+        moddle,
+        commandStack,
+      },
+    ],
+  };
+}
+

karma.conf.js

@@ -28,7 +28,7 @@ module.exports = function(karma) {
       'test/spec/**/*Spec.js': [ 'webpack', 'env' ]
     },
 
-    browsers: [ 'Chrome' ],
+    browsers: [ 'ChromeHeadless' ],
 
     browserNoActivityTimeout: 30000,
 

test/spec/MessagesSpec.js

@@ -1,5 +1,5 @@
 import TestContainer from 'mocha-test-container-support';
-import { bootstrapPropertiesPanel, findGroupEntry } from './helpers';
+import {bootstrapPropertiesPanel, expectSelected, findEntry, findGroupEntry, findSelect} from './helpers';
 import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel';
 import spiffModdleExtension from '../../app/spiffworkflow/moddle/spiffworkflow.json';
 import messages from '../../app/spiffworkflow/messages';
@@ -33,4 +33,34 @@ describe('Messages should work', function() {
     expect(entry).to.exist;
   });
 
+  it('should show a Message Properties group when a send task is selected',async function() {
+
+    // Select the send Task
+    const send_shape = await expectSelected('ActivitySendLetter');
+    expect(send_shape, "Can't find Send Task").to.exist;
+
+    // THEN - a select Data Object section should appear in the properties panel
+    let entry = findGroupEntry('messages', container);
+    expect(entry, "Can't find the message group in the properties panel").to.exist;
+  });
+
+  it('should show a list of messages in a drop down inside the message group',async function() {
+
+    // Select the send Task
+    const send_shape = await expectSelected('ActivitySendLetter');
+    expect(send_shape, "Can't find Send Task").to.exist;
+
+    // THEN - there are two options to choose from.
+    let entry = findEntry('selectMessage', container);
+    expect(entry, "Can't find the message select list").to.exist;
+
+    // AND - There should be two entries in it, one for each message.
+    let selector = findSelect(entry);
+    expect(selector).to.exist;
+    expect(selector.length).to.equal(2);
+
+
+  });
+
+
 });

test/spec/helpers.js

@@ -12,11 +12,13 @@ import { bootstrapBpmnJS, inject, insertCSS } from 'bpmn-js/test/helper';
 import {getBusinessObject} from 'bpmn-js/lib/util/ModelUtil';
 import {createMoveEvent} from 'diagram-js/lib/features/mouse/Mouse';
 
-let PROPERTIES_PANEL_CONTAINER;
+export let PROPERTIES_PANEL_CONTAINER;
+export let CONTAINER;
 
 export function bootstrapPropertiesPanel(diagram, options, locals) {
   return async function() {
     let container = options.container;
+    CONTAINER = container;
     if (!container) {
       container = TestContainer.get(this);
     }