INT-586 No collections zero state

package.json

@@ -30,7 +30,8 @@
       "ampersand-state",
       "scout-server",
       "glob",
-      "electron-squirrel-startup"
+      "electron-squirrel-startup",
+      "ipc"
     ]
   },
   "fonts": [

src/app.js

@@ -223,13 +223,6 @@ var Application = View.extend({
       event.preventDefault();
       this.router.history.navigate(pathname);
     }
-  },
-  sendMessage: function(msg) {
-    ipc.send('message', msg);
-  },
-  onMessageReceived: function(msg) {
-    debug('message received from main process:', msg);
-    this.trigger(msg);
   }
 });
 
@@ -262,6 +255,13 @@ app.extend({
   isFeatureEnabled: function(id) {
     return FEATURES[id] === true;
   },
+  sendMessage: function(msg) {
+    ipc.send('message', msg);
+  },
+  onMessageReceived: function(msg) {
+    debug('message received from main process:', msg);
+    this.trigger(msg);
+  },
   init: function() {
     domReady(function() {
       state.render();
@@ -298,7 +298,7 @@ app.extend({
       });
     });
     // set up ipc
-    ipc.on('message', state.onMessageReceived.bind(this));
+    ipc.on('message', this.onMessageReceived.bind(this));
   },
   navigate: state.navigate.bind(state)
 });

src/collection-stats/index.js

@@ -34,7 +34,7 @@ var CollectionStatsView = AmpersandView.extend({
   format: function(propertyName) {
     var value = this.model.get(propertyName) || 0;
     var precision = value <= 1000 ? '0' : '0.0';
-    var format = propertyName.indexOf('_size') > -1 ? 'b' : 'a';
+    var format = propertyName.indexOf('_size') > -1 ? ' b' : 'a';
     return numeral(value).format(precision + format);
   },
   derived: {

src/collection-stats/index.less

@@ -4,42 +4,59 @@
   position: absolute;
   right: 20px;
   text-align: right;
-  min-width: 450px;
+  min-width: 520px;
 }
 .collection-stats {
   display: inline-block;
+  position: relative;
   font-weight: 200;
   list-style: none;
-  padding: 0 30px 0 0;
-  margin: 11px 30px 0 0;
-  border-right: 1px solid @gray7;
+  padding: 0 20px 0 0;
+  margin: 0 20px 0 0;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 2px;
+    width: 1px;
+    height: 24px;
+    background: @gray7;
+  }
 
   &:last-child {
-    border-right: none;
     padding: 0;
     margin: 11px 0 0 0;
+
+    &::after {
+      display: none;
+    }
   }
 }
 .collection-stats-item {
   display: inline-block;
-  margin-right: 10px;
+  margin-right: 12px;
 
   &:last-child {
     margin-right: 0;
   }
 }
 .collection-stats-primary-label {
+  display: inline-block;
   text-transform: uppercase;
-  letter-spacing: 1px;
   font-size: 12px;
   color: @gray3;
+  margin-right: 5px;
 }
 .collection-stats-primary-value {
-  font-size: 36px;
-  line-height: 36px;
+  display: inline-block;
+  font-size: 24px;
+  line-height: 24px;
 }
 .collection-stats-label {
   font-size: 11px;
+  line-height: 11px;
   color: @gray3;
 }
 .collection-stats-value {

src/electron/config/windows.js

@@ -5,8 +5,8 @@
 /**
 * The outer dimensions to use for new windows.
 */
-exports.DEFAULT_WIDTH = 1024;
-exports.DEFAULT_HEIGHT = 700;
+exports.DEFAULT_WIDTH = 1280;
+exports.DEFAULT_HEIGHT = 800;
 
 /**
 * The outer window dimensions to use for new dialog

src/electron/index.js

@@ -4,11 +4,11 @@
 // will be created in `/tmp/Compass`
 // (`~\AppData\Local\Temp\Compass` on Windows).
 require('./crash-reporter');
+var debug = require('debug')('electron:index');
 
 if (!require('electron-squirrel-startup')) {
   var app = require('app');
   var serverctl = require('./scout-server-ctl');
-  var debug = require('debug')('scout-electron');
 
   app.on('window-all-closed', function() {
     debug('All windows closed.  Quitting app.');

src/electron/window-manager.js

@@ -128,3 +128,9 @@ app.on('show connect dialog', function(opts) {
 app.on('ready', function() {
   app.emit('show connect dialog');
 });
+
+var ipc = require('ipc');
+ipc.on('message', function(event, msg) {
+  debug('message received in main process', msg);
+  app.emit(msg);
+});

src/field-list/field.jade

@@ -1,5 +1,4 @@
 .schema-field.schema-field-basic
-  hr.field-divider
   .row
     .col-sm-4
       .schema-field-name
@@ -10,3 +9,4 @@
       div(data-hook='minichart-container')
   div(data-hook='fields-subview')
   div(data-hook='arrayfields-subview')
+  hr.field-divider

src/home/collection.jade

@@ -1,5 +1,4 @@
 .collection-view.clearfix
-  div(data-hook='sampling-message-subview')
   div.modal.fade(tabindex='-1', role='dialog', arialabelledby='Share Schema Confirmation', data-hook='share-schema-confirmation')
     div.modal-dialog.modal-sm
       .modal-content

src/home/collection.js

@@ -3,7 +3,6 @@ var CollectionStatsView = require('../collection-stats');
 var FieldListView = require('../field-list');
 var DocumentListView = require('../document-list');
 var RefineBarView = require('../refine-view');
-var SamplingMessageView = require('../sampling-message');
 var MongoDBCollection = require('../models/mongodb-collection');
 var SampledSchema = require('../models/sampled-schema');
 var app = require('ampersand-app');
@@ -161,15 +160,6 @@ var MongoDBCollectionView = View.extend({
           collection: this.schema.documents
         });
       }
-    },
-    sampling_message: {
-      hook: 'sampling-message-subview',
-      prepareView: function(el) {
-        return new SamplingMessageView({
-          el: el,
-          parent: this
-        });
-      }
     }
   }
 });

src/home/index.jade

@@ -4,4 +4,9 @@
     div.report-zero-state(data-hook='report-zero-state')
       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
+        |.
   div(data-hook='sidebar')

src/home/index.js

@@ -16,18 +16,30 @@ var HomeView = View.extend({
       allowNull: true,
       default: null
     },
-    showZeroState: {
+    showDefaultZeroState: {
       type: 'boolean',
-      default: true
+      default: false
+    },
+    showNoCollectionsZeroState: {
+      type: 'boolean',
+      default: false
     }
   },
   bindings: {
-    showZeroState: {
+    showDefaultZeroState: {
       hook: 'report-zero-state',
       type: 'booleanClass',
       no: 'hidden'
+    },
+    showNoCollectionsZeroState: {
+      hook: 'no-collections-zero-state',
+      type: 'booleanClass',
+      no: 'hidden'
     }
   },
+  events: {
+    'click a.show-connect-window': 'onClickShowConnectWindow'
+  },
   initialize: function() {
     this.listenTo(app.instance, 'sync', this.onInstanceFetched);
     this.listenTo(app.connection, 'change:name', this.updateTitle);
@@ -36,6 +48,11 @@ var HomeView = View.extend({
     app.instance.fetch();
   },
   onInstanceFetched: function() {
+    if (app.instance.collections.length === 0) {
+      this.showNoCollectionsZeroState = true;
+    } else {
+      this.showDefaultZeroState = true;
+    }
     if (!this.ns) {
       app.instance.collections.unselectAll();
     } else {
@@ -58,11 +75,16 @@ var HomeView = View.extend({
 
     this.ns = model.getId();
     this.updateTitle(model);
-    this.showZeroState = 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
+    app.sendMessage('show connect dialog');
+    window.close();
+  },
   template: require('./index.jade'),
   subviews: {
     _collection: {

src/home/index.less

@@ -53,7 +53,7 @@
 }
 
 .report-zero-state {
-  margin: 124px 0 0 20px;
+  margin: 190px 0 0 20px;
 
   img {
     margin-bottom: 7px;
@@ -65,13 +65,28 @@
     margin-left: 15px;
   }
 }
+.no-collections-zero-state {
+  text-align: center;
+  margin-top: 200px;
+  padding: 50px 75px;
+  font-size: 18px;
+  color: @gray4;
+  font-weight: 200;
+
+  a {
+    cursor: pointer;
+  }
+}
 
 .collection-view {
   header {
-    padding: 12px 25px;
+    padding: 12px 25px 0;
     position: relative;
     z-index: 1;
   }
+  h1 {
+    margin-top: 0;
+  }
   .column-container {
     display: flex;
     overflow: hidden;