feat: add hint for the process ID field in Camunda 7

Closes #1038

Author: prakashpalanisamy

src/provider/bpmn/properties/IdProps.js

@@ -13,7 +13,7 @@ import {
 
 import {
   isIdValid
-} from '../utils/ValidationUtil';
+} from '../../../utils/ValidationUtil';
 
 
 /**

src/provider/bpmn/properties/ProcessProps.js

@@ -10,7 +10,7 @@ import {
 
 import {
   isIdValid
-} from '../utils/ValidationUtil';
+} from '../../../utils/ValidationUtil';
 
 /**
  * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry

src/provider/camunda-platform/CamundaPlatformPropertiesProvider.js

@@ -20,6 +20,7 @@ import {
   FormDataProps,
   FormProps,
   HistoryCleanupProps,
+  IdProps,
   ImplementationProps,
   InitiatorProps,
   InMappingPropagationProps,
@@ -30,6 +31,7 @@ import {
   OutMappingPropagationProps,
   OutMappingProps,
   OutputProps,
+  ProcessProps,
   ExecutionListenerProps,
   TaskListenerProps,
   ProcessVariablesProps,
@@ -162,7 +164,17 @@ function updateGeneralGroup(groups, element) {
 
   const { entries } = generalGroup;
 
-  // (1) add version tag before executable (if existing)
+  // (1) replace id with camunda id
+  const idIndex = findIndex(entries, (entry) => entry.id === 'id');
+  entries.splice(idIndex, 1, ...IdProps());
+
+  // (2) replace processId with camunda processId (if existing)
+  const processIdIndex = findIndex(entries, (entry) => entry.id === 'processId');
+  if (processIdIndex && processIdIndex >= 0) {
+    entries.splice(processIdIndex, 1, ...ProcessProps({ element }));
+  }
+
+  // (3) add version tag before executable (if existing)
   const executableEntry = findIndex(entries, (entry) => entry.id === 'isExecutable');
   const insertIndex = executableEntry >= 0 ? executableEntry : entries.length;
 

src/provider/camunda-platform/properties/IdProps.js

@@ -0,0 +1,79 @@
+import {
+  getBusinessObject,
+  is
+} from 'bpmn-js/lib/util/ModelUtil';
+
+import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
+
+import { useCallback } from '@bpmn-io/properties-panel/preact/hooks';
+
+import {
+  useService
+} from '../../../hooks';
+
+import {
+  isIdValid
+} from '../../../utils/ValidationUtil';
+
+
+/**
+ * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+ */
+
+/**
+ * @returns {Array<Entry>} entries
+ */
+export function IdProps() {
+  return [
+    {
+      id: 'id',
+      component: Id,
+      isEdited: isTextFieldEntryEdited
+    }
+  ];
+}
+
+function Id(props) {
+  const {
+    element
+  } = props;
+
+  const modeling = useService('modeling');
+  const debounce = useService('debounceInput');
+  const translate = useService('translate');
+
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+
+    modeling.updateProperties(element, {
+      id: value
+    });
+  };
+
+  const getValue = useCallback((element) => {
+    return getBusinessObject(element).id;
+  }, [ element ]);
+
+  const validate = useCallback((value) => {
+    const businessObject = getBusinessObject(element);
+
+    return isIdValid(businessObject, value, translate);
+  }, [ element, translate ]);
+
+  const description = is(element, 'bpmn:Process') ?
+    translate('This maps to the process definition key.')
+    : null;
+
+  return TextFieldEntry({
+    element,
+    id: 'id',
+    label: translate(is(element, 'bpmn:Participant') ? 'Participant ID' : 'ID'),
+    getValue,
+    setValue,
+    debounce,
+    validate,
+    description
+  });
+}

src/provider/camunda-platform/properties/ProcessProps.js

@@ -0,0 +1,134 @@
+import { is } from 'bpmn-js/lib/util/ModelUtil';
+
+import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
+
+import { useCallback } from '@bpmn-io/properties-panel/preact/hooks';
+
+import {
+  useService
+} from '../../../hooks';
+
+import {
+  isIdValid
+} from '../../../utils/ValidationUtil';
+
+/**
+ * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+ */
+
+/**
+ * @returns {Array<Entry>} entries
+ */
+export function ProcessProps(props) {
+  const {
+    element
+  } = props;
+
+  if (!hasProcessRef(element)) {
+    return [];
+  }
+
+  return [
+    {
+      id: 'processId',
+      component: ProcessId,
+      isEdited: isTextFieldEntryEdited
+    },
+    {
+      id: 'processName',
+      component: ProcessName,
+      isEdited: isTextFieldEntryEdited
+    }
+  ];
+}
+
+function ProcessName(props) {
+  const { element } = props;
+
+  const commandStack = useService('commandStack');
+  const translate = useService('translate');
+  const debounce = useService('debounceInput');
+  const process = element.businessObject.get('processRef');
+
+  const getValue = () => {
+    return process.get('name');
+  };
+
+  const setValue = (value) => {
+    commandStack.execute(
+      'element.updateModdleProperties',
+      {
+        element,
+        moddleElement: process,
+        properties: {
+          name: value
+        }
+      }
+    );
+  };
+
+  return TextFieldEntry({
+    element,
+    id: 'processName',
+    label: translate('Process name'),
+    getValue,
+    setValue,
+    debounce
+  });
+}
+
+function ProcessId(props) {
+  const { element } = props;
+
+  const commandStack = useService('commandStack');
+  const translate = useService('translate');
+  const debounce = useService('debounceInput');
+  const process = element.businessObject.get('processRef');
+
+  const getValue = () => {
+    return process.get('id');
+  };
+
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+
+    commandStack.execute(
+      'element.updateModdleProperties',
+      {
+        element,
+        moddleElement: process,
+        properties: {
+          id: value
+        }
+      }
+    );
+  };
+
+  const validate = useCallback((value) => {
+    return isIdValid(process, value, translate);
+  }, [ process, translate ]);
+
+  const description = is(element, 'bpmn:Participant') ?
+    translate('This maps to the process definition key.')
+    : null;
+
+  return TextFieldEntry({
+    element,
+    id: 'processId',
+    label: translate('Process ID'),
+    getValue,
+    setValue,
+    debounce,
+    validate,
+    description
+  });
+}
+
+
+// helper ////////////////
+
+function hasProcessRef(element) {
+  return is(element, 'bpmn:Participant') && element.businessObject.get('processRef');
+}

src/provider/camunda-platform/properties/index.js

@@ -31,3 +31,5 @@ export { TasklistProps } from './TasklistProps';
 export { UserAssignmentProps } from './UserAssignmentProps';
 export { VersionTagProps } from './VersionTagProps';
 export { TimerProps } from './TimerProps';
+export { IdProps } from './IdProps';
+export { ProcessProps } from './ProcessProps';