Display EL select only when necessary

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

@@ -17,8 +17,6 @@ export default class InputCellContextMenu extends Component {
     inject(this);
 
     this.persistChanges = this.debounceInput(this.persistChanges);
-
-    this._expressionLanguages = context.injector.get('expressionLanguages');
   }
 
   persistChanges = () => {
@@ -69,24 +67,16 @@ export default class InputCellContextMenu extends Component {
     let target = input;
 
     // input variable stored in parent
-    if (attr === 'expressionLanguage' || attr === 'text') {
+    if (attr === 'text') {
       target = target.inputExpression;
     }
 
     return unsaved && attr in unsaved ? unsaved[attr] : target.get(attr);
   }
 
   render() {
-    const defaultLanguage = this._expressionLanguages.getDefault('inputHeadCell'),
-          expressionLanguages = this._expressionLanguages.getAll();
-
     return (
       <InputEditor
-        expressionLanguage={
-          this.getValue('expressionLanguage') || defaultLanguage.value
-        }
-        expressionLanguages={ expressionLanguages }
-        defaultExpressionLanguage={ defaultLanguage }
         label={ this.getValue('label') }
         text={ this.getValue('text') }
         onChange={ this.handleChange } />

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

@@ -1,7 +1,6 @@
 import { Component } from 'inferno';
 
 import ContentEditable from 'dmn-js-shared/lib/components/ContentEditable';
-import InputSelect from 'dmn-js-shared/lib/components/InputSelect';
 
 export default class InputEditor extends Component {
 
@@ -10,33 +9,13 @@ export default class InputEditor extends Component {
 
     this.translate = context.injector ? context.injector.get('translate') : noopTranslate;
 
-    const defaultExpressionLanguage = props.defaultExpressionLanguage.value;
-
-    this.setExpressionLanguage = (expressionLanguage) => {
-      this.handleChange({ expressionLanguage });
-    };
-
     this.handleValue = (text) => {
 
-      let { expressionLanguage } = this.props;
-
       let change = { text };
 
-      if (isMultiLine(text) && !expressionLanguage) {
-        change.expressionLanguage = defaultExpressionLanguage;
-      }
-
-      if (!isMultiLine(text) && expressionLanguage === defaultExpressionLanguage) {
-        change.expressionLanguage = undefined;
-      }
-
       this.handleChange(change);
     };
 
-    this.handleLanguageChange = (language) => {
-      this.setExpressionLanguage(language);
-    };
-
     this.handleLabelChange = (value) => {
 
       // default to <undefined> for empty string
@@ -57,8 +36,6 @@ export default class InputEditor extends Component {
   render() {
 
     const {
-      expressionLanguage,
-      expressionLanguages,
       label,
       text
     } = this.props;
@@ -93,29 +70,11 @@ export default class InputEditor extends Component {
             onInput={ this.handleValue }
             value={ text || '' } />
         </div>
-
-        <div className="dms-form-control">
-          <label className="dms-label">
-            {
-              this.translate('Expression Language')
-            }
-          </label>
-
-          <InputSelect
-            className="ref-language"
-            value={ expressionLanguage || '' }
-            onChange={ this.handleLanguageChange }
-            options={ expressionLanguages } />
-        </div>
       </div>
     );
   }
 }
 
-function isMultiLine(text) {
-  return text && text.split(/\n/).length > 1;
-}
-
 function noopTranslate(str) {
   return str;
 }

packages/dmn-js-decision-table/src/features/expression-language/ExpressionLanguage.js

@@ -1,14 +1,18 @@
-/* eslint-disable max-len */
-
 import InputSelect from 'dmn-js-shared/lib/components/InputSelect';
 
-import { isInput } from 'dmn-js-shared/lib/util/ModelUtil';
+import {
+  getBusinessObject,
+  isInput
+} from 'dmn-js-shared/lib/util/ModelUtil';
 
 
 export default class ExpressionLanguage {
-  constructor(components, elementRegistry, modeling, expressionLanguages, translate, contextMenu) {
+  constructor(
+      components, elementRegistry, modeling, expressionLanguages,
+      translate, contextMenu) {
     this._modeling = modeling;
     this._translate = translate;
+    this._expressionLanguages = expressionLanguages;
 
     components.onGetComponent('context-menu-cell-additional', (context = {}) => {
       if (context.contextMenuType && context.contextMenuType === 'context-menu') {
@@ -29,6 +33,10 @@ export default class ExpressionLanguage {
           return;
         }
 
+        if (!this._shouldDisplayContextMenuEntry(element)) {
+          return;
+        }
+
         const openMenu = clickEvent => {
           contextMenu.open({
             x: (event || clickEvent).pageX,
@@ -67,16 +75,19 @@ export default class ExpressionLanguage {
           return;
         }
 
-        const expressionLanguage = element.businessObject.expressionLanguage
-          || expressionLanguages.getDefault(isInput(element.col) ? 'inputCell' : 'outputCell').value;
+        const expressionLanguage = this._getElementExpressionLanguage(element);
 
         const options = expressionLanguages.getAll();
 
+        const className = 'context-menu-group-entry ' +
+          'context-menu-entry-set-expression-language';
+
         return () => (
           <div
             className="context-menu-flex">
             <div className="context-menu-group">
-              <div className="context-menu-group-entry context-menu-entry-set-expression-language">
+              <div
+                className={ className }>
                 <div>
                   { this._translate('Expression Language') }
                 </div>
@@ -93,10 +104,66 @@ export default class ExpressionLanguage {
       }
 
     });
+
+    components.onGetComponent('context-menu', (context = {}) => {
+      if (
+        context.contextMenuType === 'input-edit'
+      ) {
+        return () => {
+          const { inputExpression } = context.input;
+
+          if (!this._shouldDisplayContextMenuEntry(inputExpression)) {
+            return;
+          }
+
+          const expressionLanguage = this._getElementExpressionLanguage(inputExpression);
+
+          const options = expressionLanguages.getAll();
+
+          return <div className="context-menu-container ref-language">
+            <div className="dms-form-control">
+              <label className="dms-label">
+                {
+                  this._translate('Expression Language')
+                }
+              </label>
+
+              <InputSelect
+                className="ref-language"
+                value={ expressionLanguage || '' }
+                onChange={ value => this.onChange(inputExpression, value) }
+                options={ options } />
+            </div>
+          </div>;
+        };
+      }
+    });
+  }
+
+  onChange(element, expressionLanguage) {
+    this._modeling.editExpressionLanguage(element, expressionLanguage);
+  }
+
+  _shouldDisplayContextMenuEntry(element) {
+    const expressionLanguages = this._expressionLanguages.getAll();
+
+    if (expressionLanguages.length > 1) {
+      return true;
+    }
+
+    const expressionLanguage = this._getElementExpressionLanguage(element);
+
+    return expressionLanguage !== this._getDefaultElementExpressionLanguage(element);
+  }
+
+  _getElementExpressionLanguage(element) {
+    return getBusinessObject(element).expressionLanguage
+    || this._getDefaultElementExpressionLanguage(element);
   }
 
-  onChange(cell, expressionLanguage) {
-    this._modeling.editExpressionLanguage(cell.businessObject, expressionLanguage);
+  _getDefaultElementExpressionLanguage(element) {
+    return this._expressionLanguages.getDefault(
+      isInput(element.col) ? 'inputCell' : 'outputCell').value;
   }
 }
 

packages/dmn-js-decision-table/test/spec/expression-language.dmn

@@ -3,7 +3,7 @@
   <decision id="decision" name="Check Order">
     <decisionTable id="decisionTable">
       <input id="input1" label="Customer Status">
-        <inputExpression id="inputExpression1" typeRef="string">
+        <inputExpression id="inputExpression1" expressionLanguage="jruby" typeRef="string">
           <text>status</text>
         </inputExpression>
         <inputValues id="UnaryTests_1e76ebn">

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

@@ -90,17 +90,6 @@ describe('decision-table-head/editor - input', function() {
   }));
 
 
-  it('should display FEEL per default', function() {
-
-    // given
-    const editorEl = openEditor('input1');
-    const inputEl = getControl('.ref-language input', editorEl);
-
-    // then
-    expect(inputEl).to.have.property('value', 'feel');
-  });
-
-
   describe('should edit input label', function() {
 
     beforeEach(function() {

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

@@ -57,12 +57,6 @@ class Root extends Component {
 
     this.state = {
       text: '',
-      expressionLanguage: '',
-      expressionLanguages: [],
-      defaultExpressionLanguage: {
-        value: 'feel',
-        label: 'FEEL'
-      },
       label: null
     };
   }