From 35211539a9c7f9972be4bee2ea24e2433a042c11 Mon Sep 17 00:00:00 2001
From: Durran Jordan <durran@gmail.com>
Date: Fri, 17 Nov 2017 18:28:17 +0100
Subject: [PATCH] COMPASS-2347: Databases and Collection in readonly mode

---
 .../lib/component/databases-table.jsx         | 26 ++++--
 .../lib/components/collections-table.jsx      | 26 ++++--
 .../lib/components/sidebar-collection.jsx     | 47 ++++++----
 .../lib/components/sidebar-database.jsx       | 90 +++++++++++--------
 .../sidebar/lib/components/sidebar.jsx        | 56 ++++++------
 5 files changed, 152 insertions(+), 93 deletions(-)

diff --git a/src/internal-plugins/database-ddl/lib/component/databases-table.jsx b/src/internal-plugins/database-ddl/lib/component/databases-table.jsx
index 7d29156cf66..88b58fe4be1 100644
--- a/src/internal-plugins/database-ddl/lib/component/databases-table.jsx
+++ b/src/internal-plugins/database-ddl/lib/component/databases-table.jsx
@@ -76,6 +76,10 @@ class DatabasesTable extends React.Component {
     this.setState(state);
   }
 
+  isReadonlyDistro() {
+    return process.env.HADRON_READONLY === 'true';
+  }
+
   renderNoCollections(isWritable) {
     return (
       <div className="no-collections-zero-state">
@@ -92,6 +96,19 @@ class DatabasesTable extends React.Component {
     );
   }
 
+  renderCreateDatabaseButton() {
+    if (!this.isReadonlyDistro()) {
+      return (
+        <this.TextWriteButton
+          className="btn btn-primary btn-xs"
+          dataTestId="open-create-database-modal-button"
+          text="Create Database"
+          tooltipId="database-ddl-is-not-writable"
+          clickHandler={this.onCreateDatabaseButtonClicked.bind(this)} />
+      );
+    }
+  }
+
   render() {
     if (this.props.databases === LOADING_STATE) {
       // Handled by the <Status> component
@@ -111,12 +128,7 @@ class DatabasesTable extends React.Component {
     return (
       <div className="rtss-databases" data-test-id="databases-table">
         <div className="rtss-databases-create-button action-bar controls-container">
-          <this.TextWriteButton
-            className="btn btn-primary btn-xs"
-            dataTestId="open-create-database-modal-button"
-            text="Create Database"
-            tooltipId="database-ddl-is-not-writable"
-            clickHandler={this.onCreateDatabaseButtonClicked.bind(this)} />
+          {this.renderCreateDatabaseButton()}
         </div>
         <div className="column-container">
           <div className="column main">
@@ -128,7 +140,7 @@ class DatabasesTable extends React.Component {
               sortOrder={this.props.sortOrder}
               sortColumn={this.props.sortColumn}
               valueIndex={0}
-              removable={this.state.isWritable}
+              removable={this.state.isWritable && !this.isReadonlyDistro()}
               onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
               onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
             />
diff --git a/src/internal-plugins/database/lib/components/collections-table.jsx b/src/internal-plugins/database/lib/components/collections-table.jsx
index 1635a7e3eb6..a17a6347a5d 100644
--- a/src/internal-plugins/database/lib/components/collections-table.jsx
+++ b/src/internal-plugins/database/lib/components/collections-table.jsx
@@ -56,6 +56,10 @@ class CollectionsTable extends React.Component {
     this.setState(state);
   }
 
+  isReadonlyDistro() {
+    return process.env.HADRON_READONLY === 'true';
+  }
+
   renderLink(coll) {
     const collName = coll['Collection Name'];
     return (
@@ -63,6 +67,19 @@ class CollectionsTable extends React.Component {
     );
   }
 
+  renderButton() {
+    if (!this.isReadonlyDistro()) {
+      return (
+        <this.TextWriteButton
+          className="btn btn-primary btn-xs"
+          dataTestId="open-create-collection-modal-button"
+          text="Create Collection"
+          tooltipId="database-is-not-writable"
+          clickHandler={this.onCreateCollectionButtonClicked.bind(this)} />
+      );
+    }
+  }
+
   render() {
     const rows = _.map(this.props.renderedCollections, (coll) => {
       const linkName = this.renderLink(coll);
@@ -84,12 +101,7 @@ class CollectionsTable extends React.Component {
     return (
       <div className="collections-table" data-test-id="collections-table">
         <div className="collections-table-create-button action-bar controls-container">
-          <this.TextWriteButton
-            className="btn btn-primary btn-xs"
-            dataTestId="open-create-collection-modal-button"
-            text="Create Collection"
-            tooltipId="database-is-not-writable"
-            clickHandler={this.onCreateCollectionButtonClicked.bind(this)} />
+          {this.renderButton()}
         </div>
         <div className="column-container">
           <div className="column main">
@@ -101,7 +113,7 @@ class CollectionsTable extends React.Component {
               sortOrder={this.props.sortOrder}
               sortColumn={this.props.sortColumn}
               valueIndex={0}
-              removable={this.state.isWritable}
+              removable={this.state.isWritable && !this.isReadonlyDistro()}
               onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
               onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
             />
diff --git a/src/internal-plugins/sidebar/lib/components/sidebar-collection.jsx b/src/internal-plugins/sidebar/lib/components/sidebar-collection.jsx
index 8795631cab4..c8543c51087 100644
--- a/src/internal-plugins/sidebar/lib/components/sidebar-collection.jsx
+++ b/src/internal-plugins/sidebar/lib/components/sidebar-collection.jsx
@@ -59,6 +59,10 @@ class SidebarCollection extends React.Component {
     }
   }
 
+  isReadonlyDistro() {
+    return process.env.HADRON_READONLY === 'true';
+  }
+
   renderReadonly() {
     if (this.props.readonly) {
       return (
@@ -67,25 +71,36 @@ class SidebarCollection extends React.Component {
     }
   }
 
+  renderDropCollectionButton() {
+    if (!this.isReadonlyDistro()) {
+      const tooltipText = this.state.isWritable ?
+        'Drop collection' :
+        this.state.description;
+      const tooltipOptions = {
+        'data-for': TOOLTIP_IDS.DROP_COLLECTION,
+        'data-effect': 'solid',
+        'data-offset': "{'bottom': 10, 'left': -5}",
+        'data-tip': tooltipText
+      };
+      let dropClassName = 'compass-sidebar-icon compass-sidebar-icon-drop-collection fa fa-trash-o';
+      if (!this.state.isWritable) {
+        dropClassName += ' compass-sidebar-icon-is-disabled';
+      }
+      return (
+        <i
+          className={dropClassName}
+          onClick={this.handleDropCollectionClick.bind(this, this.state.isWritable)}
+          {...tooltipOptions} />
+      );
+    }
+  }
+
   render() {
     const collectionName = this.getCollectionName();
-    const tooltipText = this.state.isWritable ?
-      'Drop collection' :
-      this.state.description;
-    const tooltipOptions = {
-      'data-for': TOOLTIP_IDS.DROP_COLLECTION,
-      'data-effect': 'solid',
-      'data-offset': "{'bottom': 10, 'left': -5}",
-      'data-tip': tooltipText
-    };
     let itemClassName = 'compass-sidebar-item compass-sidebar-item-is-actionable';
     if (this.props.activeNamespace === this.props._id) {
       itemClassName += ' compass-sidebar-item-is-active';
     }
-    let dropClassName = 'compass-sidebar-icon compass-sidebar-icon-drop-collection fa fa-trash-o';
-    if (!this.state.isWritable) {
-      dropClassName += ' compass-sidebar-icon-is-disabled';
-    }
     return (
       <div className={itemClassName}>
         <div
@@ -97,11 +112,7 @@ class SidebarCollection extends React.Component {
           {this.renderReadonly()}
         </div>
         <div className="compass-sidebar-item-actions compass-sidebar-item-actions-ddl">
-          <i
-            className={dropClassName}
-            onClick={this.handleDropCollectionClick.bind(this, this.state.isWritable)}
-            {...tooltipOptions}
-          />
+          {this.renderDropCollectionButton()}
         </div>
       </div>
     );
diff --git a/src/internal-plugins/sidebar/lib/components/sidebar-database.jsx b/src/internal-plugins/sidebar/lib/components/sidebar-database.jsx
index c1471b5dcef..06133ce0064 100644
--- a/src/internal-plugins/sidebar/lib/components/sidebar-database.jsx
+++ b/src/internal-plugins/sidebar/lib/components/sidebar-database.jsx
@@ -87,37 +87,63 @@ class SidebarDatabase extends React.Component {
     }
   }
 
+  isReadonlyDistro() {
+    return process.env.HADRON_READONLY === 'true';
+  }
+
+  renderCreateCollectionButton() {
+    if (!this.isReadonlyDistro()) {
+      const createTooltipText = this.state.isWritable ?
+        'Create collection' :
+        this.state.description;
+      const createTooltipOptions = {
+        'data-for': TOOLTIP_IDS.CREATE_COLLECTION,
+        'data-effect': 'solid',
+        'data-offset': "{'bottom': 10, 'left': -8}",
+        'data-tip': createTooltipText
+      };
+      let createClassName = 'mms-icon-add-circle compass-sidebar-icon compass-sidebar-icon-create-collection';
+      if (!this.state.isWritable) {
+        createClassName += ' compass-sidebar-icon-is-disabled';
+      }
+      return (
+        <i
+          className={createClassName}
+          onClick={this.handleCreateCollectionClick.bind(this, this.state.isWritable)}
+          {...createTooltipOptions} />
+      );
+    }
+  }
+
+  renderDropDatabaseButton() {
+    if (!this.isReadonlyDistro()) {
+      const dropTooltipText = this.state.isWritable ?
+        'Drop database' :
+        'Drop database is not available on a secondary node';  // TODO: Arbiter/recovering/etc
+      const dropTooltipOptions = {
+        'data-for': TOOLTIP_IDS.DROP_DATABASE,
+        'data-effect': 'solid',
+        'data-offset': "{'bottom': 10, 'left': -5}",
+        'data-tip': dropTooltipText
+      };
+      let dropClassName = 'compass-sidebar-icon compass-sidebar-icon-drop-database fa fa-trash-o';
+      if (!this.state.isWritable) {
+        dropClassName += ' compass-sidebar-icon-is-disabled';
+      }
+      return (
+        <i
+          className={dropClassName}
+          onClick={this.handleDropDBClick.bind(this, this.state.isWritable)}
+          {...dropTooltipOptions} />
+      );
+    }
+  }
+
   render() {
-    const createTooltipText = this.state.isWritable ?
-      'Create collection' :
-      this.state.description;
-    const createTooltipOptions = {
-      'data-for': TOOLTIP_IDS.CREATE_COLLECTION,
-      'data-effect': 'solid',
-      'data-offset': "{'bottom': 10, 'left': -8}",
-      'data-tip': createTooltipText
-    };
-    const dropTooltipText = this.state.isWritable ?
-      'Drop database' :
-      'Drop database is not available on a secondary node';  // TODO: Arbiter/recovering/etc
-    const dropTooltipOptions = {
-      'data-for': TOOLTIP_IDS.DROP_DATABASE,
-      'data-effect': 'solid',
-      'data-offset': "{'bottom': 10, 'left': -5}",
-      'data-tip': dropTooltipText
-    };
     let headerClassName = 'compass-sidebar-item-header compass-sidebar-item-header-is-expandable compass-sidebar-item-header-is-actionable';
     if (this.props.activeNamespace === this.props._id) {
       headerClassName += ' compass-sidebar-item-header-is-active';
     }
-    let createClassName = 'mms-icon-add-circle compass-sidebar-icon compass-sidebar-icon-create-collection';
-    if (!this.state.isWritable) {
-      createClassName += ' compass-sidebar-icon-is-disabled';
-    }
-    let dropClassName = 'compass-sidebar-icon compass-sidebar-icon-drop-database fa fa-trash-o';
-    if (!this.state.isWritable) {
-      dropClassName += ' compass-sidebar-icon-is-disabled';
-    }
     return (
       <div className="compass-sidebar-item compass-sidebar-item-is-top-level" style={this.props.style}>
         <div className={headerClassName}>
@@ -131,16 +157,8 @@ class SidebarDatabase extends React.Component {
             {this.props._id}
           </div>
           <div className="compass-sidebar-item-header-actions compass-sidebar-item-header-actions-ddl">
-            <i
-              className={createClassName}
-              onClick={this.handleCreateCollectionClick.bind(this, this.state.isWritable)}
-              {...createTooltipOptions}
-            />
-            <i
-              className={dropClassName}
-              onClick={this.handleDropDBClick.bind(this, this.state.isWritable)}
-              {...dropTooltipOptions}
-            />
+            {this.renderCreateCollectionButton()}
+            {this.renderDropDatabaseButton()}
           </div>
         </div>
         <div className="compass-sidebar-item-content">
diff --git a/src/internal-plugins/sidebar/lib/components/sidebar.jsx b/src/internal-plugins/sidebar/lib/components/sidebar.jsx
index 4440c8ff21f..732f1dc6a86 100644
--- a/src/internal-plugins/sidebar/lib/components/sidebar.jsx
+++ b/src/internal-plugins/sidebar/lib/components/sidebar.jsx
@@ -148,6 +148,10 @@ class Sidebar extends React.Component {
     return null;
   }
 
+  isReadonlyDistro() {
+    return process.env.HADRON_READONLY === 'true';
+  }
+
   /**
    * On expand/collapse of sidebar-database, add/remove from expandedDBs state and recompute row heights
    * @param{string} _id sidebar-database _id
@@ -160,32 +164,34 @@ class Sidebar extends React.Component {
   }
 
   renderCreateDatabaseButton() {
-    const tooltipText = this.state.description;
-    const tooltipOptions = this.state.isWritable ? {} : {
-      'data-for': TOOLTIP_IDS.CREATE_DATABASE_BUTTON,
-      'data-effect': 'solid',
-      'data-place': 'right',
-      'data-offset': "{'right': -10}",
-      'data-tip': tooltipText
-    };
-    let className = 'compass-sidebar-button-create-database';
-    if (!this.state.isWritable) {
-      className += ' compass-sidebar-button-is-disabled';
+    if (!this.isReadonlyDistro()) {
+      const tooltipText = this.state.description;
+      const tooltipOptions = this.state.isWritable ? {} : {
+        'data-for': TOOLTIP_IDS.CREATE_DATABASE_BUTTON,
+        'data-effect': 'solid',
+        'data-place': 'right',
+        'data-offset': "{'right': -10}",
+        'data-tip': tooltipText
+      };
+      let className = 'compass-sidebar-button-create-database';
+      if (!this.state.isWritable) {
+        className += ' compass-sidebar-button-is-disabled';
+      }
+      return (
+        <div className="compass-sidebar-button-create-database-container" {...tooltipOptions}>
+          <button
+            className={className}
+            title="Create Database"
+            onClick={this.handleCreateDatabaseClick.bind(this, this.state.isWritable)}
+          >
+            <i className="mms-icon-add" />
+            <text className="plus-button">
+              Create Database
+            </text>
+          </button>
+        </div>
+      );
     }
-    return (
-      <div className="compass-sidebar-button-create-database-container" {...tooltipOptions}>
-        <button
-          className={className}
-          title="Create Database"
-          onClick={this.handleCreateDatabaseClick.bind(this, this.state.isWritable)}
-        >
-          <i className="mms-icon-add" />
-          <text className="plus-button">
-            Create Database
-          </text>
-        </button>
-      </div>
-    );
   }
 
   renderSidebarDatabase({index, key, style}) {