Refactor LDAP mapper to React Router v6 (#4192)

apps/admin-ui/src/user-federation/UserFederationLdapSettings.tsx

@@ -24,6 +24,7 @@ import {
   UserFederationLdapParams,
   UserFederationLdapTab,
 } from "./routes/UserFederationLdap";
+import { toUserFederationLdapMapper } from "./routes/UserFederationLdapMapper";
 import { ExtendedHeader } from "./shared/ExtendedHeader";
 import {
   LdapComponentRepresentation,
@@ -124,7 +125,20 @@ export default function UserFederationLdapSettings() {
             data-testid="ldap-mappers-tab"
             {...mappersTab}
           >
-            <LdapMapperList />
+            <LdapMapperList
+              toCreate={toUserFederationLdapMapper({
+                realm,
+                id: id!,
+                mapperId: "new",
+              })}
+              toDetail={(mapperId) =>
+                toUserFederationLdapMapper({
+                  realm,
+                  id: id!,
+                  mapperId,
+                })
+              }
+            />
           </Tab>
         </RoutableTabs>
       </PageSection>

apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperDetails.tsx

@@ -33,6 +33,7 @@ import { useRealm } from "../../../context/realm-context/RealmContext";
 import { convertFormValuesToObject, convertToFormValues } from "../../../util";
 import { useParams } from "../../../utils/useParams";
 import { toUserFederationLdap } from "../../routes/UserFederationLdap";
+import { UserFederationLdapMapperParams } from "../../routes/UserFederationLdapMapper";
 
 export default function LdapMapperDetails() {
   const form = useForm<ComponentRepresentation>();
@@ -40,7 +41,7 @@ export default function LdapMapperDetails() {
   const [components, setComponents] = useState<ComponentTypeRepresentation[]>();
 
   const { adminClient } = useAdminClient();
-  const { id, mapperId } = useParams<{ id: string; mapperId: string }>();
+  const { id, mapperId } = useParams<UserFederationLdapMapperParams>();
   const navigate = useNavigate();
   const { realm } = useRealm();
   const { t } = useTranslation("user-federation");

apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperList.tsx

@@ -1,28 +1,31 @@
-import { useState } from "react";
-import { useRouteMatch } from "react-router-dom";
-import { useParams, Link, useNavigate } from "react-router-dom-v5-compat";
-import { useTranslation } from "react-i18next";
+import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
 import {
   AlertVariant,
   Button,
   ButtonVariant,
   ToolbarItem,
 } from "@patternfly/react-core";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, To, useNavigate, useParams } from "react-router-dom-v5-compat";
 
-import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
-import { KeycloakDataTable } from "../../../components/table-toolbar/KeycloakDataTable";
-import { ListEmptyState } from "../../../components/list-empty-state/ListEmptyState";
 import { useAlerts } from "../../../components/alert/Alerts";
-import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
 import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDialog";
+import { ListEmptyState } from "../../../components/list-empty-state/ListEmptyState";
+import { KeycloakDataTable } from "../../../components/table-toolbar/KeycloakDataTable";
+import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
 import useLocaleSort, { mapByKey } from "../../../utils/useLocaleSort";
 
-export const LdapMapperList = () => {
+export type LdapMapperListProps = {
+  toCreate: To;
+  toDetail: (mapperId: string) => To;
+};
+
+export const LdapMapperList = ({ toCreate, toDetail }: LdapMapperListProps) => {
   const navigate = useNavigate();
   const { t } = useTranslation("user-federation");
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
-  const { url } = useRouteMatch();
   const [key, setKey] = useState(0);
   const refresh = () => setKey(key + 1);
 
@@ -74,15 +77,8 @@ export const LdapMapperList = () => {
     },
   });
 
-  const getUrl = (url: string) => {
-    if (!url.includes("/mappers")) {
-      return `${url}/mappers`;
-    }
-    return `${url}`;
-  };
-
   const MapperLink = (mapper: ComponentRepresentation) => (
-    <Link to={`${getUrl(url)}/${mapper.id}`}>{mapper.name}</Link>
+    <Link to={toDetail(mapper.id!)}>{mapper.name}</Link>
   );
 
   return (
@@ -98,7 +94,7 @@ export const LdapMapperList = () => {
             <Button
               data-testid="add-mapper-btn"
               variant="primary"
-              onClick={() => navigate(`${url}/new`)}
+              component={(props) => <Link {...props} to={toCreate} />}
             >
               {t("common:addMapper")}
             </Button>
@@ -127,7 +123,7 @@ export const LdapMapperList = () => {
             message={t("common:emptyMappers")}
             instructions={t("common:emptyMappersInstructions")}
             primaryActionText={t("common:emptyPrimaryAction")}
-            onPrimaryAction={() => navigate(`${url}/new`)}
+            onPrimaryAction={() => navigate(toCreate)}
           />
         }
       />

apps/admin-ui/src/user-federation/routes/UserFederationLdapMapper.ts

@@ -6,12 +6,11 @@ import type { RouteDef } from "../../route-config";
 export type UserFederationLdapMapperParams = {
   realm: string;
   id: string;
-  tab: string;
   mapperId: string;
 };
 
 export const UserFederationLdapMapperRoute: RouteDef = {
-  path: "/:realm/user-federation/ldap/:id/:tab/:mapperId",
+  path: "/:realm/user-federation/ldap/:id/mappers/:mapperId",
   component: lazy(() => import("../ldap/mappers/LdapMapperDetails")),
   breadcrumb: (t) => t("common:mappingDetails"),
   access: "view-realm",