From 23c39745f2c86efe148c942b4190ea0aa2c7eb1b Mon Sep 17 00:00:00 2001 From: "Palanisamy, Prakash" Date: Thu, 2 May 2024 15:08:54 +0530 Subject: [PATCH] feat: add hint for the process ID field in Camunda 7 Closes #1038 --- src/provider/bpmn/properties/IdProps.js | 2 +- src/provider/bpmn/properties/ProcessProps.js | 2 +- .../CamundaPlatformPropertiesProvider.js | 14 +- .../camunda-platform/properties/IdProps.js | 79 +++++++++++ .../properties/ProcessProps.js | 134 ++++++++++++++++++ .../camunda-platform/properties/index.js | 2 + .../bpmn => }/utils/ValidationUtil.js | 0 7 files changed, 230 insertions(+), 3 deletions(-) create mode 100644 src/provider/camunda-platform/properties/IdProps.js create mode 100644 src/provider/camunda-platform/properties/ProcessProps.js rename src/{provider/bpmn => }/utils/ValidationUtil.js (100%) diff --git a/src/provider/bpmn/properties/IdProps.js b/src/provider/bpmn/properties/IdProps.js index 08af5fb9b..870ae33bd 100644 --- a/src/provider/bpmn/properties/IdProps.js +++ b/src/provider/bpmn/properties/IdProps.js @@ -13,7 +13,7 @@ import { import { isIdValid -} from '../utils/ValidationUtil'; +} from '../../../utils/ValidationUtil'; /** diff --git a/src/provider/bpmn/properties/ProcessProps.js b/src/provider/bpmn/properties/ProcessProps.js index 2cbb663ad..df3dd8942 100644 --- a/src/provider/bpmn/properties/ProcessProps.js +++ b/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 diff --git a/src/provider/camunda-platform/CamundaPlatformPropertiesProvider.js b/src/provider/camunda-platform/CamundaPlatformPropertiesProvider.js index 88238c2d9..b51dd34e9 100644 --- a/src/provider/camunda-platform/CamundaPlatformPropertiesProvider.js +++ b/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; diff --git a/src/provider/camunda-platform/properties/IdProps.js b/src/provider/camunda-platform/properties/IdProps.js new file mode 100644 index 000000000..a4837eccb --- /dev/null +++ b/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} 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 + }); +} \ No newline at end of file diff --git a/src/provider/camunda-platform/properties/ProcessProps.js b/src/provider/camunda-platform/properties/ProcessProps.js new file mode 100644 index 000000000..30fcdcb04 --- /dev/null +++ b/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} 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'); +} \ No newline at end of file diff --git a/src/provider/camunda-platform/properties/index.js b/src/provider/camunda-platform/properties/index.js index c02f0b5ed..a0e3b60fc 100644 --- a/src/provider/camunda-platform/properties/index.js +++ b/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'; diff --git a/src/provider/bpmn/utils/ValidationUtil.js b/src/utils/ValidationUtil.js similarity index 100% rename from src/provider/bpmn/utils/ValidationUtil.js rename to src/utils/ValidationUtil.js