Make role restrictions on group tree match group table. (#4418)

apps/admin-ui/src/groups/GroupTable.tsx

@@ -21,9 +21,13 @@ import { MoveDialog } from "./components/MoveDialog";
 
 type GroupTableProps = {
   refresh: () => void;
+  canViewDetails: boolean;
 };
 
-export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
+export const GroupTable = ({
+  refresh: viewRefresh,
+  canViewDetails,
+}: GroupTableProps) => {
   const { t } = useTranslation("groups");
 
   const { adminClient } = useAdminClient();
@@ -47,9 +51,6 @@ export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
 
   const { hasAccess } = useAccess();
   const isManager = hasAccess("manage-users") || currentGroup()?.access?.manage;
-  const canView =
-    hasAccess("query-groups", "view-users") ||
-    hasAccess("manage-users", "query-groups");
 
   const loader = async (first?: number, max?: number) => {
     const params: Record<string, string> = {
@@ -87,7 +88,7 @@ export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
   };
 
   const GroupNameCell = (group: GroupRepresentation) => {
-    if (!canView) return <span>{group.name}</span>;
+    if (!canViewDetails) return <span>{group.name}</span>;
 
     return (
       <Link

apps/admin-ui/src/groups/GroupsSection.tsx

@@ -66,6 +66,9 @@ export default function GroupsSection() {
   const canManageGroup =
     hasAccess("manage-users") || currentGroup()?.access?.manage;
   const canManageRoles = hasAccess("manage-users");
+  const canViewDetails =
+    hasAccess("query-groups", "view-users") ||
+    hasAccess("manage-users", "query-groups");
 
   useFetch(
     async () => {
@@ -167,7 +170,10 @@ export default function GroupsSection() {
                         eventKey={0}
                         title={<TabTitleText>{t("childGroups")}</TabTitleText>}
                       >
-                        <GroupTable refresh={refresh} />
+                        <GroupTable
+                          refresh={refresh}
+                          canViewDetails={canViewDetails}
+                        />
                       </Tab>
                       <Tab
                         data-testid="members"
@@ -214,13 +220,18 @@ export default function GroupsSection() {
                       )}
                     </Tabs>
                   )}
-                  {subGroups.length === 0 && <GroupTable refresh={refresh} />}
+                  {subGroups.length === 0 && (
+                    <GroupTable
+                      refresh={refresh}
+                      canViewDetails={canViewDetails}
+                    />
+                  )}
                 </DrawerHead>
               </DrawerPanelContent>
             }
           >
             <DrawerContentBody>
-              <GroupTree refresh={refresh} />
+              <GroupTree refresh={refresh} canViewDetails={canViewDetails} />
             </DrawerContentBody>
           </DrawerContent>
         </Drawer>

apps/admin-ui/src/groups/components/GroupTree.tsx

@@ -101,9 +101,13 @@ const GroupTreeContextMenu = ({
 
 type GroupTreeProps = {
   refresh: () => void;
+  canViewDetails: boolean;
 };
 
-export const GroupTree = ({ refresh: viewRefresh }: GroupTreeProps) => {
+export const GroupTree = ({
+  refresh: viewRefresh,
+  canViewDetails,
+}: GroupTreeProps) => {
   const { t } = useTranslation("groups");
   const { adminClient } = useAdminClient();
   const { realm } = useRealm();
@@ -132,19 +136,23 @@ export const GroupTree = ({ refresh: viewRefresh }: GroupTreeProps) => {
       id: group.id,
       name: (
         <Tooltip content={group.name}>
+          {(canViewDetails && (
             <Link
               to={`/${realm}/groups/${joinPath(...groups.map((g) => g.id!))}`}
               onClick={() => setSubGroups(groups)}
             >
               {group.name}
             </Link>
+          )) || <span>{group.name}</span>}
         </Tooltip>
       ),
       children:
         group.subGroups && group.subGroups.length > 0
           ? group.subGroups.map((g) => mapGroup(g, groups, refresh))
           : undefined,
-      action: <GroupTreeContextMenu group={group} refresh={refresh} />,
+      action: canViewDetails && (
+        <GroupTreeContextMenu group={group} refresh={refresh} />
+      ),
       defaultExpanded: subGroups.map((g) => g.id).includes(group.id),
     };
   };