COMPASS-292 explain view zero state (#617)

* add App.StatusRow component (shared component) and styles.

* remove explain's own StatusRow and use App.StatusRow

* replace index notice with App.StatusRow for consistency.

* remove validation notice and replace with App.StatusRow

Note: Validation had its own StatusRow component. I renamed that to ValidationStatusRow, including styles. Eventually, the two status rows should be unified if possible.

Author: rueckstiess

src/internal-packages/app/index.js

@@ -2,6 +2,7 @@ const app = require('ampersand-app');
 const StoreConnector = require('./lib/components/store-connector');
 const SortableTable = require('./lib/components/sortable-table');
 const TabNavBar = require('./lib/components/tab-nav-bar');
+const StatusRow = require('./lib/components/status-row');
 const InstanceActions = require('./lib/actions/instance-actions');
 const InstanceStore = require('./lib/stores/instance-store');
 const CollectionStore = require('./lib/stores/collection-store');
@@ -15,6 +16,7 @@ function activate() {
   app.appRegistry.registerComponent('App.SortableTable', SortableTable);
   app.appRegistry.registerComponent('App.ModalStatusMessage', ModalStatusMessage);
   app.appRegistry.registerComponent('App.TabNavBar', TabNavBar);
+  app.appRegistry.registerComponent('App.StatusRow', StatusRow);
   app.appRegistry.registerAction('App.InstanceActions', InstanceActions);
   app.appRegistry.registerStore('App.InstanceStore', InstanceStore);
   app.appRegistry.registerStore('App.CollectionStore', CollectionStore);
@@ -28,6 +30,7 @@ function deactivate() {
   app.appRegistry.deregisterComponent('App.SortableTable');
   app.appRegistry.deregisterComponent('App.ModalStatusMessage');
   app.appRegistry.deregisterComponent('App.TabNavBar');
+  app.appRegistry.deregisterComponent('App.StatusRow');
   app.appRegistry.deregisterAction('App.InstanceActions');
   app.appRegistry.deregisterStore('App.InstanceStore');
   app.appRegistry.deregisterStore('App.CollectionStore');

src/internal-packages/explain/lib/components/shared/status-row.jsx renamed to src/internal-packages/app/lib/components/status-row.jsx

@@ -8,18 +8,27 @@ class StatusRow extends React.Component {
    * @returns {React.Component} The component.
    */
   render() {
+    let className = 'status-row';
+    if (this.props.style !== 'default') {
+      className += ` status-row-has-${this.props.style}`;
+    }
     return (
-      <div className="status-row">
-        {this.props.children}
+      <div className={className}>
+          {this.props.children}
       </div>
     );
   }
 }
 
 StatusRow.propTypes = {
+  style: React.PropTypes.oneOf(['default', 'warning', 'error']),
   children: React.PropTypes.node
 };
 
+StatusRow.defaultProps = {
+  style: 'default'
+};
+
 StatusRow.displayName = 'StatusRow';
 
 module.exports = StatusRow;

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

@@ -1,3 +1,4 @@
 @import './sortable-table.less';
 @import './modal-status-message.less';
 @import './tab-nav-bar.less';
+@import './status-row.less';

src/internal-packages/app/styles/status-row.less

@@ -0,0 +1,23 @@
+.status-row {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 5px 12px;
+
+  min-height: 26px;
+  border-bottom: 1px solid @gray7;
+
+  font-size: 13px;
+  font-weight: 200;
+
+  background-color: @gray8;
+  color: #000;
+  span, div, p {
+    display: inline-block;
+  }
+}
+
+.status-row-has-warning {
+  background-color: #FEE9C3;
+  color: #7F6A4E;
+}

src/internal-packages/explain/lib/components/compass-explain.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const app = require('ampersand-app');
 const ExplainBody = require('./explain-body');
 const ExplainHeader = require('./explain-header');
-
+const StatusRow = app.appRegistry.getComponent('App.StatusRow');
 // const debug = require('debug')('mongodb-compass:explain');
 
 /**
@@ -20,6 +20,11 @@ const ExplainHeader = require('./explain-header');
  *     .explain-json     (mutually exclusive with .explain-tree)
  */
 
+const READ_ONLY_WARNING = 'Explain plans on readonly views are not supported.';
+
+const COLLECTION_SCAN_WARNING = 'To prevent unintended collection scans, please'
+  + ' enter your query first before applying and viewing your explain plan.';
+
 class CompassExplain extends React.Component {
 
   constructor(props) {
@@ -31,7 +36,15 @@ class CompassExplain extends React.Component {
     this.queryBar = app.appRegistry.getComponent('Query.QueryBar');
   }
 
-  renderComponent() {
+  renderWarning(warning) {
+    return (
+      <StatusRow style="warning">
+        {warning}
+      </StatusRow>
+    );
+  }
+
+  renderContent() {
     return (
       <div className="column-container with-refinebar">
         <div className="column main">
@@ -54,24 +67,26 @@ class CompassExplain extends React.Component {
     );
   }
 
-  renderReadonly() {
-    return (
-      <div className="compass-explain-notice">
-        Explain plans on readonly views are not supported.
-      </div>
-    );
-  }
-
   /**
    * Render Explain.
    *
    * @returns {React.Component} The Explain view.
    */
   render() {
+    let content;
+
+    if (this.CollectionStore.isReadonly()) {
+      content = this.renderWarning(READ_ONLY_WARNING);
+    } else if (this.props.explainState === 'initial') {
+      content = this.renderWarning(COLLECTION_SCAN_WARNING);
+    } else {
+      content = this.renderContent();
+    }
+
     return (
       <div className="compass-explain header-margin">
         <this.queryBar />
-        {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
+        {content}
       </div>
     );
   }

src/internal-packages/explain/lib/components/explain-header.jsx

@@ -1,8 +1,9 @@
 const React = require('react');
 const ExplainSummary = require('./explain-summary');
+const app = require('ampersand-app');
 
 const ViewSwitcher = require('./shared/view-switcher');
-const StatusRow = require('./shared/status-row');
+const StatusRow = app.appRegistry.getComponent('App.StatusRow');
 
 const ExplainActions = require('../actions');
 

src/internal-packages/explain/styles/compass-explain.less

@@ -1,13 +1,5 @@
 .compass-explain {
 
-  &-notice {
-    color: steelblue;
-    background-color: #b0e0e6;
-    border-radius: 5px;
-    padding: 15px;
-    margin-bottom: 10px;
-  }
-
   // hacks for json view on explain tab
   ol.document-list li.document-list-item ol.document-property-body li.document-property.array ol.document-property-body .document-property-key,
   ol.document-list li.document-list-item ol.document-property-body li.document-property.object ol.document-property-body .document-property-key {

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

@@ -10,5 +10,4 @@
 
 // shared components
 @import './shared/view-switcher.less';
-@import './shared/status-row.less';
 @import './shared/palette.less';

src/internal-packages/explain/styles/shared/status-row.less

@@ -4,6 +4,7 @@ const IndexList = require('./index-list');
 const CreateIndexButton = require('./create-index-button');
 const LoadIndexesStore = require('../store/load-indexes-store');
 const app = require('ampersand-app');
+const StatusRow = app.appRegistry.getComponent('App.StatusRow');
 
 /**
  * Component for the indexes.
@@ -67,9 +68,9 @@ class Indexes extends React.Component {
 
   renderReadonly() {
     return (
-      <div className="index-container-notice">
+      <StatusRow style="warning">
         Readonly views may not contain indexes.
-      </div>
+      </StatusRow>
     );
   }