Keep realm value from RealmContext in sync with the URL (#1130)

src/components/data-loader/DataLoader.test.tsx

@@ -47,7 +47,6 @@ export const MockAdminClient: FunctionComponent<{ mock?: object }> = (
             <RealmContext.Provider
               value={{
                 realm: "master",
-                setRealm: () => {},
                 realms: [],
                 refresh: () => Promise.resolve(),
               }}

src/components/form-access/FormAccess.test.tsx

@@ -22,7 +22,6 @@ describe("FormAccess", () => {
         <RealmContext.Provider
           value={{
             realm,
-            setRealm: () => {},
             realms: [],
             refresh: () => Promise.resolve(),
           }}

src/components/realm-selector/RealmSelector.tsx

@@ -17,6 +17,7 @@ import { useHistory } from "react-router-dom";
 
 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 { toUpperCase } from "../../util";
 import { RecentUsed } from "./recent-used";
@@ -24,7 +25,7 @@ import { RecentUsed } from "./recent-used";
 import "./realm-selector.css";
 
 export const RealmSelector = () => {
-  const { realm, setRealm, realms } = useRealm();
+  const { realm, realms } = useRealm();
   const { whoAmI } = useWhoAmI();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -76,9 +77,8 @@ export const RealmSelector = () => {
   );
 
   const selectRealm = (realm: string) => {
-    setRealm(realm);
     setOpen(!open);
-    history.push(`/${realm}/`);
+    history.push(toDashboard({ realm }));
   };
 
   const dropdownItems = realms.map((r) => (

src/context/realm-context/RealmContext.tsx

@@ -1,6 +1,6 @@
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import _ from "lodash";
-import React, { FunctionComponent, useEffect, useState } from "react";
+import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
 import { useRouteMatch } from "react-router-dom";
 import { RecentUsed } from "../../components/realm-selector/recent-used";
 import {
@@ -13,7 +13,6 @@ import { useAdminClient, useFetch } from "../auth/AdminClient";
 
 type RealmContextType = {
   realm: string;
-  setRealm: (realm: string) => void;
   realms: RealmRepresentation[];
   refresh: () => Promise<void>;
 };
@@ -24,9 +23,12 @@ export const RealmContext = React.createContext<RealmContextType | undefined>(
 
 export const RealmContextProvider: FunctionComponent = ({ children }) => {
   const routeMatch = useRouteMatch<DashboardParams>(DashboardRoute.path);
-  const [realm, setRealm] = useState(
+  const realmParam = routeMatch?.params.realm;
-    routeMatch?.params.realm ?? environment.loginRealm
+  const realm = useMemo(
+    () => realmParam ?? environment.loginRealm,
+    [realmParam]
   );
+
   const [realms, setRealms] = useState<RealmRepresentation[]>([]);
   const adminClient = useAdminClient();
   const recentUsed = new RecentUsed();
@@ -42,18 +44,16 @@ export const RealmContextProvider: FunctionComponent = ({ children }) => {
     []
   );
 
+  // Configure admin client to use selected realm when it changes.
   useEffect(() => adminClient.setConfig({ realmName: realm }), [realm]);
 
-  const set = (realm: string) => {
+  // Keep track of recently used realms when selected realm changes.
-    recentUsed.setRecentUsed(realm);
+  useEffect(() => recentUsed.setRecentUsed(realm), [realm]);
-    setRealm(realm);
-  };
 
   return (
     <RealmContext.Provider
       value={{
         realm,
-        setRealm: set,
         realms,
         refresh: async () => {
           //this is needed otherwise the realm find function will not return

src/realm-settings/RealmSettingsTabs.tsx

@@ -147,11 +147,7 @@ export const RealmSettingsTabs = ({
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
-  const {
+  const { realm: realmName, refresh: refreshRealm } = useRealm();
-    realm: realmName,
-    refresh: refreshRealm,
-    setRealm: setCurrentRealm,
-  } = useRealm();
   const history = useHistory();
 
   const kpComponentTypes =
@@ -197,7 +193,6 @@ export const RealmSettingsTabs = ({
       const isRealmRenamed = realmName !== realm.realm;
       if (isRealmRenamed) {
         await refreshRealm();
-        setCurrentRealm(realm.realm!);
         history.push(toRealmSettings({ realm: realm.realm! }));
       }
       addAlert(t("saveSuccess"), AlertVariant.success);

src/realm/add/NewRealmForm.tsx

@@ -19,12 +19,13 @@ import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useWhoAmI } from "../../context/whoami/WhoAmI";
+import { toDashboard } from "../../dashboard/routes/Dashboard";
 
 export const NewRealmForm = () => {
   const { t } = useTranslation("realm");
   const history = useHistory();
   const { refresh } = useWhoAmI();
-  const { refresh: realmRefresh, setRealm } = useRealm();
+  const { refresh: realmRefresh } = useRealm();
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
 
@@ -45,8 +46,7 @@ export const NewRealmForm = () => {
 
       refresh();
       await realmRefresh();
-      setRealm(realm.realm!);
+      history.push(toDashboard({ realm: realm.realm }));
-      history.push(`/${realm.realm}`);
     } catch (error) {
       addError("realm:saveRealmError", error);
     }