fixed count for pagination (#24034)

fixes: #23709

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

@@ -14,7 +14,7 @@ import {
   ModalVariant,
 } from "@patternfly/react-core";
 import { AngleRightIcon } from "@patternfly/react-icons";
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { adminClient } from "../../admin-client";
 import { fetchAdminUI } from "../../context/auth/admin-ui-endpoint";
@@ -24,6 +24,7 @@ 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;
@@ -72,7 +73,6 @@ export const GroupPickerDialog = ({
       let group;
       let groups;
       let existingUserGroups;
-      let count = 0;
       if (!groupId) {
         groups = await fetchAdminUI<GroupRepresentation[]>(
           "ui-ext/groups",
@@ -80,8 +80,9 @@ export const GroupPickerDialog = ({
             {
               first: `${first}`,
               max: `${max + 1}`,
+              global: "false",
             },
-            isSearching ? { search: filter } : null,
+            isSearching ? { search: filter, global: "true" } : null,
           ),
         );
       } else if (!navigation.map(({ id }) => id).includes(groupId)) {
@@ -92,20 +93,15 @@ export const GroupPickerDialog = ({
         groups = group.subGroups!;
       }
 
-      if (isSearching) {
-        count = (await adminClient.groups.count({ search: filter, top: true }))
-          .count;
-      }
-
       if (id) {
         existingUserGroups = await adminClient.users.listGroups({
           id,
         });
       }
 
-      return { group, groups, existingUserGroups, count };
+      return { group, groups, existingUserGroups };
     },
-    async ({ group: selectedGroup, groups, existingUserGroups, count }) => {
+    async ({ group: selectedGroup, groups, existingUserGroups }) => {
       setJoinedGroups(existingUserGroups || []);
       if (selectedGroup) {
         setNavigation([...navigation, selectedGroup]);
@@ -117,7 +113,7 @@ export const GroupPickerDialog = ({
         });
         setGroups(groups);
       }
-      setCount(count);
+      setCount(isSearching ? countGroups(groups || []) : groups?.length || 0);
     },
     [groupId, filter, first, max],
   );
@@ -160,10 +156,7 @@ export const GroupPickerDialog = ({
       ]}
     >
       <PaginatingTableToolbar
-        count={
-          (isSearching ? count : groups.length) -
-          (groupId || isSearching ? first : 0)
-        }
+        count={count - (groupId || isSearching ? first : 0)}
         first={first}
         max={max}
         onNextClick={setFirst}
@@ -222,7 +215,7 @@ export const GroupPickerDialog = ({
           {groups
             .slice(groupId ? first : 0, max + (groupId ? first : 0))
             .map((group: SelectableGroup) => (
-              <>
+              <Fragment key={group.id}>
                 <GroupRow
                   key={group.id}
                   group={group}
@@ -251,7 +244,7 @@ export const GroupPickerDialog = ({
                       canBrowse={canBrowse}
                     />
                   ))}
-              </>
+              </Fragment>
             ))}
         </DataList>
         {groups.length === 0 && !isSearching && (

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

@@ -13,13 +13,11 @@ import {
   TreeView,
   TreeViewDataItem,
 } from "@patternfly/react-core";
+import { AngleRightIcon } from "@patternfly/react-icons";
+import { unionBy } from "lodash-es";
 import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-
-import { AngleRightIcon } from "@patternfly/react-icons";
-import { unionBy } from "lodash-es";
-import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { PaginatingTableToolbar } from "../../components/table-toolbar/PaginatingTableToolbar";
@@ -41,6 +39,16 @@ type GroupTreeContextMenuProps = {
   refresh: () => void;
 };
 
+export function countGroups(groups: GroupRepresentation[]) {
+  let count = groups.length;
+  for (const group of groups) {
+    if (group.subGroups) {
+      count += countGroups(group.subGroups);
+    }
+  }
+  return count;
+}
+
 const GroupTreeContextMenu = ({
   group,
   refresh,
@@ -186,8 +194,6 @@ export const GroupTree = ({
           search === "" ? null : { search },
         ),
       );
-      const count = (await adminClient.groups.count({ search, top: true }))
-        .count;
       let subGroups: GroupRepresentation[] = [];
       if (activeItem) {
         subGroups = await fetchAdminUI<GroupRepresentation[]>(
@@ -199,9 +205,9 @@ export const GroupTree = ({
           },
         );
       }
-      return { groups, count, subGroups };
+      return { groups, subGroups };
     },
-    ({ groups, count, subGroups }) => {
+    ({ groups, subGroups }) => {
       const found: TreeViewDataItem[] = [];
       if (activeItem) findGroup(data || [], activeItem.id!, [], found);
 
@@ -239,7 +245,7 @@ export const GroupTree = ({
           ),
         );
       }
-      setCount(count);
+      setCount(countGroups(groups));
       prefFirst.current = first;
       prefMax.current = max;
     },
@@ -271,7 +277,7 @@ export const GroupTree = ({
 
   return data ? (
     <PaginatingTableToolbar
-      count={count - first}
+      count={count}
       first={first}
       max={max}
       onNextClick={setFirst}