COMPASS-98 react convert collection (#593)

* COMPASS-98 added query bar to schema

* COMPASS-98 added collection component

* COMPASS-98 added query bar to CRUD and Explain

* COMPASS-98 cleaned up collection package

* COMPASS-98 fixing index

* COMPASS-98 add options to QueryStore and add QueryChangedStore (#590)

* COMPASS-98 add options to QueryStore and add QueryChangedStore

* fix typo

* comments

* pass all other query options to QueryChangedStore. (#592)

* COMPASS-98 listening to namespace for crud and indexes init

* COMPASS-98 crud, schema and explain listens to query changes + removed x from schema action/store files

* COMPASS-98 added fix to Explain plan not resetting on collection change

* COMPASS-98 tests working and schema sample bug fixed

* COMPASS-98 CRUD and explain working

* COMPASS-98 switching between collection and db view

* COMPASS-98 set name of collection

* COMPASS-98 document & indexes loading on mount

* COMPASS-98 made no difference on styling :(

* COMPASS-98 removed hanging console.log

* COMPASS-98 a slightly safer way of preventing double resets for crud

* Header repositioning fix

* COMPASS-98 fix bug where minicharts don’t rerender...

...when updating namespace and schema view was active.

* COMPASS-98 fix bug where minicharts don’t rerender...

...when updating namespace and schema view was active.

cherry-picking deb2133

* fix linter issue.

* fix linter issue.

* COMPASS-98 minor changes to remove comments

* COMPASS-98 removed unused files

* COMPASS-98 removed useless flexbox-fixed class

* using collection 'store' method instead

* removed debugs

* full namespace as title instead of just collection name

* COMPASS-98 adding id to tabs

* 5 passing functional tests!

* splitting functional test of query refine and apply

* supporting more test cases!

* COMPASS-98 most functional tests working

* added extra margin top to show the create button

* skip reset test instead of commenting out.

Author: Satya

src/app/home/collection-list-item.js

@@ -1,6 +1,6 @@
 .page
   .content.with-sidebar
-    div(data-hook='collection-subview')
+    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")

src/app/home/collection.jade

@@ -1,7 +1,6 @@
 var View = require('ampersand-view');
 // var format = require('util').format;
 // var IdentifyView = require('../identify');
-var CollectionView = require('./collection');
 var { NamespaceStore } = require('hadron-reflux-store');
 var TourView = require('../tour');
 var NetworkOptInView = require('../network-optin');
@@ -16,6 +15,32 @@ var ReactDOM = require('react-dom');
 
 var indexTemplate = require('./index.jade');
 
+/**
+ * Ampersand view wrapper around a React component tab view
+ */
+var WrapperView = View.extend({
+  template: '<div></div>',
+  props: {
+    componentKey: 'string',
+    visible: {
+      type: 'boolean',
+      required: true,
+      default: false
+    }
+  },
+  bindings: {
+    visible: {
+      type: 'booleanClass',
+      no: 'hidden'
+    }
+  },
+  render: function() {
+    this.renderWithTemplate();
+    var component = app.appRegistry.getComponent(this.componentKey);
+    ReactDOM.render(React.createElement(component), this.query());
+  }
+});
+
 var HomeView = View.extend({
   screenName: 'Schema',
   props: {
@@ -184,40 +209,21 @@ var HomeView = View.extend({
 
     return database.collections.get(ns.ns);
   },
-  // 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');
     window.close();
   },
   template: indexTemplate,
   subviews: {
-    _collection: {
-      hook: 'collection-subview',
+    collectionView: {
+      hook: 'collection-view',
       prepareView: function(el) {
-        return new CollectionView({
+        return new WrapperView({
           el: el,
-          parent: this
+          parent: this,
+          visible: true,
+          componentKey: 'Collection.Collection'
         });
       }
     }