COMPASS-2346: Don't show index actions in readonly mode (#1336)

Author: durran

src/internal-plugins/indexes/lib/component/drop-column.jsx

@@ -45,7 +45,7 @@ class DropColumn extends React.Component {
   render() {
     return (
       <td className="drop-column">
-        {this.props.indexName !== '_id_' ?
+        {this.props.indexName !== '_id_' && !this.props.isReadonly ?
           <button
             className="drop-btn btn btn-default btn-sm"
             type="button"
@@ -65,7 +65,8 @@ class DropColumn extends React.Component {
 DropColumn.displayName = 'DropColumn';
 
 DropColumn.propTypes = {
-  indexName: PropTypes.string.isRequired
+  indexName: PropTypes.string.isRequired,
+  isReadonly: PropTypes.bool.isRequired
 };
 
 module.exports = DropColumn;

src/internal-plugins/indexes/lib/component/index-list.jsx

@@ -1,5 +1,6 @@
 const _ = require('lodash');
 const React = require('react');
+const PropTypes = require('prop-types');
 const Index = require('./index');
 const SortIndexesStore = require('../store/sort-indexes-store');
 const UpdateIndexesStore = require('../store/update-indexes-store');
@@ -52,7 +53,7 @@ class IndexList extends React.Component {
    */
   render() {
     const indexes = _.map(this.state.indexes, (model) => {
-      return (<Index key={model.name} index={model} />);
+      return (<Index key={model.name} index={model} isReadonly={this.props.isReadonly} />);
     });
     return (
       <tbody className="table">
@@ -64,4 +65,8 @@ class IndexList extends React.Component {
 
 IndexList.displayName = 'IndexList';
 
+IndexList.propTypes = {
+  isReadonly: PropTypes.bool.isRequired
+};
+
 module.exports = IndexList;

src/internal-plugins/indexes/lib/component/index.jsx

@@ -37,6 +37,12 @@ class Index extends React.Component {
     this.setState(state);
   }
 
+  isWritable() {
+    return !this.CollectionStore.isReadonly() &&
+      this.state.isWritable &&
+      !this.props.isReadonly;
+  }
+
   /**
    * Render the index.
    *
@@ -52,9 +58,7 @@ class Index extends React.Component {
           relativeSize={this.props.index.relativeSize} />
         <UsageColumn usage={this.props.index.usageCount} since={this.props.index.usageSince} />
         <PropertyColumn index={this.props.index} />
-        {(!this.CollectionStore.isReadonly() && this.state.isWritable) ?
-          <DropColumn indexName={this.props.index.name} />
-          : null}
+        <DropColumn indexName={this.props.index.name} isReadonly={!this.isWritable()} />
       </tr>
     );
   }
@@ -63,7 +67,8 @@ class Index extends React.Component {
 Index.displayName = 'Index';
 
 Index.propTypes = {
-  index: PropTypes.object.isRequired
+  index: PropTypes.object.isRequired,
+  isReadonly: PropTypes.bool.isRequired
 };
 
 module.exports = Index;

src/internal-plugins/indexes/lib/component/indexes.jsx

@@ -61,6 +61,10 @@ class Indexes extends React.Component {
     this.setState(this.determineState(error));
   }
 
+  isReadonlyDistro() {
+    return process.env.HADRON_READONLY === 'true';
+  }
+
   shouldComponentupdate(nextProps, nextState) {
     return nextState.isWritable !== this.state.isWritable ||
       nextState.isReadonly !== this.state.isReadonly;
@@ -72,7 +76,7 @@ class Indexes extends React.Component {
         <div className="column main">
           <table data-test-id="indexes-table">
             <IndexHeader />
-            <IndexList />
+            <IndexList isReadonly={this.isReadonlyDistro()} />
           </table>
         </div>
       </div>
@@ -94,6 +98,17 @@ class Indexes extends React.Component {
     );
   }
 
+  renderCreateIndexButton() {
+    if (!this.isReadonlyDistro()) {
+      return (
+        <CreateIndexButton isWritable={this.state.isWritable} description={this.state.description} />
+      );
+    }
+    return (
+      <div className="create-index-btn action-bar"></div>
+    );
+  }
+
   /**
    * Render the indexes.
    *
@@ -102,9 +117,8 @@ class Indexes extends React.Component {
   render() {
     return (
       <div className="index-container">
-        {/* NOT SURE if we need to wrap the controls-container in a readonly conditional as well. */}
         <div className="controls-container">
-          <CreateIndexButton isWritable={this.state.isWritable} description={this.state.description} />
+          {this.renderCreateIndexButton()}
         </div>
         {(this.state.isReadonly || this.state.error) ? this.renderBanner() : this.renderComponent()}
       </div>