Use new routing conventions for client scope routes (#892)

src/client-scopes/ClientScopesSection.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useRouteMatch } from "react-router-dom";
+import { Link, useRouteMatch } from "react-router-dom";
 import {
   AlertVariant,
   Button,
@@ -18,6 +18,7 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useAlerts } from "../components/alert/Alerts";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
+import { useRealm } from "../context/realm-context/RealmContext";
 import { upperCaseFormatter, emptyFormatter } from "../util";
 import {
   CellDropdown,
@@ -28,12 +29,13 @@ import {
   removeScope,
 } from "../components/client-scope/ClientScopeTypes";
 import { ChangeTypeDialog } from "./ChangeTypeDialog";
+import { toNewClientScope } from "./routes/NewClientScope";
 
 import "./client-scope.css";
 
 export const ClientScopesSection = () => {
+  const { realm } = useRealm();
   const { t } = useTranslation("client-scopes");
-  const history = useHistory();
   const { url } = useRouteMatch();
 
   const adminClient = useAdminClient();
@@ -175,7 +177,8 @@ export const ClientScopesSection = () => {
           toolbarItem={
             <>
               <ToolbarItem>
-                <Button onClick={() => history.push(`${url}/new`)}>
+                {/* @ts-ignore */}
+                <Button component={Link} to={toNewClientScope({ realm })}>
                   {t("createClientScope")}
                 </Button>
               </ToolbarItem>

src/client-scopes/routes.ts

@@ -0,0 +1,16 @@
+import type { RouteDef } from "../route-config";
+import { ClientScopeRoute } from "./routes/ClientScope";
+import { ClientScopesRoute } from "./routes/ClientScopes";
+import { MapperRoute } from "./routes/Mapper";
+import { NewClientScopeRoute } from "./routes/NewClientScope";
+import { OidcRoleNameMapperRoute } from "./routes/OidcRoleNameMapper";
+
+const routes: RouteDef[] = [
+  NewClientScopeRoute,
+  OidcRoleNameMapperRoute,
+  MapperRoute,
+  ClientScopeRoute,
+  ClientScopesRoute,
+];
+
+export default routes;

src/client-scopes/routes/ClientScope.ts

@@ -0,0 +1,24 @@
+import type { LocationDescriptorObject } from "history";
+import { generatePath } from "react-router-dom";
+import type { RouteDef } from "../../route-config";
+import { ClientScopeForm } from "../form/ClientScopeForm";
+
+export type ClientScopeParams = {
+  realm: string;
+  id: string;
+  type: string;
+  tab: string;
+};
+
+export const ClientScopeRoute: RouteDef = {
+  path: "/:realm/client-scopes/:id/:type/:tab",
+  component: ClientScopeForm,
+  breadcrumb: (t) => t("client-scopes:clientScopeDetails"),
+  access: "view-clients",
+};
+
+export const toClientScope = (
+  params: ClientScopeParams
+): LocationDescriptorObject => ({
+  pathname: generatePath(ClientScopeRoute.path, params),
+});

src/client-scopes/routes/ClientScopes.ts

@@ -0,0 +1,19 @@
+import type { LocationDescriptorObject } from "history";
+import { generatePath } from "react-router-dom";
+import type { RouteDef } from "../../route-config";
+import { ClientScopesSection } from "../ClientScopesSection";
+
+export type ClientScopesParams = { realm: string };
+
+export const ClientScopesRoute: RouteDef = {
+  path: "/:realm/client-scopes",
+  component: ClientScopesSection,
+  breadcrumb: (t) => t("client-scopes:clientScopeList"),
+  access: "view-clients",
+};
+
+export const toClientScopes = (
+  params: ClientScopesParams
+): LocationDescriptorObject => ({
+  pathname: generatePath(ClientScopesRoute.path, params),
+});

src/client-scopes/routes/Mapper.ts

@@ -0,0 +1,21 @@
+import type { LocationDescriptorObject } from "history";
+import { generatePath } from "react-router-dom";
+import type { RouteDef } from "../../route-config";
+import { MappingDetails } from "../details/MappingDetails";
+
+export type MapperParams = {
+  realm: string;
+  id: string;
+  mapperId: string;
+};
+
+export const MapperRoute: RouteDef = {
+  path: "/:realm/client-scopes/:id/mappers/:mapperId",
+  component: MappingDetails,
+  breadcrumb: (t) => t("common:mappingDetails"),
+  access: "view-clients",
+};
+
+export const toMapper = (params: MapperParams): LocationDescriptorObject => ({
+  pathname: generatePath(MapperRoute.path, params),
+});

src/client-scopes/routes/NewClientScope.ts

@@ -0,0 +1,19 @@
+import type { LocationDescriptorObject } from "history";
+import { generatePath } from "react-router-dom";
+import type { RouteDef } from "../../route-config";
+import { ClientScopeForm } from "../form/ClientScopeForm";
+
+export type NewClientScopeParams = { realm: string };
+
+export const NewClientScopeRoute: RouteDef = {
+  path: "/:realm/client-scopes/new",
+  component: ClientScopeForm,
+  breadcrumb: (t) => t("client-scopes:createClientScope"),
+  access: "manage-clients",
+};
+
+export const toNewClientScope = (
+  params: NewClientScopeParams
+): LocationDescriptorObject => ({
+  pathname: generatePath(NewClientScopeRoute.path, params),
+});

src/client-scopes/routes/OidcRoleNameMapper.ts

@@ -0,0 +1,22 @@
+import type { LocationDescriptorObject } from "history";
+import { generatePath } from "react-router-dom";
+import type { RouteDef } from "../../route-config";
+import { RoleMappingForm } from "../add/RoleMappingForm";
+
+export type OidcRoleNameMapperParams = {
+  realm: string;
+  id: string;
+};
+
+export const OidcRoleNameMapperRoute: RouteDef = {
+  path: "/:realm/client-scopes/:id/mappers/oidc-role-name-mapper",
+  component: RoleMappingForm,
+  breadcrumb: (t) => t("common:mappingDetails"),
+  access: "view-clients",
+};
+
+export const toOidcRoleNameMapper = (
+  params: OidcRoleNameMapperParams
+): LocationDescriptorObject => ({
+  pathname: generatePath(OidcRoleNameMapperRoute.path, params),
+});

src/route-config.ts

@@ -3,10 +3,7 @@ import type { AccessType } from "keycloak-admin/lib/defs/whoAmIRepresentation";
 import type { ComponentType } from "react";
 import type { MatchOptions } from "use-react-router-breadcrumbs";
 import authenticationRoutes from "./authentication/routes";
-import { RoleMappingForm } from "./client-scopes/add/RoleMappingForm";
-import { ClientScopesSection } from "./client-scopes/ClientScopesSection";
-import { MappingDetails } from "./client-scopes/details/MappingDetails";
-import { ClientScopeForm } from "./client-scopes/form/ClientScopeForm";
+import clientScopesRoutes from "./client-scopes/routes";
 import clientRoutes from "./clients/routes";
 import { DashboardSection } from "./dashboard/Dashboard";
 import { EventsSection } from "./events/EventsSection";
@@ -53,6 +50,7 @@ export type RouteDef = {
 export const routes: RouteDef[] = [
   ...authenticationRoutes,
   ...clientRoutes,
+  ...clientScopesRoutes,
   ...realmRoutes,
   {
     path: "/:realm/clients/:clientId/roles/add-role",
@@ -66,36 +64,6 @@ export const routes: RouteDef[] = [
     breadcrumb: (t) => t("roles:roleDetails"),
     access: "view-realm",
   },
-  {
-    path: "/:realm/client-scopes/new",
-    component: ClientScopeForm,
-    breadcrumb: (t) => t("client-scopes:createClientScope"),
-    access: "manage-clients",
-  },
-  {
-    path: "/:realm/client-scopes/:id/mappers/oidc-role-name-mapper",
-    component: RoleMappingForm,
-    breadcrumb: (t) => t("common:mappingDetails"),
-    access: "view-clients",
-  },
-  {
-    path: "/:realm/client-scopes/:id/mappers/:mapperId",
-    component: MappingDetails,
-    breadcrumb: (t) => t("common:mappingDetails"),
-    access: "view-clients",
-  },
-  {
-    path: "/:realm/client-scopes/:id/:type/:tab",
-    component: ClientScopeForm,
-    breadcrumb: (t) => t("client-scopes:clientScopeDetails"),
-    access: "view-clients",
-  },
-  {
-    path: "/:realm/client-scopes",
-    component: ClientScopesSection,
-    breadcrumb: (t) => t("client-scopes:clientScopeList"),
-    access: "view-clients",
-  },
   {
     path: "/:realm/roles",
     component: RealmRolesSection,