COMPASS-458 Decoupling and improving no collections visible message

src/app/home/index.jade

@@ -2,12 +2,4 @@
   .content.with-sidebar
     div(data-hook='collection-view')
     div.report-zero-state(data-hook='report-zero-state')
-      div.state-arrow
-        img(src='images/zero-state-arrow-collections.png', width="110")
-        span Choose a collection to analyze
-    div.no-collections-zero-state(data-hook='no-collections-zero-state')
-      span
-        |The MongoDB instance you are connected to does not contain any collections. 
-        a.show-connect-window Connect to another instance
-        |.
   .compass-sidebar-container(data-hook='sidebar')

src/app/home/index.js

@@ -57,17 +57,6 @@ var HomeView = View.extend({
     showDefaultZeroState: {
       type: 'boolean',
       default: false
-    },
-    showNoCollectionsZeroState: {
-      type: 'boolean',
-      default: false
-    }
-  },
-  bindings: {
-    showNoCollectionsZeroState: {
-      hook: 'no-collections-zero-state',
-      type: 'booleanClass',
-      no: 'hidden'
     }
   },
   events: {
@@ -149,7 +138,8 @@ var HomeView = View.extend({
     if (!NamespaceStore.ns) {
       app.instance.collections.unselectAll();
       if (app.instance.collections.length === 0) {
-        this.showNoCollectionsZeroState = true;
+        // NOTE: Now handled by the Databases tab
+        // this.showNoCollectionsZeroState = true;
       } else {
         this.showDefaultZeroState = true;
       }

src/app/home/index.less

@@ -44,20 +44,6 @@
   flex-direction: row;
 }
 
-.no-collections-zero-state {
-  font-size: 18px;
-  color: @gray4;
-  font-weight: 200;
-  position: absolute;
-  left: ~"calc(50% - 250px)";
-  top: 50%;
-  z-index: 2;
-
-  a {
-    cursor: pointer;
-  }
-}
-
 .collection-view {
   header {
     padding: 12px 0 0;

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

@@ -1,5 +1,6 @@
 const React = require('react');
 const app = require('ampersand-app');
+const { shell } = require('electron');
 const { TextButton } = require('hadron-react-buttons');
 const DatabasesActions = require('../action/databases-actions');
 const CreateDatabaseDialog = require('./create-database-dialog');
@@ -10,6 +11,11 @@ const _ = require('lodash');
 
 // const debug = require('debug')('mongodb-compass:server-stats:databases');
 
+/**
+ * The help url linking to role-based authorization.
+ */
+const AUTH_HELP_URL = 'https://docs.mongodb.com/master/core/authorization/';
+
 class DatabasesTable extends React.Component {
 
   constructor(props) {
@@ -29,6 +35,26 @@ class DatabasesTable extends React.Component {
     DatabasesActions.openCreateDatabaseDialog();
   }
 
+  onAuthHelpClicked(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    shell.openExternal(AUTH_HELP_URL);
+  }
+
+  renderNoCollections(writable) {
+    return (
+      <div className="no-collections-zero-state">
+        The MongoDB instance you are connected to
+        does not contain any collections, or you are &nbsp;
+        <a onClick={this.onAuthHelpClicked.bind(this)}>not authorized</a>
+        &nbsp;to view them.
+        {!writable ?
+          <a className="show-connect-window">Connect to another instance</a>
+          : null}
+      </div>
+    );
+  }
+
   render() {
     // convert storage size to human-readable units (MB, GB, ...)
     // we do this here so that sorting is not affected in the store
@@ -62,6 +88,8 @@ class DatabasesTable extends React.Component {
           onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
           onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
         />
+        {this.props.databases.length === 0 ?
+            this.renderNoCollections(this, writable) : null}
         <CreateDatabaseDialog />
         <DropDatabaseDialog />
       </div>

src/internal-packages/server-stats/styles/rtss-databases.less

@@ -21,3 +21,18 @@
     z-index: 1;
   }
 }
+
+.no-collections-zero-state {
+  font-size: 18px;
+  color: @gray4;
+  font-weight: 200;
+  position: absolute;
+  left: ~"calc(50% - 250px)";
+  right: 15%;
+  top: 50%;
+  z-index: 2;
+
+  a {
+    cursor: pointer;
+  }
+}