COMPASS-203: Create Collection

src/app/home/index.js

@@ -151,12 +151,6 @@ var HomeView = View.extend({
       'server memory size (gb)': app.instance.host.memory_bits / 1024 / 1024 / 1024
     });
 
-    const model = this._getCollection();
-    // When the current collection no longer exists
-    if (NamespaceStore.ns && !model) {
-      NamespaceStore.ns = null;
-    }
-
     if (!NamespaceStore.ns) {
       app.instance.collections.unselectAll();
       if (app.instance.collections.length === 0) {

src/internal-packages/database/index.js

@@ -1,18 +1,27 @@
 const app = require('ampersand-app');
 const CollectionsTable = require('./lib/components');
+const CreateCollectionCheckbox = require('./lib/components/create-collection-checkbox');
+const CreateCollectionInput = require('./lib/components/create-collection-input');
+const CreateCollectionSizeInput = require('./lib/components/create-collection-size-input');
 
 /**
  * Activate all the components in the Schema package.
  */
 function activate() {
   app.appRegistry.registerComponent('Database.CollectionsTable', CollectionsTable);
+  app.appRegistry.registerComponent('Database.CreateCollectionCheckbox', CreateCollectionCheckbox);
+  app.appRegistry.registerComponent('Database.CreateCollectionInput', CreateCollectionInput);
+  app.appRegistry.registerComponent('Database.CreateCollectionSizeInput', CreateCollectionSizeInput);
 }
 
 /**
  * Deactivate all the components in the Schema package.
  */
 function deactivate() {
   app.appRegistry.deregisterComponent('Database.CollectionsTable');
+  app.appRegistry.deregisterComponent('Database.CreateCollectionCheckbox');
+  app.appRegistry.deregisterComponent('Database.CreateCollectionInput');
+  app.appRegistry.deregisterComponent('Database.CreateCollectionSizeInput');
 }
 
 module.exports.activate = activate;

src/internal-packages/database/lib/actions/collections-actions.js

@@ -1,12 +1,14 @@
 const Reflux = require('reflux');
 
 /**
- * The actions used by the server stats components.
+ * The actions used by the database components.
  */
 const Actions = Reflux.createActions([
   'sortCollections',
-  'deleteCollection',
-  'createCollection'
+  'dropCollection',
+  'createCollection',
+  'openCreateCollectionDialog',
+  'openDropCollectionDialog'
 ]);
 
 module.exports = Actions;

src/internal-packages/database/lib/components/collections-table.jsx

@@ -1,6 +1,8 @@
 const React = require('react');
 const app = require('ampersand-app');
 const CollectionsActions = require('../actions/collections-actions');
+const CreateCollectionDialog = require('./create-collection-dialog');
+const TextButton = require('hadron-app-registry').TextButton;
 const numeral = require('numeral');
 
 const _ = require('lodash');
@@ -22,6 +24,10 @@ class CollectionsTable extends React.Component {
     // CollectionsActions.deleteCollection(collName);
   }
 
+  onCreateCollectionButtonClicked() {
+    CollectionsActions.openCreateCollectionDialog();
+  }
+
   render() {
     // convert some of the values to human-readable units (MB, GB, ...)
     // we do this here so that sorting is not affected in the store
@@ -45,6 +51,12 @@ class CollectionsTable extends React.Component {
 
     return (
       <div className="collections-table">
+        <div className="collections-table-create-button">
+          <TextButton
+            text="Create Collection"
+            className="btn btn-default btn-sm"
+            clickHandler={this.onCreateCollectionButtonClicked.bind(this)} />
+        </div>
         <this.SortableTable
           theme="light"
           columns={this.props.columns}
@@ -56,6 +68,7 @@ class CollectionsTable extends React.Component {
           onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
           onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
         />
+        <CreateCollectionDialog />
       </div>
     );
   }

src/internal-packages/server-stats/lib/component/create-collection-checkbox.jsx → src/internal-packages/database/lib/components/create-collection-checkbox.jsx

@@ -1,5 +1,8 @@
 const React = require('react');
 
+/**
+ * A checkbox in the create collection dialog.
+ */
 class CreateCollectionCheckbox extends React.Component {
 
   /**

src/internal-packages/database/lib/components/create-collection-dialog.jsx

@@ -0,0 +1,204 @@
+const app = require('ampersand-app');
+const shell = require('electron').shell;
+const React = require('react');
+const Modal = require('react-bootstrap').Modal;
+const TextButton = require('hadron-app-registry').TextButton;
+const NamespaceStore = require('hadron-reflux-store').NamespaceStore;
+const toNS = require('mongodb-ns');
+const Actions = require('../actions/collections-actions');
+const CreateCollectionStore = require('../stores/create-collection-store');
+const CreateCollectionInput = require('./create-collection-input');
+const CreateCollectionSizeInput = require('./create-collection-size-input');
+const CreateCollectionCheckbox = require('./create-collection-checkbox');
+
+/**
+ * The help icon for capped collections url.
+ */
+const HELP_URL = 'https://docs.mongodb.com/manual/core/capped-collections/';
+
+/**
+ * The dialog to create a collection.
+ */
+class CreateCollectionDialog extends React.Component {
+
+  /**
+   * The component constructor.
+   *
+   * @param {Object} props - The properties.
+   */
+  constructor(props) {
+    super(props);
+    this.state = { open: false };
+    this.ModalStatusMessage = app.appRegistry.getComponent('App.ModalStatusMessage');
+  }
+
+  /**
+   * Subscribe to the open dialog store.
+   */
+  componentWillMount() {
+    this.unsubscribeOpen = Actions.openCreateCollectionDialog.listen(this.onOpenDialog.bind(this));
+    this.unsubscribeCreate = CreateCollectionStore.listen(this.onCollectionCreated.bind(this));
+  }
+
+  /**
+   * Unsubscribe from the store.
+   */
+  componentWillUnmount() {
+    this.unsubscribeOpen();
+    this.unsubscribeCreate();
+  }
+
+  /**
+   * When the open dialog action is fired.
+   */
+  onOpenDialog() {
+    this.setState({
+      open: true,
+      collectionName: '',
+      databaseName: toNS(NamespaceStore.ns).database,
+      capped: false,
+      maxSize: '',
+      error: false,
+      inProgress: false,
+      errorMessage: ''
+    });
+  }
+
+  /**
+   * When the cancel button is clicked.
+   */
+  onCancelButtonClicked() {
+    this.setState({ open: false });
+  }
+
+  /**
+   * Initiate the attempt to create a collection.
+   */
+  onCreateCollectionButtonClicked() {
+    this.setState({ inProgress: true, error: false, errorMessage: '' });
+    Actions.createCollection(
+      this.state.databaseName,
+      this.state.collectionName,
+      this.state.capped,
+      this.state.maxSize
+    );
+  }
+
+  /**
+   * Handle finish collection creation.
+   *
+   * @param {Error} error - The error, if any.
+   */
+  onCollectionCreated(error) {
+    if (error) {
+      this.setState({ inProgress: false, error: true, errorMessage: error.message });
+    } else {
+      this.setState({ inProgress: false, error: false, errorMessage: '', open: false });
+    }
+  }
+
+  /**
+   * Handle changing the collection name.
+   *
+   * @param {Event} evt - The change event.
+   */
+  onCollectionNameChange(evt) {
+    this.setState({ collectionName: evt.target.value });
+  }
+
+  /**
+   * Handle clicking the capped checkbox.
+   */
+  onCappedClicked() {
+    this.setState({ capped: !this.state.capped });
+  }
+
+  /**
+   * Handle clicking the help icon.
+
+   * @param {Event} evt - The event.
+   */
+  onHelpClicked(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    shell.openExternal(HELP_URL);
+  }
+
+  /**
+   * Change the max collection size.
+   *
+   * @param {Event} evt - The event.
+   */
+  onMaxSizeChange(evt) {
+    this.setState({ maxSize: evt.target.value });
+  }
+
+  /**
+   * Render the max size component when capped is selected.
+   *
+   * @returns {React.Component} The component.
+   */
+  renderMaxSize() {
+    if (this.state.capped) {
+      return (
+        <CreateCollectionSizeInput
+          name="bytes max"
+          placeholder="Enter max bytes"
+          value={this.state.maxSize}
+          onChangeHandler={this.onMaxSizeChange.bind(this)} />
+      );
+    }
+  }
+
+  /**
+   * Render the modal dialog.
+   *
+   * @returns {React.Component} The react component.
+   */
+  render() {
+    return (
+      <Modal show={this.state.open} backdrop="static" keyboard={false} dialogClassName="create-collection-dialog">
+        <Modal.Header>
+          <Modal.Title>Create Collection</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          <form name="create-collection-dialog-form">
+            <CreateCollectionInput
+              name="Collection Name"
+              value={this.state.collectionName}
+              onChangeHandler={this.onCollectionNameChange.bind(this)} />
+            <CreateCollectionCheckbox
+              name="Capped Collection"
+              className="create-collection-dialog-capped"
+              checked={this.state.checked}
+              onClickHandler={this.onCappedClicked.bind(this)}
+              onHelpClickHandler={this.onHelpClicked.bind(this)} />
+            {this.renderMaxSize()}
+            {this.state.error ?
+              <this.ModalStatusMessage icon="times" message={this.state.errorMessage} type="error" />
+              : null}
+            {this.state.inProgress ?
+              <this.ModalStatusMessage icon="align-center" message={'Create in Progress'} type="in-progress" />
+              : null}
+          </form>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <TextButton
+            className="btn btn-default"
+            text="Cancel"
+            clickHandler={this.onCancelButtonClicked.bind(this)} />
+          <TextButton
+            className="btn btn-primary"
+            text="Create Collection"
+            clickHandler={this.onCreateCollectionButtonClicked.bind(this)} />
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+CreateCollectionDialog.displayName = 'CreateCollectionDialog';
+
+module.exports = CreateCollectionDialog;

src/internal-packages/server-stats/lib/component/create-collection-input.jsx → src/internal-packages/database/lib/components/create-collection-input.jsx

@@ -1,5 +1,8 @@
 const React = require('react');
 
+/**
+ * An input field in the create collection checkbox.
+ */
 class CreateCollectionInput extends React.Component {
 
   /**

src/internal-packages/server-stats/lib/component/create-collection-size-input.jsx → src/internal-packages/database/lib/components/create-collection-size-input.jsx

@@ -1,5 +1,8 @@
 const React = require('react');
 
+/**
+ * A size input field in the create collection checkbox.
+ */
 class CreateCollectionSizeInput extends React.Component {
 
   /**
@@ -12,11 +15,11 @@ class CreateCollectionSizeInput extends React.Component {
       <div className="form-group">
         <input
           type="text"
-          className="form-control create-database-dialog-size-input"
+          className="form-control create-collection-dialog-size-input"
           onChange={this.props.onChangeHandler}
           value={this.props.value}
           placeholder={this.props.placeholder} />
-        <p className="create-database-dialog-size-field">{this.props.name}</p>
+        <p className="create-collection-dialog-size-field">{this.props.name}</p>
       </div>
     );
   }