From 1d8744e6c1dc99e9dce9d460748efb10a317a1f5 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 8 Apr 2024 14:29:52 +0200
Subject: [PATCH] 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>
---
 .../components/group/GroupPickerDialog.tsx    | 86 +++++++++----------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx b/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
index 9679d3f61b1b..2415d4681885 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) {
@@ -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>