Refactor realms & client roles to React Router v6 (#4184)

This commit is contained in:
Jon Koops 2023-01-14 14:24:06 +01:00 committed by GitHub
parent 97b69950c7
commit fe4c3dc151
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 8 deletions

View file

@ -17,11 +17,11 @@ export type ClientRoleParams = {
}; };
export const ClientRoleRoute: RouteDef = { export const ClientRoleRoute: RouteDef = {
path: "/:realm/clients/:clientId/roles/:id/:tab", path: "/:realm/clients/:clientId/roles/:id/:tab" as const,
component: lazy(() => import("../../realm-roles/RealmRoleTabs")), component: lazy(() => import("../../realm-roles/RealmRoleTabs")),
breadcrumb: (t) => t("roles:roleDetails"), breadcrumb: (t) => t("roles:roleDetails"),
access: "view-realm", access: "view-realm",
}; } satisfies RouteDef;
export const toClientRole = (params: ClientRoleParams): Partial<Path> => ({ export const toClientRole = (params: ClientRoleParams): Partial<Path> => ({
pathname: generatePath(ClientRoleRoute.path, params), pathname: generatePath(ClientRoleRoute.path, params),

View file

@ -13,7 +13,7 @@ import { useState } from "react";
import { SubmitHandler, useForm } from "react-hook-form"; import { SubmitHandler, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useRouteMatch } from "react-router-dom"; import { useRouteMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat"; import { useLocation, useMatch, useNavigate } from "react-router-dom-v5-compat";
import { toClient } from "../clients/routes/Client"; import { toClient } from "../clients/routes/Client";
import { import {
@ -42,7 +42,7 @@ import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import { useRealm } from "../context/realm-context/RealmContext"; import { useRealm } from "../context/realm-context/RealmContext";
import { useServerInfo } from "../context/server-info/ServerInfoProvider"; import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { useParams } from "../utils/useParams"; import { useParams } from "../utils/useParams";
import { toRealmRole } from "./routes/RealmRole"; import { RealmRoleRoute, toRealmRole } from "./routes/RealmRole";
import { toRealmRoles } from "./routes/RealmRoles"; import { toRealmRoles } from "./routes/RealmRoles";
import { UsersInRoleTab } from "./UsersInRoleTab"; import { UsersInRoleTab } from "./UsersInRoleTab";
@ -58,8 +58,7 @@ export default function RealmRoleTabs() {
const [role, setRole] = useState<AttributeForm>(); const [role, setRole] = useState<AttributeForm>();
const { id, clientId } = useParams<{ id: string; clientId: string }>(); const { id, clientId } = useParams<{ id: string; clientId: string }>();
const { pathname } = useLocation();
const { url } = useRouteMatch();
const { realm: realmName } = useRealm(); const { realm: realmName } = useRealm();
@ -147,6 +146,25 @@ export default function RealmRoleTabs() {
} }
}; };
const realmRoleMatch = useMatch(RealmRoleRoute.path);
const clientRoleMatch = useMatch(ClientRoleRoute.path);
const toOverview = () => {
if (realmRoleMatch) {
return toRealmRoles({ realm: realmName });
}
if (clientRoleMatch) {
return toClient({
realm: realmName,
clientId: clientRoleMatch.params.clientId!,
tab: "roles",
});
}
throw new Error("Roles overview route could not be determined.");
};
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({ const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "roles:roleDeleteConfirm", titleKey: "roles:roleDeleteConfirm",
messageKey: t("roles:roleDeleteConfirmDialog", { messageKey: t("roles:roleDeleteConfirmDialog", {
@ -165,14 +183,14 @@ export default function RealmRoleTabs() {
}); });
} }
addAlert(t("roleDeletedSuccess"), AlertVariant.success); addAlert(t("roleDeletedSuccess"), AlertVariant.success);
navigate(url.substr(0, url.indexOf("/roles") + "/roles".length)); navigate(toOverview());
} catch (error) { } catch (error) {
addError("roles:roleDeleteError", error); addError("roles:roleDeleteError", error);
} }
}, },
}); });
const dropdownItems = url.includes("associated-roles") const dropdownItems = pathname.includes("associated-roles")
? [ ? [
<DropdownItem <DropdownItem
key="delete-all-associated" key="delete-all-associated"