Update DMN deps and integrate boxed expression viewer

CHANGELOG.md

@@ -10,13 +10,26 @@ ___Note:__ Yet to be released changes appear here._
 
 * `DEPS`: update to `bpmn-js-element-templates@1.15.1`
 * `DEPS`: update to `camunda-bpmn-js@4.5.1`
+* `DEPS`: update to `camunda-dmn-js@2.3.1`
+* `DEPS`: update to `dmn-js@16.3.0`
 
 ### BPMN
 
 * `FIX`: prevent infinite loop when applying conditional template ([bpmn-io/bpmn-js-element-templates#78](https://github.com/bpmn-io/bpmn-js-element-templates/issues/78))
 * `FIX`: preserve valid user input when changing element template ([bpmn-io/bpmn-js-element-templates#86](https://github.com/bpmn-io/bpmn-js-element-templates/pull/86), [#4249](https://github.com/camunda/camunda-modeler/issues/4249))
 * `FIX`: mark non-object JSON as invalid example data ([example-data-properties-provider#17](https://github.com/camunda/example-data-properties-provider/pull/17))
 
+### DMN
+
+* `FEAT`: context pad position absolute instead of relative to element ([bpmn-io/diagram-js#888](https://github.com/bpmn-io/diagram-js/pull/888))
+* `FEAT`: do not scale context pad and popup menu by default ([bpmn-io/diagram-js#883](https://github.com/bpmn-io/diagram-js/pull/883))
+* `FEAT`: add support for implementing BKM as literal expression ([bpmn-io/dmn-js#704](https://github.com/bpmn-io/dmn-js/issues/704), [bpmn-io/dmn-js#826](https://github.com/bpmn-io/dmn-js/issues/826))
+* `FEAT`: remove background for DRGElements ([bpmn-io/dmn-js#855](https://github.com/bpmn-io/dmn-js/pull/855))
+* `FEAT`: allow to provide accessible names to form fields ([bpmn-io/dmn-js#843](https://github.com/bpmn-io/dmn-js/pull/843))
+* `FIX`: add accessible names to multiple components ([bpmn-io/dmn-js#843](https://github.com/bpmn-io/dmn-js/pull/843))
+* `FIX`: improve contrast
+* `FIX`: make table cells visible to screen readers ([bpmn-io/dmn-js#821](https://github.com/bpmn-io/dmn-js/issue/821))
+
 ## 5.22.0
 
 ### General

client/package.json

@@ -34,7 +34,7 @@
     "camunda-bpmn-js": "^4.5.1",
     "camunda-bpmn-moddle": "^7.0.1",
     "camunda-cmmn-moddle": "^1.0.0",
-    "camunda-dmn-js": "^2.1.0",
+    "camunda-dmn-js": "^2.3.1",
     "camunda-dmn-moddle": "^1.3.0",
     "canvg": "^4.0.1",
     "classnames": "^2.5.1",
@@ -45,8 +45,9 @@
     "diagram-js": "^14.0.0",
     "diagram-js-direct-editing": "^2.1.2",
     "diagram-js-origin": "^1.4.0",
-    "dmn-js": "^16.0.2",
+    "dmn-js": "^16.3.0",
     "dmn-js-properties-panel": "^3.3.0",
+    "dmn-js-shared": "^16.3.0",
     "drag-tabs": "^2.3.1",
     "events": "^3.0.0",
     "formik": "2.0.4",

client/src/app/tabs/cloud-dmn/DmnEditor.js

@@ -42,6 +42,7 @@ import CamundaDmnModeler from './modeler';
 import { active as isInputActive } from '../../../util/dom/isInput';
 
 import {
+  getDmnBoxedExpressionEditMenu,
   getDmnDrdEditMenu,
   getDmnDecisionTableEditMenu,
   getDmnLiteralExpressionEditMenu
@@ -445,6 +446,22 @@ export class DmnEditor extends CachedComponent {
       newState.inputActive = true;
 
       editMenu = getDmnLiteralExpressionEditMenu(newState);
+    } else if (activeView.type === 'boxedExpression') {
+
+      // TODO(@barmac): handle boxed expression differently than literal expression when needed
+      assign(newState, {
+        defaultCopyCutPaste: true,
+        defaultUndoRedo: true,
+        removeSelected: true,
+        selectAll: true
+      });
+
+      // The boxedExpression editor does not fire events when
+      // elements are selected, so we always set inputActive to true.
+      // cf. https://github.com/camunda/camunda-modeler/pull/2394
+      newState.inputActive = true;
+
+      editMenu = getDmnBoxedExpressionEditMenu(newState);
     }
 
     // ensure backwards compatibility

client/src/app/tabs/cloud-dmn/__tests__/DmnEditorSpec.js

@@ -126,6 +126,35 @@ describe('<DmnEditor>', function() {
 
   describe('plugins', function() {
 
+    it('should accept <boxedExpression> plugins', async function() {
+
+      // given
+      const additionalModule = {
+        __init__: [ 'foo' ],
+        foo: [ 'type', noop ]
+      };
+
+      // when
+      const {
+        instance
+      } = await renderEditor(diagramXML, {
+        getPlugins(type) {
+          switch (type) {
+          case 'dmn.modeler.boxedExpression.additionalModules':
+            return [ additionalModule ];
+          }
+
+          return [];
+        }
+      });
+
+      // then
+      const { modeler } = instance.getCached();
+
+      expect(modeler.modules.boxedExpression.additionalModules).to.include(additionalModule);
+    });
+
+
     it('should accept <drd> plugins', async function() {
 
       // given
@@ -904,6 +933,62 @@ describe('<DmnEditor>', function() {
 
       });
 
+
+      describe('boxed expression', function() {
+
+        it('Remove shortcut should always have role: delete', async function() {
+
+          // given
+          const changedSpy = sinon.spy();
+
+          const { instance } = await renderEditor(diagramXML, {
+            onChanged: changedSpy
+          });
+
+          changedSpy.resetHistory();
+
+          // when
+          const modeler = instance.getModeler();
+
+          modeler.open({ type: 'boxedExpression' });
+          instance.handleChanged();
+
+          // then
+          expect(changedSpy).to.be.calledOnce;
+
+          const state = changedSpy.firstCall.args[0];
+
+          expect(hasMenuEntry(state.editMenu, 'Remove Selected')).to.be.true;
+          expect(getMenuEntry(state.editMenu, 'Remove Selected').role).to.equal('delete');
+        });
+
+
+        it('should NOT provide find entries', async function() {
+
+          // given
+          const changedSpy = sinon.spy();
+
+          const { instance } = await renderEditor(diagramXML, {
+            onChanged: changedSpy
+          });
+
+          changedSpy.resetHistory();
+
+          // when
+          const modeler = instance.getModeler();
+
+          modeler.open({ type: 'boxedExpression' });
+          instance.handleChanged();
+
+          // then
+          expect(changedSpy).to.be.calledOnce;
+
+          const state = changedSpy.firstCall.args[0];
+          expect(hasMenuEntry(state.editMenu, 'Find')).to.be.false;
+        });
+
+      });
+
     });
 
 
@@ -963,6 +1048,33 @@ describe('<DmnEditor>', function() {
       });
 
 
+      it('should provide toggle/reset overview entries for boxed expression', async function() {
+
+        // given
+        const changedSpy = sinon.spy();
+
+        const { instance } = await renderEditor(diagramXML, {
+          onChanged: changedSpy
+        });
+
+        changedSpy.resetHistory();
+
+        // when
+        const modeler = instance.getModeler();
+
+        modeler.open({ type: 'boxedExpression' });
+        instance.handleChanged();
+
+        // then
+        expect(changedSpy).to.be.calledOnce;
+
+        const state = changedSpy.firstCall.args[0];
+
+        expect(hasMenuEntry(state.windowMenu, 'Toggle Overview')).to.be.true;
+        expect(hasMenuEntry(state.windowMenu, 'Reset Overview')).to.be.true;
+      });
+
+
       it('should NOT provide toggle/reset overview entries for DRD', async function() {
 
         // given

client/src/app/tabs/cloud-dmn/modeler/DmnModeler.js

@@ -59,6 +59,13 @@ export default class CamundaDmnModeler extends DmnModeler {
 
     super({
       ...otherOptions,
+      boxedExpression: mergeModules(otherOptions.boxedExpression, [
+        poweredByModule,
+        executionPlatformModule,
+        {
+          viewDrd: NOOP_MODULE
+        }
+      ]),
       drd: mergeModules(drd, [
         propertiesPanelKeyboardBindingsModule,
         executionPlatformModule

client/src/app/tabs/dmn/DmnEditor.js

@@ -42,6 +42,7 @@ import CamundaDmnModeler from './modeler';
 import { active as isInputActive } from '../../../util/dom/isInput';
 
 import {
+  getDmnBoxedExpressionEditMenu,
   getDmnDrdEditMenu,
   getDmnDecisionTableEditMenu,
   getDmnLiteralExpressionEditMenu
@@ -445,6 +446,22 @@ export class DmnEditor extends CachedComponent {
       newState.inputActive = true;
 
       editMenu = getDmnLiteralExpressionEditMenu(newState);
+    } else if (activeView.type === 'boxedExpression') {
+
+      // TODO(@barmac): handle boxed expression differently than literal expression when needed
+      assign(newState, {
+        defaultCopyCutPaste: true,
+        defaultUndoRedo: true,
+        removeSelected: true,
+        selectAll: true
+      });
+
+      // The boxedExpression editor does not fire events when
+      // elements are selected, so we always set inputActive to true.
+      // cf. https://github.com/camunda/camunda-modeler/pull/2394
+      newState.inputActive = true;
+
+      editMenu = getDmnBoxedExpressionEditMenu(newState);
     }
 
     // ensure backwards compatibility