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

// TODO prop types
/* eslint-disable react/prop-types */
import React from "react";
import classNames from "classnames";
import { Tooltip, RichJSONEditor, Button, MiniLabel } from "../../../core";

const completer = {
  getCompletions(editor, session, pos, prefix, callback) {
    callback(null, []); // TODO
  }
};

const generateEditorKey = (ruleId, path, perm) =>
  ["mongodb/", ruleId, path, perm].join("/");

function PermissionEditor(props) {
  const {
    rule,
    editPath,
    type,
    name,
    tooltip,
    changePermissionsField,
    discardPermissionsFieldChanges,
    perm
  } = props;
  return (
    <div
      className={classNames("rich-json-input-container", {
        "rich-json-input-container-is-dirty": perm.dirty
      })}
    >
      <MiniLabel htmlFor={name}>
        {name}
        <Tooltip
          dataFor={name}
          place="top"
          classNames="tooltip-indicator tooltip-indicator-small tooltip-indicator-secondary"
          effect="float"
        >
          {tooltip}
        </Tooltip>
      </MiniLabel>
      <RichJSONEditor
        minLines={5}
        maxLines={10}
        completer={completer}
        editorProps={{ $minLines: 10 }}
        id={generateEditorKey(rule._id, type)}
        onChange={v => changePermissionsField(type, v)}
        value={perm.input}
      />
      {perm.dirty &&
        <div className="discard">
          <div className="discard-modified">Rule Modified</div>
          <div className="discard-controls">
            <Button
              small
              default
              onClick={() => discardPermissionsFieldChanges(editPath, type)}
            >
              Discard Changes
            </Button>
          </div>
        </div>}
    </div>
  );
}
export default PermissionEditor;