chore(zeebe): override default message component

bpmn-io · Mar 17, 2022 · 134fb40 · 134fb40
1 parent a6cae5c
commit 134fb40
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 11 deletions.
diff --git a/src/provider/zeebe/ZeebePropertiesProvider.js b/src/provider/zeebe/ZeebePropertiesProvider.js
@@ -215,10 +215,10 @@ function updateMessageGroup(groups, element) {
     return;
   }
 
-  messageGroup.entries = [
-    ...messageGroup.entries,
-    ...MessageProps({ element })
-  ];
+  messageGroup.entries = overrideGenericEntries(
+    messageGroup.entries,
+    MessageProps({ element })
+  );
 }
 
 // overwrite bpmn generic timerEventDefinition group with zeebe-specific one
@@ -264,3 +264,22 @@ function removeMessageGroup(groups, element) {
 function findGroup(groups, id) {
   return groups.find(g => g.id === id);
 }
+
+/**
+ * Replace generic bpmn components with specific zeebe ones.
+ *
+ * @param {Array} oldEntries
+ * @param {Array} newEntries
+ * @returns {Array} combined entries
+ */
+function overrideGenericEntries(oldEntries, newEntries) {
+
+  const filteredEntries = oldEntries.filter(oldEntry => (
+    !newEntries.find(newEntry => newEntry.id === oldEntry.id)
+  ));
+
+  return [
+    ...filteredEntries,
+    ...newEntries
+  ];
+}
diff --git a/src/provider/zeebe/properties/MessageProps.js b/src/provider/zeebe/properties/MessageProps.js
@@ -32,21 +32,65 @@ export function MessageProps(props) {
 
   const message = getMessage(element);
 
-  if (!message || !canHaveSubscriptionCorrelationKey(element)) {
-    return [];
-  }
-
   const entries = [
     {
-      id: 'messageSubscriptionCorrelationKey',
-      component: SubscriptionCorrelationKey,
+      id: 'messageName',
+      component: MessageName,
       isEdited: isTextFieldEntryEdited
-    },
+    }
   ];
 
+  if (!message || !canHaveSubscriptionCorrelationKey(element)) {
+    return entries;
+  }
+
+  entries.push({
+    id: 'messageSubscriptionCorrelationKey',
+    component: SubscriptionCorrelationKey,
+    isEdited: isTextFieldEntryEdited
+  });
+
   return entries;
 }
 
+
+function MessageName(props) {
+  const { element } = props;
+
+  const commandStack = useService('commandStack');
+  const translate = useService('translate');
+  const debounce = useService('debounceInput');
+
+  const message = getMessage(element);
+
+  const getValue = () => {
+    return message.get('name');
+  };
+
+  const setValue = (value) => {
+    return commandStack.execute(
+      'element.updateModdleProperties',
+      {
+        element,
+        moddleElement: message,
+        properties: {
+          name: value
+        }
+      }
+    );
+  };
+
+  return TextFieldEntry({
+    element,
+    id: 'messageName',
+    label: translate('Name'),
+    feel: 'optional',
+    getValue,
+    setValue,
+    debounce
+  });
+}
+
 function SubscriptionCorrelationKey(props) {
   const { element } = props;
 
@@ -126,6 +170,7 @@ function SubscriptionCorrelationKey(props) {
     element,
     id: 'messageSubscriptionCorrelationKey',
     label: translate('Subscription correlation key'),
+    feel: 'required',
     getValue,
     setValue,
     debounce

diff --git a/test/spec/provider/zeebe/MessageProps.spec.js b/test/spec/provider/zeebe/MessageProps.spec.js
@@ -70,6 +70,106 @@ describe('provider/zeebe - MessageProps', function() {
   }));
 
 
+  describe('bpmn:StartEvent#messageRef.name', function() {
+
+    it('should display', inject(async function(elementRegistry, selection) {
+
+      // given
+      const messageEvent = elementRegistry.get('StartEvent_1');
+
+      await act(() => {
+        selection.select(messageEvent);
+      });
+
+      // when
+      const messageNameInput = domQuery('input[name=messageName]', container);
+
+      // then
+      expect(messageNameInput.value).to.eql(getMessage(messageEvent).get('name'));
+    }));
+
+
+    it('should display feel icon', inject(async function(elementRegistry, selection) {
+
+      // given
+      const messageEvent = elementRegistry.get('StartEvent_1');
+
+      await act(() => {
+        selection.select(messageEvent);
+      });
+
+      // when
+      const messageNameIcon = domQuery('[data-entry-id="messageName"] .bio-properties-panel-feel-icon', container);
+
+      // then
+      expect(messageNameIcon).to.exist;
+    }));
+
+
+    it('should update', inject(async function(elementRegistry, selection) {
+
+      // given
+      const messageEvent = elementRegistry.get('StartEvent_1');
+
+      await act(() => {
+        selection.select(messageEvent);
+      });
+
+      // when
+      const messageNameInput = domQuery('input[name=messageName]', container);
+      changeInput(messageNameInput, 'newValue');
+
+      // then
+      expect(getMessage(messageEvent).get('name')).to.eql('newValue');
+    }));
+
+
+    it('should update on external change',
+      inject(async function(elementRegistry, selection, commandStack) {
+
+        // given
+        const messageEvent = elementRegistry.get('StartEvent_1');
+        const originalValue = getMessage(messageEvent).get('name');
+
+        await act(() => {
+          selection.select(messageEvent);
+        });
+        const messageNameInput = domQuery('input[name=messageName]', container);
+        changeInput(messageNameInput, 'newValue');
+
+        // when
+        await act(() => {
+          commandStack.undo();
+        });
+
+        // then
+        expect(messageNameInput.value).to.eql(originalValue);
+      })
+    );
+
+
+    it('should not blow up on empty message name', inject(async function(elementRegistry, selection) {
+
+      // given
+      const messageEvent = elementRegistry.get('StartEvent_1');
+
+      await act(() => {
+        selection.select(messageEvent);
+      });
+
+      // when
+      const messageNameInput = domQuery('input[name=messageName]', container);
+      await act(() => {
+        changeInput(messageNameInput, '');
+      });
+
+      // then
+      expect(getMessage(messageEvent).get('name')).to.eql(undefined);
+    }));
+
+  });
+
+
   describe('bpmn:StartEvent#messageRef.subscription.correlationKey', function() {
 
     it('should NOT display for start event', inject(async function(elementRegistry, selection) {