Still in progress

package.json

@@ -66,6 +66,7 @@
     "@storybook/addons": "^4.0.0-alpha.0",
     "@storybook/react": "^4.0.0-alpha.0",
     "autobind-decorator": "^2.1.0",
+    "awesome-debounce-promise": "2.1.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^23.0.1",
@@ -122,7 +123,6 @@
     "d3": "^5.5.0",
     "es6-shim": "^0.35.3",
     "final-form": "^4.12.0",
-    "jison-gho": "0.6.1-216",
     "lodash": "^4.17.10",
     "numeral": "^2.0.6",
     "patternfly-react": "^2.34.2",

scripts/webpack.config.js

@@ -26,6 +26,9 @@ module.exports = (env) => {
       umdNamedDefine: true,
     },
     plugins: Object.keys(appPlugins).map(pluginName => appPlugins[pluginName]),
+    node: {
+      fs: 'empty'
+    },
     module: {
       rules,
     },

src/expression-editor/helper.js

@@ -1,7 +1,19 @@
 export const trimInput = (input, caretPosition) => {
-  let currentExp = inputText.slice(0,caretPosition)+"<<caret_position>>";
-  // const leftIndex = Math.max(currentExp.lastIndexOf('AND'), currentExp.lastIndexOf('OR'), 0);
+  let currentExp = input.slice(0,caretPosition)+"<<caret_position>>";
+  const leftIndex = Math.max(currentExp.lastIndexOf('AND'), currentExp.lastIndexOf('OR'), 0);
   // const rightIndex = [inputText.indexOf('AND', caretPosition-3), inputText.indexOf('OR', caretPosition-2)].reduce((a,b) => b > 0 ? (a < b ? a : b) : a, inputText.length-1);
   return currentExp.slice(leftIndex).replace(/AND|OR/,'');
+}
 
+export const replaceToken = (input, caretPosition) => {
+  const leftIndex = Math.max(currentExp.lastIndexOf('AND'), currentExp.lastIndexOf('OR'), 0);
+  const arr = []
+  arr.reduce((acc, i) => i[0] <= caretPosition && i[1] >= caretPosition ? i[1] : acc, 0);
 }
+
+const ast = value => ({
+  toString: () => value.map(x=> x.type === 'entity' ? x.value + '.' : x.value + ' ').reduce((acc, i) => acc+i, ''),
+  positionTokenIndex: (index) => value.reduce((acc, i) => (acc.length+i.value.length < index ? {index: acc.index+1, length: acc.length+i.value.length} : acc),{length: 0, index:-1}).index,
+  value,
+  last: value.slice(-1)[0]
+})

src/expression-editor/index.js

@@ -1 +1,3 @@
 import './sass/style.scss';
+import ExpressionEditor from './expression-editor';
+export { ExpressionEditor };

src/expression-editor/sass/style.scss

@@ -1,2 +1,13 @@
 @import "~@patternfly/patternfly/components/Select/select.css";
 @import "~@patternfly/patternfly/patternfly-variables.css";
+
+.expression-options ul {
+    padding-left: 0px;
+    li {
+        display: block;
+    }
+}
+
+li {
+    display: block;
+}

src/expression-editor/stories/expression-editor.stories.jsx

@@ -3,8 +3,40 @@ import ExpressionEditor from '../expression-editor'
 
 import { storiesOf } from '@storybook/react';
 
+const autocomplete = {
+  exp_type: ["FIELD:", "TAGS:", "COUNT OF:", "FIND:", "REGKEY:"],
+  entity: ["host."],
+  field: ['name ', 'status ', 'system ', 'owner '],
+  category: ['environment ', 'location '],
+  operator: ['= ', 'CONTAINS ', '< ', '> ', '<= ', '>= ', 'INCLUDES ', 'IS NOT EMPTY ', 'IS ', 'STARTS WITH ', "REGULAR EXPRESSION MATCHES "],
+  tag_operator: ['= ', 'CONTAINS  ', ': '],
+  exp_operator: ['AND ', 'OR '],
+  value: ['value '],
+  check: ['CHECK ALL:', 'CHECK ANY:', 'CHECK COUNT:']
+}
+const getSuggestions = next => next.map(n => autocomplete[n]).flat();
+const reloadSuggestions = (model, autocompleteActions, input) => { console.log('RELOAD'); return autocomplete } ;
+const renderInputComponent = inputProps => <textarea {...inputProps} />;
+const renderSuggestionsContainer = ({ containerProps, children, query }) => {
+  return (
+    <div className="pf-c-select pf-m-expanded expression-options" {...containerProps}>
+      {children}
+    </div>
+  );
+}
+const renderSuggestion = (item, focused) => <button type='button' className={`pf-c-select__menu-item ${focused ? 'pf-m-focus' : ''}`}>{item}</button>
+const style = { width: '500px', 'font-size': '14px' };
+
 storiesOf('Expression Editor', module)
   .add('Expression Editor', () =>
     (
-      <ExpressionEditor/>
+      <ExpressionEditor
+        getSuggestions={getSuggestions}
+        renderSuggestion={renderSuggestion}
+        renderInputComponent={renderInputComponent}
+        renderSuggestionsContainer={renderSuggestionsContainer}
+        reloadSuggestions={reloadSuggestions}
+        style={style}
+        model='Host'
+      />
     ));

src/expression-editor/tests/helper.test.js

@@ -1 +1,104 @@
-import { trimInput } from '..helper';
+import { trimInput } from '../helper';
+
+let input;
+describe('trim to caret: vm.name = knedlik, caret', () => {
+  beforeAll(() => { input = "vm.name = knedlik";} );
+
+  it('position 5', () => {
+    const expectedOutput =  "vm.na<<caret_position>>";
+    expect(trimInput(input, 5)).toEqual(expectedOutput);
+  });
+
+  it('position 10', () => {
+    const expectedOutput =  "vm.name = <<caret_position>>";
+    expect(trimInput(input, 10)).toEqual(expectedOutput);
+  });
+
+  it('position 15', () => {
+    const expectedOutput =  "vm.name = knedl<<caret_position>>";
+    expect(trimInput(input, 15)).toEqual(expectedOutput);
+  });
+
+  it('position 30', () => {
+    const expectedOutput =  "vm.name = knedlik<<caret_position>>";
+    expect(trimInput(input, 30)).toEqual(expectedOutput);
+  });
+});
+
+describe('trim to caret: "Virtual Machine"."Date Created" = "10.5.2018"', () => {
+  beforeAll(() => { input = '"Virtual Machine"."Date Created" = "10.5.2018"';} );
+
+  it('position 5', () => {
+    const expectedOutput =  '"Virt<<caret_position>>';
+    expect(trimInput(input, 5)).toEqual(expectedOutput);
+  });
+
+  it('position 10', () => {
+    const expectedOutput =  '"Virtual M<<caret_position>>';
+    expect(trimInput(input, 10)).toEqual(expectedOutput);
+  });
+
+  it('position 15', () => {
+    const expectedOutput =  '"Virtual Machin<<caret_position>>';
+    expect(trimInput(input, 15)).toEqual(expectedOutput);
+  });
+
+  it('position 20', () => {
+    const expectedOutput =  '"Virtual Machine"."D<<caret_position>>';
+    expect(trimInput(input, 20)).toEqual(expectedOutput);
+  });
+
+  it('position 30 ', () => {
+    const expectedOutput =  '"Virtual Machine"."Date Create<<caret_position>>';
+    expect(trimInput(input, 30)).toEqual(expectedOutput);
+  });
+
+  it('position 40 ', () => {
+    const expectedOutput =  '"Virtual Machine"."Date Created" = "10.5<<caret_position>>';
+    expect(trimInput(input, 40)).toEqual(expectedOutput);
+  });
+
+  it('position input.lenght ', () => {
+    const expectedOutput =  '"Virtual Machine"."Date Created" = "10.5.2018"<<caret_position>>';
+    expect(trimInput(input, input.length)).toEqual(expectedOutput);
+  });
+});
+
+describe('trim to caret: vm.name = knedlik OR vm.status = active AND vm.parent INCLUDES bla', () => {
+  beforeAll(() => { input = 'vm.name = knedlik OR vm.status = active AND vm.parent INCLUDES bla';} );
+
+  it('position 5 ', () => {
+    const expectedOutput =  'vm.na<<caret_position>>';
+    expect(trimInput(input, 5)).toEqual(expectedOutput);
+  });
+
+  it('position 19 ', () => {
+    const expectedOutput =  'vm.name = knedlik O<<caret_position>>';
+    expect(trimInput(input, 19)).toEqual(expectedOutput);
+  });
+
+  it('position 20 ', () => {
+    const expectedOutput =  '<<caret_position>>';
+    expect(trimInput(input, 20)).toEqual(expectedOutput);
+  });
+
+  it('position 21 ', () => {
+    const expectedOutput =  ' <<caret_position>>';
+    expect(trimInput(input, 21)).toEqual(expectedOutput);
+  });
+
+  it('position 22 ', () => {
+    const expectedOutput =  ' v<<caret_position>>';
+    expect(trimInput(input, 22)).toEqual(expectedOutput);
+  });
+
+  it('position 30 ', () => {
+    const expectedOutput =  ' vm.status<<caret_position>>';
+    expect(trimInput(input, 30)).toEqual(expectedOutput);
+  });
+
+  it('position 66 ', () => {
+    const expectedOutput =  ' vm.parent INCLUDES bla<<caret_position>>';
+    expect(trimInput(input, 66)).toEqual(expectedOutput);
+  });
+});