COMPASS 235 DV: Full range component (#551)

* Add JSDoc of proposed coupling between RangeInput validationStates

* COMPASS 235: DV - Full range component

Start by turning on the range component in the GUI again.

Also unskip tests that only work properly when integrated due to the nature of the test API we have built.

* Add RuleCategoryRange unit and Rule integration tests

* Add failing test for the empty range state

* Update RangeInput.value to no longer be isRequired

Fixes warning with 'none' dropdown state:
/Users/pzrq/Projects/compass/node_modules/fbjs/lib/warning.js:36 Warning: Failed prop type: Required prop `value` was not specified in `RangeInput`.
    in RangeInput (created by RuleCategoryRange)
    in RuleCategoryRange (created by Rule)
    in form (created by Form)
    in Form (created by Rule)
    in td (created by Rule)
    in tr (created by Rule)
    in Rule (created by RuleBuilder)
    in tbody (created by RuleBuilder)
    in table (created by Table)
    in Table (created by RuleBuilder)
    in div (created by Col)
    in Col (created by RuleBuilder)
    in div (created by Row)
    in Row (created by RuleBuilder)
    in div (created by Grid)
    in Grid (created by Editable)
    in div (created by Editable)
    in div (created by Editable)
    in div (created by Editable)
    in Editable (created by RuleBuilder)
    in RuleBuilder (created by Validation)
    in div (created by Grid)
    in Grid (created by Validation)
    in div (created by Validation)
    in Validation (created by ConnectedValidation)
    in StoreConnector (created by ConnectedValidation)
    in ConnectedValidationprintWarning @ /Users/pzrq/Projects/compass/node_modules/fbjs/lib/warning.js:36

* Mostly working, but for some reason renders the stale value...

* Refactor componentWillMount into the constructor

https://facebook.github.io/react/docs/react-component.html#componentwillmount

* Refactor onRangeInputBlur to the end of validate

* Remove 10 from parseFloat

parseFloat does not take a second argument, unlike parseInt :)

* Drop unused RangeInput.onChange prop

It can't possibly work with the combined range input unless you added multiple IDs somehow which would be a much bigger component refactoring.

* Be clearer which store

* Call validate after changing the dropdownOp value

So it appears to start in an invalid state if switching from a 'none' state.

* Remove componentWillReceiveProps

It seems to confuse the component, leading to a bizarre cache issue.
The best kind of bug fix - when deleting code makes things work better :)

* ESlint

* Fix race where validationState is not allowed to be empty string

react-bootstrap/react-bootstrap#1926

* Finally, playing with the (unvalidated) component works correctly

* Refactor into validateCombinedParams

So I can reuse it shortly.

* Finally get comboValidationState working

So we can put the common user error of mixing up the lower and upper bounds into the category of being reported by our Compass GUI, but still allow the user to proceed if they choose to.

* Add a regex to warn the user they cannot enter expressions like 10+5

parseFloat will truncate them later, but the user doesn't see it unless they switch to JSON view or reload the page...this is at least a little better in that they are warned, not sure what the behaviour should really be though. Not sure how to unit test this one as it's deep in the validation logic so it would be somewhere deep in Enzyme if it is testable.

* Handle and test the 0 case correctly

Thankfully the server already did, good thing I tried to record a demo video and check:

> db.runCommand({collMod: 'validation', validator: {"age": {$gt:0, $lt:500}}});
{ "ok" : 1 }
> db.getCollectionInfos()[1].options.validator
{ "age" : { "$lt" : 500, "$gt" : 0 } }

# Server also supports null which we don't because it gets mangled between my code and Thomas' code so meh until someone cares for it
> db.runCommand({collMod: 'validation', validator: {"age": {$gt:null, $lt:500}}});
{ "ok" : 1 }
> db.getCollectionInfos()[1].options.validator
{ "age" : { "$gt" : null, "$lt" : 500 } }

* Improve comments

This particular state is no longer rejected by the Rule Builder GUI, just shown highlighted in red as something we highly doubt a user would intentionally create, for the reasons outlined in `npm run ci` like the range being empty or easily hard-code-able as an application-level constant.

* Add better regex to handle exponential float forms

* Fix translating regexes fail (the |, vertical bar ASCII code 0x7c should not be accepted)

Though incoming hadron-type-checker should resolve this more completely (its DECIMAL_128_REGEX still accepts arbitrarily large exponents which it should not, but it's better than this one was).

* Add some Decimal128 tests

* Handle Decimal128 and drop clunky parseFloat uses

* Be more explicit that combined ranges of Decimal128s are not validated

* shrink range inputs, remove title labels.

* 👕 fix linter issue.

* don’t validate initially, fix tests.

* form validation. such difficult.

* [wip] up and downwards validation almost working

* fixing some edge cases, updating tests.

* Restore tests so accepts/rejects is clearer

Just needed to drop the comboValidationState.

* make rule id consistent (based on index of rule).

* store cancel always needs to call _updateState()

* range: disable bson type casting

* cancelChanges no longer takes a boolean.

* validation rewritten. only use single validate() method

* use componentWillReceiveProps where props are forked.

* force a redraw when cancel was pressed via key change

* 👕 fixing eslint issues.

* Drop HP_VERSION until COMPASS-294

* 💚 fix tests.

Author: pzrq

src/internal-packages/validation/lib/components/common/range-input.jsx

@@ -1,86 +1,118 @@
 const React = require('react');
+const app = require('ampersand-app');
 const _ = require('lodash');
 const FormGroup = require('react-bootstrap').FormGroup;
 const InputGroup = require('react-bootstrap').InputGroup;
 const FormControl = require('react-bootstrap').FormControl;
 const DropdownButton = require('react-bootstrap').DropdownButton;
-const ControlLabel = require('react-bootstrap').ControlLabel;
 const MenuItem = require('react-bootstrap').MenuItem;
+const TypeChecker = require('hadron-type-checker');
 
 // const debug = require('debug')('mongodb-compass:validation:action-selector');
 
+/**
+  * The version at which high precision values are available.
+  */
+const HP_VERSION = '3.4.0';
+
+/**
+ * A RangeInput represents a numeric lower or upper bound and the value of the
+ * lower or upper bound, if the bound exists.
+ *
+ * The `validationState` of this RangeInput can be set to 'error' either:
+ *  - by the RangeInput validating the `value` prop is not of type `number`, or
+ *  - by the RangeInput's parent `RuleCategoryRange` component validating the
+ *    combined range expression, such as `5 < x < 5` is displayed as red/error
+ *    even though the RangeInputs `5 < x` and `5 > x` are individually valid.
+ */
 class RangeInput extends React.Component {
 
   constructor(props) {
     super(props);
+    const op = this._getOperatorString(props);
     this.state = {
-      disabled: false,
-      operator: '',
-      value: '',
-      validationState: null
-    };
-  }
-
-  componentWillMount() {
-    const op = this._getOperatorString();
-    this.setState({
-      value: _.isNumber(this.props.value) ? String(this.props.value) : '',
-      operator: op,
-      disabled: op === 'none'
-    });
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const op = this._getOperatorString(nextProps);
-    this.setState({
-      value: _.isNumber(this.props.value) ? String(this.props.value) : '',
+      disabled: op === 'none',
       operator: op,
-      disabled: op === 'none'
-    });
+      value: this.props.value,
+      isValid: true,
+      hasStartedValidating: false
+    };
+    this._ENABLE_HP = app.instance && (
+      app.instance.build.version >= HP_VERSION);
   }
 
+  /**
+   * called whenever the input changes (i.e. user is typing). We don't bubble up the
+   * value at this stage yet, but wait until the user blurs the input field.
+   *
+   * @param {Object} evt   The onChange event
+   */
   onInputChange(evt) {
     this.setState({
       value: evt.target.value
     });
   }
 
+  /**
+   * called whenever the field is blurred (loses focus). At this point, we want to
+   * validate the input and if it is valid, report the value change up to the parent.
+   */
   onInputBlur() {
-    this.validate();
+    this.validate(true);
+    this.props.onRangeInputBlur({
+      value: this.state.value,
+      operator: this.state.operator
+    });
   }
 
+  /**
+   * called when the user chooses a value from the operator dropdown. As there are
+   * no invalid values, we can always immediately report up the value/operator change.
+   *
+   * @param {Object} evtKey    the selected value from the dropdown (e.g. "<=", "none", ...)
+   */
   onDropdownSelect(evtKey) {
     this.setState({
       disabled: evtKey === 'none',
       operator: evtKey
     });
-    // need to defer validation until setState has propagated
-    // _.defer(() => {
-    //   this.validate();
-    // });
+    this.props.onRangeInputBlur({
+      value: this.state.value,
+      operator: evtKey
+    });
   }
 
-  validate() {
-    const value = parseFloat(this.state.value, 10);
-    let error = false;
-    if (_.isNaN(value)) {
-      error = true;
-      this.setState({
-        validationState: 'error'
-      });
-    } else {
-      this.setState({
-        validationState: null
-      });
+  /**
+   * determines if the input by itself is valid (e.g. a value that can be
+   * cast to a number).
+   *
+   * @param {Boolean} force    forces validation from now on.
+   * @return {Boolean}         whether the input is valid or not.
+   */
+  validate(force) {
+    if (!force && !this.state.hasStartedValidating) {
+      return true;
     }
-    if (this.props.onChange) {
-      this.props.onChange({
-        disabled: this.state.disabled,
-        operator: this.state.operator,
-        value: value,
-        hasError: error
-      });
+    if (this.state.disabled) {
+      return true;
     }
+    const value = this.state.value;
+    const valueTypes = TypeChecker.castableTypes(value, this._ENABLE_HP);
+
+    // Not sure if hadron-type-checker should make NUMBER_TYPES public
+    const NUMBER_TYPES = [
+      'Long',
+      'Int32',
+      'Double',
+      'Decimal128'
+    ];
+
+    const isValid = (_.intersection(valueTypes, NUMBER_TYPES).length > 0);
+    this.setState({
+      isValid: isValid,
+      hasStartedValidating: true
+    });
+    return isValid;
   }
 
   _getOperatorString(props) {
@@ -124,9 +156,6 @@ class RangeInput extends React.Component {
     if (this.state.disabled) {
       return (
         <FormGroup>
-          <div>
-            <ControlLabel>{boundString}</ControlLabel>
-          </div>
           <DropdownButton
             id={`range-input-${this.props.upperBound ? 'upper' : 'lower'}`}
             style={{width: this.props.width}}
@@ -138,13 +167,10 @@ class RangeInput extends React.Component {
       );
     }
     // not disabled, render input group with value input and operator dropdown
-    const placeholder = `enter ${boundString}`.toLowerCase();
-
+    const placeholder = `${boundString}`.toLowerCase();
+    const validationState = this.state.isValid ? null : 'error';
     return (
-      <FormGroup validationState={this.state.validationState}>
-        <div>
-          <ControlLabel>{boundString}</ControlLabel>
-        </div>
+      <FormGroup validationState={this.props.validationState || validationState}>
         <InputGroup style={{width: this.props.width}}>
           <DropdownButton
             id={`range-input-${this.props.upperBound ? 'upper' : 'lower'}`}
@@ -167,22 +193,23 @@ class RangeInput extends React.Component {
 }
 
 RangeInput.propTypes = {
-  value: React.PropTypes.number.isRequired,
+  value: React.PropTypes.string,  // Can't be required to allow "none" in GUI,
+                                  // can't be number to work with Decimal128.
   upperBound: React.PropTypes.bool,
   validationState: React.PropTypes.string,
   boundIncluded: React.PropTypes.bool.isRequired,
   disabled: React.PropTypes.bool.isRequired,
-  onChange: React.PropTypes.func,
+  onRangeInputBlur: React.PropTypes.func,
   width: React.PropTypes.number
 };
 
 RangeInput.defaultProps = {
   disabled: false,
   boundIncluded: false,
   upperBound: false,
-  validationState: '',
-  value: null,
-  width: 200
+  validationState: null,
+  value: '',
+  width: 160
 };
 
 RangeInput.displayName = 'RangeInput';

src/internal-packages/validation/lib/components/rule-builder.jsx

@@ -16,6 +16,24 @@ const Table = ReactBootstrap.Table;
 
 class RuleBuilder extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isValid: true,
+      forceRenderKey: 0
+    };
+  }
+
+  componentWillReceiveProps(props) {
+    this.validate(false);
+    if (props.editState === 'unmodified' && this.props.editState !== 'unmodified') {
+      // force a complete redraw of the component by increasing the key
+      this.setState({
+        forceRenderKey: this.state.forceRenderKey + 1,
+        isValid: true
+      });
+    }
+  }
 
   /**
    * Add button clicked to create a new rule.
@@ -52,29 +70,52 @@ class RuleBuilder extends React.Component {
 
   /**
    * The "Update" button from the `Editable component has been clicked.
-   * Send the new validator doc to the server.
+   * Check that all rules are valid, then send the new validator doc to
+   * the server.
    */
   onUpdate() {
-    ValidationActions.saveChanges();
+    if (this.validate(true)) {
+      ValidationActions.saveChanges();
+    }
   }
 
+  validate(force) {
+    const isValid = _.all(this.props.validationRules, (rule) => {
+      return this.refs[rule.id].validate(force);
+    });
+    this.setState({
+      isValid: isValid
+    });
+    return isValid;
+  }
+
+  renderRules() {
+    return _.map(this.props.validationRules, (rule) => {
+      return <Rule ref={rule.id} key={rule.id} {...rule} />;
+    });
+  }
   /**
    * Render status row component.
    *
    * @returns {React.Component} The component.
    */
   render() {
-    const rules = _.map(this.props.validationRules, (rule) => {
-      return <Rule key={rule.id} {...rule} />;
-    });
+    const editableProps = {
+      editState: this.props.editState,
+      childName: 'Validation',
+      onCancel: this.onCancel.bind(this),
+      onUpdate: this.onUpdate.bind(this),
+      key: this.state.forceRenderKey
+    };
+
+    if (!this.state.isValid) {
+      editableProps.editState = 'error';
+      editableProps.errorMessage = 'Input is not valid.';
+      delete editableProps.childName;
+    }
 
     return (
-      <Editable
-        editState={this.props.editState}
-        childName="Validation"
-        onCancel={this.onCancel.bind(this)}
-        onUpdate={this.onUpdate.bind(this)}
-      >
+      <Editable {...editableProps} >
         <Grid fluid className="rule-builder">
           <Row className="header">
             <Col lg={6} md={6} sm={6} xs={6}>
@@ -118,7 +159,7 @@ class RuleBuilder extends React.Component {
                   </tr>
                 </thead>
                 <tbody>
-                  {rules}
+                  {this.renderRules()}
                 </tbody>
               </Table>
             </Col>

src/internal-packages/validation/lib/components/rule-categories/exists.jsx

@@ -5,10 +5,6 @@ const _ = require('lodash');
 
 class RuleCategoryExists extends React.Component {
 
-  constructor(props) {
-    super(props);
-  }
-
   /**
    * get the initial parameters for this rule category.
    *

src/internal-packages/validation/lib/components/rule-categories/index.js

@@ -2,6 +2,6 @@ module.exports = {
   exists: require('./exists'),
   mustNotExist: require('./mustnotexist'),
   type: require('./type'),
-  // range: require('./range'),   // work in progress
+  range: require('./range'),
   regex: require('./regex')
 };

src/internal-packages/validation/lib/components/rule-categories/mustnotexist.jsx

@@ -6,10 +6,6 @@ const _ = require('lodash');
 
 class RuleCategoryMustNotExist extends React.Component {
 
-  constructor(props) {
-    super(props);
-  }
-
   /**
    * get the initial parameters for this rule category.
    *