COMPASS-340 privacy modal connect (#632)

* COMPASS-340 move tour and privacy modals to ./src/app/index.js

* fix bug where mixpanel is being used (currently disabled)

* fix functional tests with tour/optin on connect screen

Author: rueckstiess

src/app/home/index.jade

@@ -11,5 +11,3 @@
         a.show-connect-window Connect to another instance
         |.
   .compass-sidebar-container(data-hook='sidebar')
-  div(data-hook='tour-container')
-  div(data-hook='optin-container')

src/app/home/index.js

@@ -2,8 +2,6 @@ var View = require('ampersand-view');
 // var format = require('util').format;
 // var IdentifyView = require('../identify');
 var { NamespaceStore } = require('hadron-reflux-store');
-var TourView = require('../tour');
-var NetworkOptInView = require('../network-optin');
 var app = require('ampersand-app');
 var metrics = require('mongodb-js-metrics')();
 var _ = require('lodash');
@@ -84,8 +82,6 @@ var HomeView = View.extend({
     this.listenTo(app.instance, 'sync', this.onInstanceFetched);
     this.listenTo(app.connection, 'change:name', this.updateTitle);
     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));
 
     this.once('change:rendered', this.onRendered);
     debug('fetching instance model...');
@@ -99,12 +95,6 @@ var HomeView = View.extend({
       React.createElement(SideBarComponent),
       this.queryByHook('sidebar')
     );
-
-    if (app.preferences.showFeatureTour) {
-      this.showTour(false);
-    } else {
-      this.tourClosed();
-    }
     this.switchMainContent('');
   },
   switchMainContent: function(namespace) {
@@ -134,26 +124,6 @@ var HomeView = View.extend({
     }
     this.updateTitle(namespace);
   },
-  showTour: function(force) {
-    var tourView = new TourView({force: force});
-    if (tourView.features.length > 0) {
-      tourView.on('close', this.tourClosed.bind(this));
-      this.renderSubview(tourView, this.queryByHook('tour-container'));
-    } else {
-      this.tourClosed();
-    }
-  },
-  showOptIn: function() {
-    var networkOptInView = new NetworkOptInView();
-    this.renderSubview(networkOptInView, this.queryByHook('optin-container'));
-  },
-  tourClosed: function() {
-    app.preferences.unset('showFeatureTour');
-    app.preferences.save();
-    if (!app.preferences.showedNetworkOptIn) {
-      this.showOptIn();
-    }
-  },
   onInstanceFetched: function() {
     // TODO: Remove this line
     // Instead, set the instance inside InstanceStore.refreshInstance

src/app/index.js

@@ -9,6 +9,8 @@ if (process.env.NODE_ENV === 'development') {
     .catch((err) => console.log('An error occurred trying to install devtools: ', err));
 }
 
+window.jQuery = require('jquery');
+
 var Environment = require('../environment');
 Environment.init();
 
@@ -45,6 +47,9 @@ var localLinks = require('local-links');
 var async = require('async');
 var ipc = require('hadron-ipc');
 
+var TourView = require('./tour');
+var NetworkOptInView = require('./network-optin');
+
 var format = require('util').format;
 var semver = require('semver');
 
@@ -66,7 +71,8 @@ var AutoUpdate = require('../auto-update');
 
 var addInspectElementMenu = require('debug-menu').install;
 
-window.jQuery = require('jquery');
+require('bootstrap/js/modal');
+require('bootstrap/js/transition');
 
 ipc.once('app:launched', function() {
   console.log('in app:launched');
@@ -134,6 +140,7 @@ function getConnection(model, done) {
  *
  * @see http://learn.humanjavascript.com/react-ampersand/application-pattern
  */
+
 var Application = View.extend({
   template: function() {
     return [
@@ -142,6 +149,8 @@ var Application = View.extend({
       '  <div data-hook="statusbar"></div>',
       '  <div data-hook="notifications"></div>',
       '  <div data-hook="layout-container"></div>',
+      '  <div data-hook="tour-container"></div>',
+      '  <div data-hook="optin-container"></div>',
       '</div>'
     ].join('\n');
   },
@@ -188,6 +197,10 @@ var Application = View.extend({
     'click i.help': 'onHelpClicked',
     'click a.help': 'onHelpClicked'
   },
+  initialize: function() {
+    ipc.on('window:show-compass-tour', this.showTour.bind(this, true));
+    ipc.on('window:show-network-optin', this.showOptIn.bind(this));
+  },
   onHelpClicked: function(evt) {
     evt.preventDefault();
     evt.stopPropagation();
@@ -258,11 +271,37 @@ var Application = View.extend({
     });
     this.autoUpdate.render();
 
+    if (app.preferences.showFeatureTour) {
+      this.showTour(false);
+    } else {
+      this.tourClosed();
+    }
+
     if (process.env.NODE_ENV !== 'production') {
       debug('Installing "Inspect Element" context menu');
       addInspectElementMenu();
     }
   },
+  showTour: function(force) {
+    var tourView = new TourView({force: force});
+    if (tourView.features.length > 0) {
+      tourView.on('close', this.tourClosed.bind(this));
+      this.renderSubview(tourView, this.queryByHook('tour-container'));
+    } else {
+      this.tourClosed();
+    }
+  },
+  showOptIn: function() {
+    var networkOptInView = new NetworkOptInView();
+    this.renderSubview(networkOptInView, this.queryByHook('optin-container'));
+  },
+  tourClosed: function() {
+    app.preferences.unset('showFeatureTour');
+    app.preferences.save();
+    if (!app.preferences.showedNetworkOptIn) {
+      this.showOptIn();
+    }
+  },
   onPageChange: function(view) {
     metrics.track('App', 'viewed', view.screenName);
     this.pageSwitcher.set(view);

src/app/metrics/index.js

@@ -102,7 +102,7 @@ module.exports = function() {
     // enable/disable event tracking
     metrics.trackers.get('ga').enabled = enabled;
     metrics.trackers.get('intercom').enabled = enabled;
-    metrics.trackers.get('mixpanel').enabled = enabled;
+    // metrics.trackers.get('mixpanel').enabled = enabled;
   });
   app.preferences.on('change:enableFeedbackPanel', function(prefs, enabled) {
     // enable/disable product feedback

src/app/network-optin/index.js

@@ -4,13 +4,10 @@ var app = require('ampersand-app');
 var _ = require('lodash');
 var metrics = require('mongodb-js-metrics')();
 
-var debug = require('debug')('mongodb-compass:feature-optin:index');
+var debug = require('debug')('mongodb-compass:network-optin:index');
 
 var indexTemplate = require('./index.jade');
 
-require('bootstrap/js/modal');
-require('bootstrap/js/transition');
-
 var NetworkOptInView = View.extend({
   template: indexTemplate,
   props: {

test/compass-functional.test.js

@@ -43,9 +43,10 @@ describe('Compass #spectron', function() {
       });
 
       it('renders the connect window', function() {
-        return client.
-          waitForVisible('select[name=authentication]', 60000).
-          getTitle().should.eventually.be.equal('MongoDB Compass - Connect');
+        return client
+          .startUsingCompass()
+          .waitForVisible('select[name=authentication]', 60000)
+          .getTitle().should.eventually.be.equal('MongoDB Compass - Connect');
       });
     });
 
@@ -65,7 +66,6 @@ describe('Compass #spectron', function() {
       context('when selecting a collection', function() {
         it('renders the sample collection in the title', function() {
           return client
-            .startUsingCompass()
             .selectCollection('compass-test.bands')
             .getTitle().should.eventually.be.equal(
             'MongoDB Compass - localhost:27018/compass-test.bands'