COMPASS-989: Backport COMPASS 904 per plugin tooltip (#904) (#907)

* Remove unused this.Tooltip

It attempts to get an 'App.Tooltip' component from the AppRegistry that was not registered, and so ends up as undefined.

* Remove unused CREATE_DATABASE_ICON

It was decided a while back not to proceed with it as we already have the CREATE_DATABASE_BUTTON.

* Consolidate sidebar tooltips into top-level component

Anecdotally improves performance of the sidebar, might bring out the timeline when clicking the Sidebar Refresh button to be sure.

* abstract react-tooltip to HadronToolTip

* enable tooltip for databases-table

* enable toolltip for collections-table

* enable tooltip for crud

* enable tooltip for indexes

* enable tooltip for validation

* remove global tooltip from home

* add test for the collections table component

* add test for databases table component

* add test for indexes component

* add test for sampling message

* add test for rule builder component

* 👕

Author: pzrq

src/internal-packages/app/index.js

@@ -1,4 +1,6 @@
 const app = require('hadron-app');
+
+const HadronTooltip = require('./lib/components/hadron-tooltip');
 const StoreConnector = require('./lib/components/store-connector');
 const SortableTable = require('./lib/components/sortable-table');
 const TabNavBar = require('./lib/components/tab-nav-bar');
@@ -12,6 +14,7 @@ const ModalStatusMessage = require('./lib/components/modal-status-message');
  * Activate all the components in the Compass Sidebar package.
  */
 function activate() {
+  app.appRegistry.registerComponent('App.HadronTooltip', HadronTooltip);
   app.appRegistry.registerComponent('App.StoreConnector', StoreConnector);
   app.appRegistry.registerComponent('App.SortableTable', SortableTable);
   app.appRegistry.registerComponent('App.ModalStatusMessage', ModalStatusMessage);
@@ -26,6 +29,7 @@ function activate() {
  * Deactivate all the components in the Compass Sidebar package.
  */
 function deactivate() {
+  app.appRegistry.deregisterComponent('App.HadronTooltip');
   app.appRegistry.deregisterComponent('App.StoreConnector');
   app.appRegistry.deregisterComponent('App.SortableTable');
   app.appRegistry.deregisterComponent('App.ModalStatusMessage');

src/internal-packages/app/lib/components/hadron-tooltip.jsx

@@ -0,0 +1,35 @@
+const React = require('react');
+const ReactTooltip = require('react-tooltip');
+
+class HadronTooltip extends React.Component {
+
+  /**
+   * Render the tooltip component.
+   *
+   * @returns {React.Component} The component.
+   */
+  render() {
+    return (
+      <ReactTooltip {...this.props} />
+    );
+  }
+}
+
+HadronTooltip.propTypes = {
+  id: React.PropTypes.string.isRequired,
+  effect: React.PropTypes.string,
+  className: React.PropTypes.string,
+  place: React.PropTypes.string,
+  delayShow: React.PropTypes.number
+};
+
+HadronTooltip.defaultProps = {
+  place: 'right',
+  effect: 'solid',
+  className: 'hadron-tooltip',
+  delayShow: 200
+};
+
+HadronTooltip.displayName = 'HadronTooltip';
+
+module.exports = HadronTooltip;

…ges/app/styles/not-writable-tooltip.less …-packages/app/styles/hadron-tooltip.lesssrc/internal-packages/app/styles/not-writable-tooltip.less renamed to src/internal-packages/app/styles/hadron-tooltip.less src/internal-packages/app/styles/not-writable-tooltip.less renamed to src/internal-packages/app/styles/hadron-tooltip.less

@@ -1,4 +1,4 @@
-.is-not-writable-tooltip {
+.hadron-tooltip {
   height: 24px;
   font-size: 11px;
   padding: 3px 6px !important;

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

@@ -1,5 +1,5 @@
+@import './hadron-tooltip.less';
 @import './sortable-table.less';
 @import './modal-status-message.less';
 @import './tab-nav-bar.less';
 @import './status-row.less';
-@import './not-writable-tooltip.less';

src/internal-packages/database-ddl/lib/component/databases-table.jsx

@@ -20,7 +20,7 @@ class DatabasesTable extends React.Component {
     this.DatabaseDDLAction = app.appRegistry.getAction('DatabaseDDL.Actions');
     this.SortableTable = app.appRegistry.getComponent('App.SortableTable');
     this.CollectionStore = app.appRegistry.getStore('App.CollectionStore');
-    this.Tooltip = app.appRegistry.getComponent('App.Tooltip');
+    this.HadronTooltip = app.appRegistry.getComponent('App.HadronTooltip');
   }
 
   onColumnHeaderClicked(column, order) {
@@ -83,12 +83,18 @@ class DatabasesTable extends React.Component {
     });
 
     const isWritable = app.dataService.isWritable();
+    const tooltipId = 'database-ddl-is-not-writable';
+    const isNotWritableTooltip = isWritable ? null : (
+      <this.HadronTooltip
+        id={tooltipId}
+      />
+    );
     const tooltipText = 'This action is not available on a secondary node';
 
     return (
       <div className="rtss-databases" data-test-id="databases-table">
         <div className="rtss-databases-create-button action-bar controls-container">
-          <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
+          <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for={tooltipId}>
             <button
                 className="btn btn-primary btn-xs"
                 type="button"
@@ -117,6 +123,7 @@ class DatabasesTable extends React.Component {
         </div>
         {this.props.databases.length === 0 ?
             this.renderNoCollections(isWritable) : null}
+        {isNotWritableTooltip}
       </div>
     );
   }

src/internal-packages/database/lib/components/collections-table.jsx

@@ -13,6 +13,7 @@ class CollectionsTable extends React.Component {
     super(props);
     this.SortableTable = app.appRegistry.getComponent('App.SortableTable');
     this.CollectionStore = app.appRegistry.getStore('App.CollectionStore');
+    this.HadronTooltip = app.appRegistry.getComponent('App.HadronTooltip');
   }
 
   onColumnHeaderClicked(column, order) {
@@ -61,12 +62,18 @@ class CollectionsTable extends React.Component {
     });
 
     const isWritable = app.dataService.isWritable();
-    const tooltipText = 'This action is not available on a secondary node.';
+    const tooltipId = 'database-is-not-writable';
+    const isNotWritableTooltip = isWritable ? null : (
+      <this.HadronTooltip
+        id={tooltipId}
+      />
+    );
+    const tooltipText = 'This action is not available on a secondary node';
 
     return (
       <div className="collections-table" data-test-id="collections-table">
         <div className="collections-table-create-button action-bar controls-container">
-          <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
+          <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for={tooltipId}>
             <button
                 className="btn btn-primary btn-xs"
                 type="button"
@@ -93,6 +100,7 @@ class CollectionsTable extends React.Component {
             />
           </div>
         </div>
+        {isNotWritableTooltip}
       </div>
     );
   }

src/internal-packages/home/lib/component/home.jsx

@@ -1,6 +1,5 @@
 const React = require('react');
 const app = require('hadron-app');
-const ReactTooltip = require('react-tooltip');
 
 class Home extends React.Component {
   constructor(props) {
@@ -46,17 +45,6 @@ class Home extends React.Component {
   }
 
   render() {
-    // if server is not writable, include global tooltip component for diabled buttons
-    const isNotWritableTooltip = app.dataService.isWritable() ? null : (
-      <ReactTooltip
-        id="is-not-writable"
-        effect="solid"
-        class="is-not-writable-tooltip"
-        place="right"
-        delayShow={200}
-      />
-    );
-
     return (
       <div className="page-container">
         <this.InstanceHeader sidebarCollapsed={this.state.collapsed}/>
@@ -65,7 +53,6 @@ class Home extends React.Component {
             {this.renderContent()}
           </div>
           <this.sideBar onCollapse={this.collapseSidebar.bind(this)}/>
-          {isNotWritableTooltip}
           <this.CreateDatabaseDialog />
           <this.DropDatabaseDialog />
           <this.CreateCollectionDialog />

src/internal-packages/indexes/lib/component/create-index-button.jsx

@@ -1,4 +1,5 @@
 const React = require('react');
+const app = require('hadron-app');
 const CreateIndexModal = require('./create-index-modal');
 
 /**
@@ -16,6 +17,7 @@ class CreateIndexButton extends React.Component {
     this.state = {
       showModal: false
     };
+    this.HadronTooltip = app.appRegistry.getComponent('App.HadronTooltip');
   }
 
   /**
@@ -42,11 +44,17 @@ class CreateIndexButton extends React.Component {
    * @returns {React.Component} The create index button.
    */
   render() {
-    const tooltipText = 'This action is not available on a secondary node.';
+    const tooltipId = 'index-is-not-writable';
+    const isNotWritableTooltip = this.props.isWritable ? null : (
+      <this.HadronTooltip
+        id={tooltipId}
+      />
+    );
+    const tooltipText = 'This action is not available on a secondary node';
 
     return (
       <div className="create-index-btn action-bar">
-        <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
+        <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for={tooltipId}>
           <button
             className="btn btn-primary btn-xs"
             type="button"
@@ -56,6 +64,7 @@ class CreateIndexButton extends React.Component {
             Create Index
           </button>
         </div>
+        {isNotWritableTooltip}
         <CreateIndexModal
           open={this.state.showModal}
           close={this.close.bind(this)} />

src/internal-packages/query/lib/component/sampling-message.jsx

@@ -23,6 +23,7 @@ class SamplingMessage extends React.Component {
     this.documentRemovedAction = crudActions.documentRemoved;
     this.refreshDocumentsAction = crudActions.refreshDocuments;
     this.loadMoreDocumentsStore = app.appRegistry.getStore('CRUD.LoadMoreDocumentsStore');
+    this.HadronTooltip = app.appRegistry.getComponent('App.HadronTooltip');
   }
 
   /**
@@ -135,7 +136,15 @@ class SamplingMessage extends React.Component {
    */
   renderQueryMessage() {
     const noun = pluralize('document', this.state.count);
-    const tooltipText = 'This action is not available on a secondary node.';
+
+    const isWritable = app.dataService.isWritable();
+    const tooltipId = 'document-is-not-writable';
+    const isNotWritableTooltip = isWritable ? null : (
+      <this.HadronTooltip
+        id={tooltipId}
+      />
+    );
+    const tooltipText = 'This action is not available on a secondary node';
 
     return (
       <div>
@@ -152,7 +161,7 @@ class SamplingMessage extends React.Component {
             text="&nbsp;Refresh" />
         </div>
         <div className="action-bar">
-          <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
+          <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for={tooltipId}>
             <button
                 className="btn btn-primary btn-xs open-insert"
                 type="button"
@@ -162,6 +171,7 @@ class SamplingMessage extends React.Component {
               Insert Document
             </button>
           </div>
+          {isNotWritableTooltip}
         </div>
       </div>
     );

src/internal-packages/sidebar/lib/components/constants.js

@@ -1,7 +1,6 @@
 const TOOLTIP_IDS = Object.freeze({
   CREATE_COLLECTION: 'create-collection',
   CREATE_DATABASE_BUTTON: 'create-database-button',
-  CREATE_DATABASE_ICON: 'create-database-icon',
   DROP_COLLECTION: 'drop-collection',
   DROP_DATABASE: 'drop-database'
 });