added pagination to realm selector (keycloak#30219)

* added pagination to realm selector fixes: keycloak#29978 Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fix display name for recent and refresh on open Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> --------- Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
miquelsi · Jun 13, 2024 · 08ead04 · 08ead04
1 parent d969676
commit 08ead04
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 196 deletions.
diff --git a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
@@ -2024,6 +2024,7 @@ eventTypes.REGISTER_ERROR.description=Register error
 infoDisabledFeatures=Shows all disabled features.
 userSession.modelNote.label=User Session Note
 next=Next
+previous=Previous
 userLabel=User label
 pagination=Pagination
 changeAuthenticatorConfirm=If you change authenticator to {{clientAuthenticatorType}}, the Keycloak database will be updated and you may need to download a new adapter configuration for this client.

diff --git a/js/apps/admin-ui/src/App.tsx b/js/apps/admin-ui/src/App.tsx
@@ -18,7 +18,6 @@ import {
   ErrorBoundaryFallback,
   ErrorBoundaryProvider,
 } from "./context/ErrorBoundary";
-import { RealmsProvider } from "./context/RealmsContext";
 import { RecentRealmsProvider } from "./context/RecentRealms";
 import { AccessContextProvider } from "./context/access/Access";
 import { RealmContextProvider } from "./context/realm-context/RealmContext";
@@ -33,15 +32,13 @@ const AppContexts = ({ children }: PropsWithChildren) => (
     <ServerInfoProvider>
       <RealmContextProvider>
         <WhoAmIContextProvider>
-          <RealmsProvider>
-            <RecentRealmsProvider>
-              <AccessContextProvider>
-                <AlertProvider>
-                  <SubGroups>{children}</SubGroups>
-                </AlertProvider>
-              </AccessContextProvider>
-            </RecentRealmsProvider>
-          </RealmsProvider>
+          <RecentRealmsProvider>
+            <AccessContextProvider>
+              <AlertProvider>
+                <SubGroups>{children}</SubGroups>
+              </AlertProvider>
+            </AccessContextProvider>
+          </RecentRealmsProvider>
         </WhoAmIContextProvider>
       </RealmContextProvider>
     </ServerInfoProvider>

diff --git a/js/apps/admin-ui/src/components/realm-selector/RealmSelector.tsx b/js/apps/admin-ui/src/components/realm-selector/RealmSelector.tsx
@@ -1,3 +1,4 @@
+import { NetworkError } from "@keycloak/keycloak-admin-client";
 import { label } from "@keycloak/keycloak-ui-shared";
 import {
   Button,
@@ -15,19 +16,28 @@ import {
   Stack,
   StackItem,
 } from "@patternfly/react-core";
-import { CheckIcon } from "@patternfly/react-icons";
-import { Fragment, useMemo, useState } from "react";
+import {
+  AngleLeftIcon,
+  AngleRightIcon,
+  CheckIcon,
+} from "@patternfly/react-icons";
+import { debounce } from "lodash-es";
+import { Fragment, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
-import { useRealms } from "../../context/RealmsContext";
+import { useAdminClient } from "../../admin-client";
 import { useRecentRealms } from "../../context/RecentRealms";
+import { fetchAdminUI } from "../../context/auth/admin-ui-endpoint";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useWhoAmI } from "../../context/whoami/WhoAmI";
 import { toDashboard } from "../../dashboard/routes/Dashboard";
 import { toAddRealm } from "../../realm/routes/AddRealm";
+import { useFetch } from "../../utils/useFetch";
 
 import "./realm-selector.css";
 
+const MAX_RESULTS = 10;
+
 type AddRealmProps = {
   onClick: () => void;
 };
@@ -80,49 +90,67 @@ const RealmText = ({ name, displayName, showIsRecent }: RealmTextProps) => {
   );
 };
 
+type RealmNameRepresentation = {
+  name: string;
+  displayName?: string;
+};
+
 export const RealmSelector = () => {
   const { realm } = useRealm();
-  const { realms } = useRealms();
+  const { adminClient } = useAdminClient();
   const { whoAmI } = useWhoAmI();
   const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
+  const [realms, setRealms] = useState<RealmNameRepresentation[]>([]);
   const { t } = useTranslation();
   const recentRealms = useRecentRealms();
   const navigate = useNavigate();
 
-  const all = useMemo(
-    () =>
-      realms
-        .map((realm) => {
-          const used = recentRealms.some((name) => name === realm.name);
-          return { realm, used };
-        })
-        .sort((r1, r2) => {
-          if (r1.used == r2.used) return 0;
-          if (r1.used) return -1;
-          if (r2.used) return 1;
-          return 0;
-        }),
-    [recentRealms, realm, realms],
+  const [search, setSearch] = useState("");
+  const [first, setFirst] = useState(0);
+
+  const debounceFn = useCallback(
+    debounce((value: string) => {
+      setFirst(0);
+      setSearch(value);
+    }, 1000),
+    [],
   );
 
-  const filteredItems = useMemo(() => {
-    const normalizedSearch = search.trim().toLowerCase();
-
-    if (normalizedSearch.length === 0) {
-      return all;
-    }
-
-    return search.trim() === ""
-      ? all
-      : all.filter(
-          (r) =>
-            r.realm.name.toLowerCase().includes(normalizedSearch) ||
-            label(t, r.realm.displayName)
-              ?.toLowerCase()
-              .includes(normalizedSearch),
+  useFetch(
+    async () => {
+      try {
+        return await fetchAdminUI<RealmNameRepresentation[]>(
+          adminClient,
+          "ui-ext/realms/names",
+          { first: `${first}`, max: `${MAX_RESULTS + 1}`, search },
         );
-  }, [search, all]);
+      } catch (error) {
+        if (error instanceof NetworkError && error.response.status < 500) {
+          return [];
+        }
+
+        throw error;
+      }
+    },
+    setRealms,
+    [open, first, search],
+  );
+
+  const sortedRealms = useMemo(
+    () => [
+      ...(first === 0 && !search
+        ? recentRealms.reduce((acc, name) => {
+            const realm = realms.find((r) => r.name === name);
+            if (realm) {
+              acc.push(realm);
+            }
+            return acc;
+          }, [] as RealmNameRepresentation[])
+        : []),
+      ...realms.filter((r) => !recentRealms.includes(r.name)),
+    ],
+    [recentRealms, realms, first, search],
+  );
 
   const realmDisplayName = useMemo(
     () => realms.find((r) => r.name === realm)?.displayName,
@@ -148,13 +176,13 @@ export const RealmSelector = () => {
       )}
     >
       <DropdownList>
-        {realms.length > 5 && (
+        {(realms.length > 5 || search || first !== 0) && (
           <>
             <DropdownGroup>
               <DropdownList>
                 <SearchInput
                   value={search}
-                  onChange={(_, value) => setSearch(value)}
+                  onChange={(_, value) => debounceFn(value)}
                   onClear={() => setSearch("")}
                 />
               </DropdownList>
@@ -163,25 +191,51 @@ export const RealmSelector = () => {
           </>
         )}
         {(realms.length !== 0
-          ? filteredItems.map((i) => (
-              <DropdownItem
-                key={i.realm.name}
-                onClick={() => {
-                  navigate(toDashboard({ realm: i.realm.name }));
-                  setOpen(false);
-                }}
-              >
-                <RealmText
-                  {...i.realm}
-                  showIsRecent={realms.length > 5 && i.used}
-                />
-              </DropdownItem>
-            ))
-          : [
-              <DropdownItem key="loader">
-                <Spinner size="sm" /> {t("loadingRealms")}
-              </DropdownItem>,
+          ? [
+              first !== 0 ? (
+                <DropdownItem onClick={() => setFirst(first - MAX_RESULTS)}>
+                  <AngleLeftIcon /> {t("previous")}
+                </DropdownItem>
+              ) : (
+                []
+              ),
+              ...sortedRealms.map((realm) => (
+                <DropdownItem
+                  key={realm.name}
+                  onClick={() => {
+                    navigate(toDashboard({ realm: realm.name }));
+                    setOpen(false);
+                    setSearch("");
+                  }}
+                >
+                  <RealmText
+                    {...realm}
+                    showIsRecent={
+                      realms.length > 5 && recentRealms.includes(realm.name)
+                    }
+                  />
+                </DropdownItem>
+              )),
+              realms.length > MAX_RESULTS ? (
+                <DropdownItem onClick={() => setFirst(first + MAX_RESULTS)}>
+                  <AngleRightIcon />
+                  {t("next")}
+                </DropdownItem>
+              ) : (
+                []
+              ),
             ]
+          : !search
+            ? [
+                <DropdownItem key="loader">
+                  <Spinner size="sm" /> {t("loadingRealms")}
+                </DropdownItem>,
+              ]
+            : [
+                <DropdownItem key="no-results">
+                  {t("noResultsFound")}
+                </DropdownItem>,
+              ]
         ).concat([
           <Fragment key="add-realm">
             {whoAmI.canCreateRealm() && (

diff --git a/js/apps/admin-ui/src/context/RealmsContext.tsx b/js/apps/admin-ui/src/context/RealmsContext.tsx