Fix read only view

scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js

@@ -6,6 +6,7 @@ import { translate } from "react-i18next";
 import PermissionCheckbox from "../components/PermissionCheckbox";
 
 type Props = {
+  readOnly: boolean,
   availableVerbs: string[],
   selectedVerbs: string[],
   onSubmit: (string[]) => void,
@@ -32,17 +33,22 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
   }
 
   render() {
-    const { t, onClose } = this.props;
+    const { t, onClose, readOnly } = this.props;
     const { verbs } = this.state;
 
     const verbSelectBoxes = Object.entries(verbs).map(e => (
       <PermissionCheckbox
+        disabled={readOnly}
         name={e[0]}
         checked={e[1]}
         onChange={this.handleChange}
       />
     ));
 
+    const submitButton = !readOnly ? (
+      <SubmitButton label={t("permission.advanced.dialog.submit")} />
+    ) : null;
+
     return (
       <div className={"modal is-active"}>
         <div className="modal-background" />
@@ -60,7 +66,7 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
           <section className="modal-card-body">
             <div className="content">{verbSelectBoxes}</div>
             <form onSubmit={this.onSubmit}>
-              <SubmitButton label={t("permission.advanced.dialog.submit")} />
+              {submitButton}
               <Button
                 label={t("permission.advanced.dialog.abort")}
                 action={onClose}

scm-ui/src/repos/permissions/containers/SinglePermission.js

@@ -101,33 +101,23 @@ class SinglePermission extends React.Component<Props, State> {
     const availableRoleNames = availablePermissions.availableRoles.map(
       r => r.name
     );
-    const roleSelector =
-      this.props.permission._links && this.props.permission._links.update ? (
-        <>
-          <td>
-            <RoleSelector
-              handleRoleChange={this.handleRoleChange}
-              availableRoles={availableRoleNames}
-              role={role}
-              loading={loading}
-            />
-          </td>
-          <td>
-            <Button
-              label={t("permission.advanced-button.label")}
-              action={this.handleDetailedPermissionsPressed}
-            />
-          </td>
-        </>
-      ) : (
-        <>
-          <td>{role}</td>
-          <td />
-        </>
-      );
+    const readOnly = !this.mayChangePermissions();
+    const roleSelector = readOnly ? (
+      <td>{role}</td>
+    ) : (
+      <td>
+        <RoleSelector
+          handleRoleChange={this.handleRoleChange}
+          availableRoles={availableRoleNames}
+          role={role}
+          loading={loading}
+        />
+      </td>
+    );
 
     const advancedDialg = showAdvancedDialog ? (
       <AdvancedPermissionsDialog
+        readOnly={readOnly}
         availableVerbs={availablePermissions.availableVerbs}
         selectedVerbs={permission.verbs}
         onClose={this.closeAdvancedPermissionsDialog}
@@ -139,9 +129,18 @@ class SinglePermission extends React.Component<Props, State> {
       <tr>
         <td>{permission.name}</td>
         <td>
-          <Checkbox checked={permission ? permission.groupPermission : false} />
+          <Checkbox
+            checked={permission ? permission.groupPermission : false}
+            disabled={true}
+          />
         </td>
         {roleSelector}
+        <td>
+          <Button
+            label={t("permission.advanced-button.label")}
+            action={this.handleDetailedPermissionsPressed}
+          />
+        </td>
         <td>
           <DeletePermissionButton
             permission={permission}
@@ -156,6 +155,10 @@ class SinglePermission extends React.Component<Props, State> {
     );
   }
 
+  mayChangePermissions = () => {
+    return this.props.permission._links && this.props.permission._links.update;
+  };
+
   handleDetailedPermissionsPressed = () => {
     this.setState({ showAdvancedDialog: true });
   };