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

use the path of the last group to display (#34303)

Browse source 
fixes: #34229

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-10-25 15:29:19 +02:00 committed by GitHub
parent 2e56896b05
commit b01552fe0d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 37 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
View file

@ -3,7 +3,11 @@ import {
GroupQuery,
SubGroupQuery,
} from "@keycloak/keycloak-admin-client/lib/resources/groups";
import { PaginatingTableToolbar, useFetch } from "@keycloak/keycloak-ui-shared";
import {
ListEmptyState,
PaginatingTableToolbar,
useFetch,
} from "@keycloak/keycloak-ui-shared";
import {
Breadcrumb,
BreadcrumbItem,
@ -19,10 +23,9 @@ import {
ModalVariant,
} from "@patternfly/react-core";
import { AngleRightIcon } from "@patternfly/react-icons";
import { Fragment, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../admin-client";
import { ListEmptyState } from "@keycloak/keycloak-ui-shared";
import { GroupPath } from "./GroupPath";
import "./group-picker-dialog.css";
@ -62,7 +65,6 @@ export const GroupPickerDialog = ({
const [filter, setFilter] = useState("");
const [joinedGroups, setJoinedGroups] = useState<GroupRepresentation[]>([]);
const [groupId, setGroupId] = useState<string>();
const [isSearching, setIsSearching] = useState(false);
const [max, setMax] = useState(10);
const [first, setFirst] = useState(0);
@ -82,7 +84,7 @@ export const GroupPickerDialog = ({
first,
max: max + 1,
};
if (isSearching) {
if (filter !== "") {
args.search = filter;
}
groups = await adminClient.groups.find(args);
@ -121,7 +123,7 @@ export const GroupPickerDialog = ({
group.checked = !!selectedRows.find((r) => r.id === group.id);
});
setGroups(groups);
if (isSearching || !groupId) {
if (filter !== "" || !groupId) {
setCount(groups.length);
}
},
@ -137,7 +139,7 @@ export const GroupPickerDialog = ({
return (
<Modal
variant={isSearching ? ModalVariant.medium : ModalVariant.small}
variant={filter !== "" ? ModalVariant.medium : ModalVariant.small}
title={t(text.title, {
group1: filterGroups?.[0]?.name,
group2: navigation.length ? currentGroup().name : t("root"),
@ -178,7 +180,6 @@ export const GroupPickerDialog = ({
inputGroupName={"search"}
inputGroupOnEnter={(search) => {
setFilter(search);
setIsSearching(search !== "");
setFirst(0);
setMax(10);
setNavigation([]);
@ -222,57 +223,47 @@ export const GroupPickerDialog = ({
))}
</Breadcrumb>
<DataList aria-label={t("groups")} isCompact>
{groups.slice(0, max).map((group: SelectableGroup) => (
<Fragment key={group.id}>
{(!isSearching ||
group.name
?.toLocaleUpperCase()
.includes(filter.toLocaleUpperCase())) && (
{filter == ""
? groups.slice(0, max).map((group: SelectableGroup) => (
<GroupRow
key={group.id}
group={group}
isRowDisabled={isRowDisabled}
onSelect={(groupId) => {
setGroupId(groupId);
onSelect={(group) => {
setGroupId(group.id);
setFirst(0);
}}
type={type}
isSearching={isSearching}
setIsSearching={setIsSearching}
isSearching={filter !== ""}
setIsSearching={(boolean) => setFilter(boolean ? "" : filter)}
selectedRows={selectedRows}
setSelectedRows={setSelectedRows}
canBrowse={canBrowse}
/>
)}
{isSearching &&
group.subGroups?.map((g) => (
))
: groups
?.map((g) => deepGroup(g))
.map((g) => (
<GroupRow
key={g.id}
group={g}
isRowDisabled={isRowDisabled}
onSelect={(groupId) => {
setGroupId(groupId);
setFirst(0);
}}
type={type}
isSearching={isSearching}
setIsSearching={setIsSearching}
isSearching
selectedRows={selectedRows}
setSelectedRows={setSelectedRows}
canBrowse={canBrowse}
canBrowse={false}
/>
))}
</Fragment>
))}
</DataList>
{groups.length === 0 && !isSearching && (
{groups.length === 0 && filter === "" && (
<ListEmptyState
hasIcon={false}
message={t("moveGroupEmpty")}
instructions={isMove ? t("moveGroupEmptyInstructions") : undefined}
/>
)}
{groups.length === 0 && isSearching && (
{groups.length === 0 && filter !== "" && (
<ListEmptyState
message={t("noSearchResults")}
instructions={t("noSearchResultsInstructions")}
@ -283,13 +274,22 @@ export const GroupPickerDialog = ({
);
};
const deepGroup = (group: GroupRepresentation): GroupRepresentation => {
let result = group;
if (group.subGroups?.length === 1) {
result = deepGroup(group.subGroups[0]);
}
return result;
};
type GroupRowProps = {
group: SelectableGroup;
type: "selectOne" | "selectMany";
isRowDisabled: (row?: GroupRepresentation) => boolean;
isSearching: boolean;
setIsSearching: (value: boolean) => void;
onSelect: (groupId: string) => void;
setIsSearching?: (value: boolean) => void;
onSelect?: (group: GroupRepresentation) => void;
selectedRows: SelectableGroup[];
setSelectedRows: (groups: SelectableGroup[]) => void;
canBrowse: boolean;
@ -315,13 +315,13 @@ const GroupRow = ({
id={group.id}
onClick={(e) => {
if (type === "selectOne") {
onSelect(group.id!);
onSelect?.(group);
} else if (
(e.target as HTMLInputElement).type !== "checkbox" &&
group.subGroupCount !== 0
) {
onSelect(group.id!);
setIsSearching(false);
onSelect?.(group);
setIsSearching?.(false);
}
}}
>