import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation"; import { AlertVariant, ButtonVariant, DropdownItem, DropdownSeparator, PageSection, Tab, TabTitleText, Tooltip, } from "@patternfly/react-core"; import { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { useAccess } from "../context/access/Access"; import { adminClient } from "../admin-client"; import { useAlerts } from "../components/alert/Alerts"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; import type { KeyValueType } from "../components/key-value-form/key-value-convert"; import { RoutableTabs, useRoutableTab, } from "../components/routable-tabs/RoutableTabs"; import { ViewHeader } from "../components/view-header/ViewHeader"; import { useRealms } from "../context/RealmsContext"; import { useRealm } from "../context/realm-context/RealmContext"; import { toDashboard } from "../dashboard/routes/Dashboard"; import environment from "../environment"; import helpUrls from "../help-urls"; import { convertFormValuesToObject, convertToFormValues } from "../util"; import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled"; import { RealmSettingsEmailTab } from "./EmailTab"; import { RealmSettingsGeneralTab } from "./GeneralTab"; import { LocalizationTab } from "./LocalizationTab"; import { RealmSettingsLoginTab } from "./LoginTab"; import { PartialExportDialog } from "./PartialExport"; import { PartialImportDialog } from "./PartialImport"; import { PoliciesTab } from "./PoliciesTab"; import ProfilesTab from "./ProfilesTab"; import { RealmSettingsSessionsTab } from "./SessionsTab"; import { RealmSettingsThemesTab } from "./ThemesTab"; import { RealmSettingsTokensTab } from "./TokensTab"; import { UserRegistration } from "./UserRegistration"; import { EventsTab } from "./event-config/EventsTab"; import { KeysTab } from "./keys/KeysTab"; import { ClientPoliciesTab, toClientPolicies } from "./routes/ClientPolicies"; import { RealmSettingsTab, toRealmSettings } from "./routes/RealmSettings"; import { SecurityDefenses } from "./security-defences/SecurityDefenses"; import { UserProfileTab } from "./user-profile/UserProfileTab"; type RealmSettingsHeaderProps = { onChange: (value: boolean) => void; value: boolean; save: () => void; realmName: string; refresh: () => void; }; const RealmSettingsHeader = ({ save, onChange, value, realmName, refresh, }: RealmSettingsHeaderProps) => { const { t } = useTranslation(); const { refresh: refreshRealms } = useRealms(); const { addAlert, addError } = useAlerts(); const navigate = useNavigate(); const [partialImportOpen, setPartialImportOpen] = useState(false); const [partialExportOpen, setPartialExportOpen] = useState(false); const { hasAccess } = useAccess(); const canManageRealm = hasAccess("manage-realm"); const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({ titleKey: "disableConfirmTitle", messageKey: "disableConfirmRealm", continueButtonLabel: "disable", onConfirm: () => { onChange(!value); save(); }, }); const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({ titleKey: "deleteConfirmTitle", messageKey: "deleteConfirmRealmSetting", continueButtonLabel: "delete", continueButtonVariant: ButtonVariant.danger, onConfirm: async () => { try { await adminClient.realms.del({ realm: realmName }); addAlert(t("deletedSuccessRealmSetting"), AlertVariant.success); await refreshRealms(); navigate(toDashboard({ realm: environment.masterRealm })); refresh(); } catch (error) { addError("deleteErrorRealmSetting", error); } }, }); return ( <> setPartialImportOpen(!partialImportOpen)} /> setPartialExportOpen(false)} /> { setPartialImportOpen(true); }} > {t("partialImport")} , setPartialExportOpen(true)} > {t("partialExport")} , , {t("delete")} , ]} isEnabled={value} isReadOnly={!canManageRealm} onToggle={(value) => { if (!value) { toggleDisableDialog(); } else { onChange(value); save(); } }} /> ); }; type RealmSettingsTabsProps = { realm: RealmRepresentation; refresh: () => void; }; export const RealmSettingsTabs = ({ realm, refresh, }: RealmSettingsTabsProps) => { const { t } = useTranslation(); const { addAlert, addError } = useAlerts(); const { realm: realmName } = useRealm(); const { refresh: refreshRealms } = useRealms(); const navigate = useNavigate(); const isFeatureEnabled = useIsFeatureEnabled(); const { control, setValue, getValues } = useForm({ mode: "onChange", }); const [key, setKey] = useState(0); const refreshHeader = () => { setKey(key + 1); }; const setupForm = (r: RealmRepresentation = realm) => { convertToFormValues(r, setValue); }; useEffect(setupForm, [setValue, realm]); const save = async (r: RealmRepresentation) => { r = convertFormValuesToObject(r); if ( r.attributes?.["acr.loa.map"] && typeof r.attributes["acr.loa.map"] !== "string" ) { r.attributes["acr.loa.map"] = JSON.stringify( Object.fromEntries( (r.attributes["acr.loa.map"] as KeyValueType[]) .filter(({ key }) => key !== "") .map(({ key, value }) => [key, value]), ), ); } try { const savedRealm: RealmRepresentation = { ...realm, ...r, id: r.realm, }; // For the default value, null is expected instead of an empty string. if (savedRealm.smtpServer?.port === "") { savedRealm.smtpServer = { ...savedRealm.smtpServer, port: null }; } await adminClient.realms.update({ realm: realmName }, savedRealm); addAlert(t("realmSaveSuccess"), AlertVariant.success); } catch (error) { addError("realmSaveError", error); } const isRealmRenamed = realmName !== (r.realm || realm.realm); if (isRealmRenamed) { await refreshRealms(); navigate(toRealmSettings({ realm: r.realm!, tab: "general" })); } refresh(); }; const useTab = (tab: RealmSettingsTab) => useRoutableTab(toRealmSettings({ realm: realmName, tab })); const generalTab = useTab("general"); const loginTab = useTab("login"); const emailTab = useTab("email"); const themesTab = useTab("themes"); const keysTab = useTab("keys"); const eventsTab = useTab("events"); const localizationTab = useTab("localization"); const securityDefensesTab = useTab("security-defenses"); const sessionsTab = useTab("sessions"); const tokensTab = useTab("tokens"); const clientPoliciesTab = useTab("client-policies"); const userProfileTab = useTab("user-profile"); const userRegistrationTab = useTab("user-registration"); const useClientPoliciesTab = (tab: ClientPoliciesTab) => useRoutableTab( toClientPolicies({ realm: realmName, tab, }), ); const clientPoliciesProfilesTab = useClientPoliciesTab("profiles"); const clientPoliciesPoliciesTab = useClientPoliciesTab("policies"); return ( <> ( save(getValues())} /> )} /> {t("general")}} data-testid="rs-general-tab" {...generalTab} > {t("login")}} data-testid="rs-login-tab" {...loginTab} > {t("email")}} data-testid="rs-email-tab" {...emailTab} > {t("themes")}} data-testid="rs-themes-tab" {...themesTab} > {t("keys")}} data-testid="rs-keys-tab" {...keysTab} > {t("events")}} data-testid="rs-realm-events-tab" {...eventsTab} > {t("localization")}} data-testid="rs-localization-tab" {...localizationTab} > {t("securityDefences")}} data-testid="rs-security-defenses-tab" {...securityDefensesTab} > {t("sessions")}} data-testid="rs-sessions-tab" {...sessionsTab} > {t("tokens")}} data-testid="rs-tokens-tab" {...tokensTab} > {isFeatureEnabled(Feature.ClientPolicies) && ( {t("clientPolicies")}} data-testid="rs-clientPolicies-tab" {...clientPoliciesTab} > {t("profiles")}} tooltip={ } {...clientPoliciesProfilesTab} > {t("policies")}} tooltip={ } > )} {isFeatureEnabled(Feature.DeclarativeUserProfile) && realm.attributes?.userProfileEnabled === "true" && ( {t("userProfile")}} data-testid="rs-user-profile-tab" {...userProfileTab} > )} {t("userRegistration")}} data-testid="rs-userRegistration-tab" {...userRegistrationTab} > ); };