Load available permissions and find matching role

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

@@ -5,6 +5,7 @@ import { Select } from "@scm-manager/ui-components";
 
 type Props = {
   t: string => string,
+  availableTypes: string[],
   handleTypeChange: string => void,
   type: string,
   label?: string,
@@ -14,14 +15,22 @@ type Props = {
 
 class TypeSelector extends React.Component<Props> {
   render() {
-    const { type, handleTypeChange, loading, label, helpText } = this.props;
+    const {
-    const types = ["READ", "OWNER", "WRITE"];
+      availableTypes,
+      type,
+      handleTypeChange,
+      loading,
+      label,
+      helpText
+    } = this.props;
+
+    if (!availableTypes) return null;
 
     return (
       <Select
         onChange={handleTypeChange}
-        value={type ? type : "READ"}
+        value={type ? type : availableTypes[0]}
-        options={this.createSelectOptions(types)}
+        options={this.createSelectOptions(availableTypes)}
         loading={loading}
         label={label}
         helpText={helpText}

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

@@ -6,6 +6,7 @@ import {
   fetchAvailablePermissionsIfNeeded,
   fetchPermissions,
   getFetchAvailablePermissionsFailure,
+  getAvailablePermissions,
   getFetchPermissionsFailure,
   isFetchAvailablePermissionsPending,
   isFetchPermissionsPending,
@@ -22,6 +23,7 @@ import {
 } from "../modules/permissions";
 import { Loading, ErrorPage } from "@scm-manager/ui-components";
 import type {
+  AvailableRepositoryPermissions,
   Permission,
   PermissionCollection,
   PermissionCreateEntry
@@ -36,6 +38,7 @@ import {
 } from "../../../modules/indexResource";
 
 type Props = {
+  availablePermissions: AvailableRepositoryPermissions,
   namespace: string,
   repoName: string,
   loading: boolean,
@@ -97,6 +100,7 @@ class Permissions extends React.Component<Props> {
 
   render() {
     const {
+      availablePermissions,
       loading,
       error,
       permissions,
@@ -118,7 +122,7 @@ class Permissions extends React.Component<Props> {
       );
     }
 
-    if (loading || !permissions) {
+    if (loading || !permissions || !availablePermissions) {
       return <Loading />;
     }
 
@@ -149,6 +153,7 @@ class Permissions extends React.Component<Props> {
             {permissions.map(permission => {
               return (
                 <SinglePermission
+                  availablePermissions={availablePermissions}
                   key={permission.name + permission.groupPermission.toString()}
                   namespace={namespace}
                   repoName={repoName}
@@ -186,7 +191,9 @@ const mapStateToProps = (state, ownProps) => {
   const permissionsLink = getPermissionsLink(state, namespace, repoName);
   const groupAutoCompleteLink = getGroupAutoCompleteLink(state);
   const userAutoCompleteLink = getUserAutoCompleteLink(state);
+  const availablePermissions = getAvailablePermissions(state);
   return {
+    availablePermissions,
     namespace,
     repoName,
     error,

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

@@ -1,6 +1,9 @@
 // @flow
 import React from "react";
-import type { Permission } from "@scm-manager/ui-types";
+import type {
+  AvailableRepositoryPermissions,
+  Permission
+} from "@scm-manager/ui-types";
 import { translate } from "react-i18next";
 import {
   modifyPermission,
@@ -15,6 +18,7 @@ import DeletePermissionButton from "../components/buttons/DeletePermissionButton
 import TypeSelector from "../components/TypeSelector";
 
 type Props = {
+  availablePermissions: AvailableRepositoryPermissions,
   submitForm: Permission => void,
   modifyPermission: (Permission, string, string) => void,
   permission: Permission,
@@ -29,6 +33,7 @@ type Props = {
 };
 
 type State = {
+  role: string,
   permission: Permission
 };
 
@@ -36,30 +41,66 @@ class SinglePermission extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
+    const defaultPermission = props.availablePermissions.availableRoles
+      ? props.availablePermissions.availableRoles[0]
+      : {};
+
     this.state = {
       permission: {
         name: "",
-        type: "READ",
+        verbs: defaultPermission.verbs,
         groupPermission: false,
         _links: {}
-      }
+      },
+      role: defaultPermission.name
     };
   }
 
   componentDidMount() {
     const { permission } = this.props;
+
+    const matchingRole = this.findMatchingRoleName();
+
     if (permission) {
       this.setState({
         permission: {
           name: permission.name,
-          type: permission.type,
+          verbs: permission.verbs,
           groupPermission: permission.groupPermission,
           _links: permission._links
-        }
+        },
+        role: matchingRole
       });
     }
   }
 
+  findMatchingRoleName = () => {
+    const { availablePermissions, permission } = this.props;
+    if (!permission) {
+      return "";
+    }
+    const matchingRole = availablePermissions.availableRoles.find(role => {
+      return this.equalVerbs(role.verbs, permission.verbs);
+    });
+
+    if (matchingRole) {
+      return matchingRole.name;
+    } else {
+      return "";
+    }
+  };
+  equalVerbs = (verbs1: string[], verbs2: string[]) => {
+    if (!verbs1 || !verbs2) {
+      return false;
+    }
+
+    if (verbs1.length !== verbs2.length) {
+      return false;
+    }
+
+    return verbs1.every(verb => verbs2.includes(verb));
+  };
+
   deletePermission = () => {
     this.props.deletePermission(
       this.props.permission,
@@ -69,19 +110,23 @@ class SinglePermission extends React.Component<Props, State> {
   };
 
   render() {
-    const { permission } = this.state;
+    const { role, permission } = this.state;
-    const { loading, namespace, repoName } = this.props;
+    const { availablePermissions, loading, namespace, repoName } = this.props;
+    const availableRoleNames = availablePermissions.availableRoles.map(
+      r => r.name
+    );
     const typeSelector =
       this.props.permission._links && this.props.permission._links.update ? (
         <td>
           <TypeSelector
             handleTypeChange={this.handleTypeChange}
-            type={permission.type ? permission.type : "READ"}
+            availableTypes={availableRoleNames}
+            type={role}
             loading={loading}
           />
         </td>
       ) : (
-        <td>{permission.type}</td>
+        <td>{role}</td>
       );
 
     return (

scm-ui/src/repos/permissions/modules/permissions.js

@@ -534,6 +534,12 @@ export default function reducer(
 
 // selectors
 
+export function getAvailablePermissions(state: Object) {
+  if (state.permissions) {
+    return state.permissions.available;
+  }
+}
+
 export function getPermissionsOfRepo(
   state: Object,
   namespace: string,