do not filter the realm list on recent used as it might be on the nex…

…t page (keycloak#34510) * do not filter the realm list on recent used as it might be on the next page fixes: keycloak#34072 Signed-off-by: Erik Jan de Wit <[email protected]> * remove deleted realms from realm list Signed-off-by: Erik Jan de Wit <[email protected]> * filter recent realms with existing realms Signed-off-by: Erik Jan de Wit <[email protected]> --------- Signed-off-by: Erik Jan de Wit <[email protected]> (cherry picked from commit 04e32c1)
edewit · Dec 5, 2024 · 63c123f · 63c123f
1 parent 4fd52ad
commit 63c123f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/js/apps/admin-ui/src/components/error/ErrorRenderer.tsx b/js/apps/admin-ui/src/components/error/ErrorRenderer.tsx
@@ -29,9 +29,14 @@ export const ErrorRenderer = ({ error }: FallbackProps) => {
           <AlertActionCloseButton title={error.message} onClose={reset} />
         }
         actionLinks={
-          <AlertActionLink onClick={() => showBoundary()}>
-            {t("retry")}
-          </AlertActionLink>
+          <>
+            <AlertActionLink onClick={() => showBoundary()}>
+              {t("retry")}
+            </AlertActionLink>
+            <AlertActionLink onClick={() => (location.href = "/")}>
+              {t("home")}
+            </AlertActionLink>
+          </>
         }
       ></Alert>
     </PageSection>

diff --git a/js/apps/admin-ui/src/components/realm-selector/RealmSelector.tsx b/js/apps/admin-ui/src/components/realm-selector/RealmSelector.tsx
@@ -138,15 +138,9 @@ export const RealmSelector = () => {
   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[])
+        ? (recentRealms || []).map((name) => ({ name }))
         : []),
-      ...realms.filter((r) => !recentRealms.includes(r.name)),
+      ...realms.filter((r) => !(recentRealms || []).includes(r.name)),
     ],
     [recentRealms, realms, first, search],
   );
@@ -218,7 +212,7 @@ export const RealmSelector = () => {
                   <RealmText
                     {...realm}
                     showIsRecent={
-                      realms.length > 5 && recentRealms.includes(realm.name)
+                      realms.length > 5 && recentRealms?.includes(realm.name)
                     }
                   />
                 </DropdownItem>

diff --git a/js/apps/admin-ui/src/context/RecentRealms.tsx b/js/apps/admin-ui/src/context/RecentRealms.tsx
@@ -1,10 +1,12 @@
-import { PropsWithChildren, useEffect } from "react";
+import { PropsWithChildren } from "react";
 
 import {
   createNamedContext,
+  useFetch,
   useRequiredContext,
   useStoredState,
 } from "@keycloak/keycloak-ui-shared";
+import { useAdminClient } from "../admin-client";
 import { useRealm } from "./realm-context/RealmContext";
 
 const MAX_REALMS = 4;
@@ -16,16 +18,35 @@ export const RecentRealmsContext = createNamedContext<string[] | undefined>(
 
 export const RecentRealmsProvider = ({ children }: PropsWithChildren) => {
   const { realm } = useRealm();
+  const { adminClient } = useAdminClient();
+
   const [storedRealms, setStoredRealms] = useStoredState(
     localStorage,
     "recentRealms",
     [realm],
   );
 
-  useEffect(() => {
-    const newRealms = [...new Set([realm, ...storedRealms])];
-    setStoredRealms(newRealms.slice(0, MAX_REALMS));
-  }, [realm]);
+  useFetch(
+    () => {
+      return Promise.all(
+        [...new Set([realm, ...storedRealms])].map(async (realm) => {
+          try {
+            const response = await adminClient.realms.findOne({ realm });
+            if (response) {
+              return response.realm;
+            }
+          } catch {
+            return undefined;
+          }
+        }),
+      );
+    },
+    (realms) => {
+      const newRealms = realms.filter((r) => r) as string[];
+      setStoredRealms(newRealms.slice(0, MAX_REALMS));
+    },
+    [realm],
+  );
 
   return (
     <RecentRealmsContext.Provider value={storedRealms}>

diff --git a/js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx b/js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx
@@ -1,7 +1,7 @@
 import { fetchWithError } from "@keycloak/keycloak-admin-client";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import { UserProfileConfig } from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
-import { useEnvironment } from "@keycloak/keycloak-ui-shared";
+import { useAlerts, useEnvironment } from "@keycloak/keycloak-ui-shared";
 import {
   AlertVariant,
   ButtonVariant,
@@ -16,9 +16,7 @@ import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import type { KeyValueType } from "../components/key-value-form/key-value-convert";
 import {