COMPASS-80 add databases view + collections table (#550)

* [wip] handle all main routing internally in ./src/app/home.

* COMPASS-80 add database level view, collections table

* use dataService.database(), add columns, styling

* 👕 fix linter errors.

* COMPASS-80: Fix app registry loading

* COMPASS-80: Fix zero state

* COMPASS-80: Bring collection tab back

Author: rueckstiess

src/app/home/collection.js

@@ -5,6 +5,7 @@ var MongoDBCollection = require('../models/mongodb-collection');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var NamespaceStore = require('hadron-reflux-store').NamespaceStore;
+var toNS = require('mongodb-ns');
 var _ = require('lodash');
 
 var app = require('ampersand-app');
@@ -194,9 +195,12 @@ var MongoDBCollectionView = View.extend({
       this.schemaActions.resizeMiniCharts();
     }
   },
-  onCollectionChanged: function() {
-    this.ns = NamespaceStore.ns;
-    if (!this.ns) {
+  onCollectionChanged: function(ns) {
+    if (ns === this.ns) {
+      return;
+    }
+    this.ns = ns;
+    if (!ns || !toNS(ns || '').collection) {
       this.visible = false;
       debug('No active collection namespace so no schema has been requested yet.');
       return;

src/app/home/index.js

@@ -1,5 +1,5 @@
 var View = require('ampersand-view');
-var format = require('util').format;
+// var format = require('util').format;
 // var IdentifyView = require('../identify');
 var CollectionView = require('./collection');
 var { NamespaceStore } = require('hadron-reflux-store');
@@ -55,9 +55,10 @@ var HomeView = View.extend({
      * TODO (imlucas) Handle state when rtss permissions not available.
      */
     this.serverStatsView = app.appRegistry.getComponent('RTSS.ServerStats');
+    this.collectionsTable = app.appRegistry.getComponent('Database.CollectionsTable');
     this.listenTo(app.instance, 'sync', this.onInstanceFetched);
     this.listenTo(app.connection, 'change:name', this.updateTitle);
-    NamespaceStore.listen(this.onNamespaceChange.bind(this));
+    NamespaceStore.listen(this.switchMainContent.bind(this));
     ipc.on('window:show-compass-tour', this.showTour.bind(this, true));
     ipc.on('window:show-network-optin', this.showOptIn.bind(this));
 
@@ -68,15 +69,6 @@ var HomeView = View.extend({
   },
   render: function() {
     this.renderWithTemplate(this);
-    var containerNode = this.queryByHook('report-zero-state');
-    ReactDOM.render(
-      React.createElement(this.serverStatsView, { interval: 1000 }),
-      containerNode
-    );
-    NamespaceStore.listen(() => {
-      ReactDOM.unmountComponentAtNode(containerNode);
-    });
-
     const SideBarComponent = app.appRegistry.getComponent('Sidebar.Component');
     ReactDOM.render(
       React.createElement(SideBarComponent),
@@ -88,6 +80,34 @@ var HomeView = View.extend({
     } else {
       this.tourClosed();
     }
+    this.switchMainContent('');
+  },
+  switchMainContent: function(namespace) {
+    if (namespace === this.ns) {
+      debug('already selected namespace', namespace);
+      return;
+    }
+    this.ns = namespace;
+    const ns = toNS(namespace);
+    var containerNode = this.queryByHook('report-zero-state');
+
+    if (ns.database === '') {
+      // neither database nor collection are present, top level instance view
+      ReactDOM.render(
+        React.createElement(this.serverStatsView, {interval: 1000}),
+        containerNode
+      );
+    } else if (ns.collection === '') {
+      // a database was clicked, render collections table
+      ReactDOM.render(
+        React.createElement(this.collectionsTable),
+        containerNode
+      );
+    } else {
+      // unmount instance/databases view and switch to collection view
+      ReactDOM.unmountComponentAtNode(containerNode);
+    }
+    this.updateTitle(namespace);
   },
   showTour: function(force) {
     var tourView = new TourView({force: force});
@@ -146,10 +166,10 @@ var HomeView = View.extend({
       }
     }
   },
-  updateTitle: function(model) {
+  updateTitle: function(ns) {
     var title = 'MongoDB Compass - ' + app.connection.instance_id;
-    if (model) {
-      title += '/' + model.getId();
+    if (ns) {
+      title += '/' + ns;
     }
     document.title = title;
   },
@@ -170,26 +190,27 @@ var HomeView = View.extend({
 
     return database.collections.get(ns.ns);
   },
-  onNamespaceChange: function() {
-    const model = this._getCollection();
-
-    if (!model) {
-      app.navigate('/');
-      return;
-    }
-
-    const collection = app.instance.collections;
-    if (!collection.select(model)) {
-      return debug('already selected %s', model);
-    }
-
-    this.updateTitle(model);
-    this.showNoCollectionsZeroState = false;
-    this.showDefaultZeroState = false;
-    app.navigate(format('schema/%s', model.getId()), {
-      silent: true
-    });
-  },
+  // onNamespaceChange: function(ns) {
+  //   const model = this._getCollection();
+  //
+  //   // if (!model) {
+  //   //   app.navigate('/');
+  //   //   return;
+  //   // }
+  //
+  //   const collection = app.instance.collections;
+  //   if (!collection.select(model)) {
+  //     return debug('already selected %s', model);
+  //   }
+  //
+  //   this.updateTitle(model);
+  //   this.showNoCollectionsZeroState = false;
+  //   this.showDefaultZeroState = false;
+  //
+  //   // app.navigate(format('schema/%s', model.getId()), {
+  //   //   silent: true
+  //   // });
+  // },
   onClickShowConnectWindow: function() {
     // code to close current connection window and open connect dialog
     ipc.call('app:show-connect-window');

src/app/index.less

@@ -26,3 +26,4 @@
 @import "../internal-packages/explain/styles/index.less";
 @import "../internal-packages/sidebar/styles/index.less";
 @import "../internal-packages/validation/styles/index.less";
+@import "../internal-packages/database/styles/index.less";

src/internal-packages/app/index.js

@@ -1,6 +1,7 @@
 const app = require('ampersand-app');
 const StoreConnector = require('./lib/components/store-connector');
 const SortableTable = require('./lib/components/sortable-table');
+const TabNavBar = require('./lib/components/tab-nav-bar');
 const InstanceActions = require('./lib/actions/instance-actions');
 const InstanceStore = require('./lib/stores/instance-store');
 const ModalStatusMessage = require('./lib/components/modal-status-message');
@@ -12,6 +13,7 @@ function activate() {
   app.appRegistry.registerComponent('App.StoreConnector', StoreConnector);
   app.appRegistry.registerComponent('App.SortableTable', SortableTable);
   app.appRegistry.registerComponent('App.ModalStatusMessage', ModalStatusMessage);
+  app.appRegistry.registerComponent('App.TabNavBar', TabNavBar);
   app.appRegistry.registerAction('App.InstanceActions', InstanceActions);
   app.appRegistry.registerStore('App.InstanceStore', InstanceStore);
 }
@@ -23,6 +25,7 @@ function deactivate() {
   app.appRegistry.deregisterComponent('App.StoreConnector');
   app.appRegistry.deregisterComponent('App.SortableTable');
   app.appRegistry.deregisterComponent('App.ModalStatusMessage');
+  app.appRegistry.deregisterComponent('App.TabNavBar');
   app.appRegistry.deregisterAction('App.InstanceActions');
   app.appRegistry.deregisterStore('App.InstanceStore');
 }

src/internal-packages/server-stats/lib/component/navbar-component.jsx renamed to src/internal-packages/app/lib/components/tab-nav-bar.jsx

@@ -30,11 +30,11 @@ class NavBarComponent extends React.Component {
 
   renderTabs() {
     const listItems = _.map(this.props.tabs, (tab, idx) => (
-      <li key={`tab-${idx}`} className={`rt-nav__tab ${idx === this.state.activeTabIndex ? 'rt-nav--selected' : ''}`}>
-        <a onClick={this.onTabClicked.bind(this, idx)} className="rt-nav__link" href="#">{tab}</a>
+      <li onClick={this.onTabClicked.bind(this, idx)} key={`tab-${idx}`} className={`tab-nav-bar tab-nav-bar-tab ${idx === this.state.activeTabIndex ? 'tab-nav-bar-is-selected' : ''}`}>
+        <span className="tab-nav-bar tab-nav-bar-link" href="#">{tab}</span>
       </li>
     ));
-    return <ul className="rt-nav__tabs">{listItems}</ul>;
+    return <ul className="tab-nav-bar tab-nav-bar-tabs">{listItems}</ul>;
   }
 
   renderActiveView() {
@@ -44,8 +44,8 @@ class NavBarComponent extends React.Component {
 
   render() {
     return (
-      <div>
-        <header className="rt-nav">
+      <div className={`tab-nav-bar tab-nav-bar-is-${this.props.theme}-theme`}>
+        <header className="tab-nav-bar tab-nav-bar-header">
           {this.renderTabs()}
         </header>
         {this.renderActiveView()}
@@ -55,13 +55,15 @@ class NavBarComponent extends React.Component {
 }
 
 NavBarComponent.propTypes = {
+  theme: React.PropTypes.oneOf(['dark', 'light']),
   activeTabIndex: React.PropTypes.number,
   tabs: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
   views: React.PropTypes.arrayOf(React.PropTypes.element).isRequired,
   onTabClicked: React.PropTypes.func
 };
 
 NavBarComponent.defaultProps = {
+  theme: 'light',
   activeTabIndex: 0
 };
 

src/internal-packages/app/styles/index.less

@@ -1,2 +1,3 @@
 @import './sortable-table.less';
 @import './modal-status-message.less';
+@import './tab-nav-bar.less';

src/internal-packages/app/styles/sortable-table.less

@@ -14,7 +14,7 @@
     user-select: none;
     -webkit-user-select: none;
     padding-left: 24px;
-    background-color: #f5f6f7;
+    background-color: @gray8;
 
     &-is-active {
       .sortable-table-sort-icon {

src/internal-packages/app/styles/tab-nav-bar.less

@@ -0,0 +1,109 @@
+.tab-nav-bar {
+
+  &-header {
+    height: 45px;
+    background-color: @pw;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-end;
+    position: relative;
+  }
+
+  &-tabs {
+    display: flex;
+    justify-content: flex-end;
+    align-self: flex-end;
+    margin-bottom: 0;
+    position: absolute;
+    top: 16px;
+    margin-left: 10px;
+  }
+
+  &-tab {
+    height: 30px;
+    width: 130px;
+    margin-right: 5px;
+    font-size: 13px;
+    text-transform: uppercase;
+    border-radius: 3px 3px 0 0;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    margin-bottom: 0;
+    color: #43B1E5;
+  }
+
+  &-tab:hover {
+    background-color: @pw;
+    color: @gray0;
+    border: 1px solid @gray7;
+
+    .tab-nav-bar-link {
+      color: @gray0;
+    }
+  }
+
+  &-link {
+    margin: auto;
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: bold;
+    color: #43B1E5;
+  }
+
+  &-link:hover, &-link:active, &-link:focus {
+    text-decoration: none;
+    color: @gray0;
+  }
+
+  &-is-selected {
+    .tab-nav-bar-link {
+      color: @gray0;
+    }
+
+    &.tab-nav-bar-tab:hover {
+      background-color: @gray8;
+      border-bottom: none;
+    }
+    background-color: @gray8;
+    cursor: default;
+    border: #ebebed 1px solid;
+    border-bottom: none;
+  }
+
+  &-is-dark-theme {
+    .tab-nav-bar-header {
+      background-color: #2B3033;
+    }
+
+    .tab-nav-bar-tab {
+      color: #8B8D8F;
+    }
+
+    .tab-nav-bar-link {
+      color: @pw;
+    }
+
+    .tab-nav-bar-is-selected {
+      color: @pw;
+      background-color: #3D4247;
+      border-color: #545454;
+
+      &.tab-nav-bar-tab:hover {
+        background-color: #3D4247;
+      }
+    }
+
+    .tab-nav-bar-tab:hover {
+      background-color: #2B3033;
+      border-color: #545454;
+      border-bottom: none;
+
+      color: @pw;
+
+      .tab-nav-bar-link {
+        color: @pw;
+      }
+    }
+  }
+}

src/internal-packages/database/index.js

@@ -0,0 +1,19 @@
+const app = require('ampersand-app');
+const CollectionsTable = require('./lib/components');
+
+/**
+ * Activate all the components in the Schema package.
+ */
+function activate() {
+  app.appRegistry.registerComponent('Database.CollectionsTable', CollectionsTable);
+}
+
+/**
+ * Deactivate all the components in the Schema package.
+ */
+function deactivate() {
+  app.appRegistry.deregisterComponent('Database.CollectionsTable');
+}
+
+module.exports.activate = activate;
+module.exports.deactivate = deactivate;

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

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