test: verify properties panel works in read-only mode

[nikku]

Context: https://github.com/camunda/web-modeler/issues/7623.

What is left is three issues:

• Custom styling (marking fields as disabled)
• Disabling form element focus (may need to be solved in properties panel)
• Hiding (+) buttons

---

For the readonly properties panel case I could imagine to build dedicated support into the core:

const modelerWithReadonlyPropertiesPanel = new BpmnModeler({
  propertiesPanel: {
    readonly: true
  }
});

This would do the following:

• mark inputs and checkboxes as readonly
• do not show add markers for sections

...and would in the process solve the issue of editing and focus on the HTML level.

[nikku]

@nithinssabu the results of our exploration.

Try it out via

git clone git@github.com:bpmn-io/bpmn-js-properties-panel.git
cd bpmn-js-properties-panel
npm install 
npm run dev

[nithinssabu]

@nikku If I try to dynamically attach the properties panel like this,

const propertiesPanel = modeler.get('propertiesPanel');
propertiesPanel.attachTo(propertiesContainer);

getting the following error,

Can you please have a look? I spent quite some time on it.

[nikku]

@nithinssabu We touched upon that issue yesterday already. It can also be reproduced in this test case. We currently rely on a "modeling ammended" $model to verify if IDs are valid:

bpmn-js-properties-panel/src/provider/bpmn/utils/ValidationUtil.js

Line 18 in 14597b8

export function isIdValid(element, idValue, translate) {

.

The ids are wired here and we want to mock them for the read-only panel.

[nikku]

@nithinssabu For context, please share the web modeler issue you're currently working on.

[philippfromme]

We already have styles for disabled="true" inputs, we're just not setting that attribute which we could based on the configuration.

[nithinssabu]

For context, please share the web modeler issue you're currently working on.

https://github.com/camunda/web-modeler/issues/7623

[nithinssabu]

@nikku Can I get permission to push changes to this branch?

[nithinssabu]

For my use case, I also need to get linting to work in the read-only mode. Currently getting the following error:

Error: No provider for "elementTemplates"! (Resolving: elementTemplates -> elementTemplates -> elementTemplates)
    at error (index.esm.js:136:1)
    at Object.get (index.esm.js:122:1)
    at NavigatedViewer.get (index.esm.js:176:1)
    at createModeler (BpmnPropertiesPanelRenderer.readonly.spec.js:142:35)
    at async Context.eval (BpmnPropertiesPanelRenderer.readonly.spec.js:177:20)

I pushed a commit reproducing this in the current test case. Can you please help me workaround this problem?

[nithinssabu]

Currently getting the following error:

I managed to get it to work by providing the CloudElementTemplatesPropertiesProviderModule 341d403 ✅

[nithinssabu]

What is left is three issues:

• Custom styling (marking fields as disabled)
• Disabling form element focus (may need to be solved in properties panel)
• Hiding (+) buttons

I was able to solve these using CSS and for the keyboard focus, using Javascript to set the readonly attribute on the input elements. Also, used MutationObserver to set this when the panel is re-drawn. d8563b9

Screen.Recording.2024-01-15.at.18.50.47.mov

@philippfromme I used readonly attribute instead of disabled because with disabled, it was not possible to tab through the elements. The user may want to focus the inputs and may be copy the value?

[nikku]

Web modeler shipped without core support. Moving to backlog to track future improvement options.