COMPASS-334 active sidebar (#637)

* COMPASS-334 active state for sidebar entries

* make refresh icon white as well

Author: rueckstiess

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

@@ -1,11 +1,15 @@
 const app = require('ampersand-app');
 const React = require('react');
+// const debug = require('debug')('mongodb-compass:sidebar:sidebar-collection');
 
 const { NamespaceStore } = require('hadron-reflux-store');
 
 class SidebarCollection extends React.Component {
   constructor() {
     super();
+    this.state = {
+      active: false
+    };
     this.handleClick = this.handleClick.bind(this);
     this.CollectionStore = app.appRegistry.getStore('App.CollectionStore');
   }
@@ -33,10 +37,14 @@ class SidebarCollection extends React.Component {
 
   render() {
     const collectionName = this.getCollectionName();
+    let className = 'compass-sidebar-title compass-sidebar-title-is-actionable';
+    if (this.props.activeNamespace === this.props._id) {
+      className += ' compass-sidebar-title-is-active';
+    }
     return (
       <div className="compass-sidebar-item">
         <div onClick={this.handleClick}
-            className="compass-sidebar-title compass-sidebar-title-is-actionable"
+            className={className}
             title={this.props._id}>
           {collectionName}&nbsp;
           {this.renderReadonly()}
@@ -51,7 +59,8 @@ SidebarCollection.propTypes = {
   database: React.PropTypes.string,
   capped: React.PropTypes.bool,
   power_of_two: React.PropTypes.bool,
-  readonly: React.PropTypes.bool
+  readonly: React.PropTypes.bool,
+  activeNamespace: React.PropTypes.string.isRequired
 };
 
 module.exports = SidebarCollection;

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

@@ -19,7 +19,8 @@ class SidebarDatabase extends React.Component {
           database: c.database,
           capped: c.capped,
           power_of_two: c.power_of_two,
-          readonly: c.readonly
+          readonly: c.readonly,
+          activeNamespace: this.props.activeNamespace
         };
 
         return (
@@ -46,9 +47,13 @@ class SidebarDatabase extends React.Component {
   }
 
   render() {
+    let className = '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';
+    }
     return (
       <div className="compass-sidebar-item compass-sidebar-item-is-top-level">
-        <div className="compass-sidebar-item-header compass-sidebar-item-header-is-expandable">
+        <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 onClick={this.handleDBClick.bind(this, this.props._id)} className="compass-sidebar-title" title={this.props._id}>
@@ -65,6 +70,7 @@ class SidebarDatabase extends React.Component {
 
 SidebarDatabase.propTypes = {
   _id: React.PropTypes.string,
+  activeNamespace: React.PropTypes.string.isRequired,
   collections: React.PropTypes.array
 };
 

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

@@ -58,9 +58,14 @@ class SidebarInstanceProperties extends React.Component {
     const hostnameAndPort = this.getHostnameAndPort();
     const sshTunnelViaPort = this.getSshTunnelViaPort();
     const versionName = this.getVersionName();
+    let className = 'compass-sidebar-instance';
+    // empty string for active namespace means instance level
+    if (this.props.activeNamespace === '') {
+      className += ' compass-sidebar-instance-is-active';
+    }
     return (
       <div className="compass-sidebar-properties">
-        <div className="compass-sidebar-instance" onClick={this.handleClickHostname}>
+        <div className={className} onClick={this.handleClickHostname}>
           <i className="fa fa-home compass-sidebar-instance-icon"></i>
           <div className="compass-sidebar-instance-hostname" >{hostnameAndPort}</div>
           {sshTunnelViaPort}
@@ -85,7 +90,8 @@ class SidebarInstanceProperties extends React.Component {
 SidebarInstanceProperties.propTypes = {
   connection: React.PropTypes.object,
   instance: React.PropTypes.object,
-  fetching: React.PropTypes.bool
+  fetching: React.PropTypes.bool,
+  activeNamespace: React.PropTypes.string.isRequired
 };
 
 module.exports = SidebarInstanceProperties;

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

@@ -7,6 +7,9 @@ const SidebarActions = require('../actions');
 const SidebarDatabase = require('./sidebar-database');
 const SidebarInstanceProperties = require('./sidebar-instance-properties');
 
+// const debug = require('debug')('mongodb-compass:sidebar:sidebar');
+
+
 class Sidebar extends React.Component {
 
   handleFilter(event) {
@@ -26,7 +29,10 @@ class Sidebar extends React.Component {
     return (
       <div className="compass-sidebar">
         <StoreConnector store={InstanceStore}>
-          <SidebarInstanceProperties connection={app.connection}/>
+          <SidebarInstanceProperties
+            connection={app.connection}
+            activeNamespace={this.props.activeNamespace}
+          />
         </StoreConnector>
         <div className="compass-sidebar-filter">
           <i className="fa fa-search compass-sidebar-search-icon"></i>
@@ -37,7 +43,8 @@ class Sidebar extends React.Component {
             this.props.databases.map(db => {
               const props = {
                 _id: db._id,
-                collections: db.collections
+                collections: db.collections,
+                activeNamespace: this.props.activeNamespace
               };
               return (
                 <SidebarDatabase key={db._id} {...props} />
@@ -52,7 +59,8 @@ class Sidebar extends React.Component {
 
 Sidebar.propTypes = {
   instance: React.PropTypes.object,
-  databases: React.PropTypes.array
+  databases: React.PropTypes.array,
+  activeNamespace: React.PropTypes.string
 };
 
 module.exports = Sidebar;

src/internal-packages/sidebar/lib/stores/index.js

@@ -4,6 +4,7 @@ const StateMixin = require('reflux-state-mixin');
 
 const SidebarActions = require('../actions');
 const InstanceActions = app.appRegistry.getAction('App.InstanceActions');
+const { NamespaceStore } = require('hadron-reflux-store');
 
 const debug = require('debug')('mongodb-compass:stores:sidebar');
 
@@ -26,7 +27,9 @@ const SidebarStore = Reflux.createStore({
   /**
   * Initialize everything that is not part of the store's state.
   */
-  init() {},
+  init() {
+    NamespaceStore.listen(this.onNamespaceChanged.bind(this));
+  },
 
   /**
   * Initialize the Compass Sidebar store state.
@@ -37,10 +40,17 @@ const SidebarStore = Reflux.createStore({
     return {
       instance: {},
       databases: [],
-      filterRegex: /.*/
+      filterRegex: /.*/,
+      activeNamespace: ''
     };
   },
 
+  onNamespaceChanged() {
+    this.setState({
+      activeNamespace: NamespaceStore.ns || ''
+    });
+  },
+
   setInstance(instance) {
     this.setState({
       instance,

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

@@ -107,6 +107,10 @@
     color: #9DA4AA;
   }
 
+  &.fa-rotate-90 {
+    color: #fff;
+  }
+
   &-database-icon {
     position: absolute;
     top: 6px;