feat: add _Binding_ entry

Related to camunda/camunda-modeler#4385
bpmn-io · Jul 29, 2024 · d8b04e6 · d8b04e6
1 parent 1f307be
commit d8b04e6
Show file tree

Hide file tree

Showing 11 changed files with 444 additions and 4 deletions.
diff --git a/src/contextProvider/zeebe/TooltipProvider.js b/src/contextProvider/zeebe/TooltipProvider.js
@@ -278,6 +278,23 @@ const TooltipProvider = {
         </p>
       </div>
     );
+  },
+  'bindingType': (element) => {
+
+    const translate = useService('translate');
+
+    return (
+      <div>
+        <p>
+          <h1>{ translate('Latest binding') }</h1>
+          { translate('Uses the most recent deployed resource.') }
+        </p>
+        <p>
+          <h1>{ translate('Deployment binding') }</h1>
+          { translate('Uses the resource found in the same deployment.') }
+        </p>
+      </div>
+    );
   }
 };
 

diff --git a/src/provider/HOCs/index.js b/src/provider/HOCs/index.js
@@ -1,2 +1,3 @@
+export { withProps } from './withProps';
 export { withVariableContext } from './withVariableContext';
 export { withTooltipContainer } from './withTooltipContainer';
diff --git a/src/provider/HOCs/withProps.js b/src/provider/HOCs/withProps.js
@@ -0,0 +1,5 @@
+export function withProps(Component, otherProps) {
+  return props => {
+    return <Component { ...props } { ...otherProps } />;
+  };
+}
diff --git a/src/provider/zeebe/properties/CalledDecisionProps.js b/src/provider/zeebe/properties/CalledDecisionProps.js
@@ -4,10 +4,14 @@ import {
 } from 'bpmn-js/lib/util/ModelUtil';
 
 import {
-  TextFieldEntry, isTextFieldEntryEdited,
-  isFeelEntryEdited
+  isFeelEntryEdited,
+  isSelectEntryEdited,
+  isTextFieldEntryEdited,
+  TextFieldEntry
 } from '@bpmn-io/properties-panel';
 
+import Binding from './shared/Binding';
+
 import {
   getExtensionElementsList
 } from '../../../utils/ExtensionElementsUtil';
@@ -20,6 +24,7 @@ import { useService } from '../../../hooks';
 
 import { FeelEntryWithVariableContext } from '../../../entries/FeelEntryWithContext';
 
+import { withProps } from '../../HOCs/withProps.js';
 
 
 export function CalledDecisionProps(props) {
@@ -37,6 +42,11 @@ export function CalledDecisionProps(props) {
       component: DecisionID,
       isEdited: isFeelEntryEdited
     },
+    {
+      id: 'bindingType',
+      component: withProps(Binding, { type: 'zeebe:CalledDecision' }),
+      isEdited: isSelectEntryEdited
+    },
     {
       id: 'resultVariable',
       component: ResultVariable,

diff --git a/src/provider/zeebe/properties/FormProps.js b/src/provider/zeebe/properties/FormProps.js
@@ -13,10 +13,13 @@ import {
   TextFieldEntry,
   TextAreaEntry,
   isFeelEntryEdited,
+  isSelectEntryEdited,
   isTextFieldEntryEdited,
   isTextAreaEntryEdited
 } from '@bpmn-io/properties-panel';
 
+import Binding from './shared/Binding';
+
 import { FeelEntryWithVariableContext } from '../../../entries/FeelEntryWithContext';
 
 import { createElement } from '../../../utils/ElementUtil';
@@ -34,6 +37,8 @@ import {
   userTaskFormIdToFormKey
 } from '../utils/FormUtil';
 
+import { withProps } from '../../HOCs';
+
 const NONE_VALUE = 'none';
 
 
@@ -78,6 +83,14 @@ export function FormProps(props) {
     });
   }
 
+  if (formType === FORM_TYPES.CAMUNDA_FORM_LINKED) {
+    entries.push({
+      id: 'bindingType',
+      component: withProps(Binding, { type: 'zeebe:FormDefinition' }),
+      isEdited: isSelectEntryEdited
+    });
+  }
+
   return entries;
 }
 

diff --git a/src/provider/zeebe/properties/TargetProps.js b/src/provider/zeebe/properties/TargetProps.js
@@ -4,9 +4,12 @@ import {
 } from 'bpmn-js/lib/util/ModelUtil';
 
 import {
-  isFeelEntryEdited
+  isFeelEntryEdited,
+  isSelectEntryEdited
 } from '@bpmn-io/properties-panel';
 
+import Binding from './shared/Binding';
+
 import {
   createElement
 } from '../../../utils/ElementUtil';
@@ -20,6 +23,8 @@ import { useService } from '../../../hooks';
 
 import { FeelEntryWithVariableContext } from '../../../entries/FeelEntryWithContext';
 
+import { withProps } from '../../HOCs/withProps.js';
+
 
 export function TargetProps(props) {
   const {
@@ -35,6 +40,11 @@ export function TargetProps(props) {
       id: 'targetProcessId',
       component: TargetProcessId,
       isEdited: isFeelEntryEdited
+    },
+    {
+      id: 'bindingType',
+      component: withProps(Binding, { type: 'zeebe:CalledElement' }),
+      isEdited: isSelectEntryEdited
     }
   ];
 }
@@ -128,4 +138,4 @@ function TargetProcessId(props) {
     setValue,
     debounce
   });
-}
+}
diff --git a/src/provider/zeebe/properties/shared/Binding.js b/src/provider/zeebe/properties/shared/Binding.js
@@ -0,0 +1,112 @@
+import { getBusinessObject } from 'bpmn-js/lib/util/ModelUtil';
+
+import { SelectEntry } from '@bpmn-io/properties-panel';
+
+import { createElement } from '../../../../utils/ElementUtil';
+
+import { useService } from '../../../../hooks';
+
+import { getExtensionElementsList } from '../../../../utils/ExtensionElementsUtil';
+
+export default function Binding(props) {
+  const {
+    element,
+    type
+  } = props;
+
+  const bpmnFactory = useService('bpmnFactory'),
+        commandStack = useService('commandStack'),
+        translate = useService('translate');
+
+  const getValue = () => {
+    const businessObject = getBusinessObject(element);
+
+    const extensionElement = getExtensionElementsList(businessObject, type)[ 0 ];
+
+    if (!extensionElement) {
+      return 'latest';
+    }
+
+    return extensionElement.get('bindingType');
+  };
+
+  const setValue = value => {
+    const commands = [];
+
+    const businessObject = getBusinessObject(element);
+
+    // (1) ensure extension elements
+    let extensionElements = businessObject.get('extensionElements');
+
+    if (!extensionElements) {
+      extensionElements = createElement(
+        'bpmn:ExtensionElements',
+        { values: [] },
+        businessObject,
+        bpmnFactory
+      );
+
+      commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+          element,
+          moddleElement: businessObject,
+          properties: { extensionElements }
+        }
+      });
+    }
+
+    // (2) ensure extension element
+    let extensionElement = getExtensionElementsList(businessObject, type)[ 0 ];
+
+    if (!extensionElement) {
+      extensionElement = createElement(
+        type,
+        {},
+        extensionElements,
+        bpmnFactory
+      );
+
+      commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+          element,
+          moddleElement: extensionElements,
+          properties: {
+            values: [ ...extensionElements.get('values'), extensionElement ]
+          }
+        }
+      });
+
+    }
+
+    // (3) Update bindingType attribute
+    commands.push({
+      cmd: 'element.updateModdleProperties',
+      context: {
+        element,
+        moddleElement: extensionElement,
+        properties: {
+          bindingType: value
+        }
+      }
+    });
+
+    // (4) Execute the commands
+    commandStack.execute('properties-panel.multi-command-executor', commands);
+  };
+
+  const getOptions = () => ([
+    { value: 'latest', label: translate('latest') },
+    { value: 'deployment', label: translate('deployment') }
+  ]);
+
+  return <SelectEntry
+    element={ element }
+    id="bindingType"
+    label={ translate('Binding') }
+    getValue={ getValue }
+    setValue={ setValue }
+    getOptions={ getOptions }
+  />;
+}
diff --git a/src/provider/zeebe/utils/CalledElementUtil.js b/src/provider/zeebe/utils/CalledElementUtil.js
@@ -25,6 +25,12 @@ export function getProcessId(element) {
   return calledElement ? calledElement.get('processId') : '';
 }
 
+export function getBindingType(element) {
+  const calledElement = getCalledElement(element);
+
+  return calledElement ? calledElement.get('bindingType') : '';
+}
+
 export function getCalledElement(element) {
   const calledElements = getCalledElements(element);
   return calledElements[0];

diff --git a/test/spec/provider/zeebe/CalledDecisionProps.spec.js b/test/spec/provider/zeebe/CalledDecisionProps.spec.js
@@ -153,6 +153,98 @@ describe('provider/zeebe - CalledDecisionProps', function() {
     });
 
 
+    describe('#calledDecision.bindingType', function() {
+
+      it('should display', inject(async function(elementRegistry, selection) {
+
+        // given
+        const businessRuleTask = elementRegistry.get('BusinessRuleTask_1');
+
+        // assume
+        const bindingType = getBindingType(businessRuleTask);
+
+        expect(bindingType).to.equal('latest');
+
+        // when
+        await act(() => {
+          selection.select(businessRuleTask);
+        });
+
+        const bindingTypeSelect = domQuery('select[name=bindingType]', container);
+
+        // then
+        expect(bindingTypeSelect).to.exist;
+
+        expect(bindingTypeSelect.value).to.equal('latest');
+      }));
+
+
+      it('should not display', inject(async function(elementRegistry, selection) {
+
+        // given
+        const task = elementRegistry.get('Task_1');
+
+        // when
+        await act(() => {
+          selection.select(task);
+        });
+
+        const bindingTypeSelect = domQuery('select[name=bindingType]', container);
+
+        // then
+        expect(bindingTypeSelect).not.to.exist;
+      }));
+
+
+      it('should update', inject(async function(elementRegistry, selection) {
+
+        // given
+        const businessRuleTask = elementRegistry.get('BusinessRuleTask_1');
+
+        await act(() => {
+          selection.select(businessRuleTask);
+        });
+
+        const bindingTypeSelect = domQuery('select[name=bindingType]', container);
+
+        // when
+        changeInput(bindingTypeSelect, 'deployment');
+
+        // then
+        const bindingType = getBindingType(businessRuleTask);
+
+        expect(bindingType).to.equal('deployment');
+      }));
+
+
+      it('should update on external change',
+        inject(async function(elementRegistry, selection, commandStack) {
+
+          // given
+          const businessRuleTask = elementRegistry.get('BusinessRuleTask_1'),
+                originalValue = getBindingType(businessRuleTask);
+
+          await act(() => {
+            selection.select(businessRuleTask);
+          });
+
+          const bindingTypeSelect = domQuery('select[name=bindingType]', container);
+
+          changeInput(bindingTypeSelect, 'deployment');
+
+          // when
+          await act(() => {
+            commandStack.undo();
+          });
+
+          // then
+          expect(getBindingType(businessRuleTask)).to.eql(originalValue);
+        })
+      );
+
+    });
+
+
     describe('#calledDecision.resultVariable', function() {
 
       it('should display', inject(async function(elementRegistry, selection) {
@@ -255,6 +347,12 @@ export function getDecisionId(element) {
   return calledDecision ? calledDecision.get('decisionId') : '';
 }
 
+export function getBindingType(element) {
+  const calledDecision = getCalledDecision(element);
+
+  return calledDecision ? calledDecision.get('bindingType') : '';
+}
+
 export function getResultVariable(element) {
   const calledDecision = getCalledDecision(element);