diff --git a/src/provider/bpmn/properties/MessageProps.js b/src/provider/bpmn/properties/MessageProps.js index bd8969dc1..fc9dea903 100644 --- a/src/provider/bpmn/properties/MessageProps.js +++ b/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,8 +71,13 @@ 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'); @@ -78,7 +85,7 @@ function MessageRef(props) { const messageEventDefinition = getMessageEventDefinition(element); - const getValue = () => { + const _getValue = getValue(() => { const message = getMessage(element); if (message) { @@ -86,9 +93,9 @@ function MessageRef(props) { } 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('') }, @@ -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'); diff --git a/test/spec/BpmnPropertiesPanelRenderer.spec.js b/test/spec/BpmnPropertiesPanelRenderer.spec.js index 79b2e5b3f..3bab8e888 100644 --- a/test/spec/BpmnPropertiesPanelRenderer.spec.js +++ b/test/spec/BpmnPropertiesPanelRenderer.spec.js @@ -45,6 +45,7 @@ import CamundaModdle from 'camunda-bpmn-moddle/resources/camunda'; import ZeebeModdle from 'zeebe-bpmn-moddle/resources/zeebe'; import ExamplePropertiesProvider from './extension/ExamplePropertiesProvider'; +import GetterSetterValidateProvider from './extension/GetterSetterValidateProvider'; import DescriptionProvider from 'src/contextProvider/zeebe/DescriptionProvider'; @@ -965,6 +966,42 @@ describe('', 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 = [ + CamundaBehaviorsModule, + 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'); + }); + }); }); diff --git a/test/spec/extension/GetterSetterValidateProvider.js b/test/spec/extension/GetterSetterValidateProvider.js new file mode 100644 index 000000000..6804475ed --- /dev/null +++ b/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); +} \ No newline at end of file