COMPASS-558 Add DDL buttons

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

@@ -5,6 +5,7 @@ const Modal = require('react-bootstrap').Modal;
 const { TextButton } = require('hadron-react-buttons');
 const Actions = require('../action');
 const CreateDatabaseStore = require('../store/create-database-store');
+const { NamespaceStore } = require('hadron-reflux-store');
 
 /**
  * The more information url.
@@ -88,6 +89,7 @@ class CreateDatabaseDialog extends React.Component {
       this.state.capped,
       this.state.maxSize
     );
+    NamespaceStore.ns = '';
   }
 
   /**

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

@@ -1,6 +1,7 @@
 const app = require('ampersand-app');
 const React = require('react');
 const Modal = require('react-bootstrap').Modal;
+const { NamespaceStore } = require('hadron-reflux-store');
 const { TextButton } = require('hadron-react-buttons');
 const Actions = require('../action');
 const DropDatabaseStore = require('../store/drop-database-store');
@@ -62,11 +63,13 @@ class DropDatabaseDialog extends React.Component {
     evt.stopPropagation();
 
     // prevent drop database if names don't match
-    if (this.state.confirmName !== this.state.name) {
+    const databaseName = this.state.name;
+    if (this.state.confirmName !== databaseName) {
       return;
     }
     this.setState({ inProgress: true, error: false, errorMessage: '' });
-    Actions.dropDatabase(this.state.name);
+    Actions.dropDatabase(databaseName);
+    NamespaceStore.ns = '';
   }
 
   /**

src/internal-packages/database/index.js

@@ -1,4 +1,5 @@
 const app = require('ampersand-app');
+const CollectionsAction = require('./lib/actions/collections-actions');
 const CollectionsTable = require('./lib/components');
 const CreateCollectionCheckbox = require('./lib/components/create-collection-checkbox');
 const CreateCollectionInput = require('./lib/components/create-collection-input');
@@ -10,6 +11,7 @@ const DropCollectionDialog = require('./lib/components/drop-collection-dialog');
  * Activate all the components in the Schema package.
  */
 function activate() {
+  app.appRegistry.registerAction('Database.CollectionsActions', CollectionsAction);
   app.appRegistry.registerComponent('Database.CollectionsTable', CollectionsTable);
   app.appRegistry.registerComponent('Database.CreateCollectionCheckbox', CreateCollectionCheckbox);
   app.appRegistry.registerComponent('Database.CreateCollectionInput', CreateCollectionInput);
@@ -22,6 +24,7 @@ function activate() {
  * Deactivate all the components in the Schema package.
  */
 function deactivate() {
+  app.appRegistry.deregisterAction('Database.CollectionsActions');
   app.appRegistry.deregisterComponent('Database.CollectionsTable');
   app.appRegistry.deregisterComponent('Database.CreateCollectionCheckbox');
   app.appRegistry.deregisterComponent('Database.CreateCollectionInput');

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

@@ -2,6 +2,7 @@ const app = require('ampersand-app');
 const shell = require('electron').shell;
 const React = require('react');
 const Modal = require('react-bootstrap').Modal;
+const { NamespaceStore } = require('hadron-reflux-store');
 const { TextButton } = require('hadron-react-buttons');
 const Actions = require('../actions/collections-actions');
 const CreateCollectionStore = require('../stores/create-collection-store');
@@ -80,12 +81,14 @@ class CreateCollectionDialog extends React.Component {
     evt.stopPropagation();
 
     this.setState({ inProgress: true, error: false, errorMessage: '' });
+    const databaseName = this.state.databaseName;
     Actions.createCollection(
-      this.state.databaseName,
+      databaseName,
       this.state.collectionName,
       this.state.capped,
       this.state.maxSize
     );
+    NamespaceStore.ns = databaseName;
   }
 
   /**

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

@@ -1,6 +1,7 @@
 const app = require('ampersand-app');
 const React = require('react');
 const Modal = require('react-bootstrap').Modal;
+const { NamespaceStore } = require('hadron-reflux-store');
 const { TextButton } = require('hadron-react-buttons');
 const Actions = require('../actions/collections-actions');
 const DropCollectionStore = require('../stores/drop-collection-store');
@@ -74,6 +75,7 @@ class DropCollectionDialog extends React.Component {
 
     this.setState({ inProgress: true, error: false, errorMessage: '' });
     Actions.dropCollection(this.state.databaseName, this.state.collectionName);
+    NamespaceStore.ns = this.state.databaseName;
   }
 
   /**

src/internal-packages/sidebar/lib/components/constants.js

@@ -0,0 +1,11 @@
+const TOOLTIP_IDS = Object.freeze({
+  CREATE_COLLECTION: 'create-collection',
+  CREATE_DATABASE_BUTTON: 'create-database-button',
+  CREATE_DATABASE_ICON: 'create-database-icon',
+  DROP_COLLECTION: 'drop-collection',
+  DROP_DATABASE: 'drop-database'
+});
+
+module.exports = {
+  TOOLTIP_IDS
+};

src/internal-packages/sidebar/lib/components/sidebar-collection.jsx

@@ -1,16 +1,20 @@
 const app = require('ampersand-app');
 const React = require('react');
+const ReactTooltip = require('react-tooltip');
 const ipc = require('hadron-ipc');
 
 const { NamespaceStore } = require('hadron-reflux-store');
 
+const { TOOLTIP_IDS } = require('./constants');
+
 class SidebarCollection extends React.Component {
   constructor() {
     super();
     this.state = {
       active: false
     };
     this.handleClick = this.handleClick.bind(this);
+    this.CollectionsActions = app.appRegistry.getAction('Database.CollectionsActions');
     this.CollectionStore = app.appRegistry.getStore('App.CollectionStore');
   }
 
@@ -28,6 +32,14 @@ class SidebarCollection extends React.Component {
     }
   }
 
+  handleDropCollectionClick(isWritable) {
+    if (isWritable) {
+      const databaseName = this.props.database;
+      const collectionName = this.getCollectionName();
+      this.CollectionsActions.openDropCollectionDialog(databaseName, collectionName);
+    }
+  }
+
   renderReadonly() {
     if (this.props.readonly) {
       return (
@@ -38,15 +50,35 @@ class SidebarCollection extends React.Component {
 
   render() {
     const collectionName = this.getCollectionName();
-    let className = 'compass-sidebar-title compass-sidebar-title-is-actionable';
+    const isWritable = app.dataService.isWritable();
+    const tooltipText = isWritable ?
+      'Drop collection' :
+      'Drop collection is not available on a secondary node';  // TODO: Arbiter/recovering/etc
+    const tooltipOptions = {
+      'data-for': TOOLTIP_IDS.DROP_COLLECTION,
+      'data-effect': 'solid',
+      'data-offset': "{'bottom': 18, 'left': 3}",
+      'data-tip': tooltipText
+    };
+    let titleClassName = 'compass-sidebar-title compass-sidebar-title-is-actionable';
     if (this.props.activeNamespace === this.props._id) {
-      className += ' compass-sidebar-title-is-active';
+      titleClassName += ' compass-sidebar-title-is-active';
+    }
+    let dropClassName = 'compass-sidebar-icon compass-sidebar-icon-drop-collection fa fa-trash-o';
+    if (!isWritable) {
+      dropClassName += ' compass-sidebar-icon-is-disabled';
     }
     return (
       <div className="compass-sidebar-item">
+        <i
+          className={dropClassName}
+          onClick={this.handleDropCollectionClick.bind(this, isWritable)}
+          {...tooltipOptions}
+        />
+        <ReactTooltip id={TOOLTIP_IDS.DROP_COLLECTION} />
         <div
           onClick={this.handleClick}
-          className={className}
+          className={titleClassName}
           data-test-id="sidebar-collection"
           title={this.props._id}>
           {collectionName}&nbsp;

src/internal-packages/sidebar/lib/components/sidebar-database.jsx

@@ -1,14 +1,19 @@
 const app = require('ampersand-app');
 const ipc = require('hadron-ipc');
 const React = require('react');
-const SidebarCollection = require('./sidebar-collection');
+const ReactTooltip = require('react-tooltip');
 const { NamespaceStore } = require('hadron-reflux-store');
 const toNS = require('mongodb-ns');
 
+const { TOOLTIP_IDS } = require('./constants');
+const SidebarCollection = require('./sidebar-collection');
+
 class SidebarDatabase extends React.Component {
   constructor(props) {
     super(props);
     this.state = { expanded: props.expanded };
+    this.CollectionsActions = app.appRegistry.getAction('Database.CollectionsActions');
+    this.DatabaseDDLActions = app.appRegistry.getAction('DatabaseDDL.Actions');
     this.CollectionStore = app.appRegistry.getStore('App.CollectionStore');
   }
 
@@ -54,16 +59,68 @@ class SidebarDatabase extends React.Component {
     this.setState({ expanded: !this.state.expanded });
   }
 
+  handleCreateCollectionClick(isWritable) {
+    if (isWritable) {
+      const databaseName = this.props._id;
+      this.CollectionsActions.openCreateCollectionDialog(databaseName);
+    }
+  }
+
+  handleDropDBClick(isWritable) {
+    if (isWritable) {
+      const databaseName = this.props._id;
+      this.DatabaseDDLActions.openDropDatabaseDialog(databaseName);
+    }
+  }
+
   render() {
-    let className = 'compass-sidebar-item-header compass-sidebar-item-header-is-expandable compass-sidebar-item-header-is-actionable';
+    const isWritable = app.dataService.isWritable();
+    const createTooltipText = isWritable ?
+      'Create collection' :
+      'Create collection is not available on a secondary node';  // TODO: Arbiter/recovering/etc
+    const createTooltipOptions = {
+      'data-for': TOOLTIP_IDS.CREATE_COLLECTION,
+      'data-effect': 'solid',
+      'data-offset': "{'bottom': 18, 'left': 3}",
+      'data-tip': createTooltipText
+    };
+    const dropTooltipText = isWritable ?
+      'Drop database' :
+      'Drop database is not available on a secondary node';  // TODO: Arbiter/recovering/etc
+    const dropTooltipOptions = {
+      'data-for': TOOLTIP_IDS.DROP_DATABASE,
+      'data-effect': 'solid',
+      'data-offset': "{'bottom': 18, 'left': 3}",
+      'data-tip': dropTooltipText
+    };
+    let headerClassName = 'compass-sidebar-item-header compass-sidebar-item-header-is-expandable compass-sidebar-item-header-is-actionable';
     if (this.props.activeNamespace === this.props._id) {
-      className += ' compass-sidebar-item-header-is-active';
+      headerClassName += ' compass-sidebar-item-header-is-active';
+    }
+    let createClassName = 'compass-sidebar-icon compass-sidebar-icon-create-collection fa fa-plus-circle';
+    if (!isWritable) {
+      createClassName += ' compass-sidebar-icon-is-disabled';
+    }
+    let dropClassName = 'compass-sidebar-icon compass-sidebar-icon-drop-database fa fa-trash-o';
+    if (!isWritable) {
+      dropClassName += ' compass-sidebar-icon-is-disabled';
     }
     return (
       <div className="compass-sidebar-item compass-sidebar-item-is-top-level">
-        <div className={className}>
-          <i onClick={this.handleDBClick.bind(this, this.props._id)} className="compass-sidebar-database-icon mms-icon-database"></i>
-          <i onClick={this.handleArrowClick.bind(this)} className={this.getArrowIconClasses()}></i>
+        <div className={headerClassName}>
+          <i onClick={this.handleArrowClick.bind(this)} className={this.getArrowIconClasses()} />
+          <i
+            className={createClassName}
+            onClick={this.handleCreateCollectionClick.bind(this, isWritable)}
+            {...createTooltipOptions}
+          />
+          <ReactTooltip id={TOOLTIP_IDS.CREATE_COLLECTION} />
+          <i
+            className={dropClassName}
+            onClick={this.handleDropDBClick.bind(this, isWritable)}
+            {...dropTooltipOptions}
+          />
+          <ReactTooltip id={TOOLTIP_IDS.DROP_DATABASE} />
           <div
             onClick={this.handleDBClick.bind(this, this.props._id)}
             className="compass-sidebar-title" title={this.props._id}

src/internal-packages/sidebar/lib/components/sidebar-instance-properties.jsx

@@ -1,9 +1,16 @@
 const React = require('react');
+const ReactTooltip = require('react-tooltip');
 const app = require('ampersand-app');
 const ipc = require('hadron-ipc');
 const { NamespaceStore } = require('hadron-reflux-store');
+const { TOOLTIP_IDS } = require('./constants');
 
 class SidebarInstanceProperties extends React.Component {
+  constructor(props) {
+    super(props);
+    this.DatabaseDDLActions = app.appRegistry.getAction('DatabaseDDL.Actions');
+  }
+
   getHostnameAndPort() {
     const connection = this.props.connection;
     if (!connection.hostname) {
@@ -53,22 +60,49 @@ class SidebarInstanceProperties extends React.Component {
     ipc.call('window:hide-collection-submenu');
   }
 
+  handleCreateDatabaseClick(isWritable) {
+    if (isWritable) {
+      this.DatabaseDDLActions.openCreateDatabaseDialog();
+    }
+  }
+
   render() {
     const instance = this.props.instance;
+    const isWritable = app.dataService.isWritable();
     const numDbs = instance.databases.length;
     const numCollections = instance.collections.length;
     const hostnameAndPort = this.getHostnameAndPort();
     const sshTunnelViaPort = this.getSshTunnelViaPort();
     const versionName = this.getVersionName();
-    let className = 'compass-sidebar-instance';
+    const tooltipText = isWritable ?
+      'Create database' :
+      'Create database is not available on a secondary node';  // TODO: Arbiter/recovering/etc
+    const tooltipOptions = {
+      'data-for': TOOLTIP_IDS.CREATE_DATABASE_ICON,
+      'data-effect': 'solid',
+      'data-place': 'right',
+      'data-offset': "{'top': 1, 'left': 18}",
+      'data-tip': tooltipText
+    };
+    let instanceClassName = 'compass-sidebar-instance';
     // empty string for active namespace means instance level
     if (this.props.activeNamespace === '') {
-      className += ' compass-sidebar-instance-is-active';
+      instanceClassName += ' compass-sidebar-instance-is-active';
+    }
+    let createClassName = 'compass-sidebar-icon compass-sidebar-icon-create-database fa fa-plus-circle';
+    if (!isWritable) {
+      createClassName += ' compass-sidebar-icon-is-disabled';
     }
     return (
       <div className="compass-sidebar-properties">
-        <div className={className} onClick={this.handleClickHostname}>
-          <i className="fa fa-home compass-sidebar-instance-icon"></i>
+        <div className={instanceClassName} onClick={this.handleClickHostname}>
+          <i className="fa fa-home compass-sidebar-instance-icon" />
+          <i
+            className={createClassName}
+            onClick={this.handleCreateDatabaseClick.bind(this, isWritable)}
+            {...tooltipOptions}
+          />
+          <ReactTooltip id={TOOLTIP_IDS.CREATE_DATABASE_ICON} />
           <div
             data-test-id="sidebar-instance-details"
             className="compass-sidebar-instance-hostname">