Avoid errors in Groups section. (#2414)

src/groups/GroupTable.tsx

@@ -24,6 +24,7 @@ import { GroupPickerDialog } from "../components/group/GroupPickerDialog";
 import { useSubGroups } from "./SubGroupsContext";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { toGroups } from "./routes/Groups";
+import { useAccess } from "../context/access/Access";
 
 export const GroupTable = () => {
   const { t } = useTranslation("groups");
@@ -45,6 +46,9 @@ export const GroupTable = () => {
   const location = useLocation();
   const id = getLastId(location.pathname);
 
+  const { hasAccess } = useAccess();
+  const isManager = hasAccess("manage-users", "query-clients");
+
   const loader = async () => {
     let groupsData = undefined;
     if (id) {
@@ -85,7 +89,10 @@ export const GroupTable = () => {
     refresh();
   };
 
-  const GroupNameCell = (group: GroupRepresentation) => (
+  const GroupNameCell = (group: GroupRepresentation) => {
+    if (!isManager) return <span>{group.name}</span>;
+
+    return (
       <Link
         key={group.id}
         to={`${location.pathname}/${group.id}`}
@@ -96,6 +103,7 @@ export const GroupTable = () => {
         {group.name}
       </Link>
     );
+  };
 
   const handleModalToggle = () => {
     setIsCreateModalOpen(!isCreateModalOpen);
@@ -120,6 +128,7 @@ export const GroupTable = () => {
         ariaLabelKey="groups:groups"
         searchPlaceholderKey="groups:searchForGroups"
         toolbarItem={
+          isManager && (
             <>
               <ToolbarItem>
                 <Button
@@ -155,8 +164,12 @@ export const GroupTable = () => {
                 />
               </ToolbarItem>
             </>
+          )
         }
-        actions={[
+        actions={
+          !isManager
+            ? []
+            : [
                 {
                   title: t("moveTo"),
                   onRowClick: async (group) => {
@@ -172,7 +185,8 @@ export const GroupTable = () => {
                     return true;
                   },
                 },
-        ]}
+              ]
+        }
         columns={[
           {
             name: "name",

src/groups/SearchGroups.tsx

@@ -24,6 +24,7 @@ import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { GroupPath } from "../components/group/GroupPath";
 import { useSubGroups } from "./SubGroupsContext";
 import { ViewHeader } from "../components/view-header/ViewHeader";
+import { useAccess } from "../context/access/Access";
 
 type SearchGroup = GroupRepresentation & {
   link?: string;
@@ -40,6 +41,9 @@ export default function SearchGroups() {
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
 
+  const { hasAccess } = useAccess();
+  const isManager = hasAccess("manage-users", "query-clients");
+
   const { setSubGroups } = useSubGroups();
   useEffect(
     () => setSubGroups([{ name: t("searchGroups"), id: "search" }]),
@@ -61,7 +65,10 @@ export default function SearchGroups() {
     }
   };
 
-  const GroupNameCell = (group: SearchGroup) => (
+  const GroupNameCell = (group: SearchGroup) => {
+    if (!isManager) return <span>{group.name}</span>;
+
+    return (
       <Link
         key={group.id}
         to={`/${realm}/groups/search/${group.link}`}
@@ -72,6 +79,7 @@ export default function SearchGroups() {
         {group.name}
       </Link>
     );
+  };
 
   const flatten = (
     groups: GroupRepresentation[],