diff --git a/src/App.tsx b/src/App.tsx index 204dbb89bf..fb019da6d7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,6 @@ -import React, { FunctionComponent, useEffect } from "react"; +import React, { FunctionComponent } from "react"; import { Page } from "@patternfly/react-core"; -import { - HashRouter as Router, - Route, - Switch, - useParams, -} from "react-router-dom"; +import { HashRouter as Router, Route, Switch } from "react-router-dom"; import { ErrorBoundary } from "react-error-boundary"; import { Header } from "./PageHeader"; @@ -20,34 +15,41 @@ import { routes, RouteDef } from "./route-config"; import { PageBreadCrumbs } from "./components/bread-crumb/PageBreadCrumbs"; import { ForbiddenSection } from "./ForbiddenSection"; import { SubGroups } from "./groups/SubGroupsContext"; -import { useRealm } from "./context/realm-context/RealmContext"; +import { RealmContextProvider } from "./context/realm-context/RealmContext"; import { ErrorRenderer } from "./components/error/ErrorRenderer"; +import { AdminClient } from "./context/auth/AdminClient"; +import { WhoAmIContextProvider } from "./context/whoami/WhoAmI"; +import type KeycloakAdminClient from "keycloak-admin"; export const mainPageContentId = "kc-main-content-page-container"; -const AppContexts: FunctionComponent = ({ children }) => ( - - - - - {children} - - - - -); - -// set the realm form the path -const RealmPathSelector: FunctionComponent = ({ children }) => { - const { setRealm } = useRealm(); - const { realm } = useParams<{ realm: string }>(); - useEffect(() => { - if (realm) setRealm(realm); - }, []); - - return <>{children}; +export type AdminClientProps = { + adminClient: KeycloakAdminClient; }; +const AppContexts: FunctionComponent = ({ + children, + adminClient, +}) => ( + + + + + + + + + {children} + + + + + + + + +); + // If someone tries to go directly to a route they don't // have access to, show forbidden page. type SecuredRouteProps = { route: RouteDef }; @@ -63,38 +65,32 @@ const SecuredRoute = ({ route }: SecuredRouteProps) => { return ; }; -export const App = () => { +export const App = ({ adminClient }: AdminClientProps) => { return ( - - - } - isManagedSidebar - sidebar={} - breadcrumb={} - mainContainerId={mainPageContentId} + + } + isManagedSidebar + sidebar={} + breadcrumb={} + mainContainerId={mainPageContentId} + > + window.location.reload()} > - window.location.reload()} - > - - {routes.map((route, i) => ( - ( - - - - )} - /> - ))} - - - - + + {routes.map((route, i) => ( + } + /> + ))} + + + ); }; diff --git a/src/KeycloakAdminConsole.tsx b/src/KeycloakAdminConsole.tsx deleted file mode 100644 index e05eb02e8f..0000000000 --- a/src/KeycloakAdminConsole.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import type KeycloakAdminClient from "keycloak-admin"; - -import { AdminClient } from "./context/auth/AdminClient"; -import { WhoAmIContextProvider } from "./context/whoami/WhoAmI"; -import { RealmContextProvider } from "./context/realm-context/RealmContext"; -import { App } from "./App"; - -export type KeycloakAdminConsoleProps = { - adminClient: KeycloakAdminClient; -}; - -export const KeycloakAdminConsole = ({ - adminClient, -}: KeycloakAdminConsoleProps) => { - return ( - - - - - - - - ); -}; diff --git a/src/context/realm-context/RealmContext.tsx b/src/context/realm-context/RealmContext.tsx index 8f901da705..a20dacee3f 100644 --- a/src/context/realm-context/RealmContext.tsx +++ b/src/context/realm-context/RealmContext.tsx @@ -1,7 +1,12 @@ import type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation"; import _ from "lodash"; -import React, { FunctionComponent, useState } from "react"; +import React, { FunctionComponent, useEffect, useState } from "react"; +import { useRouteMatch } from "react-router-dom"; import { RecentUsed } from "../../components/realm-selector/recent-used"; +import { + DashboardParams, + DashboardRoute, +} from "../../dashboard/routes/Dashboard"; import environment from "../../environment"; import useRequiredContext from "../../utils/useRequiredContext"; import { useAdminClient, useFetch } from "../auth/AdminClient"; @@ -18,7 +23,10 @@ export const RealmContext = React.createContext( ); export const RealmContextProvider: FunctionComponent = ({ children }) => { - const [realm, setRealm] = useState(environment.loginRealm); + const routeMatch = useRouteMatch(DashboardRoute.path); + const [realm, setRealm] = useState( + routeMatch?.params.realm ?? environment.loginRealm + ); const [realms, setRealms] = useState([]); const adminClient = useAdminClient(); const recentUsed = new RecentUsed(); @@ -34,6 +42,8 @@ export const RealmContextProvider: FunctionComponent = ({ children }) => { [] ); + useEffect(() => adminClient.setConfig({ realmName: realm }), [realm]); + const set = (realm: string) => { if ( realms.length === 0 || @@ -41,9 +51,6 @@ export const RealmContextProvider: FunctionComponent = ({ children }) => { ) { recentUsed.setRecentUsed(realm); setRealm(realm); - adminClient.setConfig({ - realmName: realm, - }); } }; return ( diff --git a/src/index.tsx b/src/index.tsx index f45608ee1a..cf08d97203 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,17 +1,17 @@ import "./index.css"; import React, { StrictMode } from "react"; import ReactDOM from "react-dom"; -import i18n from "./i18n"; +import { App } from "./App"; +import i18n from "./i18n"; import init from "./context/auth/keycloak"; -import { KeycloakAdminConsole } from "./KeycloakAdminConsole"; console.info("supported languages", ...i18n.languages); init().then((adminClient) => { ReactDOM.render( - + , document.getElementById("app") );