@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
209 lines • 14.2 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { fetchWithError } from "@keycloak/keycloak-admin-client";
import { useEnvironment } from "../ui-shared";
import { AlertVariant, ButtonVariant, Divider, DropdownItem, 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 { useAdminClient } from "../admin-client";
import { useAlerts } from "../ui-shared";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { RoutableTabs, useRoutableTab, } from "../components/routable-tabs/RoutableTabs";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useAccess } from "../context/access/Access";
import { useRealm } from "../context/realm-context/RealmContext";
import { toDashboard } from "../dashboard/routes/Dashboard";
import helpUrls from "../help-urls";
import { convertFormValuesToObject, convertToFormValues } from "../util";
import { getAuthorizationHeaders } from "../utils/getAuthorizationHeaders";
import { joinPath } from "../utils/joinPath";
import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";
import useLocale from "../utils/useLocale";
import { RealmSettingsEmailTab } from "../realm-settings/EmailTab";
import { RealmSettingsGeneralTab } from "../realm-settings/GeneralTab";
import { RealmSettingsLoginTab } from "../realm-settings/LoginTab";
import { PartialExportDialog } from "../realm-settings/PartialExport";
import { PartialImportDialog } from "../realm-settings/PartialImport";
import { PoliciesTab } from "../realm-settings/PoliciesTab";
import ProfilesTab from "../realm-settings/ProfilesTab";
import { RealmSettingsSessionsTab } from "../realm-settings/SessionsTab";
import { RealmSettingsThemesTab } from "../realm-settings/ThemesTab";
import { RealmSettingsTokensTab } from "../realm-settings/TokensTab";
import { UserRegistration } from "../realm-settings/UserRegistration";
import { EventsTab } from "../realm-settings/event-config/EventsTab";
import { KeysTab } from "../realm-settings/keys/KeysTab";
import { LocalizationTab } from "../realm-settings/localization/LocalizationTab";
import { toClientPolicies } from "../realm-settings/routes/ClientPolicies";
import { toRealmSettings } from "../realm-settings/routes/RealmSettings";
import { SecurityDefenses } from "../realm-settings/security-defences/SecurityDefenses";
import { UserProfileTab } from "../realm-settings/user-profile/UserProfileTab";
const RealmSettingsHeader = ({ save, onChange, value, realmName, refresh, }) => {
const { adminClient } = useAdminClient();
const { environment } = useEnvironment();
const { t } = useTranslation();
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);
navigate(toDashboard({ realm: environment.masterRealm }));
refresh();
}
catch (error) {
addError("deleteErrorRealmSetting", error);
}
},
});
return (_jsxs(_Fragment, { children: [_jsx(DisableConfirm, {}), _jsx(DeleteConfirm, {}), _jsx(PartialImportDialog, { open: partialImportOpen, toggleDialog: () => setPartialImportOpen(!partialImportOpen) }), _jsx(PartialExportDialog, { isOpen: partialExportOpen, onClose: () => setPartialExportOpen(false) }), _jsx(ViewHeader, { titleKey: realmName, subKey: "realmSettingsExplain", helpUrl: helpUrls.realmSettingsUrl, divider: false, dropdownItems: [
_jsx(DropdownItem, { "data-testid": "openPartialImportModal", isDisabled: !canManageRealm, onClick: () => {
setPartialImportOpen(true);
}, children: t("partialImport") }, "import"),
_jsx(DropdownItem, { "data-testid": "openPartialExportModal", isDisabled: !canManageRealm, onClick: () => setPartialExportOpen(true), children: t("partialExport") }, "export"),
_jsx(Divider, {}, "separator"),
_jsx(DropdownItem, { isDisabled: !canManageRealm, onClick: toggleDeleteDialog, children: t("delete") }, "delete"),
], isEnabled: value, isReadOnly: !canManageRealm, onToggle: (value) => {
if (!value) {
toggleDisableDialog();
}
else {
onChange(value);
save();
}
} })] }));
};
export const RealmSettingsTabs = () => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { addAlert, addError } = useAlerts();
const { realm: realmName, realmRepresentation: realm, refresh } = useRealm();
const combinedLocales = useLocale();
const navigate = useNavigate();
const isFeatureEnabled = useIsFeatureEnabled();
const [tableData, setTableData] = useState(undefined);
const { control, setValue, getValues } = useForm({
mode: "onChange",
});
const [key, setKey] = useState(0);
const refreshHeader = () => {
setKey(key + 1);
};
const setupForm = (r = realm) => {
convertToFormValues(r, setValue);
};
useEffect(() => {
setupForm();
const fetchLocalizationTexts = async () => {
try {
await Promise.all(combinedLocales.map(async (locale) => {
try {
const response = await adminClient.realms.getRealmLocalizationTexts({
realm: realmName,
selectedLocale: locale,
});
if (response) {
setTableData([response]);
}
}
catch (_a) {
return [];
}
}));
}
catch (_a) {
return [];
}
};
fetchLocalizationTexts();
}, [setValue, realm]);
const save = async (r) => {
var _a, _b;
r = convertFormValuesToObject(r);
if (((_a = r.attributes) === null || _a === void 0 ? void 0 : _a["acr.loa.map"]) &&
typeof r.attributes["acr.loa.map"] !== "string") {
r.attributes["acr.loa.map"] = JSON.stringify(Object.fromEntries(r.attributes["acr.loa.map"]
.filter(({ key }) => key !== "")
.map(({ key, value }) => [key, value])));
}
try {
const savedRealm = {
...realm,
...r,
id: r.realm,
};
// For the default value, null is expected instead of an empty string.
if (((_b = savedRealm.smtpServer) === null || _b === void 0 ? void 0 : _b.port) === "") {
savedRealm.smtpServer = { ...savedRealm.smtpServer, port: null };
}
const response = await fetchWithError(joinPath(adminClient.baseUrl, `admin/realms/${realmName}/ui-ext`), {
method: "PUT",
body: JSON.stringify(savedRealm),
headers: {
"Content-Type": "application/json",
...getAuthorizationHeaders(await adminClient.getAccessToken()),
},
});
if (!response.ok)
throw new Error(response.statusText);
addAlert(t("realmSaveSuccess"), AlertVariant.success);
}
catch (error) {
addError("realmSaveError", error);
}
const isRealmRenamed = realmName !== (r.realm || (realm === null || realm === void 0 ? void 0 : realm.realm));
if (isRealmRenamed) {
navigate(toRealmSettings({ realm: r.realm, tab: "general" }));
}
refresh();
};
const useTab = (tab) => 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 { hasAccess, hasSomeAccess } = useAccess();
const canViewOrManageEvents = hasAccess("view-realm") && hasSomeAccess("view-events", "manage-events");
const canViewUserRegistration = hasAccess("view-realm") && hasSomeAccess("view-clients", "manage-clients");
const useClientPoliciesTab = (tab) => useRoutableTab(toClientPolicies({
realm: realmName,
tab,
}));
const clientPoliciesProfilesTab = useClientPoliciesTab("profiles");
const clientPoliciesPoliciesTab = useClientPoliciesTab("policies");
return (_jsxs(_Fragment, { children: [_jsx(Controller, { name: "enabled", defaultValue: true, control: control, render: ({ field }) => (_jsx(RealmSettingsHeader, { value: field.value, onChange: field.onChange, realmName: realmName, refresh: refreshHeader, save: () => save(getValues()) })) }), _jsx(PageSection, { variant: "light", className: "pf-v5-u-p-0", children: _jsxs(RoutableTabs, { isBox: true, mountOnEnter: true, "aria-label": "realm-settings-tabs", defaultLocation: toRealmSettings({
realm: realmName,
tab: "general",
}), children: [_jsx(Tab, { title: _jsx(TabTitleText, { children: t("general") }), "data-testid": "rs-general-tab", ...generalTab, children: _jsx(RealmSettingsGeneralTab, { realm: realm, save: save }) }), _jsx(Tab, { title: _jsx(TabTitleText, { children: t("login") }), "data-testid": "rs-login-tab", ...loginTab, children: _jsx(RealmSettingsLoginTab, { refresh: refresh, realm: realm }) }), _jsx(Tab, { title: _jsx(TabTitleText, { children: t("email") }), "data-testid": "rs-email-tab", ...emailTab, children: _jsx(RealmSettingsEmailTab, { realm: realm, save: save }) }), _jsx(Tab, { title: _jsx(TabTitleText, { children: t("themes") }), "data-testid": "rs-themes-tab", ...themesTab, children: _jsx(RealmSettingsThemesTab, { realm: realm, save: save }) }), _jsx(Tab, { title: _jsx(TabTitleText, { children: t("keys") }), "data-testid": "rs-keys-tab", ...keysTab, children: _jsx(KeysTab, {}) }), canViewOrManageEvents && (_jsx(Tab, { title: _jsx(TabTitleText, { children: t("events") }), "data-testid": "rs-realm-events-tab", ...eventsTab, children: _jsx(EventsTab, { realm: realm }) })), _jsx(Tab, { title: _jsx(TabTitleText, { children: t("localization") }), "data-testid": "rs-localization-tab", ...localizationTab, children: _jsx(LocalizationTab, { save: save, realm: realm, tableData: tableData }, key) }), _jsx(Tab, { title: _jsx(TabTitleText, { children: t("securityDefences") }), "data-testid": "rs-security-defenses-tab", ...securityDefensesTab, children: _jsx(SecurityDefenses, { realm: realm, save: save }) }), _jsx(Tab, { title: _jsx(TabTitleText, { children: t("sessions") }), "data-testid": "rs-sessions-tab", ...sessionsTab, children: _jsx(RealmSettingsSessionsTab, { realm: realm, save: save }, key) }), _jsx(Tab, { title: _jsx(TabTitleText, { children: t("tokens") }), "data-testid": "rs-tokens-tab", ...tokensTab, children: _jsx(RealmSettingsTokensTab, { save: save, realm: realm }) }), isFeatureEnabled(Feature.ClientPolicies) && (_jsx(Tab, { title: _jsx(TabTitleText, { children: t("clientPolicies") }), "data-testid": "rs-clientPolicies-tab", ...clientPoliciesTab, children: _jsxs(RoutableTabs, { mountOnEnter: true, defaultLocation: toClientPolicies({
realm: realmName,
tab: "profiles",
}), children: [_jsx(Tab, { id: "profiles", "data-testid": "rs-policies-clientProfiles-tab", "aria-label": t("clientProfilesSubTab"), title: _jsx(TabTitleText, { children: t("profiles") }), tooltip: _jsx(Tooltip, { content: t("clientPoliciesProfilesHelpText") }), ...clientPoliciesProfilesTab, children: _jsx(ProfilesTab, {}) }), _jsx(Tab, { id: "policies", "data-testid": "rs-policies-clientPolicies-tab", "aria-label": t("clientPoliciesSubTab"), ...clientPoliciesPoliciesTab, title: _jsx(TabTitleText, { children: t("policies") }), tooltip: _jsx(Tooltip, { content: t("clientPoliciesPoliciesHelpText") }), children: _jsx(PoliciesTab, {}) })] }) })), _jsx(Tab, { title: _jsx(TabTitleText, { children: t("userProfile") }), "data-testid": "rs-user-profile-tab", ...userProfileTab, children: _jsx(UserProfileTab, { setTableData: setTableData }) }), canViewUserRegistration && (_jsx(Tab, { title: _jsx(TabTitleText, { children: t("userRegistration") }), "data-testid": "rs-userRegistration-tab", ...userRegistrationTab, children: _jsx(UserRegistration, {}) }))] }) })] }));
};
//# sourceMappingURL=RealmSettingsTabs.js.map