fixes navigation when searching for groups (#26053)

fixes: #25927

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

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

@@ -138,8 +138,7 @@ export const GroupTree = ({
   const { hasAccess } = useAccess();
 
   const [data, setData] = useState<TreeViewDataItem[]>();
-  const [groups, setGroups] = useState<GroupRepresentation[]>([]);
-  const { subGroups, setSubGroups } = useSubGroups();
+  const { subGroups, clear } = useSubGroups();
 
   const [search, setSearch] = useState("");
   const [max, setMax] = useState(20);
@@ -207,32 +206,31 @@ export const GroupTree = ({
       return { groups, subGroups };
     },
     ({ groups, subGroups }) => {
-      const found: TreeViewDataItem[] = [];
-      if (activeItem) findGroup(data || [], activeItem.id!, [], found);
-
-      if (found.length && subGroups.length) {
-        const foundTreeItem = found.pop()!;
-        foundTreeItem.children = [
-          ...(unionBy(foundTreeItem.children || []).splice(0, SUBGROUP_COUNT),
-          subGroups.map((g) => mapGroup(g, refresh), "id")),
-          ...(subGroups.length === SUBGROUP_COUNT
-            ? [
-                {
-                  id: "next",
-                  name: (
-                    <Button
-                      variant="plain"
-                      onClick={() => setFirstSub(firstSub + SUBGROUP_COUNT)}
-                    >
-                      <AngleRightIcon />
-                    </Button>
-                  ),
-                },
-              ]
-            : []),
-        ];
+      if (activeItem) {
+        const found = findGroup(data || [], activeItem.id!, []);
+        if (found.length && subGroups.length) {
+          const foundTreeItem = found.pop()!;
+          foundTreeItem.children = [
+            ...(unionBy(foundTreeItem.children || []).splice(0, SUBGROUP_COUNT),
+            subGroups.map((g) => mapGroup(g, refresh), "id")),
+            ...(subGroups.length === SUBGROUP_COUNT
+              ? [
+                  {
+                    id: "next",
+                    name: (
+                      <Button
+                        variant="plain"
+                        onClick={() => setFirstSub(firstSub + SUBGROUP_COUNT)}
+                      >
+                        <AngleRightIcon />
+                      </Button>
+                    ),
+                  },
+                ]
+              : []),
+          ];
+        }
       }
-      setGroups(groups);
       if (search || prefFirst.current !== first || prefMax.current !== max) {
         setData(groups.map((g) => mapGroup(g, refresh)));
       } else {
@@ -252,26 +250,26 @@ export const GroupTree = ({
   );
 
   const findGroup = (
-    groups: GroupRepresentation[] | TreeViewDataItem[],
+    groups: TreeViewDataItem[],
     id: string,
-    path: (GroupRepresentation | TreeViewDataItem)[],
-    found: (GroupRepresentation | TreeViewDataItem)[],
+    path: TreeViewDataItem[],
   ) => {
-    return groups.map((group) => {
-      if (found.length > 0) return;
-
-      if ("subGroups" in group && group.subGroups?.length) {
-        findGroup(group.subGroups, id, [...path, group], found);
-      }
-
-      if ("children" in group && group.children) {
-        findGroup(group.children, id, [...path, group], found);
-      }
-
+    for (let index = 0; index < groups.length; index++) {
+      const group = groups[index];
       if (group.id === id) {
-        found.push(...path, group);
+        path.push(group);
+        return path;
       }
-    });
+
+      if (group.children) {
+        path.push(group);
+        findGroup(group.children, id, path);
+        if (path[path.length - 1].id !== id) {
+          path.pop();
+        }
+      }
+    }
+    return path;
   };
 
   return data ? (
@@ -314,14 +312,18 @@ export const GroupTree = ({
           onSelect={(_, item) => {
             if (item.id === "next") return;
             setActiveItem(item);
-            const id = item.id?.substring(item.id.lastIndexOf("/") + 1);
-            const subGroups: GroupRepresentation[] = [];
-            findGroup(groups, id!, [], subGroups);
-            setSubGroups(subGroups);
+
+            const path = findGroup(data, item.id!, []);
+            if (!subGroups.every(({ id }) => path.find((t) => t.id === id)))
+              clear();
 
             if (canViewDetails || subGroups.at(-1)?.access?.view) {
-              navigate(toGroups({ realm, id: item.id }));
-              refresh();
+              navigate(
+                toGroups({
+                  realm,
+                  id: path.map((g) => g.id).join("/"),
+                }),
+              );
             } else {
               addAlert(t("noViewRights"), AlertVariant.warning);
               navigate(toGroups({ realm }));

js/apps/admin-ui/src/groups/routes/Groups.tsx

@@ -1,6 +1,5 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom";
-import { generateEncodedPath } from "../../utils/generateEncodedPath";
+import { generatePath, type Path } from "react-router-dom";
 import type { AppRouteObject } from "../../routes";
 
 export type GroupsParams = { realm: string; id?: string; lazy?: string };
@@ -24,6 +23,6 @@ export const toGroups = (params: GroupsParams): Partial<Path> => {
   const path = params.id ? GroupsWithIdRoute.path : GroupsRoute.path;
 
   return {
-    pathname: generateEncodedPath(path, params),
+    pathname: generatePath(path, params),
   };
 };