Fine-grained permissions for groups (#2579)

src/groups/GroupAttributes.tsx

@@ -64,6 +64,7 @@ export const GroupAttributes = () => {
       <AttributesForm
         form={form}
         save={save}
+        fineGrainedAccess={currentGroup()?.access?.manage}
         reset={() =>
           form.reset({
             attributes: convertAttributes(),

src/groups/GroupTable.tsx

@@ -37,7 +37,7 @@ export const GroupTable = () => {
   const [selectedRows, setSelectedRows] = useState<GroupRepresentation[]>([]);
   const [move, setMove] = useState<GroupRepresentation>();
 
-  const { subGroups, setSubGroups } = useSubGroups();
+  const { subGroups, currentGroup, setSubGroups } = useSubGroups();
 
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
@@ -47,7 +47,10 @@ export const GroupTable = () => {
   const id = getLastId(location.pathname);
 
   const { hasAccess } = useAccess();
-  const isManager = hasAccess("manage-users", "query-clients");
+  const isManager = hasAccess("manage-users") || currentGroup()?.access?.manage;
+  const canView =
+    hasAccess("query-groups", "view-users") ||
+    hasAccess("manage-users", "query-groups");
 
   const loader = async () => {
     let groupsData = undefined;
@@ -90,14 +93,17 @@ export const GroupTable = () => {
   };
 
   const GroupNameCell = (group: GroupRepresentation) => {
-    if (!isManager) return <span>{group.name}</span>;
+    if (!canView) return <span>{group.name}</span>;
 
     return (
       <Link
         key={group.id}
         to={`${location.pathname}/${group.id}`}
-        onClick={() => {
-          setSubGroups([...subGroups, group]);
+        onClick={async () => {
+          const loadedGroup = await adminClient.groups.findOne({
+            id: group.id!,
+          });
+          setSubGroups([...subGroups, loadedGroup!]);
         }}
       >
         {group.name}

src/groups/GroupsSection.tsx

@@ -28,6 +28,7 @@ import { toGroupsSearch } from "./routes/GroupsSearch";
 import { GroupRoleMapping } from "./GroupRoleMapping";
 import helpUrls from "../help-urls";
 import { PermissionsTab } from "../components/permission-tab/PermissionTab";
+import { useAccess } from "../context/access/Access";
 
 import "./GroupsSection.css";
 
@@ -46,6 +47,16 @@ export default function GroupsSection() {
   const location = useLocation();
   const id = getLastId(location.pathname);
 
+  const { hasAccess } = useAccess();
+  const canViewPermissions = hasAccess(
+    "manage-authorization",
+    "manage-users",
+    "manage-clients"
+  );
+  const canManageGroup =
+    hasAccess("manage-users") || currentGroup()?.access?.manage;
+  const canManageRoles = hasAccess("manage-users");
+
   const deleteGroup = async (group: GroupRepresentation) => {
     try {
       await adminClient.groups.del({
@@ -112,7 +123,7 @@ export default function GroupsSection() {
         helpUrl={!id ? helpUrls.groupsUrl : ""}
         divider={!id}
         dropdownItems={
-          id
+          id && canManageGroup
             ? [
                 SearchDropdown,
                 <DropdownItem
@@ -170,6 +181,7 @@ export default function GroupsSection() {
             >
               <GroupAttributes />
             </Tab>
+            {canManageRoles && (
               <Tab
                 eventKey={3}
                 data-testid="role-mapping-tab"
@@ -177,6 +189,8 @@ export default function GroupsSection() {
               >
                 <GroupRoleMapping id={id!} name={currentGroup()?.name!} />
               </Tab>
+            )}
+            {canViewPermissions && (
               <Tab
                 eventKey={4}
                 data-testid="permissionsTab"
@@ -184,6 +198,7 @@ export default function GroupsSection() {
               >
                 <PermissionsTab id={id} type="groups" />
               </Tab>
+            )}
           </Tabs>
         )}
         {subGroups.length === 0 && <GroupTable />}

src/groups/Members.tsx

@@ -26,6 +26,7 @@ import { MemberModal } from "./MembersModal";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { GroupPath } from "../components/group/GroupPath";
 import { toUser } from "../user/routes/User";
+import { useAccess } from "../context/access/Access";
 
 type MembersOf = UserRepresentation & {
   membership: GroupRepresentation[];
@@ -43,6 +44,10 @@ export const Members = () => {
   const [addMembers, setAddMembers] = useState(false);
   const [isKebabOpen, setIsKebabOpen] = useState(false);
   const [selectedRows, setSelectedRows] = useState<UserRepresentation[]>([]);
+  const { hasAccess } = useAccess();
+
+  const isManager =
+    hasAccess("manage-users") || currentGroup()!.access!.manageMembership;
 
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
@@ -123,6 +128,7 @@ export const Members = () => {
         canSelectAll
         onSelect={(rows) => setSelectedRows([...rows])}
         toolbarItem={
+          isManager && (
             <>
               <ToolbarItem>
                 <Button
@@ -184,8 +190,11 @@ export const Members = () => {
                 />
               </ToolbarItem>
             </>
+          )
         }
-        actions={[
+        actions={
+          isManager
+            ? [
                 {
                   title: t("leave"),
                   onRowClick: async (user) => {
@@ -194,7 +203,10 @@ export const Members = () => {
                         id: user.id!,
                         groupId: id!,
                       });
-                addAlert(t("usersLeft", { count: 1 }), AlertVariant.success);
+                      addAlert(
+                        t("usersLeft", { count: 1 }),
+                        AlertVariant.success
+                      );
                     } catch (error) {
                       addError("groups:usersLeftError", error);
                     }
@@ -202,7 +214,9 @@ export const Members = () => {
                     return true;
                   },
                 },
-        ]}
+              ]
+            : []
+        }
         columns={[
           {
             name: "username",
@@ -233,8 +247,8 @@ export const Members = () => {
         emptyState={
           <ListEmptyState
             message={t("users:noUsersFound")}
-            instructions={t("users:emptyInstructions")}
-            primaryActionText={t("addMember")}
+            instructions={isManager ? t("users:emptyInstructions") : undefined}
+            primaryActionText={isManager ? t("addMember") : undefined}
             onPrimaryAction={() => setAddMembers(true)}
           />
         }