Implement variable suggestions

packages/dmn-js-decision-table/package.json

@@ -30,6 +30,7 @@
     "inferno-test-utils": "~5.6.2"
   },
   "dependencies": {
+    "@bpmn-io/dmn-variable-resolver": "^0.3.1",
     "css.escape": "^1.5.1",
     "diagram-js": "^12.0.0",
     "dmn-js-shared": "^14.4.1",

packages/dmn-js-decision-table/src/Editor.js

@@ -1,3 +1,4 @@
+import { DmnVariableResolverModule } from '@bpmn-io/dmn-variable-resolver';
 import Viewer from './Viewer';
 
 import addRuleModule from './features/add-rule';
@@ -76,7 +77,8 @@ export default class Editor extends Viewer {
       simpleDurationEditModule,
       simpleNumberEditModule,
       simpleStringEditModule,
-      simpleTimeEditModule
+      simpleTimeEditModule,
+      DmnVariableResolverModule
     ];
   }
 

packages/dmn-js-decision-table/src/features/decision-rules/components/DecisionRulesCellEditorComponent.js

@@ -124,6 +124,7 @@ class TableCellEditor extends Component {
 
     this._expressionLanguages = context.injector.get('expressionLanguages');
     this._translate = context.injector.get('translate');
+    this._variableResolver = context.injector.get('variableResolver', false);
   }
 
   isDefaultExpressionLanguage(businessObject) {
@@ -187,6 +188,13 @@ class TableCellEditor extends Component {
       this.getDefaultExpressionLanguage(businessObject).value;
   }
 
+  _getVariables() {
+    const { businessObject } = this.props;
+
+    return this._variableResolver &&
+      this._variableResolver.getVariables(businessObject);
+  }
+
   render() {
     const {
       businessObject,
@@ -204,6 +212,7 @@ class TableCellEditor extends Component {
     const isScript = this.isScript(businessObject);
 
     const Editor = this.getEditor();
+    const variables = this._getVariables();
 
     return (
       <div className="cell-editor">
@@ -217,6 +226,7 @@ class TableCellEditor extends Component {
           onInput={ onChange }
           value={ value }
           placeholder={ placeholder }
+          variables={ variables }
         />
         {
           !isDefaultExpressionLanguage && (

packages/dmn-js-decision-table/src/features/decision-table-head/editor/components/InputCellContextMenu.js

@@ -79,6 +79,7 @@ export default class InputCellContextMenu extends Component {
       <InputEditor
         label={ this.getValue('label') }
         text={ this.getValue('text') }
+        element={ this.props.context.input }
         onChange={ this.handleChange } />
     );
   }

packages/dmn-js-decision-table/src/features/decision-table-head/editor/components/InputEditor.js

@@ -10,6 +10,7 @@ export default class InputEditor extends Component {
 
     this.translate = context.injector ? context.injector.get('translate') : noopTranslate;
     this.expressionLanguages = context.injector.get('expressionLanguages', false);
+    this.variableResolver = context.injector.get('variableResolver', false);
 
     this.handleValue = (text) => {
 
@@ -54,6 +55,11 @@ export default class InputEditor extends Component {
     }
   };
 
+  _getVariables() {
+    return this.variableResolver &&
+      this.variableResolver.getVariables(this.props.element);
+  }
+
   render() {
 
     const {
@@ -63,6 +69,8 @@ export default class InputEditor extends Component {
 
     const ExpressionEditor = this.getExpressionEditorComponent();
 
+    const variables = this._getVariables();
+
     return (
       <div className="context-menu-container ref-input-editor input-edit"
         onKeyDown={ this.handleKeyDown }>
@@ -92,7 +100,8 @@ export default class InputEditor extends Component {
               ].join(' ')
             }
             onInput={ this.handleValue }
-            value={ text || '' } />
+            value={ text || '' }
+            variables={ variables } />
         </div>
       </div>
     );

packages/dmn-js-decision-table/test/spec/features/decision-rules/DecisionRulesEditorSpec.js

@@ -2,6 +2,8 @@ import { bootstrapModeler, inject, act } from 'test/helper';
 
 import { query as domQuery } from 'min-dom';
 
+import { DmnVariableResolverModule } from '@bpmn-io/dmn-variable-resolver';
+
 import { triggerInputEvent } from 'dmn-js-shared/test/util/EventUtil';
 
 import { queryEditor } from 'dmn-js-shared/test/util/EditorUtil';
@@ -367,6 +369,44 @@ describe('features/decision-rules', function() {
 
   });
 
+
+  describe('integration', function() {
+
+    beforeEach(bootstrapModeler(emptyRuleXML, {
+      modules: [
+        CoreModule,
+        ModelingModule,
+        DecisionRulesModule,
+        DecisionRulesEditorModule,
+        DmnVariableResolverModule
+      ],
+      debounceInput: false
+    }));
+
+
+    it('should pass variables to editor', async function() {
+
+      // given
+      const editor = queryEditor('[data-element-id="unaryTest_1"]', testContainer);
+
+      await act(() => editor.focus());
+
+      // when
+      await changeInput(document.activeElement, 'Var');
+
+      // then
+      await expectEventually(() => {
+        const options = testContainer.querySelectorAll('[role="option"]');
+
+        expect(options).to.exist;
+        expect(options).to.satisfy(options => {
+          const result = Array.from(options).some(
+            option => option.textContent === 'Variable');
+          return result;
+        });
+      });
+    });
+  });
 });
 
 // helpers //////////////////
@@ -390,4 +430,19 @@ function isFirefox() {
 
 function skipFF() {
   return isFirefox() ? it.only : it;
-}
+}
+
+async function expectEventually(fn) {
+  for (let i = 0; i < 10; i++) {
+    try {
+      await act(() => {});
+      await fn();
+      return;
+    } catch (e) {
+
+      // wait
+    }
+  }
+
+  return fn();
+}

packages/dmn-js-decision-table/test/spec/features/decision-rules/empty-rule.dmn

@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" id="definitions_1y78itg" name="definitions" namespace="http://camunda.org/schema/1.0/dmn" exporter="dmn-js (https://demo.bpmn.io/dmn)" exporterVersion="7.4.1">
+<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" xmlns:dmndi="https://www.omg.org/spec/DMN/20191111/DMNDI/" xmlns:dc="http://www.omg.org/spec/DMN/20180521/DC/" xmlns:di="http://www.omg.org/spec/DMN/20180521/DI/" id="definitions_1y78itg" name="definitions" namespace="http://camunda.org/schema/1.0/dmn" exporter="Camunda Modeler" exporterVersion="5.11.0">
   <decision id="decision_1" name="decision_1">
+    <informationRequirement id="InformationRequirement_1rlyhoa">
+      <requiredInput href="#InputData_0kmeexs" />
+    </informationRequirement>
     <decisionTable id="decisionTable_1">
       <input id="input1" label="">
         <inputExpression id="inputExpression1" typeRef="string">
@@ -18,4 +21,20 @@
       </rule>
     </decisionTable>
   </decision>
+  <inputData id="InputData_0kmeexs" name="Variable" />
+  <dmndi:DMNDI>
+    <dmndi:DMNDiagram id="DMNDiagram_1s7fwgc">
+      <dmndi:DMNShape id="DMNShape_0p7qsmy" dmnElementRef="decision_1">
+        <dc:Bounds height="80" width="180" x="150" y="80" />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape id="DMNShape_0ow358g" dmnElementRef="InputData_0kmeexs">
+        <dc:Bounds height="45" width="125" x="177" y="217" />
+      </dmndi:DMNShape>
+      <dmndi:DMNEdge id="DMNEdge_07npi6i" dmnElementRef="InformationRequirement_1rlyhoa">
+        <di:waypoint x="240" y="217" />
+        <di:waypoint x="240" y="180" />
+        <di:waypoint x="240" y="160" />
+      </dmndi:DMNEdge>
+    </dmndi:DMNDiagram>
+  </dmndi:DMNDI>
 </definitions>

packages/dmn-js-decision-table/test/spec/features/decision-table-head/editor/input/InputEditor.dmn

@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" xmlns:camunda="http://camunda.org/schema/1.0/dmn" id="definitions" name="definitions" namespace="http://camunda.org/schema/1.0/dmn">
+<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" xmlns:camunda="http://camunda.org/schema/1.0/dmn" xmlns:dmndi="https://www.omg.org/spec/DMN/20191111/DMNDI/" xmlns:dc="http://www.omg.org/spec/DMN/20180521/DC/" xmlns:di="http://www.omg.org/spec/DMN/20180521/DI/" id="definitions" name="definitions" namespace="http://camunda.org/schema/1.0/dmn" exporter="Camunda Modeler" exporterVersion="5.11.0">
   <decision id="decision" name="Check Order">
+    <informationRequirement id="InformationRequirement_1klmiyt">
+      <requiredInput href="#InputData_1j8tsl1" />
+    </informationRequirement>
     <decisionTable id="decisionTable">
       <input id="input1" label="Customer Status" camunda:inputVariable="">
         <inputExpression id="inputExpression1" typeRef="string" expressionLanguage="">
@@ -86,4 +89,20 @@ else
       </rule>
     </decisionTable>
   </decision>
+  <inputData id="InputData_1j8tsl1" name="Variable" />
+  <dmndi:DMNDI>
+    <dmndi:DMNDiagram id="DMNDiagram_1ibs1io">
+      <dmndi:DMNShape id="DMNShape_0ce24mr" dmnElementRef="decision">
+        <dc:Bounds height="80" width="180" x="150" y="80" />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape id="DMNShape_1t81hpb" dmnElementRef="InputData_1j8tsl1">
+        <dc:Bounds height="45" width="125" x="177" y="317" />
+      </dmndi:DMNShape>
+      <dmndi:DMNEdge id="DMNEdge_01a9t3u" dmnElementRef="InformationRequirement_1klmiyt">
+        <di:waypoint x="240" y="317" />
+        <di:waypoint x="240" y="180" />
+        <di:waypoint x="240" y="160" />
+      </dmndi:DMNEdge>
+    </dmndi:DMNDiagram>
+  </dmndi:DMNDI>
 </definitions>

packages/dmn-js-decision-table/test/spec/features/decision-table-head/editor/input/InputEditorCellSpec.js

@@ -1,10 +1,12 @@
-import { bootstrapModeler, inject } from 'test/helper';
+import { bootstrapModeler, inject, act } from 'test/helper';
 
 import {
   triggerInputEvent,
   triggerMouseEvent
 } from 'dmn-js-shared/test/util/EventUtil';
 
+import { DmnVariableResolverModule } from '@bpmn-io/dmn-variable-resolver';
+
 import { query as domQuery } from 'min-dom';
 
 import TestContainer from 'mocha-test-container-support';
@@ -26,7 +28,8 @@ describe('decision-table-head/editor - input', function() {
       DecisionTableHeadModule,
       DecisionTableHeadEditorModule,
       ModelingModule,
-      KeyboardModule
+      KeyboardModule,
+      DmnVariableResolverModule
     ],
     debounceInput: false
   }));
@@ -182,6 +185,32 @@ describe('decision-table-head/editor - input', function() {
         expect(inputBo.inputExpression.text).to.equal('foo');
       }));
     });
+
+
+    describe('integration', function() {
+
+      it('should pass variables to editor', async function() {
+
+        // given
+        const editorEl = openEditor('input2');
+        const input = getControl('.ref-text [role="textbox"]', editorEl);
+
+        // when
+        await changeInput(input, 'Var');
+
+        // then
+        await expectEventually(() => {
+          const options = testContainer.querySelectorAll('[role="option"]');
+
+          expect(options).to.exist;
+          expect(options).to.satisfy(options => {
+            const result = Array.from(options).some(
+              option => option.textContent === 'Variable');
+            return result;
+          });
+        });
+      });
+    });
   });
 
 
@@ -240,11 +269,22 @@ function getControl(selector, parent) {
  * @param {string} value
  */
 function changeInput(input, value) {
-  input.textContent = value;
-
-  return new Promise(resolve => {
-    requestAnimationFrame(() => {
-      resolve();
-    });
+  return act(() => {
+    input.textContent = value;
   });
 }
+
+async function expectEventually(fn) {
+  for (let i = 0; i < 10; i++) {
+    try {
+      await act(() => {});
+      await fn();
+      return;
+    } catch (e) {
+
+      // wait
+    }
+  }
+
+  return fn();
+}

packages/dmn-js-literal-expression/package.json

@@ -30,6 +30,7 @@
     "inferno-test-utils": "~5.6.2"
   },
   "dependencies": {
+    "@bpmn-io/dmn-variable-resolver": "^0.3.1",
     "diagram-js": "^12.0.0",
     "dmn-js-shared": "^14.4.1",
     "escape-html": "^1.0.3",