DM-7918 Constraint column render error and the state update error when column constraint changes

src/firefly/js/tables/FilterInfo.js

@@ -112,6 +112,16 @@ export class FilterInfo {
         return {valid, value: conditions, message: FILTER_CONDITION_TTIPS};
     }
 
+    /**
+     * validator for column's filter.  it validates only the condition portion of the filter.
+     * @param conditions
+     * @returns {{valid: boolean, value: (string|*), message: string}}
+     */
+    static conditionValidatorNoAutoCorrect(conditions) {
+        const valid = FilterInfo.isConditionValid(conditions);
+        return {valid, value: conditions, message: FILTER_CONDITION_TTIPS};
+    }
+
     /**
      * validate the filterInfo string
      * @param {string} filterInfo
@@ -145,7 +155,7 @@ export class FilterInfo {
     static validator(columns, filterInfo) {
         filterInfo = FilterInfo.autoCorrectFilter(filterInfo);
         const [valid, message] = FilterInfo.isValid(filterInfo, columns);
-        return {valid, value: filterInfo, message};
+        return  {valid, value: filterInfo, message};
     }
 
     /**

src/firefly/js/tables/ui/FilterEditor.jsx

@@ -13,6 +13,7 @@ import {FILTER_CONDITION_TTIPS, FILTER_TTIPS, FilterInfo} from '../FilterInfo.js
 import {sortTableData, calcColumnWidths} from  '../TableUtil.js';
 import {InputAreaField} from '../../ui/InputAreaField.jsx';
 import {toBoolean} from '../../util/WebUtil.js';
+import {NOT_CELL_DATA} from './TableRenderer.js';
 
 const wrapperStyle = {display: 'block', flexGrow: 0};
 const style = {display: 'block', width: '100%', resize: 'none', boxSizing: 'border-box', backgroundColor: 'white'};
@@ -95,7 +96,7 @@ function prepareOptionData(columns, sortInfo, filterInfo, selectable) {
     const filterInfoCls = FilterInfo.parse(filterInfo);
     columns = columns.filter((c) => c.visibility !== 'hidden');
     var data = columns.map( (v) => {
-        const filter = toBoolean(v.filterable, true) ? filterInfoCls.getFilter(v.name) || '' : undefined;
+        const filter = toBoolean(v.filterable, true) ? filterInfoCls.getFilter(v.name) || '' : NOT_CELL_DATA;
         return [v.label||v.name||'', filter, v.units||'', v.desc||'', v.visibility !== 'hide'];
     } );
     sortTableData(data, cols, sortInfo);

src/firefly/js/tables/ui/TableRenderer.js

@@ -5,7 +5,7 @@
 import React from 'react';
 import FixedDataTable from 'fixed-data-table';
 import sCompare from 'react-addons-shallow-compare';
-import {set, get, isEqual, pick} from 'lodash';
+import {set, get, isEmpty, isEqual, isArray, pick} from 'lodash';
 
 import {FilterInfo, FILTER_CONDITION_TTIPS} from '../FilterInfo.js';
 import {SortInfo} from '../SortInfo.js';
@@ -224,6 +224,7 @@ export const createLinkCell = ({hrefColIdx, value}) => {
     };
 };
 
+export const NOT_CELL_DATA = '__NOT_A_VALID_DATA___';
 /**
  * creates an input field cell renderer.
  * @param tooltips
@@ -235,13 +236,22 @@ export const createLinkCell = ({hrefColIdx, value}) => {
  */
 export const createInputCell = (tooltips, size = 10, validator, onChange, style) => {
     const changeHandler = (rowIndex, data, colIdx, v) => {
-        set(data, [rowIndex, colIdx], v.value);
-        onChange && onChange(v);
+        set(data, [rowIndex, colIdx], [v.value, v.valid]);
+        onChange && onChange();
     };
 
     return ({rowIndex, data, colIdx}) => {
-        const val = get(data, [rowIndex, colIdx]);
-        if (val === undefined) {
+        const dValue = get(data, [rowIndex, colIdx]);
+        var val, valid=true;
+
+        if (isArray(dValue)) {
+            val = dValue[0];
+            valid = get(dValue, ['1'], true);
+        } else {
+            val = dValue;
+        }
+
+        if (val === NOT_CELL_DATA) {
             return null;
         } else {
             return (
@@ -254,6 +264,7 @@ export const createInputCell = (tooltips, size = 10, validator, onChange, style)
                         value={val}
                         onChange={(v) => changeHandler(rowIndex, data, colIdx, v) }
                         actOn={['blur','enter']}
+                        valid={valid}
                     />
                 </div>
             );

src/firefly/js/ui/InputField.jsx

@@ -1,7 +1,8 @@
 import React, {PropTypes} from 'react';
-import {has} from 'lodash';
+import {has, get} from 'lodash';
 
 import {InputFieldView} from './InputFieldView.jsx';
+import {NOT_CELL_DATA} from '../tables/ui/TableRenderer.js';
 
 
 function shouldAct(e, actOn) {
@@ -32,7 +33,11 @@ export class InputField extends React.Component {
         const nState = {fieldKey, value};
         if (shouldAct(e, actOn)) {
             var {valid, message, ...others} = validator ? validator(value) : {valid:true, message:''};
-            has(others, 'value') && (nState.value = others.value);    // allow the validator to modify the value.. useful in auto-correct.
+            var vadVal = get(others, 'value');  // vadVal has value as undefined in case no validator exists.
+            if (vadVal && vadVal !== NOT_CELL_DATA) {
+                nState.value = others.value;
+            }
+            //has(others, 'value') && (nState.value = others.value);    // allow the validator to modify the value.. useful in auto-correct.
             nState.valid = valid;
             nState.message = valid ? '' : (label + message).replace('::', ':');
             onChange && onChange(nState);
@@ -41,7 +46,7 @@ export class InputField extends React.Component {
     }
 
     componentWillReceiveProps(nProps) {
-        this.setState(newState({value: nProps.value}));
+        this.setState(newState({value: nProps.value, valid: nProps.valid}));
     }
 
     render() {
@@ -88,6 +93,7 @@ InputField.propTypes = {
     wrapperStyle: PropTypes.object,
     labelStyle: PropTypes.object,
     value: PropTypes.string,
+    valid: PropTypes.bool,
     onChange: PropTypes.func,
     actOn: PropTypes.arrayOf(PropTypes.oneOf(['blur', 'enter', 'changes'])),
     showWarning : PropTypes.bool,