add base code for console read only mode (#3466)

console/src/components/Main/Actions.js

@@ -33,6 +33,12 @@ const setFeaturesCompatibility = data => ({
   data,
 });
 
+const SET_READ_ONLY_MODE = 'Main/SET_READ_ONLY_MODE';
+const setReadOnlyMode = data => ({
+  type: SET_READ_ONLY_MODE,
+  data,
+});
+
 const featureCompatibilityInit = () => {
   return (dispatch, getState) => {
     const { serverVersion } = getState().main;
@@ -245,6 +251,12 @@ const mainReducer = (state = defaultState, action) => {
       };
     case UPDATE_MIGRATION_STATUS_ERROR:
       return { ...state, migrationError: action.data };
+    case SET_READ_ONLY_MODE:
+      return {
+        ...state,
+        readOnlyMode: action.data,
+        migrationMode: !action.data, // HACK
+      };
     case HASURACTL_URL_ENV:
       return { ...state, hasuractlEnv: action.data };
     case UPDATE_MIGRATION_MODE:
@@ -301,6 +313,7 @@ export {
   UPDATE_MIGRATION_STATUS_ERROR,
   UPDATE_ADMIN_SECRET_INPUT,
   loadMigrationStatus,
+  setReadOnlyMode,
   updateMigrationModeStatus,
   LOGIN_IN_PROGRESS,
   LOGIN_ERROR,

console/src/components/Main/State.js

@@ -2,6 +2,7 @@ const defaultState = {
   migrationError: null,
   hasuractlEnv: null,
   migrationMode: true,
+  readOnlyMode: false,
   migrationModeProgress: false,
   metadataExport: { error: false, info: null },
   adminSecretInput: null,

console/src/components/Services/Data/RawSQL/Actions.js

@@ -37,6 +37,7 @@ const executeSQL = (isMigration, migrationName) => (dispatch, getState) => {
 
   const sql = getState().rawSQL.sql;
   const currMigrationMode = getState().main.migrationMode;
+  const readOnlyMode = getState().main.readOnlyMode;
 
   const migrateUrl = returnMigrateUrl(currMigrationMode);
   const isCascadeChecked = getState().rawSQL.isCascadeChecked;
@@ -45,7 +46,11 @@ const executeSQL = (isMigration, migrationName) => (dispatch, getState) => {
   const schemaChangesUp = [
     {
       type: 'run_sql',
-      args: { sql: sql, cascade: isCascadeChecked },
+      args: {
+        sql: sql,
+        cascade: isCascadeChecked,
+        read_only: readOnlyMode,
+      },
     },
   ];
   // check if track view enabled

console/src/components/Services/Data/Schema/Schema.js

@@ -69,6 +69,7 @@ class Schema extends Component {
       schema,
       schemaList,
       migrationMode,
+      readOnlyMode,
       untrackedRelations,
       currentSchema,
       dispatch,
@@ -326,6 +327,10 @@ class Schema extends Component {
 
     const getUntrackedTablesSection = () => {
       const getTrackAllBtn = () => {
+        if (readOnlyMode) {
+          return null;
+        }
+
         let trackAllBtn = null;
 
         const trackAllTables = e => {
@@ -362,22 +367,19 @@ class Schema extends Component {
         const untrackedTablesList = [];
 
         allUntrackedTables.forEach((table, i) => {
-          const handleTrackTable = e => {
+          const getTrackBtn = () => {
-            e.preventDefault();
+            if (readOnlyMode) {
+              return null;
+            }
 
-            dispatch(setTableName(table.table_name));
+            const handleTrackTable = e => {
-            dispatch(addExistingTableSql());
+              e.preventDefault();
-          };
 
-          const isGQLCompatible = gqlPattern.test(table.table_name);
+              dispatch(setTableName(table.table_name));
-          const gqlCompatibilityWarning = !isGQLCompatible ? (
+              dispatch(addExistingTableSql());
-            <span className={styles.add_mar_left_mid}>
+            };
-              <GqlCompatibilityWarning />
-            </span>
-          ) : null;
 
-          untrackedTablesList.push(
+            return (
-            <div className={styles.padd_bottom} key={`untracked-${i}`}>
               <div
                 className={`${styles.display_inline} ${styles.add_mar_right}`}
               >
@@ -391,6 +393,19 @@ class Schema extends Component {
                   Track
                 </Button>
               </div>
+            );
+          };
+
+          const isGQLCompatible = gqlPattern.test(table.table_name);
+          const gqlCompatibilityWarning = !isGQLCompatible ? (
+            <span className={styles.add_mar_left_mid}>
+              <GqlCompatibilityWarning />
+            </span>
+          ) : null;
+
+          untrackedTablesList.push(
+            <div className={styles.padd_bottom} key={`untracked-${i}`}>
+              {getTrackBtn()}
               <div className={styles.display_inline}>
                 {displayTableName(table)}
               </div>
@@ -428,6 +443,10 @@ class Schema extends Component {
 
     const getUntrackedRelationsSection = () => {
       const getTrackAllBtn = () => {
+        if (readOnlyMode) {
+          return null;
+        }
+
         let trackAllBtn = null;
 
         const trackAllRelations = e => {
@@ -467,10 +486,31 @@ class Schema extends Component {
         untrackedRelations.forEach((rel, i) => {
           const relData = rel.data;
 
-          const handleAddRel = e => {
+          const getTrackBtn = () => {
-            e.preventDefault();
+            if (readOnlyMode) {
+              return null;
+            }
 
-            dispatch(autoAddRelName(rel));
+            const handleTrackRel = e => {
+              e.preventDefault();
+
+              dispatch(autoAddRelName(rel));
+            };
+
+            return (
+              <div
+                className={`${styles.display_inline} ${styles.add_mar_right}`}
+              >
+                <Button
+                  className={styles.display_inline}
+                  color="white"
+                  size="xs"
+                  onClick={handleTrackRel}
+                >
+                  Track
+                </Button>
+              </div>
+            );
           };
 
           const relFrom = <b>{relData.lTable}</b>;
@@ -483,18 +523,7 @@ class Schema extends Component {
 
           untrackedRelList.push(
             <div className={styles.padd_bottom} key={`untracked-rel-${i}`}>
-              <div
+              {getTrackBtn()}
-                className={`${styles.display_inline} ${styles.add_mar_right}`}
-              >
-                <Button
-                  className={styles.display_inline}
-                  color="white"
-                  size="xs"
-                  onClick={handleAddRel}
-                >
-                  Track
-                </Button>
-              </div>
               <div className={styles.display_inline}>
                 <span>
                   {relFrom} &rarr; {relTo}
@@ -540,23 +569,35 @@ class Schema extends Component {
         const trackableFunctionList = [];
 
         trackableFuncs.forEach((p, i) => {
-          trackableFunctionList.push(
+          const getTrackBtn = () => {
-            <div className={styles.padd_bottom} key={`untracked-function-${i}`}>
+            if (readOnlyMode) {
+              return null;
+            }
+
+            const handleTrackFn = e => {
+              e.preventDefault();
+
+              dispatch(addExistingFunction(p.function_name));
+            };
+
+            return (
               <div
                 className={`${styles.display_inline} ${styles.add_mar_right}`}
               >
                 <Button
                   data-test={`add-track-function-${p.function_name}`}
                   className={`${styles.display_inline} btn btn-xs btn-default`}
-                  onClick={e => {
+                  onClick={handleTrackFn}
-                    e.preventDefault();
-
-                    dispatch(addExistingFunction(p.function_name));
-                  }}
                 >
                   Track
                 </Button>
               </div>
+            );
+          };
+
+          trackableFunctionList.push(
+            <div className={styles.padd_bottom} key={`untracked-function-${i}`}>
+              {getTrackBtn()}
               <div className={styles.display_inline}>
                 <span>{p.function_name}</span>
               </div>
@@ -711,6 +752,7 @@ const mapStateToProps = state => ({
   schema: state.tables.allSchemas,
   schemaList: state.tables.schemaList,
   migrationMode: state.main.migrationMode,
+  readOnlyMode: state.main.readOnlyMode,
   untrackedRelations: state.tables.untrackedRelations,
   currentSchema: state.tables.currentSchema,
   functionsList: [...state.tables.postgresFunctions],

console/src/components/Services/Data/TableBrowseRows/EditItem.js

@@ -28,6 +28,7 @@ class EditItem extends Component {
       schemas,
       oldItem,
       migrationMode,
+      readOnlyMode,
       ongoingRequest,
       lastError,
       lastSuccess,
@@ -253,6 +254,7 @@ class EditItem extends Component {
           table={currentTable}
           tabName="edit"
           migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
         />
         <br />
         <div className={styles.insertContainer + ' container-fluid'}>
@@ -292,6 +294,7 @@ EditItem.propTypes = {
   lastSuccess: PropTypes.object,
   lastError: PropTypes.object,
   migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   count: PropTypes.number,
   dispatch: PropTypes.func.isRequired,
 };
@@ -302,6 +305,7 @@ const mapStateToProps = (state, ownProps) => {
     ...state.tables.update,
     schemas: state.tables.allSchemas,
     migrationMode: state.main.migrationMode,
+    readOnlyMode: state.main.readOnlyMode,
     currentSchema: state.tables.currentSchema,
   };
 };

console/src/components/Services/Data/TableBrowseRows/ViewRows.js

@@ -63,6 +63,7 @@ const ViewRows = ({
   updateInvocationFunction,
   triggeredRow,
   triggeredFunction,
+  readOnlyMode,
 }) => {
   const styles = require('../../../Common/TableCommon/Table.scss');
 
@@ -429,7 +430,7 @@ const ViewRows = ({
           );
         };
 
-        const showActionBtns = !_isSingleRow && !isView;
+        const showActionBtns = !readOnlyMode && !_isSingleRow && !isView;
 
         if (showActionBtns) {
           const pkClause = getPKClause();
@@ -686,6 +687,7 @@ const ViewRows = ({
               curDepth={curDepth + 1}
               dispatch={dispatch}
               expandedRow={expandedRow}
+              readOnlyMode={readOnlyMode}
             />
           );
         }

console/src/components/Services/Data/TableBrowseRows/ViewTable.js

@@ -148,6 +148,7 @@ class ViewTable extends Component {
       count,
       activePath,
       migrationMode,
+      readOnlyMode,
       ongoingRequest,
       isProgressing,
       lastError,
@@ -201,6 +202,7 @@ class ViewTable extends Component {
         updateInvocationFunction={this.updateInvocationFunction.bind(this)}
         triggeredRow={triggeredRow}
         triggeredFunction={triggeredFunction}
+        readOnlyMode={readOnlyMode}
       />
     );
 
@@ -212,6 +214,7 @@ class ViewTable extends Component {
         table={tableSchema}
         tabName="browse"
         migrationMode={migrationMode}
+        readOnlyMode={readOnlyMode}
       />
     );
 
@@ -245,6 +248,7 @@ ViewTable.propTypes = {
   query: PropTypes.object.isRequired,
   curFilter: PropTypes.object.isRequired,
   migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   ongoingRequest: PropTypes.bool.isRequired,
   isProgressing: PropTypes.bool.isRequired,
   rows: PropTypes.array.isRequired,
@@ -262,6 +266,7 @@ const mapStateToProps = (state, ownProps) => {
     schemas: state.tables.allSchemas,
     tableComment: state.tables.tableComment,
     migrationMode: state.main.migrationMode,
+    readOnlyMode: state.main.readOnlyMode,
     serverVersion: state.main.serverVersion,
     ...state.tables.view,
   };

console/src/components/Services/Data/TableCommon/TableHeader.js

@@ -20,7 +20,14 @@ import {
   getTableRelationshipsRoute,
 } from '../../../Common/utils/routesUtils';
 
-const TableHeader = ({ tabName, count, table, migrationMode, dispatch }) => {
+const TableHeader = ({
+  tabName,
+  count,
+  table,
+  migrationMode,
+  readOnlyMode,
+  dispatch,
+}) => {
   const styles = require('../../../Common/TableCommon/Table.scss');
 
   const capitalisedTabName = tabName[0].toUpperCase() + tabName.slice(1);
@@ -97,7 +104,8 @@ const TableHeader = ({ tabName, count, table, migrationMode, dispatch }) => {
               `Browse Rows ${countDisplay}`,
               'table-browse-rows'
             )}
-            {isTable &&
+            {!readOnlyMode &&
+              isTable &&
               getTab(
                 'insert',
                 getTableInsertRowRoute(tableSchema, tableName, isTable),

console/src/components/Services/Data/TableInsertItem/InsertItem.js

@@ -47,6 +47,7 @@ class InsertItem extends Component {
       clone,
       schemas,
       migrationMode,
+      readOnlyMode,
       ongoingRequest,
       lastError,
       lastSuccess,
@@ -260,6 +261,7 @@ class InsertItem extends Component {
           table={currentTable}
           tabName="insert"
           migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
         />
         <br />
         <div className={styles.insertContainer + ' container-fluid'}>
@@ -345,6 +347,7 @@ InsertItem.propTypes = {
   lastSuccess: PropTypes.object,
   lastError: PropTypes.object,
   migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   count: PropTypes.number,
   dispatch: PropTypes.func.isRequired,
 };
@@ -356,6 +359,7 @@ const mapStateToProps = (state, ownProps) => {
     schemas: state.tables.allSchemas,
     ...state.tables.view,
     migrationMode: state.main.migrationMode,
+    readOnlyMode: state.main.readOnlyMode,
     currentSchema: state.tables.currentSchema,
   };
 };

console/src/components/Services/Data/TableModify/ModifyTable.js

@@ -62,6 +62,7 @@ class ModifyTable extends React.Component {
       allTables,
       dispatch,
       migrationMode,
+      readOnlyMode,
       currentSchema,
       tableCommentEdit,
       columnEdit,
@@ -176,6 +177,7 @@ class ModifyTable extends React.Component {
           table={table}
           tabName="modify"
           migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
         />
         <br />
         <div className={`container-fluid ${styles.padd_left_remove}`}>
@@ -270,6 +272,7 @@ ModifyTable.propTypes = {
   currentSchema: PropTypes.string.isRequired,
   allTables: PropTypes.array.isRequired,
   migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   activeEdit: PropTypes.object.isRequired,
   fkAdd: PropTypes.object.isRequired,
   relAdd: PropTypes.object.isRequired,
@@ -288,6 +291,7 @@ const mapStateToProps = (state, ownProps) => ({
   tableName: ownProps.params.table,
   allTables: state.tables.allSchemas,
   migrationMode: state.main.migrationMode,
+  readOnlyMode: state.main.readOnlyMode,
   serverVersion: state.main.serverVersion,
   currentSchema: state.tables.currentSchema,
   columnEdit: state.tables.modify.columnEdit,

console/src/components/Services/Data/TableModify/ModifyView.js

@@ -49,8 +49,9 @@ class ModifyView extends Component {
       dispatch,
       currentSchema,
       tableCommentEdit,
-      migrationMode,
       rootFieldsEdit,
+      migrationMode,
+      readOnlyMode,
     } = this.props;
 
     const styles = require('./ModifyTable.scss');
@@ -192,6 +193,7 @@ class ModifyView extends Component {
           table={tableSchema}
           tabName="modify"
           migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
         />
         <br />
         <div className={'container-fluid ' + styles.padd_left_remove}>
@@ -241,6 +243,8 @@ ModifyView.propTypes = {
   currentSchema: PropTypes.string.isRequired,
   activeEdit: PropTypes.object.isRequired,
   ongoingRequest: PropTypes.bool.isRequired,
+  migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   lastError: PropTypes.object,
   lastSuccess: PropTypes.bool,
   dispatch: PropTypes.func.isRequired,
@@ -254,6 +258,7 @@ const mapStateToProps = (state, ownProps) => {
     sql: state.rawSQL.sql,
     currentSchema: state.tables.currentSchema,
     migrationMode: state.main.migrationMode,
+    readOnlyMode: state.main.readOnlyMode,
     serverVersion: state.main.serverVersion,
     ...state.tables.modify,
   };

console/src/components/Services/Data/TablePermissions/Permissions.js

@@ -118,6 +118,7 @@ class Permissions extends Component {
       lastSuccess,
       permissionsState,
       migrationMode,
+      readOnlyMode,
       currentSchema,
     } = this.props;
 
@@ -183,6 +184,7 @@ class Permissions extends Component {
           table={tableSchema}
           tabName="permissions"
           migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
         />
       );
     };
@@ -1461,6 +1463,10 @@ class Permissions extends Component {
       };
 
       const getClonePermsSection = () => {
+        if (readOnlyMode) {
+          return null;
+        }
+
         // const applySameSelected = e => {
         //   const isChecked = e.target.checked;
         //   const selectedRole = e.target.getAttribute('data-role');
@@ -1620,6 +1626,10 @@ class Permissions extends Component {
       };
 
       const getButtonsSection = () => {
+        if (readOnlyMode) {
+          return null;
+        }
+
         const dispatchSavePermissions = () => {
           dispatch(permChangePermissions(permChangeTypes.save));
         };
@@ -1800,6 +1810,7 @@ Permissions.propTypes = {
   tableType: PropTypes.string.isRequired,
   allSchemas: PropTypes.array.isRequired,
   migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   currentSchema: PropTypes.string.isRequired,
   activeEdit: PropTypes.object.isRequired,
   permissionsState: PropTypes.object.isRequired,
@@ -1815,6 +1826,7 @@ const mapStateToProps = (state, ownProps) => ({
   allSchemas: state.tables.allSchemas,
   schemaList: state.tables.schemaList,
   migrationMode: state.main.migrationMode,
+  readOnlyMode: state.main.readOnlyMode,
   currentSchema: state.tables.currentSchema,
   serverVersion: state.main.serverVersion ? state.main.serverVersion : '',
   ...state.tables.modify,

console/src/components/Services/Data/TableRelationships/RelationshipEditor.js

@@ -72,7 +72,7 @@ class RelationshipEditor extends React.Component {
   };
 
   render() {
-    const { dispatch, relConfig } = this.props;
+    const { dispatch, relConfig, readOnlyMode } = this.props;
     const { text, isEditting } = this.state;
 
     const { relName } = relConfig;
@@ -92,23 +92,37 @@ class RelationshipEditor extends React.Component {
         dispatch(deleteRelMigrate(relConfig));
       }
     };
-    const collapsed = () => (
+    const collapsed = () => {
-      <div>
+      const getEditBtn = () => {
-        <Button
+        if (readOnlyMode) {
-          color={'white'}
+          return null;
-          size={'xs'}
+        }
-          onClick={this.toggleEditor}
+
-          data-test={`relationship-toggle-editor-${relName}`}
+        return (
-        >
+          <React.Fragment>
-          Edit
+            <Button
-        </Button>
+              color={'white'}
-        &nbsp;
+              size={'xs'}
-        <b>{relName}</b> {gqlCompatibilityWarning}
+              onClick={this.toggleEditor}
-        <div className={tableStyles.relationshipTopPadding}>
+              data-test={`relationship-toggle-editor-${relName}`}
-          {getRelDef(relConfig)}
+            >
+              Edit
+            </Button>
+            &nbsp;
+          </React.Fragment>
+        );
+      };
+
+      return (
+        <div>
+          {getEditBtn()}
+          <b>{relName}</b> {gqlCompatibilityWarning}
+          <div className={tableStyles.relationshipTopPadding}>
+            {getRelDef(relConfig)}
+          </div>
         </div>
-      </div>
+      );
-    );
+    };
 
     const expanded = () => (
       <div className={styles.activeEdit}>

console/src/components/Services/Data/TableRelationships/Relationships.js

@@ -318,6 +318,7 @@ class Relationships extends Component {
       manualRelAdd,
       currentSchema,
       migrationMode,
+      readOnlyMode,
       schemaList,
     } = this.props;
     const styles = require('../TableModify/ModifyTable.scss');
@@ -383,6 +384,7 @@ class Relationships extends Component {
                   <RelationshipEditor
                     dispatch={dispatch}
                     key={rel.objRel.rel_name}
+                    readOnlyMode={readOnlyMode}
                     relConfig={findAllFromRel(
                       allSchemas,
                       tableSchema,
@@ -396,6 +398,7 @@ class Relationships extends Component {
                   <RelationshipEditor
                     key={rel.arrRel.rel_name}
                     dispatch={dispatch}
+                    readOnlyMode={readOnlyMode}
                     relConfig={findAllFromRel(
                       allSchemas,
                       tableSchema,
@@ -418,6 +421,51 @@ class Relationships extends Component {
       );
     }
 
+    const getAddRelSection = () => {
+      if (readOnlyMode) {
+        return null;
+      }
+
+      let addRelSection = null;
+
+      if (relAdd.isActive) {
+        addRelSection = (
+          <div className={styles.activeEdit}>
+            <AddRelationship
+              tableName={tableName}
+              currentSchema={currentSchema}
+              allSchemas={allSchemas}
+              cachedRelationshipData={relAdd}
+              dispatch={dispatch}
+            />
+            <hr />
+            <AddManualRelationship
+              tableSchema={tableSchema}
+              allSchemas={allSchemas}
+              schemaList={schemaList}
+              relAdd={manualRelAdd}
+              dispatch={dispatch}
+            />
+          </div>
+        );
+      } else {
+        addRelSection = (
+          <Button
+            type="submit"
+            color="white"
+            size="sm"
+            onClick={() => {
+              dispatch(addNewRelClicked());
+            }}
+          >
+            + Add relationship
+          </Button>
+        );
+      }
+
+      return addRelSection;
+    };
+
     return (
       <div className={`${styles.container} container-fluid`}>
         <TableHeader
@@ -425,6 +473,7 @@ class Relationships extends Component {
           table={tableSchema}
           tabName="relationships"
           migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
         />
         <br />
         <div className={`${styles.padd_left_remove} container-fluid`}>
@@ -432,36 +481,7 @@ class Relationships extends Component {
             <h4 className={styles.subheading_text}>Relationships</h4>
             {addedRelationshipsView}
             <br />
-            {relAdd.isActive ? (
+            {getAddRelSection()}
-              <div className={styles.activeEdit}>
-                <AddRelationship
-                  tableName={tableName}
-                  currentSchema={currentSchema}
-                  allSchemas={allSchemas}
-                  cachedRelationshipData={relAdd}
-                  dispatch={dispatch}
-                />
-                <hr />
-                <AddManualRelationship
-                  tableSchema={tableSchema}
-                  allSchemas={allSchemas}
-                  schemaList={schemaList}
-                  relAdd={manualRelAdd}
-                  dispatch={dispatch}
-                />
-              </div>
-            ) : (
-              <Button
-                type="submit"
-                color="white"
-                size="sm"
-                onClick={() => {
-                  dispatch(addNewRelClicked());
-                }}
-              >
-                + Add relationship
-              </Button>
-            )}
           </div>
         </div>
         <div className={`${styles.fixed} hidden`}>{alert}</div>
@@ -479,6 +499,7 @@ Relationships.propTypes = {
   relAdd: PropTypes.object.isRequired,
   manualRelAdd: PropTypes.object.isRequired,
   migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   ongoingRequest: PropTypes.bool.isRequired,
   lastError: PropTypes.object,
   lastFormError: PropTypes.object,
@@ -492,6 +513,7 @@ const mapStateToProps = (state, ownProps) => ({
   allSchemas: state.tables.allSchemas,
   currentSchema: state.tables.currentSchema,
   migrationMode: state.main.migrationMode,
+  readOnlyMode: state.main.readOnlyMode,
   serverVersion: state.main.serverVersion,
   schemaList: state.tables.schemaList,
   ...state.tables.modify,

console/src/components/Services/Data/TableRelationships/RelationshipsView.js

@@ -33,6 +33,7 @@ class RelationshipsView extends Component {
       manualRelAdd,
       currentSchema,
       migrationMode,
+      readOnlyMode,
       schemaList,
     } = this.props;
     const styles = require('../TableModify/ModifyTable.scss');
@@ -140,6 +141,7 @@ class RelationshipsView extends Component {
           table={tableSchema}
           tabName="relationships"
           migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
         />
         <br />
         <div className={`${styles.padd_left_remove} container-fluid`}>
@@ -170,6 +172,8 @@ RelationshipsView.propTypes = {
   activeEdit: PropTypes.object.isRequired,
   manualRelAdd: PropTypes.object.isRequired,
   ongoingRequest: PropTypes.bool.isRequired,
+  migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   lastError: PropTypes.object,
   lastFormError: PropTypes.object,
   lastSuccess: PropTypes.bool,
@@ -182,6 +186,7 @@ const mapStateToProps = (state, ownProps) => ({
   allSchemas: state.tables.allSchemas,
   currentSchema: state.tables.currentSchema,
   migrationMode: state.main.migrationMode,
+  readOnlyMode: state.main.readOnlyMode,
   serverVersion: state.main.serverVersion,
   schemaList: state.tables.schemaList,
   ...state.tables.modify,

console/src/components/Services/EventTrigger/EventSubSidebar.js

@@ -16,6 +16,7 @@ const EventSubSidebar = ({
   // children,
   dispatch,
   location,
+  readOnlyMode,
 }) => {
   const styles = require('../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss');
 
@@ -92,7 +93,7 @@ const EventSubSidebar = ({
 
   return (
     <LeftSubSidebar
-      showAddBtn
+      showAddBtn={!readOnlyMode}
       searchInput={getSearchInput()}
       heading={`Event Triggers (${triggerList.length})`}
       addLink={'/events/manage/triggers/add'}
@@ -110,6 +111,7 @@ const mapStateToProps = state => {
     currentTrigger: state.triggers.currentTrigger,
     triggerList: state.triggers.triggerList,
     listingTrigger: state.triggers.listingTrigger,
+    readOnlyMode: state.main.readOnlyMode,
   };
 };
 

console/src/components/Services/EventTrigger/Landing/EventTrigger.js

@@ -23,7 +23,7 @@ class EventTrigger extends Component {
   }
 
   render() {
-    const { dispatch, listingTrigger } = this.props;
+    const { dispatch, listingTrigger, readOnlyMode } = this.props;
 
     const styles = require('../../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss');
 
@@ -52,6 +52,10 @@ class EventTrigger extends Component {
     };
 
     const getAddBtn = () => {
+      if (readOnlyMode) {
+        return null;
+      }
+
       const handleClick = e => {
         e.preventDefault();
 
@@ -127,6 +131,7 @@ const mapStateToProps = state => ({
   untrackedRelations: state.tables.untrackedRelations,
   currentSchema: state.tables.currentSchema,
   listingTrigger: state.triggers.listingTrigger,
+  readOnlyMode: state.main.readOnlyMode,
 });
 
 const eventTriggerConnector = connect => connect(mapStateToProps)(EventTrigger);

console/src/components/Services/EventTrigger/Modify/Connector.js

@@ -9,6 +9,7 @@ const mapStateToProps = (state, ownProps) => {
     allSchemas: state.tables.allSchemas,
     serverVersion: state.main.serverVersion,
     currentSchema: state.tables.currentSchema,
+    readOnlyMode: state.main.readOnlyMode,
   };
 };
 

console/src/components/Services/EventTrigger/Modify/Modify.js

@@ -33,6 +33,7 @@ class Modify extends React.Component {
       modifyTriggerName,
       modifyTrigger,
       triggerList,
+      readOnlyMode,
       dispatch,
     } = this.props;
 
@@ -59,6 +60,7 @@ class Modify extends React.Component {
           dispatch={dispatch}
           triggerName={modifyTriggerName}
           tabName="modify"
+          readOnlyMode={readOnlyMode}
         />
         <br />
         <div className={styles.container}>

console/src/components/Services/EventTrigger/PendingEvents/ViewTable.js

@@ -127,6 +127,7 @@ class ViewTable extends Component {
       lastSuccess,
       dispatch,
       expandedRow,
+      readOnlyMode,
     } = this.props; // eslint-disable-line no-unused-vars
 
     // check if trigger exists
@@ -168,6 +169,7 @@ class ViewTable extends Component {
         dispatch={dispatch}
         triggerName={triggerName}
         tabName="pending"
+        readOnlyMode={readOnlyMode}
       />
     );
 
@@ -188,6 +190,7 @@ ViewTable.propTypes = {
   query: PropTypes.object.isRequired,
   curFilter: PropTypes.object.isRequired,
   ongoingRequest: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   rows: PropTypes.array.isRequired,
   expandedRow: PropTypes.string.isRequired,
   count: PropTypes.number,
@@ -200,6 +203,7 @@ const mapStateToProps = (state, ownProps) => {
   return {
     triggerName: ownProps.params.trigger,
     triggerList: state.triggers.pendingEvents,
+    readOnlyMode: state.main.readOnlyMode,
     ...state.triggers.view,
   };
 };

console/src/components/Services/EventTrigger/ProcessedEvents/ViewTable.js

@@ -138,6 +138,7 @@ class ViewTable extends Component {
       lastSuccess,
       dispatch,
       expandedRow,
+      readOnlyMode,
     } = this.props; // eslint-disable-line no-unused-vars
 
     // check if table exists
@@ -178,6 +179,7 @@ class ViewTable extends Component {
         dispatch={dispatch}
         triggerName={triggerName}
         tabName="processed"
+        readOnlyMode={readOnlyMode}
       />
     );
 
@@ -198,6 +200,7 @@ ViewTable.propTypes = {
   query: PropTypes.object.isRequired,
   curFilter: PropTypes.object.isRequired,
   ongoingRequest: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   rows: PropTypes.array.isRequired,
   expandedRow: PropTypes.string.isRequired,
   count: PropTypes.number,
@@ -210,6 +213,7 @@ const mapStateToProps = (state, ownProps) => {
   return {
     triggerName: ownProps.params.trigger,
     triggerList: state.triggers.triggerList,
+    readOnlyMode: state.main.readOnlyMode,
     ...state.triggers.view,
   };
 };

console/src/components/Services/EventTrigger/RunningEvents/ViewTable.js

@@ -128,6 +128,7 @@ class ViewTable extends Component {
       lastSuccess,
       dispatch,
       expandedRow,
+      readOnlyMode,
     } = this.props; // eslint-disable-line no-unused-vars
 
     // check if table exists
@@ -169,6 +170,7 @@ class ViewTable extends Component {
         dispatch={dispatch}
         triggerName={triggerName}
         tabName="running"
+        readOnlyMode={readOnlyMode}
       />
     );
 
@@ -189,6 +191,7 @@ ViewTable.propTypes = {
   query: PropTypes.object.isRequired,
   curFilter: PropTypes.object.isRequired,
   ongoingRequest: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
   isProgressing: PropTypes.bool.isRequired,
   rows: PropTypes.array.isRequired,
   expandedRow: PropTypes.string.isRequired,
@@ -202,6 +205,7 @@ const mapStateToProps = (state, ownProps) => {
   return {
     triggerName: ownProps.params.trigger,
     triggerList: state.triggers.runningEvents,
+    readOnlyMode: state.main.readOnlyMode,
     ...state.triggers.view,
   };
 };

console/src/components/Services/EventTrigger/StreamingLogs/Logs.js

@@ -107,7 +107,14 @@ class StreamingLogs extends Component {
   }
 
   render() {
-    const { triggerName, log, count, dispatch, triggerList } = this.props;
+    const {
+      triggerName,
+      log,
+      count,
+      dispatch,
+      triggerList,
+      readOnlyMode,
+    } = this.props;
 
     const styles = require('../TableCommon/EventTable.scss');
 
@@ -345,6 +352,7 @@ class StreamingLogs extends Component {
           dispatch={dispatch}
           triggerName={triggerName}
           tabName="logs"
+          readOnlyMode={readOnlyMode}
         />
         <br />
         <div className={'hide'}>
@@ -453,6 +461,7 @@ const mapStateToProps = (state, ownProps) => {
   return {
     ...state.triggers,
     serverVersion: state.main.serverVersion,
+    readOnlyMode: state.main.readOnlyMode,
     triggerName: ownProps.params.trigger,
     currentSchema: state.tables.currentSchema,
     triggerList: state.triggers.triggerList,

console/src/components/Services/EventTrigger/TableCommon/TableHeader.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router';
 import Helmet from 'react-helmet';
 import BreadCrumb from '../../../Common/Layout/BreadCrumb/BreadCrumb';
 
-const TableHeader = ({ triggerName, tabName, count }) => {
+const TableHeader = ({ triggerName, tabName, count, readOnlyMode }) => {
   const styles = require('./EventTable.scss');
   let capitalised = tabName;
   capitalised = capitalised[0].toUpperCase() + capitalised.slice(1);
@@ -99,15 +99,17 @@ const TableHeader = ({ triggerName, tabName, count }) => {
                 Invocation Logs
               </Link>
             </li>
-            <li
+            {!readOnlyMode && (
-              role="presentation"
+              <li
-              className={tabName === 'modify' ? styles.active : ''}
+                role="presentation"
-              data-test="trigger-modify"
+                className={tabName === 'modify' ? styles.active : ''}
-            >
+                data-test="trigger-modify"
-              <Link to={'/events/manage/triggers/' + triggerName + '/modify'}>
+              >
-                Modify
+                <Link to={'/events/manage/triggers/' + triggerName + '/modify'}>
-              </Link>
+                  Modify
-            </li>
+                </Link>
+              </li>
+            )}
           </ul>
         </div>
         <div className="clearfix" />

console/src/components/Services/RemoteSchema/Edit/View.js

@@ -81,7 +81,7 @@ class ViewStitchedSchema extends React.Component {
     const styles = require('../RemoteSchema.scss');
 
     const { remoteSchemaName } = this.props.params;
-    const { manualUrl, envName, headers } = this.props;
+    const { manualUrl, envName, headers, readOnlyMode } = this.props;
 
     const filterHeaders = headers.filter(h => !!h.name);
 
@@ -121,8 +121,12 @@ class ViewStitchedSchema extends React.Component {
       </Tooltip>
     );
 
+    if (readOnlyMode) {
+      delete tabInfo.modify;
+    }
+
     const showReloadRemoteSchema =
-      remoteSchemaName && remoteSchemaName.length > 0 ? (
+      !readOnlyMode && remoteSchemaName && remoteSchemaName.length > 0 ? (
         <div className={styles.commonBtn + ' ' + styles.detailsRefreshButton}>
           <span>
             <ReloadRemoteSchema
@@ -205,6 +209,7 @@ const mapStateToProps = state => {
     ...state.remoteSchemas.headerData,
     allRemoteSchemas: state.remoteSchemas.listData.remoteSchemas,
     dataHeaders: { ...state.tables.dataHeaders },
+    readOnlyMode: state.main.readOnlyMode,
   };
 };
 

console/src/components/Services/RemoteSchema/Landing/RemoteSchema.js

@@ -12,7 +12,7 @@ class RemoteSchema extends React.Component {
   render() {
     const styles = require('../RemoteSchema.scss');
 
-    const { dispatch, remoteSchemaList } = this.props;
+    const { dispatch, readOnlyMode, remoteSchemaList } = this.props;
     const showIntroSection = !remoteSchemaList.remoteSchemas.length;
     const getIntroSection = () => {
       if (!showIntroSection) {
@@ -33,14 +33,16 @@ class RemoteSchema extends React.Component {
     };
 
     const getAddBtn = () => {
-      let addBtn = null;
+      if (readOnlyMode) {
+        return null;
+      }
 
       const handleClick = e => {
         e.preventDefault();
         dispatch(push(`${globals.urlPrefix}${appPrefix}/manage/add`));
       };
 
-      addBtn = (
+      return (
         <Button
           data-test="data-create-remote-schemas"
           color="yellow"
@@ -51,8 +53,6 @@ class RemoteSchema extends React.Component {
           Add
         </Button>
       );
-
-      return addBtn;
     };
 
     return (
@@ -96,6 +96,7 @@ class RemoteSchema extends React.Component {
 const mapStateToProps = state => {
   return {
     remoteSchemaList: state.remoteSchemas.listData,
+    readOnlyMode: state.main.readOnlyMode,
   };
 };
 

console/src/components/Services/RemoteSchema/RemoteSchemaSubSidebar.js

@@ -11,6 +11,7 @@ const RemoteSchemaSubSidebar = ({
   location,
   filterItem,
   viewRemoteSchema,
+  main,
 }) => {
   const styles = require('../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss');
 
@@ -80,7 +81,7 @@ const RemoteSchemaSubSidebar = ({
 
   return (
     <LeftSubSidebar
-      showAddBtn
+      showAddBtn={!main.readOnlyMode}
       searchInput={getSearchInput()}
       heading={`Remote Schemas (${dataList.length})`}
       addLink={`${appPrefix}/manage/add`}