Use new routing conventions for realm routes (#890)

src/PageNav.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useHistory, useRouteMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   Nav,
@@ -13,6 +13,7 @@ import { RealmSelector } from "./components/realm-selector/RealmSelector";
 import { useRealm } from "./context/realm-context/RealmContext";
 import { useAccess } from "./context/access/Access";
 import { routes } from "./route-config";
+import { AddRealmRoute } from "./realm/routes/AddRealm";
 
 export const PageNav: React.FunctionComponent = () => {
   const { t } = useTranslation("common");
@@ -68,8 +69,7 @@ export const PageNav: React.FunctionComponent = () => {
     "view-identity-providers"
   );
 
-  const { pathname } = useLocation();
-  const isOnAddRealm = () => pathname.indexOf("add-realm") === -1;
+  const isOnAddRealm = !!useRouteMatch(AddRealmRoute.path);
 
   return (
     <PageSidebar
@@ -80,12 +80,12 @@ export const PageNav: React.FunctionComponent = () => {
               <RealmSelector />
             </NavItem>
           </NavList>
-          {isOnAddRealm() && (
+          {!isOnAddRealm && (
             <NavGroup title="">
               <LeftNav title="home" path="/" />
             </NavGroup>
           )}
-          {showManage && isOnAddRealm() && (
+          {showManage && !isOnAddRealm && (
             <NavGroup title={t("manage")}>
               <LeftNav title="clients" path="/clients" />
               <LeftNav title="clientScopes" path="/client-scopes" />
@@ -97,7 +97,7 @@ export const PageNav: React.FunctionComponent = () => {
             </NavGroup>
           )}
 
-          {showConfigure && isOnAddRealm() && (
+          {showConfigure && !isOnAddRealm && (
             <NavGroup title={t("configure")}>
               <LeftNav title="realmSettings" path="/realm-settings" />
               <LeftNav title="authentication" path="/authentication" />

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 { toAddRealm } from "../../realm/routes/AddRealm";
 import { toUpperCase } from "../../util";
 import { RecentUsed } from "./recent-used";
 
@@ -66,7 +67,7 @@ export const RealmSelector = () => {
       component="div"
       isBlock
       onClick={() => {
-        history.push(`/${realm}/add-realm`);
+        history.push(toAddRealm({ realm }));
         setOpen(!open);
       }}
     >

src/realm/routes.ts

@@ -0,0 +1,6 @@
+import type { RouteDef } from "../route-config";
+import { AddRealmRoute } from "./routes/AddRealm";
+
+const routes: RouteDef[] = [AddRealmRoute];
+
+export default routes;

src/realm/routes/AddRealm.ts

@@ -0,0 +1,19 @@
+import type { LocationDescriptorObject } from "history";
+import { generatePath } from "react-router-dom";
+import type { RouteDef } from "../../route-config";
+import { NewRealmForm } from "../add/NewRealmForm";
+
+export type AddRealmParams = { realm: string };
+
+export const AddRealmRoute: RouteDef = {
+  path: "/:realm/add-realm",
+  component: NewRealmForm,
+  breadcrumb: (t) => t("realm:createRealm"),
+  access: "manage-realm",
+};
+
+export const toAddRealm = (
+  params: AddRealmParams
+): LocationDescriptorObject => ({
+  pathname: generatePath(AddRealmRoute.path, params),
+});

src/route-config.ts

@@ -32,7 +32,7 @@ import {
   EditProviderCrumb,
   RealmSettingsSection,
 } from "./realm-settings/RealmSettingsSection";
-import { NewRealmForm } from "./realm/add/NewRealmForm";
+import realmRoutes from "./realm/routes";
 import { SessionsSection } from "./sessions/SessionsSection";
 import { LdapMapperDetails } from "./user-federation/ldap/mappers/LdapMapperDetails";
 import { UserFederationKerberosSettings } from "./user-federation/UserFederationKerberosSettings";
@@ -52,12 +52,7 @@ export type RouteDef = {
 
 export const routes: RouteDef[] = [
   ...clientRoutes,
-  {
-    path: "/:realm/add-realm",
-    component: NewRealmForm,
-    breadcrumb: (t) => t("realm:createRealm"),
-    access: "manage-realm",
-  },
+  ...realmRoutes,
   {
     path: "/:realm/clients/:clientId/roles/add-role",
     component: RealmRoleTabs,