stitch-ui/src/services/mongodb/components/PermissionsEditor.js

/* eslint-disable no-underscore-dangle */
import React from "react";
import PropTypes from "prop-types";

import { MongoDBServiceRule, FieldRule } from "../mongodb_rule";
import {
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  Banner
} from "../../../core";
import ShadowDisplay from "./ShadowDisplay";
import PermissionEditor from "./PermissionEditor";

const getEditingPermState = (editingPath, editingFieldRule) => {
  if (editingPath.elements) {
    return editingFieldRule.elements;
  } else if (editingPath.other) {
    return editingFieldRule.otherFields;
  }
  return editingFieldRule.permissions;
};

export default class PermissionsEditor extends React.Component {
  constructor(props) {
    super(props);
    this.setAllowOther = this.setAllowOther.bind(this);
  }
  setAllowOther(event) {
    this.props.setOtherFieldsEnabled(
      this.props.ruleEditState.editingPath.path,
      event.target.checked
    );
  }
  render() {
    const { rule, ruleEditState, editingFieldRule } = this.props;
    const editPath = ruleEditState.editingPath;
    if (!editingFieldRule) {
      return null;
    }
    let header = (
      <span>
        Permissions on field &nbsp;
        <span className="mongo-schema-mono">{editPath.path}</span>
        &nbsp;
      </span>
    );
    const dottedPath = editPath.path;
    if (editPath.other) {
      header = (
        <span>
          Permissions on all other fields in{" "}
          {dottedPath !== null ? dottedPath : "top-level document"}
        </span>
      );
    } else if (dottedPath === null) {
      header = <span>Permissions on top-level document</span>;
    } else if (editPath.elements) {
      header = (
        <span>
          Permissions on elements in &nbsp;
          <span className="mongo-schema-mono">{editPath.path}</span>
          &nbsp;array
        </span>
      );
    }
    const permState = getEditingPermState(editPath, editingFieldRule);
    const shadows = rule.getShadows(
      editPath.path,
      editPath.elements,
      editPath.other
    );
    return (
      <div>
        <h3>
          {header}
        </h3>
        {ruleEditState.editingPath.other &&
          <FormRow last>
            <FormRowLabelGroup>
              <label className="form-row-label" htmlFor="enableOther">
                Allow All Other Fields
              </label>
            </FormRowLabelGroup>
            <FormRowInputGroup>
              <div className="slide-toggle-round-container">
                <h5 className="slide-toggle-round-label">&nbsp;</h5>
                <div className="switch">
                  <input
                    id="otherfields"
                    type="checkbox"
                    name="otherfields"
                    onChange={this.setAllowOther}
                    checked={!!permState}
                    className="slide-toggle-round"
                  />
                  <label htmlFor="otherfields" />
                </div>
              </div>
            </FormRowInputGroup>
          </FormRow>}
        {permState &&
          <span>
            <FormRow last>
              <FormRowInputGroup>
                <Banner small message={permState.read.error} error />
                <ShadowDisplay shadow={shadows.read} name="READ" />
                {(!shadows.read || permState.read.input) &&
                  <PermissionEditor
                    rule={rule}
                    editPath={editPath}
                    type={"read"}
                    name="READ"
                    tooltip="Stitch applies the MongoDB Service read rules to filter documents for read and write operations."
                    changePermissionsField={this.props.changePermissionsField}
                    discardPermissionsFieldChanges={
                      this.props.discardPermissionsFieldChanges
                    }
                    perm={permState.read}
                  />}
              </FormRowInputGroup>
            </FormRow>
            <FormRow last>
              <FormRowInputGroup>
                <Banner small message={permState.write.error} error />
                <ShadowDisplay shadow={shadows.write} name="WRITE" />
                {(!shadows.write || permState.write.input) &&
                  <PermissionEditor
                    rule={rule}
                    editPath={editPath}
                    type={"write"}
                    name="WRITE"
                    tooltip="Stitch applies the MongoDB Service write rules to determine whether a write operation is permissible. The client can modify those fields for which the write rule evaluates to true."
                    changePermissionsField={this.props.changePermissionsField}
                    discardPermissionsFieldChanges={
                      this.props.discardPermissionsFieldChanges
                    }
                    perm={permState.write}
                  />}
              </FormRowInputGroup>
            </FormRow>
            <FormRow last>
              <FormRowInputGroup>
                <Banner small message={permState.valid.error} error />
                <PermissionEditor
                  rule={rule}
                  editPath={editPath}
                  type={"valid"}
                  name="VALID"
                  tooltip="For a MongoDB Service, you can specify validation rules for update and insert operations. If the update and insert operations do not pass the validation rule, Stitch fails the operations."
                  permInput={permState.valid}
                  changePermissionsField={this.props.changePermissionsField}
                  discardPermissionsFieldChanges={
                    this.props.discardPermissionsFieldChanges
                  }
                  perm={permState.valid}
                />
              </FormRowInputGroup>
            </FormRow>
          </span>}
      </div>
    );
  }
}

PermissionsEditor.propTypes = {
  setOtherFieldsEnabled: PropTypes.func.isRequired,
  changePermissionsField: PropTypes.func.isRequired,
  discardPermissionsFieldChanges: PropTypes.func.isRequired,
  rule: PropTypes.instanceOf(MongoDBServiceRule).isRequired,
  editingFieldRule: PropTypes.instanceOf(FieldRule),
  ruleEditState: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
};
PermissionsEditor.defaultProps = {
  editingFieldRule: null
};