Support read-only mode

trotto · Jun 7, 2022 · 5043922 · 5043922
1 parent e297385
commit 5043922
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 94 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.61",
     "axios": "^0.21.1",
     "detect-browser": "^2.0.0",
     "hex-rgb": "^4.2.0",

diff --git a/frontend/src/components/LinkCreation.jsx b/frontend/src/components/LinkCreation.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {connect} from 'react-redux';
+import Alert from '@material-ui/lab/Alert';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 import * as actions from '../actions';
 import * as getters from '../getters';
@@ -24,6 +25,7 @@ function mapStateToProps(state) {
     goSupportedInCurrentSession: state.get('goSupportedInCurrentSession'),
     userLoggedIn: getters.userLoggedIn(state),
     userInfo: state.get('userInfo'),
+    readOnlyMode: getters.readOnlyMode(state),
     namespaces: state.get('namespaces')
   };
 }
@@ -173,8 +175,20 @@ export class LinkForm extends React.Component {
       messageComponent = <SuccessMessage>{messageText}</SuccessMessage>;
     }
 
+    const infoBar = this.props.userInfo && this.props.userInfo.get('info_bar');
+
     return (
         <div className="container" id="link-form">
+          {infoBar && (
+            <div className="row" style={{marginTop: '-60px', marginBottom: '30px'}}>
+              <div className="col-md-8 col-md-offset-2">
+                <Alert severity="info" icon={false}>
+                  <div style={{fontSize: '1.5rem'}} dangerouslySetInnerHTML={{__html: infoBar}}>
+                  </div>
+                </Alert>
+              </div>
+            </div>
+          )}
           {'/create' !== this.props.location.pathname ? null : <NewUserIntroContainer />}
           <div className="row">
             <div className="col-md-3 col-md-offset-2">
@@ -185,6 +199,7 @@ export class LinkForm extends React.Component {
                        : <NamespaceSelectorContainer shortlinkInput={this.shortlinkInput} />}
                  </div>
                  <input
+                     disabled={this.props.readOnlyMode}
                      className="form-control"
                      ref={(input) => { this.shortlinkInput = input; }}
                      style={{width: '0px', flexGrow: '1'}}
@@ -202,6 +217,7 @@ export class LinkForm extends React.Component {
             <div className="col-md-4">
                 <div style={{width: '100%', display: 'flex'}}>
                   <input
+                     disabled={this.props.readOnlyMode}
                      className="form-control"
                      ref={(input) => { this.destinationInput = input; }}
                      style={{width: '0px', flexGrow: '1'}}
@@ -250,6 +266,7 @@ export class LinkForm extends React.Component {
                 </div>
                 <div>
                   <PrimaryButton
+                      disabled={this.props.readOnlyMode}
                       id="link-submit-button"
                       data-test-id="shortlink-submit-button"
                       type="submit" className="btn btn-default"

diff --git a/frontend/src/components/LinkList.jsx b/frontend/src/components/LinkList.jsx
@@ -7,6 +7,7 @@ import { CreateOutlined, Cancel, DeleteOutline, Reply } from '@material-ui/icons
 import {PrimaryButton} from './shared/Buttons';
 import {getServiceBaseUrl} from '../utils'
 import { DEFAULT_NAMESPACE } from '../config';
+import * as getters from "../getters";
 
 var validUrl = require('valid-url');
 
@@ -280,9 +281,9 @@ export class LinksTable extends React.Component {
         Header: "Destination",
         accessor: "destination_url",
         Cell: row => {
-          const fullCRUD = this.props.userInfo &&
+          const fullCRUD = !this.props.readOnlyMode && this.props.userInfo &&
               (this.props.userInfo.get('admin') || row.original.owner === this.props.userInfo.get('email'));
-          const editable = fullCRUD || (this.props.userInfo && this.props.userInfo.get('org_edit_mode') === 'any_org_user');
+          const editable = !this.props.readOnlyMode && (fullCRUD || (this.props.userInfo && this.props.userInfo.get('org_edit_mode') === 'any_org_user'));
 
           return <EditableDestinationContainer
                     key={row.original.id + '-' + row.value}
@@ -390,7 +391,8 @@ export const LinksTableContainer = connect(
         links: state.get('links') || List(),
         defaultLinkSearchTerm: state.get('defaultLinkSearchTerm'),
         userInfo: state.get('userInfo'),
-        goSupportedInCurrentSession: state.get('goSupportedInCurrentSession')
+        readOnlyMode: getters.readOnlyMode(state),
+        goSupportedInCurrentSession: state.get('goSupportedInCurrentSession'),
       };
     },
     actions

diff --git a/frontend/src/getters.js b/frontend/src/getters.js
@@ -14,6 +14,14 @@ export const userLoggedIn = createSelector(
 );
 
 
+export const readOnlyMode = createSelector(
+    userInfo,
+    (userInfo) => {
+      return userInfo && userInfo.get('read_only_mode');
+    }
+);
+
+
 export const linksById = createSelector(
     links,
     (links) => {