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

/* eslint-disable react/prefer-stateless-function */

import React from "react";
import PropTypes from "prop-types";
import FieldRuleDisplay from "./FieldRuleDisplay";
import PermissionsEditor from "./PermissionsEditor";
import { MongoDBServiceRule } from "../mongodb_rule";
import { Tooltip } from "../../../core";

export default class FieldBrowseEditor extends React.Component {
  componentDidMount() {
    this.props.setEditingPath(null, false, false);
  }
  componentWillReceiveProps(nextProps) {
    if (this.props.rule._id !== nextProps.rule._id) {
      this.props.setEditingPath(null, false, false);
    }
  }
  render() {
    const { open, rule, editingFieldRule, ruleEditState } = this.props;
    const {
      changePermissionsField,
      discardPermissionsFieldChanges,
      setOtherFieldsEnabled
    } = this.props;
    if (!open) {
      return null;
    }
    return (
      <div className="splitpanel-rightside-tabs-content mongo-field-browse">
        <div className="mongo-field-browse-fields">
          <span>
            <div className="mongo-schema-field">
              <span className="mongo-schema-fieldname">
                <span>
                  <div className="mongo-schema-indent" />
                </span>
                <span className="mongo-schema-header mongo-schema-header-first">
                  FIELD NAME
                </span>
              </span>
              <span className="mongo-schema-value">
                <span className="mongo-schema-header mongo-schema-header-middle">
                  TYPE
                </span>
                <span className="mongo-schema-value">
                  <span className="mongo-schema-header mongo-schema-header-last">
                    RULE
                    <Tooltip
                      dataFor="named-pipeline-tooltip"
                      place="top"
                      classNames="tooltip-indicator tooltip-indicator-small tooltip-indicator-secondary"
                      effect="solid"
                    >
                      This indicates if read, write, or validation permissions
                      have been invoked.
                    </Tooltip>
                  </span>
                </span>
              </span>
            </div>
          </span>
          <FieldRuleDisplay
            rule={rule}
            depth={0}
            field={""}
            fieldRule={rule.fieldRules}
          />
        </div>
        <div className="mongo-field-browse-permissions">
          <PermissionsEditor
            rule={rule}
            discardPermissionsFieldChanges={(field, type) =>
              discardPermissionsFieldChanges(rule._id, field, type)}
            changePermissionsField={(field, value) =>
              changePermissionsField(rule._id, field, value)}
            setOtherFieldsEnabled={(path, enabled) =>
              setOtherFieldsEnabled(rule._id, path, enabled)}
            editingFieldRule={editingFieldRule}
            ruleEditState={ruleEditState}
          />
        </div>
      </div>
    );
  }
}

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