diff --git a/apps/admin-ui/src/user/UsersTabs.tsx b/apps/admin-ui/src/user/UsersTabs.tsx index da7bf7589a..58c2a5aaea 100644 --- a/apps/admin-ui/src/user/UsersTabs.tsx +++ b/apps/admin-ui/src/user/UsersTabs.tsx @@ -11,19 +11,23 @@ import { import { useState } from "react"; import { Controller, FormProvider, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; +import { useHistory } from "react-router-dom"; import { useNavigate } from "react-router-dom-v5-compat"; import { useAlerts } from "../components/alert/Alerts"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner"; -import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs"; +import { + RoutableTabs, + routableTab, +} from "../components/routable-tabs/RoutableTabs"; import { ViewHeader } from "../components/view-header/ViewHeader"; import { useAccess } from "../context/access/Access"; import { useAdminClient, useFetch } from "../context/auth/AdminClient"; import { useRealm } from "../context/realm-context/RealmContext"; import { UserProfileProvider } from "../realm-settings/user-profile/UserProfileContext"; import { useParams } from "../utils/useParams"; -import { toUser, UserParams } from "./routes/User"; +import { toUser, UserParams, UserTab } from "./routes/User"; import { toUsers } from "./routes/Users"; import { UserAttributes } from "./UserAttributes"; import { UserConsents } from "./UserConsents"; @@ -42,6 +46,7 @@ const UsersTabs = () => { const navigate = useNavigate(); const { realm } = useRealm(); const { hasAccess } = useAccess(); + const history = useHistory(); const { adminClient } = useAdminClient(); const userForm = useForm({ mode: "onChange" }); @@ -157,6 +162,16 @@ const UsersTabs = () => { return ; } + const toTab = (tab: UserTab) => + toUser({ + realm, + id, + tab, + }); + + const routableUserTab = (tab: UserTab) => + routableTab({ history, to: toTab(tab) }); + return ( <> @@ -198,11 +213,15 @@ const UsersTabs = () => { {id && user && ( - + {t("common:details")}} + {...routableUserTab("settings")} > {bruteForced && ( @@ -216,61 +235,61 @@ const UsersTabs = () => { {t("common:attributes")}} + {...routableUserTab("attributes")} > {t("common:credentials")}} + {...routableUserTab("credentials")} > {t("roleMapping")}} + {...routableUserTab("role-mapping")} > {t("common:groups")}} + {...routableUserTab("groups")} > {t("consents")}} + {...routableUserTab("consents")} > {hasAccess("view-identity-providers") && ( {t("identityProviderLinks")} } + {...routableUserTab("identity-provider-links")} > )} {t("sessions")}} + {...routableUserTab("sessions")} > - + )} {!id && ( diff --git a/apps/admin-ui/src/user/routes/User.ts b/apps/admin-ui/src/user/routes/User.ts index 2b00c67db8..822b00c55c 100644 --- a/apps/admin-ui/src/user/routes/User.ts +++ b/apps/admin-ui/src/user/routes/User.ts @@ -8,7 +8,10 @@ export type UserTab = | "groups" | "consents" | "attributes" - | "sessions"; + | "sessions" + | "credentials" + | "role-mapping" + | "identity-provider-links"; export type UserParams = { realm: string;