From 5fd26000e0e1f245e43ccc2d36208a5225f8a1b4 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Fri, 22 Mar 2024 15:36:50 +0100
Subject: [PATCH 1/2] use subGroupCount to render subGroups

fixes: #28080
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../components/group/GroupPickerDialog.tsx    | 70 +++++++++----------
 1 file changed, 34 insertions(+), 36 deletions(-)

diff --git a/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx b/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
index 6980434f44f2..5ac954a25fd1 100644
--- a/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
+++ b/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
@@ -93,14 +93,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: first,
+          max: max + 1,
+          parentId: groupId,
+        };
+        groups = await adminClient.groups.listSubGroups(args);
       }
 
       if (id) {
@@ -115,15 +114,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) {
+        setCount(countGroups(groups));
       }
-      setCount(isSearching ? countGroups(groups || []) : groups?.length || 0);
     },
     [groupId, filter, first, max],
   );
@@ -222,10 +222,8 @@ 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}>
+          {groups.map((group: SelectableGroup) => (
+            <Fragment key={group.id}>
                 {(!isSearching || group.name?.includes(filter)) && (
                   <GroupRow
                     key={group.id}
@@ -240,23 +238,23 @@ export const GroupPickerDialog = ({
                     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>
-            ))}
+              {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>
+          ))}
         </DataList>
         {groups.length === 0 && !isSearching && (
           <ListEmptyState
@@ -363,7 +361,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>

From da39d4383321be8a1e2ba92a2f35f920d884c560 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 25 Mar 2024 11:05:21 +0100
Subject: [PATCH 2/2] PR review changes

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../components/group/GroupPickerDialog.tsx    | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx b/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
index 5ac954a25fd1..f25cffe795a5 100644
--- a/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
+++ b/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
@@ -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) {
@@ -95,8 +94,8 @@ export const GroupPickerDialog = ({
         }
 
         const args: SubGroupQuery = {
-          first: first,
-          max: max + 1,
+          first,
+          max,
           parentId: groupId,
         };
         groups = await adminClient.groups.listSubGroups(args);
@@ -121,8 +120,8 @@ export const GroupPickerDialog = ({
         group.checked = !!selectedRows.find((r) => r.id === group.id);
       });
       setGroups(groups);
-      if (isSearching) {
-        setCount(countGroups(groups));
+      if (isSearching || !groupId) {
+        setCount(groups.length);
       }
     },
     [groupId, filter, first, max],
@@ -222,22 +221,22 @@ export const GroupPickerDialog = ({
           ))}
         </Breadcrumb>
         <DataList aria-label={t("groups")} isCompact>
-          {groups.map((group: SelectableGroup) => (
+          {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.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
@@ -307,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);
         }