Process-editor: Enable editing of taskID in config panel

[nkylstad]

Description

It should be possible to edit the ID of a process element in the config panel.

Suggestion for config panel

After some experimentation and googling, I found a relatively simple way to use the modeler in the bpmn-js package to make the changes in the XML without having to implement the bpmn-js-properties-panel package:

import React, { useEffect } from 'react';
import { Textfield } from '@digdir/design-system-react';
import { useBpmnContext } from '../../../contexts/BpmnContext';

export const EditElementId = () => {
  const { bpmnDetails, setBpmnDetails, modelerRef } = useBpmnContext();
  const modeler = modelerRef.current;
  const modeling: any = modeler.get('modeling');

  const [idValue, setIdValue] = React.useState(bpmnDetails.id);

  useEffect(() => {
    setIdValue(bpmnDetails.id);
  }, [bpmnDetails.id]);

  const updateId = (value: string) => {
    modeling.updateProperties(bpmnDetails.element, {
      id: value
    });
    setBpmnDetails({
      ...bpmnDetails,
      id: value
    });
  }

  if (!bpmnDetails || !bpmnDetails.id) return null;

  return <Textfield
    label='ID'
    value={idValue}
    onChange={(e: any) => setIdValue(e.target.value)}
    onBlur={(e: any) => updateId(e.target.value)}
  />;
}

Should probably use the same design for ID here as for components.

[framitdavid]

Great suggestion! 👏 Perhaps useBpmnContext could directly export the modeling object?

[framitdavid]

waiting for #12494 is merged due to up-cooming conflicts.

[framitdavid]

This issue does implement metaDataForm to be sent along with the BPMN XML to inform the backend about what kind of changes have been made within the XML. So that should be verified during testing of this issue as well. Hence I have closed issue #12218, due to it is resolved by this issue.

[framitdavid]

Tested OK in dev and @standeren has used the feature when implementing her feature.