feat: implement variable suggestions for input editor

Related #785
bpmn-io · Oct 5, 2023 · 47dacc0 · 47dacc0
1 parent 7d3d685
commit 47dacc0
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dmn-js-decision-table/package.json b/packages/dmn-js-decision-table/package.json
@@ -30,6 +30,7 @@
     "inferno-test-utils": "~5.6.2"
   },
   "dependencies": {
+    "@bpmn-io/dmn-variable-resolver": "^0.2.2",
     "css.escape": "^1.5.1",
     "diagram-js": "^12.0.0",
     "dmn-js-shared": "^14.4.1",

diff --git a/packages/dmn-js-decision-table/src/Editor.js b/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
     ];
   }
 

diff --git a/...decision-table/src/features/decision-table-head/editor/components/InputCellContextMenu.js b/...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 } />
     );
   }

diff --git a/...s/dmn-js-decision-table/src/features/decision-table-head/editor/components/InputEditor.js b/...s/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>
     );

diff --git a/packages/dmn-js-literal-expression/package.json b/packages/dmn-js-literal-expression/package.json
@@ -30,6 +30,7 @@
     "inferno-test-utils": "~5.6.2"
   },
   "dependencies": {
+    "@bpmn-io/dmn-variable-resolver": "^0.2.2",
     "diagram-js": "^12.0.0",
     "dmn-js-shared": "^14.4.1",
     "escape-html": "^1.0.3",

diff --git a/packages/dmn-js-shared/src/components/LiteralExpression.js b/packages/dmn-js-shared/src/components/LiteralExpression.js
@@ -46,7 +46,8 @@ export default class LiteralExpression extends Component {
     this.editor = new FeelEditor({
       container: this.node,
       onChange: this.handleChange,
-      value: this.state.value
+      value: this.state.value,
+      variables: this.props.variables || [],
     });
 
     this.node.addEventListener('mousedown', this.handleMouseEvent);
@@ -70,6 +71,10 @@ export default class LiteralExpression extends Component {
         this.editor.setValue(value);
       });
     }
+
+    if (prevProps.variables !== this.props.variables) {
+      this.editor.setVariables(this.props.variables);
+    }
   }
 
   componentWillUnmount() {