From 94df37238a7459c0f7e4cd7769243b7b257c47e9 Mon Sep 17 00:00:00 2001
From: Stan Silvert <ssilvert@redhat.com>
Date: Fri, 17 Feb 2023 13:23:02 -0500
Subject: [PATCH] Make role restrictions on group tree match group table.
 (#4418)

---
 apps/admin-ui/src/groups/GroupTable.tsx       | 11 +++++----
 apps/admin-ui/src/groups/GroupsSection.tsx    | 17 ++++++++++---
 .../src/groups/components/GroupTree.tsx       | 24 ++++++++++++-------
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/apps/admin-ui/src/groups/GroupTable.tsx b/apps/admin-ui/src/groups/GroupTable.tsx
index abc5c424b8..75020a3583 100644
--- a/apps/admin-ui/src/groups/GroupTable.tsx
+++ b/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
diff --git a/apps/admin-ui/src/groups/GroupsSection.tsx b/apps/admin-ui/src/groups/GroupsSection.tsx
index 71d576a608..d41f2bd233 100644
--- a/apps/admin-ui/src/groups/GroupsSection.tsx
+++ b/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>
diff --git a/apps/admin-ui/src/groups/components/GroupTree.tsx b/apps/admin-ui/src/groups/components/GroupTree.tsx
index a53579fe8d..227f452feb 100644
--- a/apps/admin-ui/src/groups/components/GroupTree.tsx
+++ b/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}>
-          <Link
-            to={`/${realm}/groups/${joinPath(...groups.map((g) => g.id!))}`}
-            onClick={() => setSubGroups(groups)}
-          >
-            {group.name}
-          </Link>
+          {(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),
     };
   };