Link to RealmRoleRoute using a static path (#1129)

src/realm-roles/RolesList.tsx

@@ -13,6 +13,8 @@ import { emptyFormatter, upperCaseFormatter } from "../util";
 import { useRealm } from "../context/realm-context/RealmContext";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { ClientParams, ClientRoute } from "../clients/routes/Client";
+import { toClientRole } from "./routes/ClientRole";
 import { toRealmRole } from "./routes/RealmRole";
 
 import "./RealmRolesSection.css";
@@ -41,9 +43,13 @@ type RoleLinkProps = {
 
 const RoleLink: FunctionComponent<RoleLinkProps> = ({ children, role }) => {
   const { realm } = useRealm();
+  const clientRouteMatch = useRouteMatch<ClientParams>(ClientRoute.path);
+  const to = clientRouteMatch
+    ? toClientRole({ ...clientRouteMatch.params, id: role.id!, tab: "details" })
+    : toRealmRole({ realm, id: role.id! });
 
   return (
-    <Link key={role.id} to={toRealmRole({ realm, id: role.id! })}>
+    <Link key={role.id} to={to}>
       {children}
     </Link>
   );

src/realm-roles/routes/ClientRole.ts

@@ -3,11 +3,13 @@ import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 import { RealmRoleTabs } from "../RealmRoleTabs";
 
+export type ClientRoleTab = "details" | "attributes" | "users-in-role";
+
 export type ClientRoleParams = {
   realm: string;
   clientId: string;
   id: string;
-  tab?: string;
+  tab?: ClientRoleTab;
 };
 
 export const ClientRoleRoute: RouteDef = {

src/realm-roles/routes/RealmRole.ts

@@ -1,5 +1,5 @@
 import type { LocationDescriptorObject } from "history";
-import { useRouteMatch } from "react-router-dom";
+import { generatePath } from "react-router";
 import type { RouteDef } from "../../route-config";
 import { RealmRoleTabs } from "../RealmRoleTabs";
 
@@ -24,9 +24,6 @@ export const RealmRoleRoute: RouteDef = {
 
 export const toRealmRole = (
   params: RealmRoleParams
-): LocationDescriptorObject => {
-  const { url } = useRouteMatch();
-  return {
-    pathname: `${url}/${params.id}/details`,
-  };
-};
+): LocationDescriptorObject => ({
+  pathname: generatePath(RealmRoleRoute.path, params),
+});