Compass 317 disable validation builder (#631)

* COMPASS-317: added a isWritable prop to some of the validation fields

* COMPASS-317 added isWritable status

* COMPASS-317 UI disabled if isWritable is false + tested

* added read preference option for listCollections

* COMPASS-317 included data-service update

* removed erroneous isWritable calls and fixed test cases

* rebased with master, added defaults to rules to pass tests

* with fixes

* COMPASS-317 added a wait for error message in functional test

* adding isWritable flag on validation rule test

* allowed regex options to be displayed but not selected

Author: Satya

src/internal-packages/validation/lib/components/common/bson-type-selector.jsx

@@ -105,6 +105,7 @@ class BSONTypeSelector extends React.Component {
         label="BSON Type"
         value={selectedTypeName}
         onSelect={this.onTypeClicked.bind(this)}
+        disabled={this.props.isDisabled}
       />
     );
   }
@@ -115,7 +116,8 @@ BSONTypeSelector.propTypes = {
   typeAlias: React.PropTypes.string,
   typeName: React.PropTypes.string,
   onTypeClicked: React.PropTypes.func,
-  serverVersion: React.PropTypes.string
+  serverVersion: React.PropTypes.string,
+  isDisabled: React.PropTypes.bool
 };
 
 BSONTypeSelector.displayName = 'BSONTypeSelector';

src/internal-packages/validation/lib/components/common/option-selector.jsx

@@ -29,6 +29,7 @@ class OptionSelector extends React.Component {
           id={this.props.id}
           onSelect={this.props.onSelect}
           title={title}
+          disabled={this.props.disabled}
         >{menuItems}
         </DropdownButton>
       </div>
@@ -42,13 +43,15 @@ OptionSelector.propTypes = {
   options: React.PropTypes.object.isRequired,
   label: React.PropTypes.string,
   value: React.PropTypes.string,
-  onSelect: React.PropTypes.func
+  onSelect: React.PropTypes.func,
+  disabled: React.PropTypes.bool
 };
 
 OptionSelector.defaultProps = {
   label: '',
   value: '',
-  onSelect: () => {}
+  onSelect: () => {},
+  disabled: false
 };
 
 OptionSelector.displayName = 'OptionSelector';

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

@@ -31,7 +31,7 @@ class RangeInput extends React.Component {
     super(props);
     const op = this._getOperatorString(props);
     this.state = {
-      disabled: op === 'none',
+      hidden: op === 'none',
       operator: op,
       value: this.props.value,
       isValid: true,
@@ -73,7 +73,7 @@ class RangeInput extends React.Component {
    */
   onDropdownSelect(evtKey) {
     this.setState({
-      disabled: evtKey === 'none',
+      hidden: evtKey === 'none',
       operator: evtKey
     });
     this.props.onRangeInputBlur({
@@ -93,7 +93,7 @@ class RangeInput extends React.Component {
     if (!force && !this.state.hasStartedValidating) {
       return true;
     }
-    if (this.state.disabled) {
+    if (this.state.hidden) {
       return true;
     }
     const value = this.state.value;
@@ -118,7 +118,7 @@ class RangeInput extends React.Component {
   _getOperatorString(props) {
     props = props || this.props;
 
-    if (props.disabled) {
+    if (props.hidden) {
       return 'none';
     }
     if (props.upperBound) {
@@ -152,21 +152,22 @@ class RangeInput extends React.Component {
     const boundString = `${this.props.upperBound ?
         'upper' : 'lower'} bound`.toUpperCase();
 
-    // disabled, only show dropdown
-    if (this.state.disabled) {
+    // hidden, only show dropdown
+    if (this.state.hidden) {
       return (
         <FormGroup>
           <DropdownButton
             id={`range-input-${this.props.upperBound ? 'upper' : 'lower'}`}
             style={{width: this.props.width}}
             title={this.state.operator}
-            onSelect={this.onDropdownSelect.bind(this)}>
+            onSelect={this.onDropdownSelect.bind(this)}
+            disabled={this.props.disabled}>
             {this.renderMenuItems()}
           </DropdownButton>
         </FormGroup>
       );
     }
-    // not disabled, render input group with value input and operator dropdown
+    // not hidden, render input group with value input and operator dropdown
     const placeholder = `${boundString}`.toLowerCase();
     const validationState = this.state.isValid ? null : 'error';
     return (
@@ -176,7 +177,8 @@ class RangeInput extends React.Component {
             id={`range-input-${this.props.upperBound ? 'upper' : 'lower'}`}
             componentClass={InputGroup.Button}
             title={this.state.operator}
-            onSelect={this.onDropdownSelect.bind(this)}>
+            onSelect={this.onDropdownSelect.bind(this)}
+            disabled={this.props.disabled}>
             {this.renderMenuItems()}
           </DropdownButton>
           <FormControl
@@ -185,7 +187,8 @@ class RangeInput extends React.Component {
             placeholder={placeholder}
             value={this.state.value}
             onChange={this.onInputChange.bind(this)}
-            onBlur={this.onInputBlur.bind(this)}/>
+            onBlur={this.onInputBlur.bind(this)}
+            disabled={this.props.disabled}/>
         </InputGroup>
       </FormGroup>
     );
@@ -198,18 +201,20 @@ RangeInput.propTypes = {
   upperBound: React.PropTypes.bool,
   validationState: React.PropTypes.string,
   boundIncluded: React.PropTypes.bool.isRequired,
-  disabled: React.PropTypes.bool.isRequired,
+  hidden: React.PropTypes.bool.isRequired,
   onRangeInputBlur: React.PropTypes.func,
-  width: React.PropTypes.number
+  width: React.PropTypes.number,
+  disabled: React.PropTypes.bool
 };
 
 RangeInput.defaultProps = {
-  disabled: false,
+  hidden: false,
   boundIncluded: false,
   upperBound: false,
   validationState: null,
   value: '',
-  width: 160
+  width: 160,
+  disabled: false
 };
 
 RangeInput.displayName = 'RangeInput';

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

@@ -125,6 +125,7 @@ class JSONView extends React.Component {
                   value={this.props.validationAction}
                   label="validation action:"
                   onSelect={this.onActionSelect.bind(this)}
+                  disabled={!this.props.isWritable}
                 />
                 <OptionSelector
                   id="validation-level-selector"
@@ -133,6 +134,7 @@ class JSONView extends React.Component {
                   value={this.props.validationLevel}
                   label="validation level:"
                   onSelect={this.onLevelSelect.bind(this)}
+                  disabled={!this.props.isWritable}
                 />
               </div>
             </Col>
@@ -147,6 +149,7 @@ class JSONView extends React.Component {
                   value={this.state.input}
                   onChange={this.onInputChanged.bind(this)}
                   onBlur={this.onBlur.bind(this)}
+                  disabled={!this.props.isWritable}
                 />
               </FormGroup>
             </Col>
@@ -161,7 +164,12 @@ JSONView.propTypes = {
   editState: React.PropTypes.oneOf(['unmodified', 'modified', 'updating', 'error', 'success']).isRequired,
   validationAction: React.PropTypes.oneOf(['warn', 'error']).isRequired,
   validationLevel: React.PropTypes.oneOf(['off', 'moderate', 'strict']).isRequired,
-  validatorDoc: React.PropTypes.object.isRequired
+  validatorDoc: React.PropTypes.object.isRequired,
+  isWritable: React.PropTypes.bool
+};
+
+JSONView.defaultProps = {
+  isWritable: false
 };
 
 JSONView.displayName = 'JSONView';

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

@@ -91,9 +91,24 @@ class RuleBuilder extends React.Component {
 
   renderRules() {
     return _.map(this.props.validationRules, (rule) => {
-      return <Rule ref={rule.id} key={rule.id} serverVersion={this.props.serverVersion} {...rule} />;
+      return (<Rule ref={rule.id}
+        key={rule.id}
+        isWritable={this.props.isWritable}
+        serverVersion={this.props.serverVersion}
+        {...rule} />);
     });
   }
+
+  renderAddButton() {
+    return (
+      <Button
+        bsStyle="success"
+        bsSize="xsmall"
+        disabled={!this.props.isWritable}
+        onClick={this.onAddClick.bind(this)}>+ Add Rule
+      </Button>);
+  }
+
   /**
    * Render status row component.
    *
@@ -119,11 +134,7 @@ class RuleBuilder extends React.Component {
         <Grid fluid className="rule-builder">
           <Row className="header">
             <Col lg={6} md={6} sm={6} xs={6}>
-              <Button
-                bsStyle="success"
-                bsSize="xsmall"
-                onClick={this.onAddClick.bind(this)}>+ Add Rule
-              </Button>
+              {this.props.isWritable ? this.renderAddButton() : null}
             </Col>
             <Col lg={6} md={6} sm={6} xs={6}>
               <div className="pull-right">
@@ -133,6 +144,7 @@ class RuleBuilder extends React.Component {
                   options={{warn: 'Warning', error: 'Error'}}
                   value={this.props.validationAction}
                   label="validation action:"
+                  disabled={!this.props.isWritable}
                   onSelect={this.onActionSelect.bind(this)}
                 />
                 <OptionSelector
@@ -141,6 +153,7 @@ class RuleBuilder extends React.Component {
                   options={{off: 'Off', moderate: 'Moderate', strict: 'Strict'}}
                   value={this.props.validationLevel}
                   label="validation level:"
+                  disabled={!this.props.isWritable}
                   onSelect={this.onLevelSelect.bind(this)}
                 />
               </div>
@@ -175,7 +188,8 @@ RuleBuilder.propTypes = {
   validationAction: React.PropTypes.oneOf(['warn', 'error']).isRequired,
   validationLevel: React.PropTypes.oneOf(['off', 'moderate', 'strict']).isRequired,
   validationRules: React.PropTypes.array.isRequired,
-  serverVersion: React.PropTypes.string
+  serverVersion: React.PropTypes.string.isRequired,
+  isWritable: React.PropTypes.bool.isRequired
 };
 
 RuleBuilder.displayName = 'RuleBuilder';

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

@@ -213,7 +213,8 @@ class RuleCategoryRange extends React.Component {
         <RangeInput
             ref="lower"
             boundIncluded={this.props.parameters.lowerBoundType === '$gte'}
-            disabled={this.props.parameters.lowerBoundType === null}
+            hidden={this.props.parameters.lowerBoundType === null}
+            disabled={!this.props.isWritable}
             value={this.props.parameters.lowerBoundValue || ''}
             onRangeInputBlur={this.onRangeInputBlur.bind(this, 'lower')}
             validationState={validationState}
@@ -222,7 +223,8 @@ class RuleCategoryRange extends React.Component {
             ref="upper"
             upperBound
             boundIncluded={this.props.parameters.upperBoundType === '$lte'}
-            disabled={this.props.parameters.upperBoundType === null}
+            hidden={this.props.parameters.upperBoundType === null}
+            disabled={!this.props.isWritable}
             value={this.props.parameters.upperBoundValue || ''}
             onRangeInputBlur={this.onRangeInputBlur.bind(this, 'upper')}
             validationState={validationState}
@@ -234,7 +236,8 @@ class RuleCategoryRange extends React.Component {
 
 RuleCategoryRange.propTypes = {
   id: React.PropTypes.string.isRequired,
-  parameters: React.PropTypes.object.isRequired
+  parameters: React.PropTypes.object.isRequired,
+  isWritable: React.PropTypes.bool.isRequired
 };
 
 RuleCategoryRange.displayName = 'RuleCategoryRange';

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

@@ -136,6 +136,7 @@ class RuleCategoryRegex extends React.Component {
           placeholder="Enter regular expression"
           onChange={this.onChange.bind(this)}
           onBlur={this.onBlur.bind(this)}
+          disabled={!this.props.isWritable}
         />
         <DropdownButton id="regex-options"
           title="options"
@@ -146,6 +147,7 @@ class RuleCategoryRegex extends React.Component {
               type="checkbox"
               value="i"
               checked={this.isOptionSelected('i')}
+              disabled={!this.props.isWritable}
               onChange={this.onOptionChange.bind(this)} />
             <b>i</b>
             {CASE_INSENSITIVE}
@@ -155,6 +157,7 @@ class RuleCategoryRegex extends React.Component {
               type="checkbox"
               value="m"
               checked={this.isOptionSelected('m')}
+              disabled={!this.props.isWritable}
               onChange={this.onOptionChange.bind(this)} />
             <b>m</b>
             {MULTILINE}
@@ -164,6 +167,7 @@ class RuleCategoryRegex extends React.Component {
               type="checkbox"
               value="x"
               checked={this.isOptionSelected('x')}
+              disabled={!this.props.isWritable}
               onChange={this.onOptionChange.bind(this)} />
             <b>x</b>
             {EXTENDED}
@@ -173,6 +177,7 @@ class RuleCategoryRegex extends React.Component {
               type="checkbox"
               value="s"
               checked={this.isOptionSelected('s')}
+              disabled={!this.props.isWritable}
               onChange={this.onOptionChange.bind(this)} />
             <b>s</b>
             {NEWLINE}
@@ -185,7 +190,8 @@ class RuleCategoryRegex extends React.Component {
 
 RuleCategoryRegex.propTypes = {
   id: React.PropTypes.string.isRequired,
-  parameters: React.PropTypes.object.isRequired
+  parameters: React.PropTypes.object.isRequired,
+  isWritable: React.PropTypes.bool.isRequired
 };
 
 RuleCategoryRegex.displayName = 'RuleCategoryRegex';

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

@@ -80,15 +80,20 @@ class RuleCategoryType extends React.Component {
     const typeNumber = this.props.parameters.type;
 
     return (
-      <BSONTypeSelector typeNumber={typeNumber} serverVersion={this.props.serverVersion} onTypeClicked={this.onTypeClicked.bind(this)} />
+      <BSONTypeSelector
+        typeNumber={typeNumber}
+        serverVersion={this.props.serverVersion}
+        isDisabled={!this.props.isWritable}
+        onTypeClicked={this.onTypeClicked.bind(this)} />
     );
   }
 }
 
 RuleCategoryType.propTypes = {
   id: React.PropTypes.string.isRequired,
   parameters: React.PropTypes.object.isRequired,
-  serverVersion: React.PropTypes.string
+  serverVersion: React.PropTypes.string.isRequired,
+  isWritable: React.PropTypes.bool.isRequired
 };
 
 RuleCategoryType.displayName = 'RuleCategoryType';

src/internal-packages/validation/lib/components/rule-category-selector.jsx

@@ -75,6 +75,7 @@ class RuleCategorySelector extends React.Component {
           label=""
           value={this.state.category}
           onSelect={this.onSelect.bind(this)}
+          disabled={!this.props.isWritable}
         />
       </FormGroup>
     );
@@ -83,7 +84,8 @@ class RuleCategorySelector extends React.Component {
 
 RuleCategorySelector.propTypes = {
   id: React.PropTypes.string.isRequired,
-  category: React.PropTypes.string.isRequired
+  category: React.PropTypes.string.isRequired,
+  isWritable: React.PropTypes.bool
 };
 
 RuleCategorySelector.displayName = 'RuleCategorySelector';

src/internal-packages/validation/lib/components/rule-field-selector.jsx

@@ -80,6 +80,7 @@ class RuleFieldSelector extends React.Component {
           value={this.state.value}
           onChange={this.onFieldChanged.bind(this)}
           onBlur={this.onBlur.bind(this)}
+          disabled={!this.props.isWritable}
         />
       </FormGroup>
     );
@@ -88,7 +89,8 @@ class RuleFieldSelector extends React.Component {
 
 RuleFieldSelector.propTypes = {
   id: React.PropTypes.string.isRequired,
-  field: React.PropTypes.string.isRequired
+  field: React.PropTypes.string.isRequired,
+  isWritable: React.PropTypes.bool
 };
 
 RuleFieldSelector.displayName = 'RuleFieldSelector';