User Profile translations - value put in correct field after search (#28047)

* fixed the issue of adding translation for searched locale

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed the issue of adding translation for searched locale

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* small fix

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* renamed

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed translation deleting on attribute deletion

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* feedback

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

---------

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
This commit is contained in:
agagancarczyk 2024-03-21 15:54:02 +00:00 committed by GitHub
parent 7eab019748
commit 1ca8d4f31a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 77 additions and 44 deletions

View file

@ -69,6 +69,7 @@ export const AuthorizationExport = () => {
name="authDetails"
label={t("authDetails")}
labelIcon={t("authDetailsHelp")}
resizeOrientation="vertical"
defaultValue={code!}
readOnly
rows={10}

View file

@ -89,6 +89,12 @@ export const AttributesTab = ({ setTableData }: AttributesTabProps) => {
(attribute) => attribute.name === attributeToDelete,
)?.displayName;
// Remove the the `${}` from translationsToDelete string
const formattedTranslationsToDelete = translationsToDelete?.substring(
2,
translationsToDelete.length - 1,
);
try {
await Promise.all(
combinedLocales.map(async (locale) => {
@ -103,7 +109,7 @@ export const AttributesTab = ({ setTableData }: AttributesTabProps) => {
await adminClient.realms.deleteRealmLocalizationTexts({
realm: realmName,
selectedLocale: locale,
key: translationsToDelete,
key: formattedTranslationsToDelete,
});
const updatedData =

View file

@ -16,7 +16,7 @@ import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
import { SearchIcon } from "@patternfly/react-icons";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form";
import { FormProvider, useForm, useWatch } from "react-hook-form";
import { useRealm } from "../../../context/realm-context/RealmContext";
import { useWhoAmI } from "../../../context/whoami/WhoAmI";
import { adminClient } from "../../../admin-client";
@ -117,10 +117,31 @@ export const AddTranslationsDialog = ({
const handleOk = () => {
const formData = getValues();
onTranslationsAdded(formData);
const updatedTranslations = formData.translations.map((translation) => {
if (translation.locale === filter) {
return {
...translation,
value:
formData.translations.find((t) => t.locale === filter)?.value ?? "",
};
}
return translation;
});
onTranslationsAdded({
key: formData.key,
translations: updatedTranslations,
});
toggleDialog();
};
const isRequiredTranslation = useWatch({
control: form.control,
name: "translations.0.value",
});
return (
<Modal
variant={ModalVariant.medium}
@ -134,7 +155,7 @@ export const AddTranslationsDialog = ({
variant="primary"
type="submit"
form="add-translation"
isDisabled={!isValid}
isDisabled={!isValid || !isRequiredTranslation}
>
{t("addTranslationDialogOkBtn")}
</Button>,
@ -234,48 +255,53 @@ export const AddTranslationsDialog = ({
</Tr>
</Thead>
<Tbody>
{filteredLocales.map((locale, rowIndex) => (
<Tr key={rowIndex}>
<Td
className="pf-m-sm pf-u-px-sm"
dataLabel={t("supportedLanguage")}
>
<FormGroup fieldId="kc-supportedLanguage">
{localeToDisplayName(
locale,
whoAmI.getLocale(),
)}
{filteredLocales.map((locale, index) => {
const rowIndex = combinedLocales.findIndex(
(combinedLocale) => combinedLocale === locale,
);
return (
<Tr key={index}>
<Td
className="pf-m-sm pf-u-px-sm"
dataLabel={t("supportedLanguage")}
>
<FormGroup fieldId="kc-supportedLanguage">
{localeToDisplayName(
locale,
whoAmI.getLocale(),
)}
{locale === defaultLocales.toString() && (
<Label className="pf-u-ml-xs" color="blue">
{t("defaultLanguage")}
</Label>
)}
</FormGroup>
</Td>
<Td>
{locale === defaultLocales.toString() && (
<Label className="pf-u-ml-xs" color="blue">
{t("defaultLanguage")}
</Label>
<TextControl
name={`translations.${rowIndex}.value`}
label={t("translationValue")}
data-testid={`translation-value-${rowIndex}`}
rules={{
required: {
value: true,
message: t("required"),
},
}}
/>
)}
</FormGroup>
</Td>
<Td>
{locale === defaultLocales.toString() && (
<TextControl
name={`translations.${rowIndex}.value`}
label={t("translationValue")}
data-testid="translation-value"
rules={{
required: {
value: true,
message: t("required"),
},
}}
/>
)}
{locale !== defaultLocales.toString() && (
<TextControl
name={`translations.${rowIndex}.value`}
label={t("translationValue")}
data-testid="translation-value"
/>
)}
</Td>
</Tr>
))}
{locale !== defaultLocales.toString() && (
<TextControl
name={`translations.${rowIndex}.value`}
label={t("translationValue")}
data-testid={`translation-value-${rowIndex}`}
/>
)}
</Td>
</Tr>
);
})}
</Tbody>
</Table>
)}