libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

fixes navigation when searching for groups (#26053)

Browse source 
fixes: #25927

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-01-16 10:59:52 +01:00 committed by GitHub
parent bd62c73b18
commit 12ae800217
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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