use subGroupCount to render subGroups (#28173)

* use subGroupCount to render subGroups

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

* PR review changes

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

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-04-08 14:29:52 +02:00 committed by GitHub
parent 582da41f4f
commit 1d8744e6c1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -27,7 +27,6 @@ import { PaginatingTableToolbar } from "../table-toolbar/PaginatingTableToolbar"
import { GroupPath } from "./GroupPath";
import "./group-picker-dialog.css";
import { countGroups } from "../../groups/components/GroupTree";
export type GroupPickerDialogProps = {
id?: string;
@ -79,7 +78,7 @@ export const GroupPickerDialog = ({
if (!groupId) {
const args: GroupQuery = {
first: first,
first,
max: max + 1,
};
if (isSearching) {
@ -93,14 +92,13 @@ export const GroupPickerDialog = ({
throw new Error(t("notFound"));
}
}
if (group?.id) {
const args: SubGroupQuery = {
first: first,
max: max + 1,
parentId: group.id,
};
groups = await adminClient.groups.listSubGroups(args);
}
const args: SubGroupQuery = {
first,
max,
parentId: groupId,
};
groups = await adminClient.groups.listSubGroups(args);
}
if (id) {
@ -115,15 +113,16 @@ export const GroupPickerDialog = ({
setJoinedGroups(existingUserGroups || []);
if (selectedGroup) {
setNavigation([...navigation, selectedGroup]);
setCount(selectedGroup.subGroupCount!);
}
if (groups) {
groups.forEach((group: SelectableGroup) => {
group.checked = !!selectedRows.find((r) => r.id === group.id);
});
setGroups(groups);
groups.forEach((group: SelectableGroup) => {
group.checked = !!selectedRows.find((r) => r.id === group.id);
});
setGroups(groups);
if (isSearching || !groupId) {
setCount(groups.length);
}
setCount(isSearching ? countGroups(groups || []) : groups?.length || 0);
},
[groupId, filter, first, max],
);
@ -222,14 +221,27 @@ export const GroupPickerDialog = ({
))}
</Breadcrumb>
<DataList aria-label={t("groups")} isCompact>
{groups
.slice(groupId ? first : 0, max + (groupId ? first : 0))
.map((group: SelectableGroup) => (
<Fragment key={group.id}>
{(!isSearching || group.name?.includes(filter)) && (
{groups.slice(0, max).map((group: SelectableGroup) => (
<Fragment key={group.id}>
{(!isSearching || group.name?.includes(filter)) && (
<GroupRow
key={group.id}
group={group}
isRowDisabled={isRowDisabled}
onSelect={setGroupId}
type={type}
isSearching={isSearching}
setIsSearching={setIsSearching}
selectedRows={selectedRows}
setSelectedRows={setSelectedRows}
canBrowse={canBrowse}
/>
)}
{isSearching &&
group.subGroups?.map((g) => (
<GroupRow
key={group.id}
group={group}
key={g.id}
group={g}
isRowDisabled={isRowDisabled}
onSelect={setGroupId}
type={type}
@ -239,24 +251,9 @@ export const GroupPickerDialog = ({
setSelectedRows={setSelectedRows}
canBrowse={canBrowse}
/>
)}
{isSearching &&
group.subGroups?.map((g) => (
<GroupRow
key={g.id}
group={g}
isRowDisabled={isRowDisabled}
onSelect={setGroupId}
type={type}
isSearching={isSearching}
setIsSearching={setIsSearching}
selectedRows={selectedRows}
setSelectedRows={setSelectedRows}
canBrowse={canBrowse}
/>
))}
</Fragment>
))}
))}
</Fragment>
))}
</DataList>
{groups.length === 0 && !isSearching && (
<ListEmptyState
@ -309,7 +306,10 @@ const GroupRow = ({
onClick={(e) => {
if (type === "selectOne") {
onSelect(group.id!);
} else if ((e.target as HTMLInputElement).type !== "checkbox") {
} else if (
(e.target as HTMLInputElement).type !== "checkbox" &&
group.subGroupCount !== 0
) {
onSelect(group.id!);
setIsSearching(false);
}
@ -363,7 +363,7 @@ const GroupRow = ({
aria-label={t("groupName")}
isPlainButtonAction
>
{(canBrowse || type === "selectOne") && (
{(canBrowse || type === "selectOne") && group.subGroupCount !== 0 && (
<Button variant="link" aria-label={t("select")}>
<AngleRightIcon />
</Button>