Convert more links to use new routes (#933)

* Convert more links to use new routes

* convert server info dropdown

* Fix link with render prop

src/PageHeader.tsx

@@ -14,13 +14,16 @@ import {
 import { HelpIcon } from "@patternfly/react-icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { HelpHeader, useHelp } from "./components/help-enabler/HelpHeader";
 import { useAdminClient } from "./context/auth/AdminClient";
+import { useRealm } from "./context/realm-context/RealmContext";
 import { useWhoAmI } from "./context/whoami/WhoAmI";
+import { toDashboard } from "./dashboard/routes/Dashboard";
 import environment from "./environment";
 
 export const Header = () => {
+  const { realm } = useRealm();
   const adminClient = useAdminClient();
   const { t } = useTranslation();
 
@@ -57,14 +60,15 @@ export const Header = () => {
   };
 
   const ServerInfoDropdownItem = () => {
+    const { realm } = useRealm();
     const { t } = useTranslation();
-    const history = useHistory();
+
     return (
       <DropdownItem
         key="server info"
-        onClick={() => {
+        component={Link}
-          history.push("/master/");
+        // @ts-ignore
-        }}
+        to={toDashboard({ realm })}
       >
         {t("realmInfo")}
       </DropdownItem>
@@ -182,7 +186,7 @@ export const Header = () => {
     <PageHeader
       showNavToggle
       logo={
-        <Link to="/">
+        <Link to={toDashboard({ realm })}>
           <Brand
             src={environment.resourceUrl + "/logo.svg"}
             id="masthead-logo"

src/client-scopes/ClientScopesSection.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useRouteMatch } from "react-router-dom";
+import { Link } from "react-router-dom";
 import {
   AlertVariant,
   Button,
@@ -32,11 +32,11 @@ import { ChangeTypeDialog } from "./ChangeTypeDialog";
 import { toNewClientScope } from "./routes/NewClientScope";
 
 import "./client-scope.css";
+import { toClientScope } from "./routes/ClientScope";
 
 export const ClientScopesSection = () => {
   const { realm } = useRealm();
   const { t } = useTranslation("client-scopes");
-  const { url } = useRouteMatch();
 
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -124,15 +124,17 @@ export const ClientScopesSection = () => {
     </>
   );
 
-  const ClientScopeDetailLink = (
+  const ClientScopeDetailLink = ({
-    clientScope: ClientScopeDefaultOptionalType
+    id,
-  ) => (
+    type,
+    name,
+  }: ClientScopeDefaultOptionalType) => (
     <>
       <Link
-        key={clientScope.id}
+        key={id}
-        to={`${url}/${clientScope.id}/${clientScope.type}/settings`}
+        to={toClientScope({ realm, id: id!, type, tab: "settings" })}
       >
-        {clientScope.name}
+        {name}
       </Link>
     </>
   );

src/client-scopes/details/MapperList.tsx

@@ -20,6 +20,7 @@ import { AddMapperDialog } from "../add/MapperDialog";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
 import { useRealm } from "../../context/realm-context/RealmContext";
+import { toMapper } from "../routes/Mapper";
 
 type MapperListProps = {
   clientScope: ClientScopeRepresentation;
@@ -97,9 +98,11 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
         .sort((a, b) => a.priority - b.priority)
     );
 
-  const MapperLink = (mapper: Row) => (
+  const MapperLink = ({ id, name }: Row) => (
     <>
-      <Link to={`${url}/${mapper.id}`}>{mapper.name}</Link>
+      <Link to={toMapper({ realm, id: clientScope.id!, mapperId: id! })}>
+        {name}
+      </Link>
     </>
   );
 

src/client-scopes/routes/ClientScope.ts

@@ -3,11 +3,13 @@ import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 import { ClientScopeForm } from "../form/ClientScopeForm";
 
+export type ClientScopeTab = "settings" | "mappers" | "scope";
+
 export type ClientScopeParams = {
   realm: string;
   id: string;
   type: string;
-  tab: string;
+  tab: ClientScopeTab;
 };
 
 export const ClientScopeRoute: RouteDef = {

src/events/EventsSection.tsx

@@ -23,6 +23,8 @@ import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
+import { toRealmSettings } from "../realm-settings/routes/RealmSettings";
+import { toUser } from "../user/routes/User";
 import { AdminEvents } from "./AdminEvents";
 import "./events-section.css";
 
@@ -78,7 +80,7 @@ export const EventsSection = () => {
     <>
       <Link
         key={`link-${event.time}-${event.type}`}
-        to={`/${realm}/users/${event.userId}/details`}
+        to={toUser({ realm, id: event.userId!, tab: "settings" })}
       >
         {event.userId}
       </Link>
@@ -108,7 +110,7 @@ export const EventsSection = () => {
           <Trans i18nKey="events:eventExplain">
             If you want to configure user events, Admin events or Event
             listeners, please enter
-            <Link to={`/${realm}/realm-settings/events`}>
+            <Link to={toRealmSettings({ realm, tab: "events" })}>
               {t("eventConfig")}
             </Link>
             page realm settings to configure.

src/groups/Members.tsx

@@ -25,6 +25,7 @@ import { useSubGroups } from "./SubGroupsContext";
 import { MemberModal } from "./MembersModal";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { GroupPath } from "../components/group/GroupPath";
+import { toUser } from "../user/routes/User";
 
 type MembersOf = UserRepresentation & {
   membership: GroupRepresentation[];
@@ -99,7 +100,7 @@ export const Members = () => {
 
   const UserDetailLink = (user: MembersOf) => (
     <>
-      <Link key={user.id} to={`/${realm}/users/${user.id}/settings`}>
+      <Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
         {user.username}
       </Link>
     </>

src/realm-roles/RolesList.tsx

@@ -15,6 +15,7 @@ import type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentatio
 import { HelpItem } from "../components/help-enabler/HelpItem";
 
 import "./RealmRolesSection.css";
+import { toRealmRole } from "./routes/RealmRole";
 
 type myRealmRepresentation = RealmRepresentation & {
   defaultRole?: {
@@ -39,9 +40,10 @@ type RoleLinkProps = {
 };
 
 const RoleLink: FunctionComponent<RoleLinkProps> = ({ children, role }) => {
-  const { url } = useRouteMatch();
+  const { realm } = useRealm();
+
   return (
-    <Link key={role.id} to={`${url}/${role.id}/details`}>
+    <Link key={role.id} to={toRealmRole({ realm, id: role.id! })}>
       {children}
     </Link>
   );

src/realm-roles/routes/RealmRole.ts

@@ -3,10 +3,16 @@ import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 import { RealmRoleTabs } from "../RealmRoleTabs";
 
+export type RealmRoleTab =
+  | "details"
+  | "AssociatedRoles"
+  | "attributes"
+  | "users-in-role";
+
 export type RealmRoleParams = {
   realm: string;
   id: string;
-  tab?: string;
+  tab?: RealmRoleTab;
 };
 
 export const RealmRoleRoute: RouteDef = {

src/realm-settings/RealmSettingsSection.tsx

@@ -16,7 +16,7 @@ import type UserRepresentation from "keycloak-admin/lib/defs/userRepresentation"
 import React, { useEffect, useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
@@ -34,6 +34,7 @@ import { KeysListTab } from "./KeysListTab";
 import { KeysProvidersTab } from "./KeysProvidersTab";
 import { RealmSettingsLoginTab } from "./LoginTab";
 import { PartialImportDialog } from "./PartialImport";
+import { toRealmSettings } from "./routes/RealmSettings";
 import { SecurityDefences } from "./security-defences/SecurityDefences";
 import { RealmSettingsSessionsTab } from "./SessionsTab";
 import { RealmSettingsThemesTab } from "./ThemesTab";
@@ -53,9 +54,13 @@ export const EditProviderCrumb = () => {
   return (
     <>
       <Breadcrumb>
-        <BreadcrumbItem to={`#/${realm}/realm-settings/keys`}>
+        <BreadcrumbItem
-          {t("keys")}
+          render={(props) => (
-        </BreadcrumbItem>
+            <Link {...props} to={toRealmSettings({ realm, tab: "keys" })}>
+              {t("keys")}
+            </Link>
+          )}
+        />
         <BreadcrumbItem>{t("providers")}</BreadcrumbItem>
         <BreadcrumbItem isActive>{t("editProvider")}</BreadcrumbItem>
       </Breadcrumb>

src/user/UsersSection.tsx

@@ -24,6 +24,7 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { emptyFormatter } from "../util";
+import { toUser } from "./routes/User";
 import { SearchUser } from "./SearchUser";
 import "./user-section.css";
 
@@ -68,7 +69,10 @@ export const UsersSection = () => {
 
   const UserDetailLink = (user: UserRepresentation) => (
     <>
-      <Link key={user.username} to={`${url}/${user.id}/settings`}>
+      <Link
+        key={user.username}
+        to={toUser({ realm: realmName, id: user.id!, tab: "settings" })}
+      >
         {user.username}
       </Link>
     </>

src/user/routes/User.ts

@@ -8,7 +8,7 @@ export type UserTab = "settings" | "groups" | "consents";
 export type UserParams = {
   realm: string;
   id: string;
-  tab: string;
+  tab: UserTab;
 };
 
 export const UserRoute: RouteDef = {