wip example override messageRef component

Related to #737

src/provider/bpmn/properties/MessageProps.js

@@ -28,6 +28,8 @@ import {
 export const EMPTY_OPTION = '';
 export const CREATE_NEW_OPTION = 'create-new';
 
+const noop = (fn) => fn;
+
 
 /**
  * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
@@ -69,26 +71,31 @@ export function MessageProps(props) {
   return entries;
 }
 
-function MessageRef(props) {
-  const { element } = props;
+export function MessageRef(props) {
+  const {
+    element,
+    getOptions = noop,
+    getValue = noop,
+    setValue = noop
+  } = props;
 
   const bpmnFactory = useService('bpmnFactory');
   const commandStack = useService('commandStack');
   const translate = useService('translate');
 
   const messageEventDefinition = getMessageEventDefinition(element);
 
-  const getValue = () => {
+  const _getValue = getValue(() => {
     const message = getMessage(element);
 
     if (message) {
       return message.get('id');
     }
 
     return EMPTY_OPTION;
-  };
+  });
 
-  const setValue = (value) => {
+  const _setValue = setValue((value) => {
     const root = getRoot(messageEventDefinition);
     const commands = [];
 
@@ -135,9 +142,9 @@ function MessageRef(props) {
 
     // (3) commit all updates
     return commandStack.execute('properties-panel.multi-command-executor', commands);
-  };
+  });
 
-  const getOptions = () => {
+  const _getOptions = getOptions(() => {
 
     let options = [
       { value: EMPTY_OPTION, label: translate('<none>') },
@@ -154,20 +161,20 @@ function MessageRef(props) {
     });
 
     return options;
-  };
+  });
 
   return ReferenceSelect({
     element,
     id: 'messageRef',
     label: translate('Global message reference'),
     autoFocusEntry: 'messageName',
-    getValue,
-    setValue,
-    getOptions
+    getValue: _getValue,
+    setValue: _setValue,
+    getOptions: _getOptions
   });
 }
 
-function MessageName(props) {
+export function MessageName(props) {
   const { element } = props;
 
   const commandStack = useService('commandStack');

test/spec/BpmnPropertiesPanelRenderer.spec.js

@@ -44,6 +44,7 @@ import ZeebeModdle from 'zeebe-bpmn-moddle/resources/zeebe';
 import ZeebeModdleExtension from 'zeebe-bpmn-moddle/lib';
 
 import ExamplePropertiesProvider from './extension/ExamplePropertiesProvider';
+import GetterSetterValidateProvider from './extension/GetterSetterValidateProvider';
 
 import DescriptionProvider from 'src/contextProvider/zeebe/DescriptionProvider';
 
@@ -964,6 +965,42 @@ describe('<BpmnPropertiesPanelRenderer>', function() {
       expect(domQuery('input[name="versionTag"]', propertiesContainer).value).to.eql('foo');
     });
 
+
+    it('should override existing component', async function() {
+
+      // given
+      const diagramXml = require('test/fixtures/service-task.bpmn').default;
+
+      const modules = [
+        CamundaModdleExtension,
+        BpmnPropertiesPanel,
+        BpmnPropertiesProvider,
+        CamundaPropertiesProvider,
+        GetterSetterValidateProvider
+      ];
+
+      let modeler;
+      await act(async () => {
+        const result = await createModeler(diagramXml, {
+          additionalModules: modules,
+          moddleExtensions: { camunda: CamundaModdle }
+        });
+
+        modeler = result.modeler;
+      });
+
+      const selection = modeler.get('selection');
+      const elementRegistry = modeler.get('elementRegistry');
+
+      // when
+      await act(() => {
+        selection.select(elementRegistry.get('StartEvent_1'));
+      });
+
+      // then
+      expect(domQuery('select[name="messageRef"]', propertiesContainer).value).to.eql('create-new');
+    });
+
   });
 
 });

test/spec/extension/GetterSetterValidateProvider.js

@@ -0,0 +1,76 @@
+import { MessageRef, CREATE_NEW_OPTION } from '../../../src/provider/bpmn/properties/MessageProps';
+
+class GetterSetterValidateProvider {
+  constructor(propertiesPanel) {
+    propertiesPanel.registerProvider(500, this);
+  }
+
+  getGroups() {
+    return (groups) => {
+
+      const messageGroup = findGroup(groups, 'message');
+
+      if (!messageGroup) {
+        return groups;
+      }
+
+      let messageRef = findEntry(messageGroup, 'messageRef');
+
+      if (!messageRef) {
+        return groups;
+      }
+
+      messageRef.component = CustomMessageRef;
+
+      return groups;
+    };
+  }
+}
+
+function CustomMessageRef(props) {
+
+  const getValue = () => {
+    return () => {
+
+      // override default getter
+      return CREATE_NEW_OPTION;
+    };
+  };
+
+  const setValue = (defaultSetter) => {
+    return (value) => {
+
+      // notify
+      alert(`messageRef is set: ${value}!`);
+
+      // execute default setter
+      return defaultSetter(value);
+    };
+  };
+
+  return MessageRef({
+    ...props,
+    getValue,
+    setValue
+  });
+}
+
+GetterSetterValidateProvider.$inject = [ 'propertiesPanel' ];
+
+export default {
+  __init__: [
+    'getterSetterValidateProvider'
+  ],
+  getterSetterValidateProvider: [ 'type', GetterSetterValidateProvider ]
+};
+
+
+// helper /////////////
+
+function findGroup(groups, id) {
+  return groups.find(g => g.id === id);
+}
+
+function findEntry(group, id) {
+  return group.entries.find(e => e.id === id);
+}