Encode parameters for React Router links in URL-safe manner (#23667)

Closes #22600

Co-authored-by: Jon Koops <jonkoops@gmail.com>

js/apps/admin-ui/src/authentication/routes/Authentication.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type AuthenticationTab = "flows" | "required-actions" | "policies";
@@ -31,6 +31,6 @@ export const toAuthentication = (
     : AuthenticationRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/authentication/routes/CreateFlow.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type CreateFlowParams = { realm: string };
@@ -17,5 +17,5 @@ export const CreateFlowRoute: AppRouteObject = {
 };
 
 export const toCreateFlow = (params: CreateFlowParams): Partial<Path> => ({
-  pathname: generatePath(CreateFlowRoute.path, params),
+  pathname: generateEncodedPath(CreateFlowRoute.path, params),
 });

js/apps/admin-ui/src/authentication/routes/Flow.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type FlowParams = {
@@ -30,6 +30,6 @@ export const toFlow = (params: FlowParams): Partial<Path> => {
   const path = params.builtIn ? FlowWithBuiltInRoute.path : FlowRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/client-scopes/routes/ClientScope.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ClientScopeTab = "settings" | "mappers" | "scope";
@@ -26,6 +26,6 @@ export const toClientScope = (params: ClientScopeParams): Partial<Path> => {
   const path = ClientScopeRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/client-scopes/routes/ClientScopes.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ClientScopesParams = { realm: string };
@@ -17,5 +17,5 @@ export const ClientScopesRoute: AppRouteObject = {
 };
 
 export const toClientScopes = (params: ClientScopesParams): Partial<Path> => ({
-  pathname: generatePath(ClientScopesRoute.path, params),
+  pathname: generateEncodedPath(ClientScopesRoute.path, params),
 });

js/apps/admin-ui/src/client-scopes/routes/Mapper.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type MapperParams = {
@@ -21,5 +21,5 @@ export const MapperRoute: AppRouteObject = {
 };
 
 export const toMapper = (params: MapperParams): Partial<Path> => ({
-  pathname: generatePath(MapperRoute.path, params),
+  pathname: generateEncodedPath(MapperRoute.path, params),
 });

js/apps/admin-ui/src/client-scopes/routes/NewClientScope.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type NewClientScopeParams = { realm: string };
@@ -19,5 +19,5 @@ export const NewClientScopeRoute: AppRouteObject = {
 export const toNewClientScope = (
   params: NewClientScopeParams,
 ): Partial<Path> => ({
-  pathname: generatePath(NewClientScopeRoute.path, params),
+  pathname: generateEncodedPath(NewClientScopeRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/AddClient.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type AddClientParams = { realm: string };
@@ -17,5 +17,5 @@ export const AddClientRoute: AppRouteObject = {
 };
 
 export const toAddClient = (params: AddClientParams): Partial<Path> => ({
-  pathname: generatePath(AddClientRoute.path, params),
+  pathname: generateEncodedPath(AddClientRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/AddRegistrationProvider.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 import { ClientRegistrationTab } from "./ClientRegistration";
 
@@ -35,6 +35,6 @@ export const toRegistrationProvider = (
     : AddRegistrationProviderRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/clients/routes/AuthenticationTab.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type AuthorizationTab =
@@ -32,5 +32,5 @@ export const AuthorizationRoute: AppRouteObject = {
 export const toAuthorizationTab = (
   params: AuthorizationParams,
 ): Partial<Path> => ({
-  pathname: generatePath(AuthorizationRoute.path, params),
+  pathname: generateEncodedPath(AuthorizationRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/Client.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ClientTab =
@@ -34,5 +34,5 @@ export const ClientRoute: AppRouteObject = {
 };
 
 export const toClient = (params: ClientParams): Partial<Path> => ({
-  pathname: generatePath(ClientRoute.path, params),
+  pathname: generateEncodedPath(ClientRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/ClientRegistration.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ClientRegistrationTab = "anonymous" | "authenticated";
@@ -24,5 +24,5 @@ export const ClientRegistrationRoute: AppRouteObject = {
 export const toClientRegistration = (
   params: ClientRegistrationParams,
 ): Partial<Path> => ({
-  pathname: generatePath(ClientRegistrationRoute.path, params),
+  pathname: generateEncodedPath(ClientRegistrationRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/ClientRole.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ClientRoleTab =
@@ -28,5 +28,5 @@ export const ClientRoleRoute: AppRouteObject = {
 } satisfies AppRouteObject;
 
 export const toClientRole = (params: ClientRoleParams): Partial<Path> => ({
-  pathname: generatePath(ClientRoleRoute.path, params),
+  pathname: generateEncodedPath(ClientRoleRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/ClientScopeTab.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ClientScopesTab = "setup" | "evaluate";
@@ -25,5 +25,5 @@ export const ClientScopesRoute: AppRouteObject = {
 export const toClientScopesTab = (
   params: ClientScopesParams,
 ): Partial<Path> => ({
-  pathname: generatePath(ClientScopesRoute.path, params),
+  pathname: generateEncodedPath(ClientScopesRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/Clients.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ClientsTab =
@@ -33,6 +33,6 @@ export const toClients = (params: ClientsParams): Partial<Path> => {
   const path = params.tab ? ClientsRouteWithTab.path : ClientsRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/clients/routes/CreateInitialAccessToken.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type CreateInitialAccessTokenParams = { realm: string };
@@ -21,5 +21,5 @@ export const CreateInitialAccessTokenRoute: AppRouteObject = {
 export const toCreateInitialAccessToken = (
   params: CreateInitialAccessTokenParams,
 ): Partial<Path> => ({
-  pathname: generatePath(CreateInitialAccessTokenRoute.path, params),
+  pathname: generateEncodedPath(CreateInitialAccessTokenRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/DedicatedScopeDetails.tsx

@@ -1,7 +1,7 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
 import type { AppRouteObject } from "../../routes";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 
 export type DedicatedScopeTab = "mappers" | "scope";
 
@@ -35,6 +35,6 @@ export const toDedicatedScope = (
     : DedicatedScopeDetailsRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/clients/routes/ImportClient.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ImportClientParams = { realm: string };
@@ -17,5 +17,5 @@ export const ImportClientRoute: AppRouteObject = {
 };
 
 export const toImportClient = (params: ImportClientParams): Partial<Path> => ({
-  pathname: generatePath(ImportClientRoute.path, params),
+  pathname: generateEncodedPath(ImportClientRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/Mapper.tsx

@@ -1,7 +1,7 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
 import type { AppRouteObject } from "../../routes";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 
 export type MapperParams = {
   realm: string;
@@ -23,5 +23,5 @@ export const MapperRoute: AppRouteObject = {
 };
 
 export const toMapper = (params: MapperParams): Partial<Path> => ({
-  pathname: generatePath(MapperRoute.path, params),
+  pathname: generateEncodedPath(MapperRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/NewPermission.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type PermissionType = "resource" | "scope";
@@ -36,6 +36,6 @@ export const toNewPermission = (params: NewPermissionParams): Partial<Path> => {
     : NewPermissionRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/clients/routes/NewPolicy.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type NewPolicyParams = { realm: string; id: string; policyType: string };
@@ -19,5 +19,5 @@ export const NewPolicyRoute: AppRouteObject = {
 };
 
 export const toCreatePolicy = (params: NewPolicyParams): Partial<Path> => ({
-  pathname: generatePath(NewPolicyRoute.path, params),
+  pathname: generateEncodedPath(NewPolicyRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/NewResource.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type NewResourceParams = { realm: string; id: string };
@@ -17,5 +17,5 @@ export const NewResourceRoute: AppRouteObject = {
 };
 
 export const toCreateResource = (params: NewResourceParams): Partial<Path> => ({
-  pathname: generatePath(NewResourceRoute.path, params),
+  pathname: generateEncodedPath(NewResourceRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/NewRole.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type NewRoleParams = { realm: string; clientId: string };
@@ -17,5 +17,5 @@ export const NewRoleRoute: AppRouteObject = {
 };
 
 export const toCreateRole = (params: NewRoleParams): Partial<Path> => ({
-  pathname: generatePath(NewRoleRoute.path, params),
+  pathname: generateEncodedPath(NewRoleRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/NewScope.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type NewScopeParams = { realm: string; id: string };
@@ -17,5 +17,5 @@ export const NewScopeRoute: AppRouteObject = {
 };
 
 export const toNewScope = (params: NewScopeParams): Partial<Path> => ({
-  pathname: generatePath(NewScopeRoute.path, params),
+  pathname: generateEncodedPath(NewScopeRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/PermissionDetails.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 import type { PermissionType } from "./NewPermission";
 
@@ -27,5 +27,5 @@ export const PermissionDetailsRoute: AppRouteObject = {
 export const toPermissionDetails = (
   params: PermissionDetailsParams,
 ): Partial<Path> => ({
-  pathname: generatePath(PermissionDetailsRoute.path, params),
+  pathname: generateEncodedPath(PermissionDetailsRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/PolicyDetails.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type PolicyDetailsParams = {
@@ -26,5 +26,5 @@ export const PolicyDetailsRoute: AppRouteObject = {
 export const toPolicyDetails = (
   params: PolicyDetailsParams,
 ): Partial<Path> => ({
-  pathname: generatePath(PolicyDetailsRoute.path, params),
+  pathname: generateEncodedPath(PolicyDetailsRoute.path, params),
 });

js/apps/admin-ui/src/clients/routes/Resource.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ResourceDetailsParams = {
@@ -33,6 +33,6 @@ export const toResourceDetails = (
     : ResourceDetailsRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/clients/routes/Scope.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ScopeDetailsParams = {
@@ -31,6 +31,6 @@ export const toScopeDetails = (params: ScopeDetailsParams): Partial<Path> => {
     : ScopeDetailsRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/dashboard/routes/Dashboard.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type DashboardTab = "info" | "providers";
@@ -36,6 +36,6 @@ export const toDashboard = (params: DashboardParams): Partial<Path> => {
     : DashboardRoute.path;
 
   return {
-    pathname: generatePath(pathname, params),
+    pathname: generateEncodedPath(pathname, params),
   };
 };

js/apps/admin-ui/src/events/routes/Events.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type EventsTab = "user-events" | "admin-events";
@@ -30,6 +30,6 @@ export const toEvents = (params: EventsParams): Partial<Path> => {
   const path = params.tab ? EventsRouteWithTab.path : EventsRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/groups/routes/Groups.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type GroupsParams = { realm: string; id?: string; lazy?: string };
@@ -24,6 +24,6 @@ export const toGroups = (params: GroupsParams): Partial<Path> => {
   const path = params.id ? GroupsWithIdRoute.path : GroupsRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/identity-providers/routes/AddMapper.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type IdentityProviderAddMapperParams = {
@@ -24,5 +24,5 @@ export const IdentityProviderAddMapperRoute: AppRouteObject = {
 export const toIdentityProviderAddMapper = (
   params: IdentityProviderAddMapperParams,
 ): Partial<Path> => ({
-  pathname: generatePath(IdentityProviderAddMapperRoute.path, params),
+  pathname: generateEncodedPath(IdentityProviderAddMapperRoute.path, params),
 });

js/apps/admin-ui/src/identity-providers/routes/EditMapper.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type IdentityProviderEditMapperParams = {
@@ -24,5 +24,5 @@ export const IdentityProviderEditMapperRoute: AppRouteObject = {
 export const toIdentityProviderEditMapper = (
   params: IdentityProviderEditMapperParams,
 ): Partial<Path> => ({
-  pathname: generatePath(IdentityProviderEditMapperRoute.path, params),
+  pathname: generateEncodedPath(IdentityProviderEditMapperRoute.path, params),
 });

js/apps/admin-ui/src/identity-providers/routes/IdentityProvider.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type IdentityProviderTab = "settings" | "mappers" | "permissions";
@@ -26,5 +26,5 @@ export const IdentityProviderRoute: AppRouteObject = {
 export const toIdentityProvider = (
   params: IdentityProviderParams,
 ): Partial<Path> => ({
-  pathname: generatePath(IdentityProviderRoute.path, params),
+  pathname: generateEncodedPath(IdentityProviderRoute.path, params),
 });

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderCreate.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type IdentityProviderCreateParams = {
@@ -22,5 +22,5 @@ export const IdentityProviderCreateRoute: AppRouteObject = {
 export const toIdentityProviderCreate = (
   params: IdentityProviderCreateParams,
 ): Partial<Path> => ({
-  pathname: generatePath(IdentityProviderCreateRoute.path, params),
+  pathname: generateEncodedPath(IdentityProviderCreateRoute.path, params),
 });

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderKeycloakOidc.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type IdentityProviderKeycloakOidcParams = { realm: string };
@@ -19,5 +19,5 @@ export const IdentityProviderKeycloakOidcRoute: AppRouteObject = {
 export const toIdentityProviderKeycloakOidc = (
   params: IdentityProviderKeycloakOidcParams,
 ): Partial<Path> => ({
-  pathname: generatePath(IdentityProviderKeycloakOidcRoute.path, params),
+  pathname: generateEncodedPath(IdentityProviderKeycloakOidcRoute.path, params),
 });

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderOidc.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type IdentityProviderOidcParams = { realm: string };
@@ -19,5 +19,5 @@ export const IdentityProviderOidcRoute: AppRouteObject = {
 export const toIdentityProviderOidc = (
   params: IdentityProviderOidcParams,
 ): Partial<Path> => ({
-  pathname: generatePath(IdentityProviderOidcRoute.path, params),
+  pathname: generateEncodedPath(IdentityProviderOidcRoute.path, params),
 });

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderSaml.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type IdentityProviderSamlParams = { realm: string };
@@ -19,5 +19,5 @@ export const IdentityProviderSamlRoute: AppRouteObject = {
 export const toIdentityProviderSaml = (
   params: IdentityProviderSamlParams,
 ): Partial<Path> => ({
-  pathname: generatePath(IdentityProviderSamlRoute.path, params),
+  pathname: generateEncodedPath(IdentityProviderSamlRoute.path, params),
 });

js/apps/admin-ui/src/identity-providers/routes/IdentityProviders.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type IdentityProvidersParams = { realm: string };
@@ -21,5 +21,5 @@ export const IdentityProvidersRoute: AppRouteObject = {
 export const toIdentityProviders = (
   params: IdentityProvidersParams,
 ): Partial<Path> => ({
-  pathname: generatePath(IdentityProvidersRoute.path, params),
+  pathname: generateEncodedPath(IdentityProvidersRoute.path, params),
 });

js/apps/admin-ui/src/realm-roles/routes/AddRole.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type AddRoleParams = { realm: string };
@@ -17,5 +17,5 @@ export const AddRoleRoute: AppRouteObject = {
 };
 
 export const toAddRole = (params: AddRoleParams): Partial<Path> => ({
-  pathname: generatePath(AddRoleRoute.path, params),
+  pathname: generateEncodedPath(AddRoleRoute.path, params),
 });

js/apps/admin-ui/src/realm-roles/routes/RealmRole.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 
 import type { AppRouteObject } from "../../routes";
 
@@ -29,5 +29,5 @@ export const RealmRoleRoute: AppRouteObject = {
 };
 
 export const toRealmRole = (params: RealmRoleParams): Partial<Path> => ({
-  pathname: generatePath(RealmRoleRoute.path, params),
+  pathname: generateEncodedPath(RealmRoleRoute.path, params),
 });

js/apps/admin-ui/src/realm-roles/routes/RealmRoles.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type RealmRolesParams = { realm: string };
@@ -17,5 +17,5 @@ export const RealmRolesRoute: AppRouteObject = {
 };
 
 export const toRealmRoles = (params: RealmRolesParams): Partial<Path> => ({
-  pathname: generatePath(RealmRolesRoute.path, params),
+  pathname: generateEncodedPath(RealmRolesRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/AddAttribute.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type AddAttributeParams = {
@@ -19,5 +19,5 @@ export const AddAttributeRoute: AppRouteObject = {
 };
 
 export const toAddAttribute = (params: AddAttributeParams): Partial<Path> => ({
-  pathname: generatePath(AddAttributeRoute.path, params),
+  pathname: generateEncodedPath(AddAttributeRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/AddClientPolicy.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type AddClientPolicyParams = { realm: string };
@@ -19,5 +19,5 @@ export const AddClientPolicyRoute: AppRouteObject = {
 export const toAddClientPolicy = (
   params: AddClientPolicyParams,
 ): Partial<Path> => ({
-  pathname: generatePath(AddClientPolicyRoute.path, params),
+  pathname: generateEncodedPath(AddClientPolicyRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/AddClientProfile.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type AddClientProfileParams = {
@@ -22,5 +22,5 @@ export const AddClientProfileRoute: AppRouteObject = {
 export const toAddClientProfile = (
   params: AddClientProfileParams,
 ): Partial<Path> => ({
-  pathname: generatePath(AddClientProfileRoute.path, params),
+  pathname: generateEncodedPath(AddClientProfileRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/AddCondition.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type NewClientPolicyConditionParams = {
@@ -24,5 +24,5 @@ export const NewClientPolicyConditionRoute: AppRouteObject = {
 export const toNewClientPolicyCondition = (
   params: NewClientPolicyConditionParams,
 ): Partial<Path> => ({
-  pathname: generatePath(NewClientPolicyConditionRoute.path, params),
+  pathname: generateEncodedPath(NewClientPolicyConditionRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/AddExecutor.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type AddExecutorParams = {
@@ -20,5 +20,5 @@ export const AddExecutorRoute: AppRouteObject = {
 };
 
 export const toAddExecutor = (params: AddExecutorParams): Partial<Path> => ({
-  pathname: generatePath(AddExecutorRoute.path, params),
+  pathname: generateEncodedPath(AddExecutorRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/Attribute.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type AttributeParams = {
@@ -20,5 +20,5 @@ export const AttributeRoute: AppRouteObject = {
 };
 
 export const toAttribute = (params: AttributeParams): Partial<Path> => ({
-  pathname: generatePath(AttributeRoute.path, params),
+  pathname: generateEncodedPath(AttributeRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/ClientPolicies.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ClientPoliciesTab = "profiles" | "policies";
@@ -24,5 +24,5 @@ export const ClientPoliciesRoute: AppRouteObject = {
 export const toClientPolicies = (
   params: ClientPoliciesParams,
 ): Partial<Path> => ({
-  pathname: generatePath(ClientPoliciesRoute.path, params),
+  pathname: generateEncodedPath(ClientPoliciesRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/ClientProfile.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ClientProfileParams = {
@@ -22,5 +22,5 @@ export const ClientProfileRoute: AppRouteObject = {
 export const toClientProfile = (
   params: ClientProfileParams,
 ): Partial<Path> => ({
-  pathname: generatePath(ClientProfileRoute.path, params),
+  pathname: generateEncodedPath(ClientProfileRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/EditAttributesGroup.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type EditAttributesGroupParams = {
@@ -24,5 +24,5 @@ export const EditAttributesGroupRoute: AppRouteObject = {
 export const toEditAttributesGroup = (
   params: EditAttributesGroupParams,
 ): Partial<Path> => ({
-  pathname: generatePath(EditAttributesGroupRoute.path, params),
+  pathname: generateEncodedPath(EditAttributesGroupRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/EditClientPolicy.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type EditClientPolicyParams = {
@@ -22,5 +22,5 @@ export const EditClientPolicyRoute: AppRouteObject = {
 export const toEditClientPolicy = (
   params: EditClientPolicyParams,
 ): Partial<Path> => ({
-  pathname: generatePath(EditClientPolicyRoute.path, params),
+  pathname: generateEncodedPath(EditClientPolicyRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/EditCondition.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type EditClientPolicyConditionParams = {
@@ -25,5 +25,5 @@ export const EditClientPolicyConditionRoute: AppRouteObject = {
 export const toEditClientPolicyCondition = (
   params: EditClientPolicyConditionParams,
 ): Partial<Path> => ({
-  pathname: generatePath(EditClientPolicyConditionRoute.path, params),
+  pathname: generateEncodedPath(EditClientPolicyConditionRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/Executor.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ExecutorParams = {
@@ -21,5 +21,5 @@ export const ExecutorRoute: AppRouteObject = {
 };
 
 export const toExecutor = (params: ExecutorParams): Partial<Path> => ({
-  pathname: generatePath(ExecutorRoute.path, params),
+  pathname: generateEncodedPath(ExecutorRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/KeyProvider.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type ProviderType =
@@ -33,5 +33,5 @@ export const KeyProviderFormRoute: AppRouteObject = {
 };
 
 export const toKeyProvider = (params: KeyProviderParams): Partial<Path> => ({
-  pathname: generatePath(KeyProviderFormRoute.path, params),
+  pathname: generateEncodedPath(KeyProviderFormRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/KeysTab.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type KeySubTab = "list" | "providers";
@@ -22,5 +22,5 @@ export const KeysRoute: AppRouteObject = {
 };
 
 export const toKeysTab = (params: KeysParams): Partial<Path> => ({
-  pathname: generatePath(KeysRoute.path, params),
+  pathname: generateEncodedPath(KeysRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/NewAttributesGroup.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type NewAttributesGroupParams = {
@@ -23,5 +23,5 @@ export const NewAttributesGroupRoute: AppRouteObject = {
 export const toNewAttributesGroup = (
   params: NewAttributesGroupParams,
 ): Partial<Path> => ({
-  pathname: generatePath(NewAttributesGroupRoute.path, params),
+  pathname: generateEncodedPath(NewAttributesGroupRoute.path, params),
 });

js/apps/admin-ui/src/realm-settings/routes/RealmSettings.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type RealmSettingsTab =
@@ -45,6 +45,6 @@ export const toRealmSettings = (params: RealmSettingsParams): Partial<Path> => {
     : RealmSettingsRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/realm-settings/routes/UserProfile.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type UserProfileTab = "attributes" | "attributes-group" | "json-editor";
@@ -22,5 +22,5 @@ export const UserProfileRoute: AppRouteObject = {
 };
 
 export const toUserProfile = (params: UserProfileParams): Partial<Path> => ({
-  pathname: generatePath(UserProfileRoute.path, params),
+  pathname: generateEncodedPath(UserProfileRoute.path, params),
 });

js/apps/admin-ui/src/realm/routes/AddRealm.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type AddRealmParams = { realm: string };
@@ -17,5 +17,5 @@ export const AddRealmRoute: AppRouteObject = {
 };
 
 export const toAddRealm = (params: AddRealmParams): Partial<Path> => ({
-  pathname: generatePath(AddRealmRoute.path, params),
+  pathname: generateEncodedPath(AddRealmRoute.path, params),
 });

js/apps/admin-ui/src/sessions/routes/Sessions.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type SessionsParams = { realm: string };
@@ -17,5 +17,5 @@ export const SessionsRoute: AppRouteObject = {
 };
 
 export const toSessions = (params: SessionsParams): Partial<Path> => ({
-  pathname: generatePath(SessionsRoute.path, params),
+  pathname: generateEncodedPath(SessionsRoute.path, params),
 });

js/apps/admin-ui/src/user-federation/routes/CustomUserFederation.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 
 import type { AppRouteObject } from "../../routes";
 
@@ -26,5 +26,5 @@ export const CustomUserFederationRoute: AppRouteObject = {
 export const toCustomUserFederation = (
   params: CustomUserFederationRouteParams,
 ): Partial<Path> => ({
-  pathname: generatePath(CustomUserFederationRoute.path, params),
+  pathname: generateEncodedPath(CustomUserFederationRoute.path, params),
 });

js/apps/admin-ui/src/user-federation/routes/NewCustomUserFederation.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 
 import type { AppRouteObject } from "../../routes";
 
@@ -25,5 +25,5 @@ export const NewCustomUserFederationRoute: AppRouteObject = {
 export const toNewCustomUserFederation = (
   params: NewCustomUserFederationRouteParams,
 ): Partial<Path> => ({
-  pathname: generatePath(NewCustomUserFederationRoute.path, params),
+  pathname: generateEncodedPath(NewCustomUserFederationRoute.path, params),
 });

js/apps/admin-ui/src/user-federation/routes/NewKerberosUserFederation.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type NewKerberosUserFederationParams = { realm: string };
@@ -21,5 +21,5 @@ export const NewKerberosUserFederationRoute: AppRouteObject = {
 export const toNewKerberosUserFederation = (
   params: NewKerberosUserFederationParams,
 ): Partial<Path> => ({
-  pathname: generatePath(NewKerberosUserFederationRoute.path, params),
+  pathname: generateEncodedPath(NewKerberosUserFederationRoute.path, params),
 });

js/apps/admin-ui/src/user-federation/routes/NewLdapUserFederation.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type NewLdapUserFederationParams = { realm: string };
@@ -21,5 +21,5 @@ export const NewLdapUserFederationRoute: AppRouteObject = {
 export const toNewLdapUserFederation = (
   params: NewLdapUserFederationParams,
 ): Partial<Path> => ({
-  pathname: generatePath(NewLdapUserFederationRoute.path, params),
+  pathname: generateEncodedPath(NewLdapUserFederationRoute.path, params),
 });

js/apps/admin-ui/src/user-federation/routes/UserFederation.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type UserFederationParams = { realm: string };
@@ -19,5 +19,5 @@ export const UserFederationRoute: AppRouteObject = {
 export const toUserFederation = (
   params: UserFederationParams,
 ): Partial<Path> => ({
-  pathname: generatePath(UserFederationRoute.path, params),
+  pathname: generateEncodedPath(UserFederationRoute.path, params),
 });

js/apps/admin-ui/src/user-federation/routes/UserFederationKerberos.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type UserFederationKerberosParams = {
@@ -24,5 +24,5 @@ export const UserFederationKerberosRoute: AppRouteObject = {
 export const toUserFederationKerberos = (
   params: UserFederationKerberosParams,
 ): Partial<Path> => ({
-  pathname: generatePath(UserFederationKerberosRoute.path, params),
+  pathname: generateEncodedPath(UserFederationKerberosRoute.path, params),
 });

js/apps/admin-ui/src/user-federation/routes/UserFederationLdap.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type UserFederationLdapTab = "settings" | "mappers";
@@ -37,6 +37,6 @@ export const toUserFederationLdap = (
     : UserFederationLdapRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/user-federation/routes/UserFederationLdapMapper.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type UserFederationLdapMapperParams = {
@@ -25,5 +25,5 @@ export const UserFederationLdapMapperRoute: AppRouteObject = {
 export const toUserFederationLdapMapper = (
   params: UserFederationLdapMapperParams,
 ): Partial<Path> => ({
-  pathname: generatePath(UserFederationLdapMapperRoute.path, params),
+  pathname: generateEncodedPath(UserFederationLdapMapperRoute.path, params),
 });

js/apps/admin-ui/src/user-federation/routes/UserFederationsKerberos.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type UserFederationsKerberosParams = { realm: string };
@@ -18,5 +18,5 @@ export const UserFederationsKerberosRoute: AppRouteObject = {
 export const toUserFederationsKerberos = (
   params: UserFederationsKerberosParams,
 ): Partial<Path> => ({
-  pathname: generatePath(UserFederationsKerberosRoute.path, params),
+  pathname: generateEncodedPath(UserFederationsKerberosRoute.path, params),
 });

js/apps/admin-ui/src/user-federation/routes/UserFederationsLdap.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type UserFederationsLdapParams = { realm: string };
@@ -18,5 +18,5 @@ export const UserFederationsLdapRoute: AppRouteObject = {
 export const toUserFederationsLdap = (
   params: UserFederationsLdapParams,
 ): Partial<Path> => ({
-  pathname: generatePath(UserFederationsLdapRoute.path, params),
+  pathname: generateEncodedPath(UserFederationsLdapRoute.path, params),
 });

js/apps/admin-ui/src/user/routes/AddUser.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 
 import type { AppRouteObject } from "../../routes";
 
@@ -18,5 +18,5 @@ export const AddUserRoute: AppRouteObject = {
 };
 
 export const toAddUser = (params: AddUserParams): Partial<Path> => ({
-  pathname: generatePath(AddUserRoute.path, params),
+  pathname: generateEncodedPath(AddUserRoute.path, params),
 });

js/apps/admin-ui/src/user/routes/User.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import type { Path } from "react-router-dom";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { AppRouteObject } from "../../routes";
 
 export type UserTab =
@@ -31,5 +31,5 @@ export const UserRoute: AppRouteObject = {
 };
 
 export const toUser = (params: UserParams): Partial<Path> => ({
-  pathname: generatePath(UserRoute.path, params),
+  pathname: generateEncodedPath(UserRoute.path, params),
 });

js/apps/admin-ui/src/user/routes/Users.tsx

@@ -1,5 +1,5 @@
 import { lazy } from "react";
-import { generatePath } from "react-router-dom";
+import { generateEncodedPath } from "../../utils/generateEncodedPath";
 import type { Path } from "react-router-dom";
 import type { AppRouteObject } from "../../routes";
 
@@ -27,6 +27,6 @@ export const toUsers = (params: UsersParams): Partial<Path> => {
   const path = params.tab ? UsersRouteWithTab.path : UsersRoute.path;
 
   return {
-    pathname: generatePath(path, params),
+    pathname: generateEncodedPath(path, params),
   };
 };

js/apps/admin-ui/src/util.ts

@@ -2,7 +2,6 @@ import { saveAs } from "file-saver";
 import { cloneDeep } from "lodash-es";
 import { FieldValues, Path, PathValue, UseFormSetValue } from "react-hook-form";
 import { flatten } from "flat";
-
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 import type { ProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/serverInfoRepesentation";
 import type { IFormatter, IFormatterValueType } from "@patternfly/react-table";

js/apps/admin-ui/src/utils/generateEncodedPath.ts

@@ -0,0 +1,17 @@
+import { generatePath } from "react-router-dom";
+
+export type PathParam = { [key: string]: string };
+
+export function generateEncodedPath<Path extends string>(
+  originalPath: Path,
+  params: PathParam,
+): string {
+  const encodedParams: PathParam = {};
+
+  Object.entries(params).forEach(
+    ([k, v]) => (encodedParams[k] = encodeURIComponent(v)),
+  );
+
+  //TODO: Fix type once https://github.com/remix-run/react-router/pull/10719 is merged.
+  return generatePath(originalPath, encodedParams as any);
+}