Clean up realm selector code (#4346)

apps/admin-ui/cypress/support/pages/admin-ui/SidebarPage.ts

@@ -44,8 +44,8 @@ export default class SidebarPage extends CommonElements {
 
   goToCreateRealm() {
     this.waitForPageLoad();
-    cy.findByTestId(this.realmsDrpDwn).click({ force: true });
-    cy.findByTestId(this.createRealmBtn).click({ force: true });
+    cy.findByTestId(this.realmsDrpDwn).click();
+    cy.findByTestId(this.createRealmBtn).click();
     this.waitForPageLoad();
 
     return this;

apps/admin-ui/src/components/realm-selector/RealmSelector.tsx

@@ -12,19 +12,50 @@ import {
   SplitItem,
 } from "@patternfly/react-core";
 import { CheckIcon } from "@patternfly/react-icons";
-import { Fragment, ReactElement, useMemo, useState } from "react";
+import { Fragment, ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useRealms } from "../../context/RealmsContext";
 import { useWhoAmI } from "../../context/whoami/WhoAmI";
 import { toDashboard } from "../../dashboard/routes/Dashboard";
 import { toAddRealm } from "../../realm/routes/AddRealm";
+import { useUpdateEffect } from "../../utils/useUpdateEffect";
 import { RecentUsed } from "./recent-used";
 
 import "./realm-selector.css";
 
+const AddRealm = () => {
+  const { realm } = useRealm();
+  const { t } = useTranslation("common");
+
+  return (
+    <Button
+      data-testid="add-realm"
+      component={(props) => <Link {...props} to={toAddRealm({ realm })} />}
+      isBlock
+    >
+      {t("createRealm")}
+    </Button>
+  );
+};
+
+type RealmTextProps = {
+  value: string;
+};
+
+const RealmText = ({ value }: RealmTextProps) => {
+  const { realm } = useRealm();
+
+  return (
+    <Split className="keycloak__realm_selector__list-item-split">
+      <SplitItem isFilled>{value}</SplitItem>
+      <SplitItem>{value === realm && <CheckIcon />}</SplitItem>
+    </Split>
+  );
+};
+
 export const RealmSelector = () => {
   const { realm } = useRealm();
   const { realms, refresh } = useRealms();
@@ -32,7 +63,9 @@ export const RealmSelector = () => {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const navigate = useNavigate();
+  const location = useLocation();
   const { t } = useTranslation("common");
+
   const recentUsed = new RecentUsed();
   const all = recentUsed.used
     .filter((r) => r !== realm)
@@ -47,53 +80,24 @@ export const RealmSelector = () => {
         })
     );
 
-  const filteredItems = useMemo(() => {
-    if (search === "") {
-      return undefined;
-    }
+  const filteredItems =
+    search === ""
+      ? undefined
+      : all.filter((r) => r.name.toLowerCase().includes(search.toLowerCase()));
 
-    return all.filter((r) =>
-      r.name.toLowerCase().includes(search.toLowerCase())
-    );
-  }, [search, all]);
-
-  const RealmText = ({ value }: { value: string }) => (
-    <Split className="keycloak__realm_selector__list-item-split">
-      <SplitItem isFilled>{value}</SplitItem>
-      <SplitItem>{value === realm && <CheckIcon />}</SplitItem>
-    </Split>
-  );
-
-  const AddRealm = () => (
-    <Button
-      data-testid="add-realm"
-      component="div"
-      isBlock
-      onClick={() => {
-        navigate(toAddRealm({ realm }));
-        setOpen(!open);
-      }}
-    >
-      {t("createRealm")}
-    </Button>
-  );
-
-  const selectRealm = (realm: string) => {
-    setOpen(!open);
-    navigate(toDashboard({ realm }));
-  };
+  useUpdateEffect(() => setOpen(false), [location]);
 
   const dropdownItems =
     realms.length !== 0
       ? realms.map((r) => (
           <DropdownItem
             key={`realm-dropdown-item-${r.realm}`}
-            onClick={() => {
-              selectRealm(r.realm!);
-            }}
-          >
+            component={
+              <Link to={toDashboard({ realm: r.realm! })}>
                 <RealmText value={r.realm!} />
-          </DropdownItem>
+              </Link>
+            }
+          />
         ))
       : [
           <DropdownItem key="load">
@@ -101,22 +105,7 @@ export const RealmSelector = () => {
           </DropdownItem>,
         ];
 
-  const addRealmComponent = (
-    <Fragment key="Add Realm">
-      {whoAmI.canCreateRealm() && (
-        <>
-          <Divider key="divider" />
-          <DropdownItem key="add">
-            <AddRealm />
-          </DropdownItem>
-        </>
-      )}
-    </Fragment>
-  );
-
-  return (
-    <>
-      {realms.length > 5 && (
+  return realms.length > 5 ? (
     <ContextSelector
       data-testid="realmSelector"
       toggleText={realm}
@@ -132,7 +121,7 @@ export const RealmSelector = () => {
         }
         const value = element.props.value;
         if (value) {
-              selectRealm(value);
+          navigate(toDashboard({ realm: value }));
         }
       }}
       searchInputValue={search}
@@ -153,8 +142,7 @@ export const RealmSelector = () => {
         </ContextSelectorItem>
       ))}
     </ContextSelector>
-      )}
-      {realms.length <= 5 && (
+  ) : (
     <Dropdown
       id="realm-select"
       data-testid="realmSelector"
@@ -172,9 +160,19 @@ export const RealmSelector = () => {
           {realm}
         </DropdownToggle>
       }
-          dropdownItems={[...dropdownItems, addRealmComponent]}
-        />
-      )}
+      dropdownItems={[
+        ...dropdownItems,
+        <Fragment key="add-realm">
+          {whoAmI.canCreateRealm() && (
+            <>
+              <Divider key="divider" />
+              <DropdownItem key="add">
+                <AddRealm />
+              </DropdownItem>
             </>
+          )}
+        </Fragment>,
+      ]}
+    />
   );
 };