diff --git a/src/components/data-loader/DataLoader.test.tsx b/src/components/data-loader/DataLoader.test.tsx index fe36c1ae39..c2d00447d2 100644 --- a/src/components/data-loader/DataLoader.test.tsx +++ b/src/components/data-loader/DataLoader.test.tsx @@ -47,7 +47,6 @@ export const MockAdminClient: FunctionComponent<{ mock?: object }> = ( {}, realms: [], refresh: () => Promise.resolve(), }} diff --git a/src/components/form-access/FormAccess.test.tsx b/src/components/form-access/FormAccess.test.tsx index 74d0376c75..5027600e81 100644 --- a/src/components/form-access/FormAccess.test.tsx +++ b/src/components/form-access/FormAccess.test.tsx @@ -22,7 +22,6 @@ describe("FormAccess", () => { {}, realms: [], refresh: () => Promise.resolve(), }} diff --git a/src/components/realm-selector/RealmSelector.tsx b/src/components/realm-selector/RealmSelector.tsx index 9ff5b7f43b..6bb93fb72f 100644 --- a/src/components/realm-selector/RealmSelector.tsx +++ b/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) => ( diff --git a/src/context/realm-context/RealmContext.tsx b/src/context/realm-context/RealmContext.tsx index 99737311e3..17a71bfc2c 100644 --- a/src/context/realm-context/RealmContext.tsx +++ b/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; }; @@ -24,9 +23,12 @@ export const RealmContext = React.createContext( export const RealmContextProvider: FunctionComponent = ({ children }) => { const routeMatch = useRouteMatch(DashboardRoute.path); - const [realm, setRealm] = useState( - routeMatch?.params.realm ?? environment.loginRealm + const realmParam = routeMatch?.params.realm; + const realm = useMemo( + () => realmParam ?? environment.loginRealm, + [realmParam] ); + const [realms, setRealms] = useState([]); 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) => { - recentUsed.setRecentUsed(realm); - setRealm(realm); - }; + // Keep track of recently used realms when selected realm changes. + useEffect(() => recentUsed.setRecentUsed(realm), [realm]); return ( { //this is needed otherwise the realm find function will not return diff --git a/src/realm-settings/RealmSettingsTabs.tsx b/src/realm-settings/RealmSettingsTabs.tsx index 1a17add98e..a65b7e9405 100644 --- a/src/realm-settings/RealmSettingsTabs.tsx +++ b/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 { - realm: realmName, - refresh: refreshRealm, - setRealm: setCurrentRealm, - } = useRealm(); + const { realm: realmName, refresh: refreshRealm } = 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); diff --git a/src/realm/add/NewRealmForm.tsx b/src/realm/add/NewRealmForm.tsx index a690db8aef..44f78ae786 100644 --- a/src/realm/add/NewRealmForm.tsx +++ b/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(`/${realm.realm}`); + history.push(toDashboard({ realm: realm.realm })); } catch (error) { addError("realm:saveRealmError", error); }