feat(bpmn): persist layout across sessions

client/package.json

@@ -11,7 +11,7 @@
     "@bpmn-io/dmn-migrate": "^0.4.3",
     "@bpmn-io/extract-process-variables": "^0.8.0",
     "@bpmn-io/form-js": "^0.14.0",
-    "@bpmn-io/properties-panel": "^1.7.0",
+    "@bpmn-io/properties-panel": "^1.8.1",
     "@bpmn-io/replace-ids": "^0.2.0",
     "@camunda/execution-platform": "^0.3.2",
     "@camunda/form-linting": "^0.6.1",
@@ -26,7 +26,7 @@
     "@ibm/plex": "^6.0.0",
     "@sentry/browser": "^6.3.6",
     "bpmn-js": "^12.0.0",
-    "bpmn-js-properties-panel": "^1.19.1",
+    "bpmn-js-properties-panel": "^1.21.0",
     "bpmn-moddle": "^8.0.1",
     "camunda-bpmn-js": "^2.1.1",
     "camunda-bpmn-moddle": "^7.0.1",

client/src/app/App.js

@@ -19,6 +19,7 @@ import {
   groupBy,
   isString,
   map,
+  merge,
   reduce
 } from 'min-dash';
 
@@ -766,10 +767,9 @@ export class App extends PureComponent {
       layout
     } = this.state;
 
-    this.setLayout({
-      ...layout,
-      ...newLayout
-    });
+    const latestLayout = merge({}, layout, newLayout);
+
+    this.setLayout(latestLayout);
   };
 
 

client/src/app/tabs/bpmn/BpmnEditor.js

@@ -133,6 +133,7 @@ export class BpmnEditor extends CachedComponent {
     this.handleResize = debounce(this.handleResize);
 
     this.handleLintingDebounced = debounce(this.handleLinting.bind(this));
+    this.handlePropertiesPanelLayoutChange = this.handlePropertiesPanelLayoutChange.bind(this);
   }
 
   async componentDidMount() {
@@ -156,6 +157,10 @@ export class BpmnEditor extends CachedComponent {
 
     const propertiesPanel = modeler.get('propertiesPanel');
 
+    if (layout.propertiesPanel) {
+      propertiesPanel.setLayout(layout.propertiesPanel);
+    }
+
     propertiesPanel.attachTo(this.propertiesPanelRef.current);
 
 
@@ -222,13 +227,21 @@ export class BpmnEditor extends CachedComponent {
 
     modeler[fn]('minimap.toggle', this.handleMinimapToggle);
 
+    modeler[fn]('propertiesPanel.layoutChanged', this.handlePropertiesPanelLayoutChange);
+
     if (fn === 'on') {
       modeler[ fn ]('commandStack.changed', LOW_PRIORITY, this.handleLintingDebounced);
     } else if (fn === 'off') {
       modeler[ fn ]('commandStack.changed', this.handleLintingDebounced);
     }
   }
 
+  handlePropertiesPanelLayoutChange(e) {
+    this.handleLayoutChange({
+      propertiesPanel: e.layout
+    });
+  }
+
   async loadTemplates() {
     const { getConfig } = this.props;
 
@@ -890,6 +903,9 @@ export class BpmnEditor extends CachedComponent {
       changeTemplateCommand: 'propertiesPanel.camunda.changeTemplate',
       linting: {
         active: layout.panel && layout.panel.open && layout.panel.tab === 'linting'
+      },
+      propertiesPanel: {
+        layout: layout.propertiesPanel
       }
     });
 

client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js

@@ -1189,6 +1189,79 @@ describe('<BpmnEditor>', function() {
 
     });
 
+
+    it('should supply layout to properties panel', async function() {
+
+      // given
+      const propertiesPanelLayout = {
+        open: true,
+        groups: {
+          customGroup: {
+            open: true
+          }
+        }
+      };
+
+      const layout = {
+        propertiesPanel: propertiesPanelLayout
+      };
+
+      // when
+      const { instance } = await renderEditor(diagramXML, {
+        layout
+      });
+
+
+      // then
+      const modeler = instance.getModeler();
+
+      expect(modeler.options.propertiesPanel.layout).to.exist;
+      expect(modeler.options.propertiesPanel.layout).to.eql(propertiesPanelLayout);
+
+    });
+
+
+    it('should update cached layout', async function() {
+
+      // given
+      const cache = new Cache();
+
+      const modeler = new BpmnModeler({
+        propertiesPanel: {
+          layout: { }
+        }
+      });
+
+      cache.add('editor', {
+        cached: {
+          modeler: modeler
+        },
+        __destroy: () => {}
+      });
+
+      const propertiesPanel = modeler.get('propertiesPanel');
+
+      const layoutSpy = spy(propertiesPanel, 'setLayout');
+
+      // when
+      await renderEditor(diagramXML, {
+        id: 'editor',
+        cache,
+        layout: {
+          propertiesPanel: {
+            groups: {
+              general: {
+                open: true
+              }
+            }
+          }
+        }
+      });
+
+      // then
+      expect(layoutSpy).to.have.been.called;
+    });
+
   });
 
 

client/src/app/tabs/cloud-bpmn/BpmnEditor.js

@@ -121,6 +121,8 @@ export class BpmnEditor extends CachedComponent {
     this.handleResize = debounce(this.handleResize);
 
     this.handleLintingDebounced = debounce(this.handleLinting.bind(this));
+
+    this.handlePropertiesPanelLayoutChange = this.handlePropertiesPanelLayoutChange.bind(this);
   }
 
   async componentDidMount() {
@@ -144,6 +146,10 @@ export class BpmnEditor extends CachedComponent {
 
     const propertiesPanel = modeler.get('propertiesPanel');
 
+    if (layout.propertiesPanel) {
+      propertiesPanel.setLayout(layout.propertiesPanel);
+    }
+
     propertiesPanel.attachTo(this.propertiesPanelRef.current);
 
 
@@ -210,13 +216,21 @@ export class BpmnEditor extends CachedComponent {
 
     modeler[fn]('minimap.toggle', this.handleMinimapToggle);
 
+    modeler[fn]('propertiesPanel.layoutChanged', this.handlePropertiesPanelLayoutChange);
+
     if (fn === 'on') {
       modeler[ fn ]('commandStack.changed', LOW_PRIORITY, this.handleLintingDebounced);
     } else if (fn === 'off') {
       modeler[ fn ]('commandStack.changed', this.handleLintingDebounced);
     }
   }
 
+  handlePropertiesPanelLayoutChange(e) {
+    this.handleLayoutChange({
+      propertiesPanel: e.layout
+    });
+  }
+
   async loadTemplates() {
     const { getConfig } = this.props;
 
@@ -847,7 +861,8 @@ export class BpmnEditor extends CachedComponent {
         active: layout.panel && layout.panel.open && layout.panel.tab === 'linting'
       },
       propertiesPanel: {
-        feelTooltipContainer: '.editor'
+        feelTooltipContainer: '.editor',
+        layout: layout.propertiesPanel
       },
       elementTemplateChooser: false
     });

client/src/app/tabs/cloud-bpmn/__tests__/BpmnEditorSpec.js

@@ -1110,6 +1110,79 @@ describe('cloud-bpmn - <BpmnEditor>', function() {
 
     });
 
+
+    it('should supply layout to properties panel', async function() {
+
+      // given
+      const propertiesPanelLayout = {
+        open: true,
+        groups: {
+          customGroup: {
+            open: true
+          }
+        }
+      };
+
+      const layout = {
+        propertiesPanel: propertiesPanelLayout
+      };
+
+      // when
+      const { instance } = await renderEditor(diagramXML, {
+        layout
+      });
+
+
+      // then
+      const modeler = instance.getModeler();
+
+      expect(modeler.options.propertiesPanel.layout).to.exist;
+      expect(modeler.options.propertiesPanel.layout).to.eql(propertiesPanelLayout);
+
+    });
+
+
+    it('should update cached layout', async function() {
+
+      // given
+      const cache = new Cache();
+
+      const modeler = new BpmnModeler({
+        propertiesPanel: {
+          layout: { }
+        }
+      });
+
+      cache.add('editor', {
+        cached: {
+          modeler: modeler
+        },
+        __destroy: () => {}
+      });
+
+      const propertiesPanel = modeler.get('propertiesPanel');
+
+      const layoutSpy = spy(propertiesPanel, 'setLayout');
+
+      // when
+      await renderEditor(diagramXML, {
+        id: 'editor',
+        cache,
+        layout: {
+          propertiesPanel: {
+            groups: {
+              general: {
+                open: true
+              }
+            }
+          }
+        }
+      });
+
+      // then
+      expect(layoutSpy).to.have.been.called;
+    });
+
   });
 
 

client/test/mocks/bpmn-js/Modeler.js

@@ -59,6 +59,8 @@ class PropertiesPanel {
   detach() {}
 
   update() {}
+
+  setLayout() {}
 }
 
 class Linting {