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

import React from "react";
import PropTypes from "prop-types";
import {
  Banner,
  MiniLabel,
  FormRow,
  FormRowInputGroup,
  Button
} from "../../../core";
import { validateCollectionName, validateDBName } from "../validation";

export default class AddNamespaceForm extends React.Component {
  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
    this.cancel = this.cancel.bind(this);
    this.changeCollection = this.changeCollection.bind(this);
    this.changeDatabase = this.changeDatabase.bind(this);
  }
  changeCollection(e) {
    this.props.changeCollection(e.target.value);
  }
  changeDatabase(e) {
    this.props.changeDatabase(e.target.value);
  }
  submit() {
    const {
      collection,
      database,
      setCreateNamespaceError,
      createNamespace,
      changeCollection,
      changeDatabase
    } = this.props;

    const collectionErr = validateCollectionName(collection);
    if (collectionErr) {
      setCreateNamespaceError(collectionErr);
      return Promise.resolve();
    }

    const dbErr = validateDBName(database);
    if (dbErr) {
      setCreateNamespaceError(dbErr);
      return Promise.resolve();
    }
    setCreateNamespaceError(null);
    return createNamespace(database, collection)
      .then(() => {
        changeCollection("");
        changeDatabase("");
      })
      .catch(e => setCreateNamespaceError(e.message));
  }
  cancel(e) {
    e.stopPropagation();
    this.props.changeCollection("");
    this.props.changeDatabase("");
    this.props.setCreateNamespaceError(null);
    this.props.onCancel();
  }
  render() {
    const { open, collection, database, createNamespaceError } = this.props;
    if (!open) {
      return null;
    }
    return (
      <span>
        <FormRow>
          <FormRowInputGroup>
            <MiniLabel htmlFor="database">Database</MiniLabel>
            <div>
              <input
                name="database"
                id="database"
                type="text"
                onChange={this.changeDatabase}
                value={database}
              />
            </div>
          </FormRowInputGroup>
        </FormRow>
        <FormRow>
          <FormRowInputGroup>
            <MiniLabel htmlFor="collection">Collection</MiniLabel>
            <div>
              <input
                name="collection"
                id="collection"
                type="text"
                onChange={this.changeCollection}
                value={collection}
              />
            </div>
          </FormRowInputGroup>
        </FormRow>
        <Banner message={createNamespaceError} error />
        <Button small primary onClick={this.submit}>
          Create
        </Button>
        <Button small default onClick={this.cancel}>
          Cancel
        </Button>
      </span>
    );
  }
}
AddNamespaceForm.propTypes = {
  createNamespace: PropTypes.func.isRequired,
  changeCollection: PropTypes.func.isRequired,
  changeDatabase: PropTypes.func.isRequired,
  setCreateNamespaceError: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,
  collection: PropTypes.string,
  database: PropTypes.string,
  createNamespaceError: PropTypes.string,
  open: PropTypes.bool
};
AddNamespaceForm.defaultProps = {
  createNamespaceError: "",
  collection: "",
  database: "",
  open: false
};