All files / components/validation-states validation-states.jsx

100% Statements 28/28
100% Branches 18/18
100% Functions 0/0
100% Lines 28/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 1811x 1x 1x 1x 1x 1x 1x 1x   1x         1x                 1x         1x         1x         1x                                             20x                           10x 8x 2x                 6x 2x                 4x 3x                                               10x 7x                                                             10x 3x                             10x                   1x  
import React, { Component } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { ZeroState, StatusRow } from 'hadron-react-components';
import { TextButton } from 'hadron-react-buttons';
import ValidationEditor from 'components/validation-editor';
import SampleDocuments from 'components/sample-documents';
import { ZeroGraphic } from 'components/zero-graphic';
 
import styles from './validation-states.less';
 
/**
 * Warnings for the banner.
 */
export const READ_ONLY_WARNING = {
  collectionReadOnly: 'Schema validation on readonly views are not supported.',
  writeStateStoreReadOnly: 'This action is not available on a secondary node.',
  oldServerReadOnly: 'Compass no longer supports the visual rule builder for server versions below 3.2. To use the visual rule builder, please'
};
 
/**
 * Header for zero state.
 */
const HEADER = 'Add validation rules';
 
/**
 * Additional text for zero state.
 */
const SUBTEXT = 'Create rules to enforce data structure of documents on updates and inserts.';
 
/**
 * Link to the schema validation documentation.
 */
const DOC_SCHEMA_VALIDATION = 'https://docs.mongodb.com/manual/core/schema-validation/';
 
/**
 * Link to the upgrading to the latest revision documentation.
 */
const DOC_UPGRADE_REVISION = 'https://docs.mongodb.com/manual/tutorial/upgrade-revision/';
 
/**
 * The ValidationStates component.
 */
class ValidationStates extends Component {
  static displayName = 'ValidationStates';
 
  static propTypes = {
    isZeroState: PropTypes.bool.isRequired,
    changeZeroState: PropTypes.func.isRequired,
    zeroStateChanged: PropTypes.func.isRequired,
    editMode: PropTypes.object.isRequired,
    openLink: PropTypes.func.isRequired,
    serverVersion: PropTypes.string
  }
 
  /**
   * Checks if the validation is editable.
   *
   * @returns {Boolean} True if it is editable.
   */
  isEditable() {
    return (
      !this.props.editMode.collectionReadOnly &&
      !this.props.editMode.hardonReadOnly &&
      !this.props.editMode.writeStateStoreReadOnly &&
      !this.props.editMode.oldServerReadOnly
    );
  }
 
  /**
   * Renders the banner if the validatiion is not editable.
   *
   * @returns {React.Component} The component.
   */
  renderBanner() {
    if (!this.isEditable()) {
      if (this.props.editMode.collectionReadOnly) {
        return (
          <StatusRow style="warning">
            <div id="collectionReadOnly">
              {READ_ONLY_WARNING.collectionReadOnly}
            </div>
          </StatusRow>
        );
      }
 
      if (this.props.editMode.writeStateStoreReadOnly) {
        return (
          <StatusRow style="warning">
            <div id="writeStateStoreReadOnly">
              {READ_ONLY_WARNING.writeStateStoreReadOnly}
            </div>
          </StatusRow>
        );
      }
 
      if (this.props.editMode.oldServerReadOnly) {
        return (
          <StatusRow style="warning">
            <div id="oldServerReadOnly">
              {READ_ONLY_WARNING.oldServerReadOnly}
              <div>&nbsp;</div>
              <a
                className={classnames(styles['upgrade-link'])}
                onClick={this.props.openLink.bind(this, DOC_UPGRADE_REVISION)}
              >
                upgrade to MongoDB 3.2.
              </a>
            </div>
          </StatusRow>
        );
      }
    }
  }
 
  /**
   * Renders the schema validation zero state.
   *
   * @returns {React.Component} The component.
   */
  renderZeroState() {
    if (this.props.isZeroState) {
      return (
        <div className={classnames(styles['zero-state-container'])}>
          <ZeroGraphic />
          <ZeroState header={HEADER} subtext={SUBTEXT}>
            <div className={classnames(styles['zero-state-action'])}>
              <div>
                <TextButton
                  className={`btn btn-primary btn-lg ${
                    !this.isEditable() ? 'disabled' : ''
                  }`}
                  text="Add Rule"
                  clickHandler={this.props.changeZeroState.bind(this, false)} />
              </div>
              <a
                className={classnames(styles['zero-state-link'])}
                onClick={this.props.openLink.bind(this, DOC_SCHEMA_VALIDATION)}>
                Learn more about validations
              </a>
            </div>
          </ZeroState>
        </div>
      );
    }
  }
 
  /**
   * Renders the schema validation content.
   *
   * @returns {React.Component} The component.
   */
  renderContent() {
    if (!this.props.isZeroState) {
      return (
        <div className={classnames(styles['content-container'])}>
          <ValidationEditor {...this.props} isEditable={this.isEditable()} />
          <SampleDocuments {...this.props} />
        </div>
      );
    }
  }
 
  /**
   * Renders the ValidationStates component.
   *
   * @returns {React.Component} The component.
   */
  render() {
    return (
      <div className={classnames(styles['validation-states'])}>
        {this.renderBanner()}
        {this.renderZeroState()}
        {this.renderContent()}
      </div>
    );
  }
}
 
export default ValidationStates;