From 05efbe5ad8b2a3236a4ba99d37ad4fa896b805b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 14:17:43 +0100
Subject: [PATCH] use radio component again and show type of permission instead
 of checkbox

---
 .../containers/CreatePermissionForm.js        | 39 ++++++++-----------
 .../containers/SinglePermission.js            | 24 ++++++++----
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
index 023842d414..0260dacd46 100644
--- a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
@@ -5,7 +5,8 @@ import {
   Autocomplete,
   SubmitButton,
   Button,
-  LabelWithHelpIcon
+  LabelWithHelpIcon,
+  Radio
 } from "@scm-manager/ui-components";
 import RoleSelector from "../components/RoleSelector";
 import type {
@@ -158,28 +159,20 @@ class CreatePermissionForm extends React.Component<Props, State> {
         </h2>
         {advancedDialog}
         <form onSubmit={this.submit}>
-          <div className="control">
-            <label className="radio">
-              <input
-                type="radio"
-                name="permission_scope"
-                checked={!this.state.groupPermission}
-                value="USER_PERMISSION"
-                onChange={this.permissionScopeChanged}
-              />
-              {t("permission.user-permission")}
-            </label>
-            <label className="radio">
-              <input
-                type="radio"
-                name="permission_scope"
-                value="GROUP_PERMISSION"
-                checked={this.state.groupPermission}
-                onChange={this.permissionScopeChanged}
-              />
-              {t("permission.group-permission")}
-            </label>
-          </div>
+          <Radio
+            name="permission_scope"
+            value="USER_PERMISSION"
+            checked={!this.state.groupPermission}
+            label={t("permission.user-permission")}
+            onChange={this.permissionScopeChanged}
+          />
+          <Radio
+            name="permission_scope"
+            value="GROUP_PERMISSION"
+            checked={this.state.groupPermission}
+            label={t("permission.group-permission")}
+            onChange={this.permissionScopeChanged}
+          />
 
           <div className="columns">
             <div className="column is-two-thirds">
diff --git a/scm-ui/src/repos/permissions/containers/SinglePermission.js b/scm-ui/src/repos/permissions/containers/SinglePermission.js
index b16d26e903..c5be48836d 100644
--- a/scm-ui/src/repos/permissions/containers/SinglePermission.js
+++ b/scm-ui/src/repos/permissions/containers/SinglePermission.js
@@ -22,7 +22,11 @@ import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
 type Props = {
   availablePermissions: AvailableRepositoryPermissions,
   submitForm: Permission => void,
-  modifyPermission: (permission: Permission, namespace: string, name: string) => void,
+  modifyPermission: (
+    permission: Permission,
+    namespace: string,
+    name: string
+  ) => void,
   permission: Permission,
   t: string => string,
   namespace: string,
@@ -30,7 +34,11 @@ type Props = {
   match: any,
   history: History,
   loading: boolean,
-  deletePermission: (permission: Permission, namespace: string, name: string) => void,
+  deletePermission: (
+    permission: Permission,
+    namespace: string,
+    name: string
+  ) => void,
   deleteLoading: boolean
 };
 
@@ -125,15 +133,15 @@ class SinglePermission extends React.Component<Props, State> {
       />
     ) : null;
 
+    const type =
+      permission && permission.groupPermission
+        ? t("permission.group")
+        : t("permission.user");
+
     return (
       <tr>
         <td>{permission.name}</td>
-        <td>
-          <Checkbox
-            checked={permission ? permission.groupPermission : false}
-            disabled={true}
-          />
-        </td>
+        <td>{type}</td>
         {roleSelector}
         <td>
           <Button