@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
61 lines • 5.13 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { SelectControl, SwitchControl } from "../../ui-shared";
import { ActionGroup, Button, Tab, TabTitleText, Tabs, } from "@patternfly/react-core";
import { useEffect, useMemo, useState } from "react";
import { FormProvider, useForm, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { FormAccess } from "../../components/form/FormAccess";
import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
import { useWhoAmI } from "../../context/whoami/WhoAmI";
import { DEFAULT_LOCALE } from "../../i18n/i18n";
import { convertToFormValues, localeToDisplayName } from "../../util";
import { EffectiveMessageBundles } from "../../realm-settings/localization/EffectiveMessageBundles";
import { RealmOverrides } from "../../realm-settings/localization/RealmOverrides";
export const LocalizationTab = ({ save, realm, tableData, }) => {
var _a;
const { t } = useTranslation();
const { whoAmI } = useWhoAmI();
const [activeTab, setActiveTab] = useState(0);
const form = useForm();
const { setValue, control, handleSubmit, formState } = form;
const defaultSupportedLocales = ((_a = realm.supportedLocales) === null || _a === void 0 ? void 0 : _a.length)
? realm.supportedLocales
: [DEFAULT_LOCALE];
const themeTypes = useServerInfo().themes;
const allLocales = useMemo(() => {
const locales = Object.values(themeTypes).flatMap((theme) => theme.flatMap(({ locales }) => (locales ? locales : [])));
return Array.from(new Set(locales));
}, [themeTypes]);
const setupForm = () => {
convertToFormValues(realm, setValue);
setValue("supportedLocales", defaultSupportedLocales);
};
useEffect(setupForm, []);
const watchSupportedLocales = useWatch({
control,
name: "supportedLocales",
defaultValue: defaultSupportedLocales,
});
const internationalizationEnabled = useWatch({
control,
name: "internationalizationEnabled",
defaultValue: realm.internationalizationEnabled,
});
const defaultLocales = useWatch({
name: "defaultLocale",
control,
defaultValue: realm.defaultLocale ? [realm.defaultLocale] : [],
});
return (_jsxs(Tabs, { activeKey: activeTab, onSelect: (_, key) => setActiveTab(key), children: [_jsx(Tab, { id: "locales", eventKey: 0, title: _jsx(TabTitleText, { children: t("locales") }), "data-testid": "rs-localization-locales-tab", children: _jsxs(FormAccess, { isHorizontal: true, role: "manage-realm", className: "pf-v5-u-mt-lg pf-v5-u-ml-md", onSubmit: handleSubmit(save), children: [_jsxs(FormProvider, { ...form, children: [_jsx(SwitchControl, { name: "internationalizationEnabled", label: t("internationalization"), labelIcon: t("internationalizationHelp"), labelOn: t("enabled"), labelOff: t("disabled"), "aria-label": t("internationalization") }), internationalizationEnabled && (_jsxs(_Fragment, { children: [_jsx(SelectControl, { name: "supportedLocales", isScrollable: true, label: t("supportedLocales"), controller: {
defaultValue: defaultSupportedLocales,
}, variant: "typeaheadMulti", placeholderText: t("selectLocales"), options: allLocales.map((l) => ({
key: l,
value: localeToDisplayName(l, whoAmI.getLocale()) || l,
})) }), _jsx(SelectControl, { name: "defaultLocale", label: t("defaultLocale"), controller: {
defaultValue: DEFAULT_LOCALE,
}, "data-testid": "select-default-locale", options: watchSupportedLocales.map((l) => ({
key: l,
value: localeToDisplayName(l, whoAmI.getLocale()) || l,
})) })] }))] }), _jsxs(ActionGroup, { children: [_jsx(Button, { variant: "primary", isDisabled: !formState.isDirty, type: "submit", "data-testid": "localization-tab-save", children: t("save") }), _jsx(Button, { variant: "link", onClick: setupForm, children: t("revert") })] })] }) }), _jsx(Tab, { id: "realm-overrides", eventKey: 1, title: _jsxs(TabTitleText, { children: [t("realmOverrides"), " "] }), "data-testid": "rs-localization-realm-overrides-tab", children: _jsx(RealmOverrides, { internationalizationEnabled: internationalizationEnabled, watchSupportedLocales: watchSupportedLocales, realm: realm, tableData: tableData }) }), _jsx(Tab, { id: "effective-message-bundles", eventKey: 2, title: _jsx(TabTitleText, { children: t("effectiveMessageBundles") }), "data-testid": "rs-localization-effective-message-bundles-tab", children: _jsx(EffectiveMessageBundles, { defaultSupportedLocales: defaultSupportedLocales, defaultLocales: defaultLocales }) })] }));
};
//# sourceMappingURL=LocalizationTab.js.map