COMPASS-199 validation json editable (#559)

* COMPASS-199 make JSON view editable

and disable view switcher if validator doc cannot be expressed by rule builder.

* COMPASS-199 make JSON editable, validate JSON

Author: rueckstiess

src/internal-packages/validation/lib/actions/index.js

@@ -13,6 +13,7 @@ const ValidationActions = Reflux.createActions([
   'setRuleNullable',
   'setValidationLevel',
   'setValidationAction',
+  'setValidatorDocument',
   'switchView',
   'saveChanges',
   'cancelChanges'

src/internal-packages/validation/lib/components/common/editable.jsx

@@ -23,6 +23,17 @@ class Editable extends React.Component {
         </div>
       );
     }
+    if (this.props.editState === 'error') {
+      return (
+        <div className="pull-right">
+          <Button
+            bsStyle="link"
+            bsSize="xsmall"
+            onClick={this.props.onCancel}>Cancel
+          </Button>
+        </div>
+      );
+    }
     return null;
   }
 
@@ -39,7 +50,7 @@ class Editable extends React.Component {
       case 'error':
         if (errorMsg) {
           return name ? `${name} could not be updated: ${errorMsg}` :
-            `Error during update: ${errorMsg}`;
+            `Error: ${errorMsg}`;
         }
         return name ? `${name} could not be updated.` : 'An error occurred during the update.';
       default: return '';

src/internal-packages/validation/lib/components/common/view-switcher.jsx

@@ -15,7 +15,12 @@ class ViewSwitcher extends React.Component {
     return _.map(this.props.buttonLabels, (label) => {
       const active = this.props.activeButton === label;
       return (
-        <Button key={label} active={active} onClick={this.props.onClick.bind(this, label)}>
+        <Button
+          key={label}
+          active={active}
+          onClick={this.props.onClick.bind(this, label)}
+          disabled={this.props.disabled}
+        >
           {label}
         </Button>
       );
@@ -44,13 +49,15 @@ ViewSwitcher.propTypes = {
   label: React.PropTypes.string,
   buttonLabels: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
   activeButton: React.PropTypes.string,
-  onClick: React.PropTypes.func
+  onClick: React.PropTypes.func,
+  disabled: React.PropTypes.bool
 };
 
 ViewSwitcher.defaultProps = {
   label: '',
   activeButton: '',
-  onClick: () => {}
+  onClick: () => {},
+  disabled: false
 };
 
 ViewSwitcher.displayName = 'ViewSwitcher';

src/internal-packages/validation/lib/components/json-view.jsx

@@ -3,22 +3,47 @@ const ValidationActions = require('../actions');
 const OptionSelector = require('./common/option-selector');
 const Editable = require('./common/editable');
 
-const ReactBootstrap = require('react-bootstrap');
-const Grid = ReactBootstrap.Grid;
-const Row = ReactBootstrap.Row;
-const Col = ReactBootstrap.Col;
+const {Grid, Row, Col, FormGroup, FormControl} = require('react-bootstrap');
 
 // const debug = require('debug')('validation:json-view');
 
 class JSONView extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isValidJSON: true,
+      input: props.validatorDoc ?
+        JSON.stringify(props.validatorDoc.validator, null, 2) : '{}'
+    };
+  }
+
+  componentWillReceiveProps(newProps) {
+    this.setState({
+      input: JSON.stringify(newProps.validatorDoc.validator, null, 2)
+    });
+  }
+
+  onInputChanged(evt) {
+    this.setState({
+      input: evt.target.value
+    });
+  }
+
+  onBlur() {
+    const doc = this.validate();
+    if (doc) {
+      ValidationActions.setValidatorDocument(doc);
+    }
+  }
+
   /**
    * New value from the validation action dropdown chosen.
    *
    * @param {String} action    the chosen action, one of `warn`, `error`.
    */
   onActionSelect(action) {
-    ValidationActions.setValidationAction(action);
+    ValidationActions.setValidationAction(action, false);
   }
 
   /**
@@ -27,14 +52,17 @@ class JSONView extends React.Component {
    * @param {String} level    the chosen level, one of `off`, `moderate`, `strict`
    */
   onLevelSelect(level) {
-    ValidationActions.setValidationLevel(level);
+    ValidationActions.setValidationLevel(level, false);
   }
 
   /**
    * The "Cancel" button from the `Editable` component has been clicked.
    * Revert all changes to the server state.
    */
   onCancel() {
+    this.setState({
+      isValidJSON: true
+    });
     ValidationActions.cancelChanges();
   }
 
@@ -46,19 +74,46 @@ class JSONView extends React.Component {
     ValidationActions.saveChanges();
   }
 
+  validate() {
+    try {
+      const doc = {
+        validator: JSON.parse(this.state.input),
+        validationLevel: this.props.validationLevel,
+        validationAction: this.props.validationAction
+      };
+      this.setState({
+        isValidJSON: true
+      });
+      return doc;
+    } catch (e) {
+      this.setState({
+        isValidJSON: false
+      });
+      return false;
+    }
+  }
+
   /**
    * Render status row component.
    *
    * @returns {React.Component} The component.
    */
   render() {
+    const editableProps = {
+      editState: this.props.editState,
+      childName: 'Validation',
+      onCancel: this.onCancel.bind(this),
+      onUpdate: this.onUpdate.bind(this)
+    };
+
+    if (!this.state.isValidJSON) {
+      editableProps.editState = 'error';
+      editableProps.errorMessage = 'Input is not valid JSON.';
+      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="json-view">
           <Row className="header">
             <Col lg={12} md={12} sm={12} xs={12}>
@@ -85,11 +140,15 @@ class JSONView extends React.Component {
           <hr/>
           <Row>
             <Col lg={12} md={12} sm={12} xs={12}>
-              <pre><code
-                className="json-view code"
-                // readOnly="readOnly"
-                // disabled="disabled"
-              >{JSON.stringify(this.props.validatorDoc, null, 2)}</code></pre>
+              <FormGroup validationState={this.state.errorState}>
+                <FormControl
+                  componentClass="textarea"
+                  className="json-input json-input-textarea"
+                  value={this.state.input}
+                  onChange={this.onInputChanged.bind(this)}
+                  onBlur={this.onBlur.bind(this)}
+                />
+              </FormGroup>
             </Col>
           </Row>
         </Grid>

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

@@ -30,7 +30,7 @@ class RuleBuilder extends React.Component {
    * @param {String} action    the chosen action, one of `warn`, `error`.
    */
   onActionSelect(action) {
-    ValidationActions.setValidationAction(action);
+    ValidationActions.setValidationAction(action, true);
   }
 
   /**
@@ -39,7 +39,7 @@ class RuleBuilder extends React.Component {
    * @param {String} level    the chosen level, one of `off`, `moderate`, `strict`
    */
   onLevelSelect(level) {
-    ValidationActions.setValidationLevel(level);
+    ValidationActions.setValidationLevel(level, true);
   }
 
   /**

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

@@ -40,12 +40,14 @@ class Validation extends React.Component {
   render() {
     const view = this.props.viewMode === 'Rule Builder' ?
       (
-        <RuleBuilder
-          validationRules={this.props.validationRules}
-          validationAction={this.props.validationAction}
-          validationLevel={this.props.validationLevel}
-          editState={this.props.editState}
-        />
+        <div className="validation validation-rule-builder-wrapper">
+          <RuleBuilder
+            validationRules={this.props.validationRules}
+            validationAction={this.props.validationAction}
+            validationLevel={this.props.validationLevel}
+            editState={this.props.editState}
+          />
+        </div>
       ) : (
         <JSONView
           validatorDoc={this.props.validatorDoc}
@@ -54,20 +56,20 @@ class Validation extends React.Component {
           editState={this.props.editState}
         />
       );
+
+    const activeButton = this.props.isExpressibleByRules ?
+      this.props.viewMode : 'JSON';
+
     return (
       <div className="validation">
         <Grid fluid>
-          <StatusRow>
-            <span>This is an example status row with a link.</span>
-            {' '}
-            <a href="#">more info</a>
-          </StatusRow>
           <StatusRow>
             <ViewSwitcher
               label="View as:"
               buttonLabels={['Rule Builder', 'JSON']}
-              activeButton={this.props.viewMode}
+              activeButton={activeButton}
               onClick={this.switchView.bind(this)}
+              disabled={!this.props.isExpressibleByRules}
             />
           </StatusRow>
           {view}
@@ -80,6 +82,7 @@ class Validation extends React.Component {
 Validation.propTypes = {
   editState: React.PropTypes.oneOf(['unmodified', 'modified', 'updating', 'error', 'success']).isRequired,
   viewMode: React.PropTypes.oneOf(['Rule Builder', 'JSON']).isRequired,
+  isExpressibleByRules: React.PropTypes.bool.isRequired,
   validationAction: React.PropTypes.oneOf(['warn', 'error']).isRequired,
   validatorDoc: React.PropTypes.object.isRequired,
   validationLevel: React.PropTypes.oneOf(['off', 'moderate', 'strict']).isRequired,
@@ -89,6 +92,7 @@ Validation.propTypes = {
 Validation.defaultProps = {
   editState: 'unmodified',
   viewMode: 'Rule Builder',
+  isExpressibleByRules: true,
   validationAction: 'warn',
   validatorDoc: {},
   validationLevel: 'off',