Fix read only view

scm-ui/src/repos/permissions/components/PermissionCheckbox.js

@@ -4,7 +4,8 @@ import { translate } from "react-i18next";
 import { Checkbox } from "@scm-manager/ui-components";
 
 type Props = {
-  t: (string) => string,
+  t: string => string,
+  disabled: boolean,
   name: string,
   checked: boolean,
   onChange?: (value: boolean, name?: string) => void
@@ -13,14 +14,17 @@ type Props = {
 class PermissionCheckbox extends React.Component<Props> {
   render() {
     const { t } = this.props;
-    return (<Checkbox
+    return (
+      <Checkbox
         key={this.props.name}
         name={this.props.name}
         helpText={t("verbs.repository." + this.props.name + ".description")}
         label={t("verbs.repository." + this.props.name + ".displayName")}
         checked={this.props.checked}
         onChange={this.props.onChange}
-    />);
+        disabled={this.props.disabled}
+      />
+    );
   }
 }
 

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,9 +101,10 @@ 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 ? (
-        <>
+    const readOnly = !this.mayChangePermissions();
+    const roleSelector = readOnly ? (
+      <td>{role}</td>
+    ) : (
       <td>
         <RoleSelector
           handleRoleChange={this.handleRoleChange}
@@ -112,22 +113,11 @@ class SinglePermission extends React.Component<Props, State> {
           loading={loading}
         />
       </td>
-          <td>
-            <Button
-              label={t("permission.advanced-button.label")}
-              action={this.handleDetailedPermissionsPressed}
-            />
-          </td>
-        </>
-      ) : (
-        <>
-          <td>{role}</td>
-          <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 });
   };