use radio component again and show type of permission instead of checkbox

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">
+          <Radio
-            <label className="radio">
+            name="permission_scope"
-              <input
+            value="USER_PERMISSION"
-                type="radio"
+            checked={!this.state.groupPermission}
-                name="permission_scope"
+            label={t("permission.user-permission")}
-                checked={!this.state.groupPermission}
+            onChange={this.permissionScopeChanged}
-                value="USER_PERMISSION"
+          />
-                onChange={this.permissionScopeChanged}
+          <Radio
-              />
+            name="permission_scope"
-              {t("permission.user-permission")}
+            value="GROUP_PERMISSION"
-            </label>
+            checked={this.state.groupPermission}
-            <label className="radio">
+            label={t("permission.group-permission")}
-              <input
+            onChange={this.permissionScopeChanged}
-                type="radio"
+          />
-                name="permission_scope"
-                value="GROUP_PERMISSION"
-                checked={this.state.groupPermission}
-                onChange={this.permissionScopeChanged}
-              />
-              {t("permission.group-permission")}
-            </label>
-          </div>
 
           <div className="columns">
             <div className="column is-two-thirds">

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>
+        <td>{type}</td>
-          <Checkbox
-            checked={permission ? permission.groupPermission : false}
-            disabled={true}
-          />
-        </td>
         {roleSelector}
         <td>
           <Button