Refactor realms & client roles to React Router v6 (#4184)
This commit is contained in:
parent
97b69950c7
commit
fe4c3dc151
2 changed files with 26 additions and 8 deletions
|
@ -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),
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue