made the query paginated (#39060)

fixes: #39026

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

js/apps/admin-ui/src/permissions-configuration/permission-configuration/ExistingPoliciesDialog.tsx

@@ -1,4 +1,10 @@
 import PolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/policyRepresentation";
+import { PolicyQuery } from "@keycloak/keycloak-admin-client/lib/resources/clients";
+import {
+  KeycloakDataTable,
+  ListEmptyState,
+  useFetch,
+} from "@keycloak/keycloak-ui-shared";
 import {
   Button,
   ButtonVariant,
@@ -10,12 +16,11 @@ import {
   ModalVariant,
 } from "@patternfly/react-core";
 import { CaretDownIcon, FilterIcon } from "@patternfly/react-icons";
+import { sortBy } from "lodash-es";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ListEmptyState, useFetch } from "@keycloak/keycloak-ui-shared";
-import { KeycloakDataTable } from "@keycloak/keycloak-ui-shared";
 import { useAdminClient } from "../../admin-client";
-import { capitalize, sortBy } from "lodash-es";
+import { capitalizeFirstLetterFormatter } from "../../util";
 import useToggle from "../../utils/useToggle";
 
 export type ExistingPoliciesDialogProps = {
@@ -37,34 +42,41 @@ export const ExistingPoliciesDialog = ({
   const [filterType, setFilterType] = useState<string | undefined>(undefined);
   const [isFilterTypeDropdownOpen, toggleIsFilterTypeDropdownOpen] =
     useToggle();
-  const [policies, setPolicies] = useState<PolicyRepresentation[]>([]);
   const [providers, setProviders] = useState<string[]>([]);
 
   useFetch(
     () =>
-      Promise.all([
-        adminClient.clients.listPolicyProviders({
-          id: permissionClientId!,
-        }),
-        adminClient.clients.listPolicies({
-          id: permissionClientId!,
-          permission: "false",
-        }),
-      ]),
-    ([providers, policies]) => {
+      adminClient.clients.listPolicyProviders({
+        id: permissionClientId!,
+      }),
+    (providers) => {
       const formattedProviders = providers
         .filter((p) => p.type !== "resource" && p.type !== "scope")
         .map((provider) => provider.name)
         .filter((name) => name !== undefined);
       setProviders(sortBy(formattedProviders));
-      setPolicies(policies || []);
     },
     [permissionClientId],
   );
 
-  const filteredPolicies = filterType
-    ? policies.filter((policy) => capitalize(policy.type) === filterType)
-    : policies;
+  const loader = async (first?: number, max?: number, search?: string) => {
+    const params: PolicyQuery = {
+      id: permissionClientId!,
+      permission: "false",
+      first,
+      max,
+    };
+
+    if (search) {
+      params.name = search;
+    }
+
+    if (filterType) {
+      params.type = filterType;
+    }
+
+    return (await adminClient.clients.listPolicies(params)) || [];
+  };
 
   return (
     <Modal
@@ -104,13 +116,14 @@ export const ExistingPoliciesDialog = ({
       ]}
     >
       <KeycloakDataTable
-        loader={filteredPolicies}
+        key={filterType}
+        loader={loader}
         ariaLabelKey={t("chooseAPolicyType")}
         searchPlaceholderKey={t("searchClientAuthorizationPolicy")}
         isSearching={true}
         searchTypeComponent={
           <Dropdown
-            onSelect={(event, value) => {
+            onSelect={(_, value) => {
               setFilterType(value as string | undefined);
               toggleIsFilterTypeDropdownOpen();
             }}
@@ -152,13 +165,12 @@ export const ExistingPoliciesDialog = ({
         canSelectAll
         onSelect={(selectedRows) => setRows(selectedRows)}
         columns={[
-          { name: "name", displayKey: t("name") },
+          { name: "name" },
           {
             name: "type",
-            displayKey: t("type"),
-            cellFormatters: [(value) => capitalize(String(value || ""))],
+            cellFormatters: [capitalizeFirstLetterFormatter()],
           },
-          { name: "description", displayKey: t("description") },
+          { name: "description" },
         ]}
         emptyState={
           <ListEmptyState