COMPASS-665 Decouple DDL into new package

src/app/index.less

@@ -17,6 +17,7 @@
 @import "../internal-packages/app/styles/index.less";
 @import "../internal-packages/collection-stats/styles/index.less";
 @import "../internal-packages/crud/styles/index.less";
+@import "../internal-packages/database-ddl/styles/index.less";
 @import "../internal-packages/home/styles/index.less";
 @import "../internal-packages/status/styles/index.less";
 @import "../internal-packages/query/styles/index.less";

src/internal-packages/database-ddl/index.js

@@ -0,0 +1,37 @@
+const app = require('ampersand-app');
+const Actions = require('./lib/action');
+const CreateDatabaseDialog = require('./lib/component/create-database-dialog');
+const DatabasesView = require('./lib/component/connected-databases');
+const DropDatabaseDialog = require('./lib/component/drop-database-dialog');
+const CreateDatabaseStore = require('./lib/store/create-database-store');
+const DatabasesStore = require('./lib/store/databases-store');
+const DropDatabaseStore = require('./lib/store/drop-database-store');
+
+/**
+ * Activate all the components in the Database DDL package.
+ */
+function activate() {
+  app.appRegistry.registerAction('DatabaseDDL.Actions', Actions);
+  app.appRegistry.registerComponent('DatabaseDDL.CreateDatabaseDialog', CreateDatabaseDialog);
+  app.appRegistry.registerComponent('DatabaseDDL.DatabasesView', DatabasesView);
+  app.appRegistry.registerComponent('DatabaseDDL.DropDatabaseDialog', DropDatabaseDialog);
+  app.appRegistry.registerStore('DatabaseDDL.CreateDatabaseStore', CreateDatabaseStore);
+  app.appRegistry.registerStore('DatabaseDDL.DatabasesStore', DatabasesStore);
+  app.appRegistry.registerStore('DatabaseDDL.DropDatabaseStore', DropDatabaseStore);
+}
+
+/**
+ * Deactivate all the components in the Database DDL package.
+ */
+function deactivate() {
+  app.appRegistry.deregisterAction('DatabaseDDL.Actions');
+  app.appRegistry.deregisterComponent('DatabaseDDL.CreateDatabaseDialog');
+  app.appRegistry.deregisterComponent('DatabaseDDL.DatabasesView');
+  app.appRegistry.deregisterComponent('DatabaseDDL.DropDatabaseDialog');
+  app.appRegistry.deregisterStore('DatabaseDDL.CreateDatabaseStore');
+  app.appRegistry.deregisterStore('DatabaseDDL.DatabasesStore');
+  app.appRegistry.deregisterStore('DatabaseDDL.DropDatabaseStore');
+}
+
+module.exports.activate = activate;
+module.exports.deactivate = deactivate;

src/internal-packages/server-stats/lib/action/databases-actions.js → src/internal-packages/database-ddl/lib/action/index.js

@@ -1,7 +1,7 @@
 const Reflux = require('reflux');
 
 /**
- * The actions used by the database components.
+ * The actions used by the Database DDL components.
  */
 const Actions = Reflux.createActions([
   'sortDatabases',

src/internal-packages/server-stats/lib/component/create-database-dialog.jsx → src/internal-packages/database-ddl/lib/component/create-database-dialog.jsx

@@ -3,7 +3,7 @@ const shell = require('electron').shell;
 const React = require('react');
 const Modal = require('react-bootstrap').Modal;
 const { TextButton } = require('hadron-react-buttons');
-const Actions = require('../action/databases-actions');
+const Actions = require('../action');
 const CreateDatabaseStore = require('../store/create-database-store');
 
 /**

src/internal-packages/server-stats/lib/component/databases-table.jsx → src/internal-packages/database-ddl/lib/component/databases-table.jsx

@@ -2,9 +2,6 @@ const React = require('react');
 const app = require('ampersand-app');
 const { shell } = require('electron');
 const ipc = require('hadron-ipc');
-const DatabasesActions = require('../action/databases-actions');
-const CreateDatabaseDialog = require('./create-database-dialog');
-const DropDatabaseDialog = require('./drop-database-dialog');
 const { NamespaceStore } = require('hadron-reflux-store');
 const numeral = require('numeral');
 const _ = require('lodash');
@@ -20,21 +17,22 @@ class DatabasesTable extends React.Component {
 
   constructor(props) {
     super(props);
+    this.DatabaseDDLAction = app.appRegistry.getAction('DatabaseDDL.Actions');
     this.SortableTable = app.appRegistry.getComponent('App.SortableTable');
     this.CollectionStore = app.appRegistry.getStore('App.CollectionStore');
     this.Tooltip = app.appRegistry.getComponent('App.Tooltip');
   }
 
   onColumnHeaderClicked(column, order) {
-    DatabasesActions.sortDatabases(column, order);
+    this.DatabaseDDLAction.sortDatabases(column, order);
   }
 
   onRowDeleteButtonClicked(index, dbName) {
-    DatabasesActions.openDropDatabaseDialog(dbName);
+    this.DatabaseDDLAction.openDropDatabaseDialog(dbName);
   }
 
   onCreateDatabaseButtonClicked() {
-    DatabasesActions.openCreateDatabaseDialog();
+    this.DatabaseDDLAction.openCreateDatabaseDialog();
   }
 
   onAuthHelpClicked(evt) {
@@ -119,8 +117,6 @@ class DatabasesTable extends React.Component {
         </div>
         {this.props.databases.length === 0 ?
             this.renderNoCollections(isWritable) : null}
-        <CreateDatabaseDialog />
-        <DropDatabaseDialog />
       </div>
     );
   }

src/internal-packages/server-stats/lib/component/drop-database-dialog.jsx → src/internal-packages/database-ddl/lib/component/drop-database-dialog.jsx

@@ -2,7 +2,7 @@ const app = require('ampersand-app');
 const React = require('react');
 const Modal = require('react-bootstrap').Modal;
 const { TextButton } = require('hadron-react-buttons');
-const Actions = require('../action/databases-actions');
+const Actions = require('../action');
 const DropDatabaseStore = require('../store/drop-database-store');
 
 /**
@@ -108,9 +108,10 @@ class DropDatabaseDialog extends React.Component {
           <div>
             <p className="drop-confirm-message">
               <i className="drop-confirm-icon fa fa-exclamation-triangle" aria-hidden="true"></i>
-              Type the database name
-              <strong> {this.state.name} </strong>
-              to drop
+              To drop
+              <span className="drop-confirm-namespace">{this.state.name}</span>
+              type the database name
+              <span className="drop-confirm-database">{this.state.name}</span>
             </p>
           </div>
           <form

src/internal-packages/server-stats/lib/store/create-database-store.js → src/internal-packages/database-ddl/lib/store/create-database-store.js

@@ -1,6 +1,6 @@
 const Reflux = require('reflux');
 const app = require('ampersand-app');
-const Actions = require('../action/databases-actions');
+const Actions = require('../action');
 
 /**
  * The reflux store for creating databases.

src/internal-packages/server-stats/lib/store/databases-store.js → src/internal-packages/database-ddl/lib/store/databases-store.js

@@ -1,6 +1,6 @@
 const Reflux = require('reflux');
 const StateMixin = require('reflux-state-mixin');
-const DatabasesActions = require('../action/databases-actions');
+const DatabasesActions = require('../action');
 
 const _ = require('lodash');
 

src/internal-packages/server-stats/lib/store/drop-database-store.js → src/internal-packages/database-ddl/lib/store/drop-database-store.js

@@ -1,9 +1,9 @@
 const Reflux = require('reflux');
 const app = require('ampersand-app');
-const Actions = require('../action/databases-actions');
+const Actions = require('../action');
 
 /**
- * The reflux store for dropping datbases.
+ * The reflux store for dropping databases.
  */
 const DropDatabaseStore = Reflux.createStore({
 

src/internal-packages/database-ddl/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "database-ddl",
+  "productName": "Compass Database Data Definition Language",
+  "description": "Database-level Data Definition Language (DDL) operations for Compass",
+  "version": "0.0.1",
+  "authors": "MongoDB Inc.",
+  "private": true,
+  "main": "./index.js"
+}

src/internal-packages/server-stats/styles/create-collection-dialog.less → src/internal-packages/database-ddl/styles/create-collection-dialog.less

@@ -6,7 +6,7 @@
   }
 
   label {
-    margin: 0px;
+    margin: 0;
   }
 
   &-capped {
@@ -25,8 +25,8 @@
     padding: 6px 12px;
     color: @gray0;
     border: 1px solid rgba(0,0,0,0.1);
-    border-radius: 0px;
-    margin-bottom: 0px;
+    border-radius: 0;
+    margin-bottom: 0;
     font-weight: normal !important;
   }
 

src/internal-packages/database-ddl/styles/drop-database-dialog.less

@@ -0,0 +1,15 @@
+.drop-database-dialog {
+  width: 500px;
+}
+
+.drop-confirm-namespace {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 13px;
+  margin: 0.5ex;
+}
+
+.drop-confirm-database {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-weight: bold;
+  margin: 0.5ex;
+}

src/internal-packages/database-ddl/styles/index.less

@@ -0,0 +1,2 @@
+@import './create-collection-dialog.less';
+@import './drop-database-dialog.less';

src/internal-packages/database/index.js

@@ -3,6 +3,8 @@ 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');
+const CreateCollectionDialog = require('./lib/components/create-collection-dialog');
+const DropCollectionDialog = require('./lib/components/drop-collection-dialog');
 
 /**
  * Activate all the components in the Schema package.
@@ -12,6 +14,8 @@ function activate() {
   app.appRegistry.registerComponent('Database.CreateCollectionCheckbox', CreateCollectionCheckbox);
   app.appRegistry.registerComponent('Database.CreateCollectionInput', CreateCollectionInput);
   app.appRegistry.registerComponent('Database.CreateCollectionSizeInput', CreateCollectionSizeInput);
+  app.appRegistry.registerComponent('Database.CreateCollectionDialog', CreateCollectionDialog);
+  app.appRegistry.registerComponent('Database.DropCollectionDialog', DropCollectionDialog);
 }
 
 /**
@@ -22,6 +26,8 @@ function deactivate() {
   app.appRegistry.deregisterComponent('Database.CreateCollectionCheckbox');
   app.appRegistry.deregisterComponent('Database.CreateCollectionInput');
   app.appRegistry.deregisterComponent('Database.CreateCollectionSizeInput');
+  app.appRegistry.deregisterComponent('Database.CreateCollectionDialog');
+  app.appRegistry.deregisterComponent('Database.DropCollectionDialog');
 }
 
 module.exports.activate = activate;

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

@@ -1,8 +1,6 @@
 const React = require('react');
 const app = require('ampersand-app');
 const CollectionsActions = require('../actions/collections-actions');
-const CreateCollectionDialog = require('./create-collection-dialog');
-const DropCollectionDialog = require('./drop-collection-dialog');
 const numeral = require('numeral');
 const ipc = require('hadron-ipc');
 const _ = require('lodash');
@@ -22,11 +20,12 @@ class CollectionsTable extends React.Component {
   }
 
   onRowDeleteButtonClicked(index, collection) {
-    CollectionsActions.openDropCollectionDialog(collection);
+    CollectionsActions.openDropCollectionDialog(this.props.database, collection);
   }
 
   onCreateCollectionButtonClicked() {
-    CollectionsActions.openCreateCollectionDialog();
+    const databaseName = this.props.database;
+    CollectionsActions.openCreateCollectionDialog(databaseName);
   }
 
   onNameClicked(name) {
@@ -94,8 +93,6 @@ class CollectionsTable extends React.Component {
             />
           </div>
         </div>
-        <CreateCollectionDialog />
-        <DropCollectionDialog />
       </div>
     );
   }

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

@@ -3,8 +3,6 @@ const shell = require('electron').shell;
 const React = require('react');
 const Modal = require('react-bootstrap').Modal;
 const { TextButton } = require('hadron-react-buttons');
-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');
@@ -50,12 +48,14 @@ class CreateCollectionDialog extends React.Component {
 
   /**
    * When the open dialog action is fired.
+   *
+   * @param {String} databaseName - The database to create the collection on.
    */
-  onOpenDialog() {
+  onOpenDialog(databaseName) {
     this.setState({
       open: true,
       collectionName: '',
-      databaseName: toNS(NamespaceStore.ns).database,
+      databaseName: databaseName,
       capped: false,
       maxSize: '',
       error: false,

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

@@ -1,8 +1,6 @@
 const app = require('ampersand-app');
 const React = require('react');
 const Modal = require('react-bootstrap').Modal;
-const NamespaceStore = require('hadron-reflux-store').NamespaceStore;
-const toNS = require('mongodb-ns');
 const { TextButton } = require('hadron-react-buttons');
 const Actions = require('../actions/collections-actions');
 const DropCollectionStore = require('../stores/drop-collection-store');
@@ -19,7 +17,7 @@ class DropCollectionDialog extends React.Component {
    */
   constructor(props) {
     super(props);
-    this.state = { name: '', confirmName: '' };
+    this.state = { collectionName: '', confirmName: '' };
     this.ModalStatusMessage = app.appRegistry.getComponent('App.ModalStatusMessage');
   }
 
@@ -42,14 +40,15 @@ class DropCollectionDialog extends React.Component {
   /**
    * When the open dialog action is fired.
    *
-   * @param {String} name - The name of the database to drop.
+   * @param {String} databaseName - The name of the database to drop the collection from.
+   * @param {String} collectionName - The name of the collection to drop.
    */
-  onOpenDialog(name) {
+  onOpenDialog(databaseName, collectionName) {
     this.setState({
       open: true,
-      name: name,
+      collectionName: collectionName,
       confirmName: '',
-      databaseName: toNS(NamespaceStore.ns).database
+      databaseName: databaseName
     });
   }
 
@@ -69,12 +68,12 @@ class DropCollectionDialog extends React.Component {
     evt.stopPropagation();
 
     // prevent drop of collection if names don't match
-    if (this.state.confirmName !== this.state.name) {
+    if (this.state.confirmName !== this.state.collectionName) {
       return;
     }
 
     this.setState({ inProgress: true, error: false, errorMessage: '' });
-    Actions.dropCollection(this.state.databaseName, this.state.name);
+    Actions.dropCollection(this.state.databaseName, this.state.collectionName);
   }
 
   /**
@@ -116,9 +115,10 @@ class DropCollectionDialog extends React.Component {
           <div>
             <p className="drop-confirm-message">
               <i className="drop-confirm-icon fa fa-exclamation-triangle" aria-hidden="true"></i>
-              Type the collection name
-              <strong> {this.state.name} </strong>
-              to drop
+              To drop
+              <span className="drop-confirm-namespace">{this.state.databaseName}.{this.state.collectionName}</span>
+              type the collection name
+              <span className="drop-confirm-collection">{this.state.collectionName}</span>
             </p>
           </div>
           <form data-test-id="drop-collection-modal"
@@ -148,7 +148,7 @@ class DropCollectionDialog extends React.Component {
           <button
             className="btn btn-primary"
             data-test-id="drop-collection-button"
-            disabled={this.state.confirmName !== this.state.name}
+            disabled={this.state.confirmName !== this.state.collectionName}
             onClick={this.onDropCollectionButtonClicked.bind(this)}>
             Drop Collection
           </button>

src/internal-packages/database/styles/drop-collection-dialog.less

@@ -1,3 +1,14 @@
 .drop-collection-dialog {
   width: 500px;
 }
+.drop-confirm-namespace {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 13px;
+  margin: 0.5ex;
+}
+
+.drop-confirm-collection {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-weight: bold;
+  margin: 0.5ex;
+}

src/internal-packages/home/index.js

@@ -1,6 +1,6 @@
 const app = require('ampersand-app');
-const HomeComponent = require('./lib/components');
-const HomeActions = require('./lib/actions');
+const HomeComponent = require('./lib/component');
+const HomeActions = require('./lib/action');
 
 /**
  * Activate all the components in the Collection package.