From f3b7e22898721be88da61801a24e48edf1c903cc Mon Sep 17 00:00:00 2001 From: Jon Koops Date: Thu, 22 Jul 2021 13:17:00 +0200 Subject: [PATCH] Use new routing conventions for client scope routes (#892) --- src/client-scopes/ClientScopesSection.tsx | 9 +++-- src/client-scopes/routes.ts | 16 +++++++++ src/client-scopes/routes/ClientScope.ts | 24 +++++++++++++ src/client-scopes/routes/ClientScopes.ts | 19 ++++++++++ src/client-scopes/routes/Mapper.ts | 21 +++++++++++ src/client-scopes/routes/NewClientScope.ts | 19 ++++++++++ .../routes/OidcRoleNameMapper.ts | 22 ++++++++++++ src/route-config.ts | 36 ++----------------- 8 files changed, 129 insertions(+), 37 deletions(-) create mode 100644 src/client-scopes/routes.ts create mode 100644 src/client-scopes/routes/ClientScope.ts create mode 100644 src/client-scopes/routes/ClientScopes.ts create mode 100644 src/client-scopes/routes/Mapper.ts create mode 100644 src/client-scopes/routes/NewClientScope.ts create mode 100644 src/client-scopes/routes/OidcRoleNameMapper.ts diff --git a/src/client-scopes/ClientScopesSection.tsx b/src/client-scopes/ClientScopesSection.tsx index 9e5ab1a0ed..d2528fa3c1 100644 --- a/src/client-scopes/ClientScopesSection.tsx +++ b/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={ <> - diff --git a/src/client-scopes/routes.ts b/src/client-scopes/routes.ts new file mode 100644 index 0000000000..910462c48e --- /dev/null +++ b/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; diff --git a/src/client-scopes/routes/ClientScope.ts b/src/client-scopes/routes/ClientScope.ts new file mode 100644 index 0000000000..8d0f696a0d --- /dev/null +++ b/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), +}); diff --git a/src/client-scopes/routes/ClientScopes.ts b/src/client-scopes/routes/ClientScopes.ts new file mode 100644 index 0000000000..60fefa10fb --- /dev/null +++ b/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), +}); diff --git a/src/client-scopes/routes/Mapper.ts b/src/client-scopes/routes/Mapper.ts new file mode 100644 index 0000000000..23c8924e3c --- /dev/null +++ b/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), +}); diff --git a/src/client-scopes/routes/NewClientScope.ts b/src/client-scopes/routes/NewClientScope.ts new file mode 100644 index 0000000000..c536a35cf3 --- /dev/null +++ b/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), +}); diff --git a/src/client-scopes/routes/OidcRoleNameMapper.ts b/src/client-scopes/routes/OidcRoleNameMapper.ts new file mode 100644 index 0000000000..9a9dc056fd --- /dev/null +++ b/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), +}); diff --git a/src/route-config.ts b/src/route-config.ts index f657b6288b..8888976a22 100644 --- a/src/route-config.ts +++ b/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,