role-ready repositoryPermissionView

scm-ui-components/packages/ui-types/src/RepositoryPermissions.js

@@ -4,7 +4,7 @@ import type {Links} from "./hal";
 export type PermissionCreateEntry = {
   name: string,
   role?: string,
-  verbs: string[],
+  verbs?: string[],
   groupPermission: boolean
 }
 

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

@@ -26,9 +26,11 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
 
     const verbs = {};
     props.availableVerbs.forEach(
-      verb => (verbs[verb] = props.selectedVerbs.includes(verb))
+      verb =>
+        (verbs[verb] = props.selectedVerbs
+          ? props.selectedVerbs.includes(verb)
+          : false)
     );
-
     this.state = { verbs };
   }
 

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

@@ -1,6 +1,12 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
+import type {
+  RepositoryRole,
+  PermissionCollection,
+  PermissionCreateEntry,
+  SelectValue
+} from "@scm-manager/ui-types";
 import {
   Autocomplete,
   SubmitButton,
@@ -8,32 +14,27 @@ import {
   LabelWithHelpIcon,
   Radio
 } from "@scm-manager/ui-components";
-import RoleSelector from "../components/RoleSelector";
-import type {
-  RepositoryRole,
-  PermissionCollection,
-  PermissionCreateEntry,
-  SelectValue
-} from "@scm-manager/ui-types";
 import * as validator from "../components/permissionValidation";
-import { findMatchingRoleName } from "../modules/permissions";
+import RoleSelector from "../components/RoleSelector";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
 
 type Props = {
-  t: string => string,
   availableRoles: RepositoryRole[],
   availableVerbs: string[],
   createPermission: (permission: PermissionCreateEntry) => void,
   loading: boolean,
   currentPermissions: PermissionCollection,
   groupAutoCompleteLink: string,
-  userAutoCompleteLink: string
+  userAutoCompleteLink: string,
+
+  // Context props
+  t: string => string
 };
 
 type State = {
   name: string,
   role?: string,
-  verbs: string[],
+  verbs?: string[],
   groupPermission: boolean,
   valid: boolean,
   value?: SelectValue,
@@ -47,7 +48,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
     this.state = {
       name: "",
       role: props.availableRoles[0].name,
-      verbs: props.availableRoles[0].verbs,
+      verbs: undefined,
       groupPermission: false,
       valid: true,
       value: undefined,
@@ -92,6 +93,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
         });
       });
   }
+
   renderAutocompletionField = () => {
     const { t } = this.props;
     if (this.state.groupPermission) {
@@ -136,11 +138,9 @@ class CreatePermissionForm extends React.Component<Props, State> {
 
   render() {
     const { t, availableRoles, availableVerbs, loading } = this.props;
-
+    const { role, verbs, showAdvancedDialog } = this.state;
-    const { verbs, showAdvancedDialog } = this.state;
 
     const availableRoleNames = availableRoles.map(r => r.name);
-    const matchingRole = findMatchingRoleName(availableRoles, verbs);
 
     const advancedDialog = showAdvancedDialog ? (
       <AdvancedPermissionsDialog
@@ -189,7 +189,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
                     label={t("permission.role")}
                     helpText={t("permission.help.roleHelpText")}
                     handleRoleChange={this.handleRoleChange}
-                    role={matchingRole}
+                    role={role}
                   />
                 </div>
                 <div className="column">
@@ -249,8 +249,8 @@ class CreatePermissionForm extends React.Component<Props, State> {
   removeState = () => {
     this.setState({
       name: "",
-      role: undefined,
+      role: this.props.availableRoles[0].name,
-      verbs: this.props.availableRoles[0].verbs,
+      verbs: undefined,
       valid: true,
       value: undefined
     });
@@ -262,8 +262,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
       return;
     }
     this.setState({
-      role: selectedRole.name,
+      role: selectedRole.name
-      verbs: selectedRole.verbs
     });
   };
 

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

@@ -1,16 +1,12 @@
 // @flow
 import React from "react";
-import type {
+import type { RepositoryRole, Permission } from "@scm-manager/ui-types";
-  RepositoryRole,
-  Permission
-} from "@scm-manager/ui-types";
 import { translate } from "react-i18next";
 import {
   modifyPermission,
   isModifyPermissionPending,
   deletePermission,
-  isDeletePermissionPending,
+  isDeletePermissionPending
-  findMatchingRoleName
 } from "../modules/permissions";
 import { connect } from "react-redux";
 import type { History } from "history";
@@ -47,7 +43,6 @@ type Props = {
 };
 
 type State = {
-  role: string,
   permission: Permission,
   showAdvancedDialog: boolean
 };
@@ -69,39 +64,34 @@ class SinglePermission extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    const defaultPermission = props.availableRoles
+    const defaultPermission = props.availableRepositoryRoles
-      ? props.availableRoles[0]
+      ? props.availableRepositoryRoles[0]
       : {};
 
     this.state = {
       permission: {
         name: "",
+        role: undefined,
         verbs: defaultPermission.verbs,
         groupPermission: false,
         _links: {}
       },
-      role: defaultPermission.name,
       showAdvancedDialog: false
     };
   }
 
   componentDidMount() {
-    const { availableRepositoryRoles, permission } = this.props;
+    const { permission } = this.props;
-
-    const matchingRole = findMatchingRoleName(
-      availableRepositoryRoles,
-      permission.verbs
-    );
 
     if (permission) {
       this.setState({
         permission: {
           name: permission.name,
+          role: permission.role,
           verbs: permission.verbs,
           groupPermission: permission.groupPermission,
           _links: permission._links
-        },
+        }
-        role: matchingRole
       });
     }
   }
@@ -115,7 +105,7 @@ class SinglePermission extends React.Component<Props, State> {
   };
 
   render() {
-    const { role, permission, showAdvancedDialog } = this.state;
+    const { permission, showAdvancedDialog } = this.state;
     const {
       t,
       availableRepositoryRoles,
@@ -125,18 +115,17 @@ class SinglePermission extends React.Component<Props, State> {
       repoName,
       classes
     } = this.props;
-    const availableRoleNames = !!availableRepositoryRoles && availableRepositoryRoles.map(
+    const availableRoleNames =
-      r => r.name
+      !!availableRepositoryRoles && availableRepositoryRoles.map(r => r.name);
-    );
     const readOnly = !this.mayChangePermissions();
     const roleSelector = readOnly ? (
-      <td>{role}</td>
+      <td>{permission.role ? permission.role : t("permission.custom")}</td>
     ) : (
       <td>
         <RoleSelector
           handleRoleChange={this.handleRoleChange}
           availableRoles={availableRoleNames}
-          role={role}
+          role={permission.role}
           loading={loading}
         />
       </td>
@@ -154,9 +143,15 @@ class SinglePermission extends React.Component<Props, State> {
 
     const iconType =
       permission && permission.groupPermission ? (
-        <i title={t("permission.group")} className={classNames("fas fa-user-friends", classes.iconColor)} />
+        <i
+          title={t("permission.group")}
+          className={classNames("fas fa-user-friends", classes.iconColor)}
+        />
       ) : (
-        <i title={t("permission.user")} className={classNames("fas fa-user", classes.iconColor)} />
+        <i
+          title={t("permission.user")}
+          className={classNames("fas fa-user", classes.iconColor)}
+        />
       );
 
     return (
@@ -199,42 +194,41 @@ class SinglePermission extends React.Component<Props, State> {
 
   submitAdvancedPermissionsDialog = (newVerbs: string[]) => {
     const { permission } = this.state;
-    const newRole = findMatchingRoleName(
-      this.props.availableRoles,
-      newVerbs
-    );
     this.setState(
       {
         showAdvancedDialog: false,
-        permission: { ...permission, verbs: newVerbs },
+        permission: { ...permission, role: undefined, verbs: newVerbs }
-        role: newRole
       },
-      () => this.modifyPermission(newVerbs)
+      () => this.modifyPermissionVerbs(newVerbs)
     );
   };
 
   handleRoleChange = (role: string) => {
-    const selectedRole = this.findAvailableRole(role);
+    const { permission } = this.state;
     this.setState(
       {
-        permission: {
+        permission: { ...permission, role: role, verbs: undefined }
-          ...this.state.permission,
-          verbs: selectedRole.verbs
       },
-        role: role
+      () => this.modifyPermissionRole(role)
-      },
-      () => this.modifyPermission(selectedRole.verbs)
     );
   };
 
   findAvailableRole = (roleName: string) => {
     const { availableRepositoryRoles } = this.props;
-    return availableRepositoryRoles.find(
+    return availableRepositoryRoles.find(role => role.name === roleName);
-      role => role.name === roleName
+  };
+
+  modifyPermissionRole = (role: string) => {
+    let permission = this.state.permission;
+    permission.role = role;
+    this.props.modifyPermission(
+      permission,
+      this.props.namespace,
+      this.props.repoName
     );
   };
 
-  modifyPermission = (verbs: string[]) => {
+  modifyPermissionVerbs = (verbs: string[]) => {
     let permission = this.state.permission;
     permission.verbs = verbs;
     this.props.modifyPermission(

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

@@ -739,35 +739,3 @@ export function getModifyPermissionsFailure(
   }
   return null;
 }
-
-export function findMatchingRoleName(
-  availableRoles: RepositoryRole[],
-  verbs: string[]
-) {
-  if (!verbs) {
-    return "";
-  }
-  const matchingRole =
-    !!availableRoles &&
-    availableRoles.find(role => {
-      return equalVerbs(role.verbs, verbs);
-    });
-
-  if (matchingRole) {
-    return matchingRole.name;
-  } else {
-    return "";
-  }
-}
-
-function equalVerbs(verbs1: string[], verbs2: string[]) {
-  if (!verbs1 || !verbs2) {
-    return false;
-  }
-
-  if (verbs1.length !== verbs2.length) {
-    return false;
-  }
-
-  return verbs1.every(verb => verbs2.includes(verb));
-}