@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
124 lines • 9.37 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PaginatingTableToolbar, TextControl, useFetch, } from "../../../ui-shared";
import { Button, Flex, FlexItem, Form, FormGroup, Label, Modal, ModalVariant, Text, TextContent, TextVariants, } from "@patternfly/react-core";
import { SearchIcon } from "@patternfly/react-icons";
import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
import { useEffect, useMemo, useState } from "react";
import { FormProvider, useForm, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../../admin-client";
import { ListEmptyState } from "../../../ui-shared";
import { useRealm } from "../../../context/realm-context/RealmContext";
import { useWhoAmI } from "../../../context/whoami/WhoAmI";
import { localeToDisplayName } from "../../../util";
import useLocale from "../../../utils/useLocale";
export const AddTranslationsDialog = ({ translationKey, translations, type, onCancel, toggleDialog, onTranslationsAdded, }) => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { realm: realmName, realmRepresentation: realm } = useRealm();
const combinedLocales = useLocale();
const { whoAmI } = useWhoAmI();
const [max, setMax] = useState(10);
const [first, setFirst] = useState(0);
const [filter, setFilter] = useState("");
const [defaultTranslations, setDefaultTranslations] = useState({});
const form = useForm({
mode: "onChange",
});
const { getValues, handleSubmit, setValue, formState: { isValid }, } = form;
const defaultLocales = useMemo(() => {
return (realm === null || realm === void 0 ? void 0 : realm.defaultLocale.length) ? [realm.defaultLocale] : [];
}, [realm]);
const filteredLocales = useMemo(() => {
return combinedLocales.filter((locale) => localeToDisplayName(locale, whoAmI.getLocale())
.toLowerCase()
.includes(filter.toLowerCase()));
}, [combinedLocales, filter, whoAmI]);
useFetch(async () => {
const selectedLocales = combinedLocales.map((locale) => locale);
const results = await Promise.all(selectedLocales.map((selectedLocale) => adminClient.realms.getRealmLocalizationTexts({
realm: realmName,
selectedLocale,
})));
const translations = results.map((result, index) => {
const locale = selectedLocales[index];
const value = result[translationKey];
return {
key: translationKey,
translations: [{ locale, value }],
};
});
const defaultValuesMap = translations.reduce((acc, translation) => {
const locale = translation.translations[0].locale;
const value = translation.translations[0].value;
return { ...acc, [locale]: value };
}, {});
return defaultValuesMap;
}, (fetchedData) => {
setDefaultTranslations((prevTranslations) => {
if (prevTranslations !== fetchedData) {
return fetchedData;
}
return prevTranslations;
});
}, [combinedLocales, translationKey, realmName]);
useEffect(() => {
combinedLocales.forEach((locale, rowIndex) => {
setValue(`translations.${rowIndex}.locale`, locale);
setValue(`translations.${rowIndex}.value`, translations.translations.length > 0
? translations.translations[rowIndex].value
: defaultTranslations[locale] || "");
});
setValue("key", translationKey);
}, [
combinedLocales,
defaultTranslations,
translationKey,
setValue,
translations,
]);
const handleOk = () => {
const formData = getValues();
const updatedTranslations = formData.translations.map((translation) => {
var _a, _b;
if (translation.locale === filter) {
return {
...translation,
value: (_b = (_a = formData.translations.find((t) => t.locale === filter)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "",
};
}
return translation;
});
onTranslationsAdded({
key: formData.key,
translations: updatedTranslations,
});
toggleDialog();
};
const isRequiredTranslation = useWatch({
control: form.control,
name: "translations.0.value",
});
return (_jsx(Modal, { variant: ModalVariant.medium, title: t("addTranslationsModalTitle"), isOpen: true, onClose: toggleDialog, actions: [
_jsx(Button, { "data-testid": "okTranslationBtn", variant: "primary", type: "submit", form: "add-translation", isDisabled: !isValid || !isRequiredTranslation, children: t("addTranslationDialogOkBtn") }, "ok"),
_jsx(Button, { "data-testid": "cancelTranslationBtn", variant: "link", onClick: onCancel, children: t("cancel") }, "cancel"),
], children: _jsxs(Flex, { direction: { default: "column" }, spaceItems: { default: "spaceItemsNone" }, children: [_jsx(FlexItem, { children: _jsx(TextContent, { children: _jsxs(Text, { component: TextVariants.p, children: [type !== "displayHeader"
? t("addTranslationsModalSubTitleDescription")
: t("addTranslationsModalSubTitle"), " ", _jsx("strong", { children: t("addTranslationsModalSubTitleBolded") })] }) }) }), _jsx(FlexItem, { children: _jsx(FormProvider, { ...form, children: _jsxs(Form, { id: "add-translation", "data-testid": "addTranslationForm", onSubmit: handleSubmit(handleOk), children: [_jsx(TextControl, { name: "key", label: t("translationKey"), className: "pf-v5-u-mt-md", "data-testid": "translation-key", isDisabled: true }), _jsxs(FlexItem, { children: [_jsx(TextContent, { children: _jsx(Text, { className: "pf-v5-u-font-size-sm pf-v5-u-font-weight-bold", component: TextVariants.p, children: t("translationsTableHeading") }) }), _jsxs(PaginatingTableToolbar, { count: combinedLocales.length, first: first, max: max, onNextClick: setFirst, onPreviousClick: setFirst, onPerPageSelect: (first, max) => {
setFirst(first);
setMax(max);
}, inputGroupName: "search", inputGroupOnEnter: (search) => {
setFilter(search);
setFirst(0);
setMax(10);
}, inputGroupPlaceholder: t("searchForLanguage"), children: [filteredLocales.length === 0 && !filter && (_jsx(ListEmptyState, { hasIcon: true, message: t("noLanguages"), instructions: t("noLanguagesInstructions") })), filteredLocales.length === 0 && filter && (_jsx(ListEmptyState, { hasIcon: true, icon: SearchIcon, isSearchVariant: true, message: t("noSearchResults"), instructions: t("noLanguagesSearchResultsInstructions") })), filteredLocales.length !== 0 && (_jsxs(Table, { "aria-label": t("addTranslationsDialogRowsTable"), "data-testid": "add-translations-dialog-rows-table", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { className: "pf-v5-u-py-lg", children: t("supportedLanguagesTableColumnName") }), _jsx(Th, { className: "pf-v5-u-py-lg", children: t("translationTableColumnName") }), _jsx(Th, { "aria-hidden": "true" })] }) }), _jsx(Tbody, { children: filteredLocales.map((locale, index) => {
const rowIndex = combinedLocales.findIndex((combinedLocale) => combinedLocale === locale);
return (_jsxs(Tr, { children: [_jsx(Td, { className: "pf-m-sm pf-v5-u-px-sm", dataLabel: t("supportedLanguage"), children: _jsxs(FormGroup, { fieldId: "kc-supportedLanguage", children: [localeToDisplayName(locale, whoAmI.getLocale()), locale === defaultLocales.toString() && (_jsx(Label, { className: "pf-v5-u-ml-xs", color: "blue", children: t("defaultLanguage") }))] }) }), _jsxs(Td, { children: [locale === defaultLocales.toString() && (_jsx(TextControl, { name: `translations.${rowIndex}.value`, label: t("translationValue"), "data-testid": `translation-value-${rowIndex}`, rules: {
required: {
value: true,
message: t("required"),
},
} })), locale !== defaultLocales.toString() && (_jsx(TextControl, { name: `translations.${rowIndex}.value`, label: t("translationValue"), "data-testid": `translation-value-${rowIndex}` }))] })] }, index));
}) })] }))] })] })] }) }) })] }) }));
};
//# sourceMappingURL=AddTranslationsDialog.js.map