From 1ca8d4f31a1ba1c9bcb091c4ad5ee63f62c0084b Mon Sep 17 00:00:00 2001
From: agagancarczyk <4890675+agagancarczyk@users.noreply.github.com>
Date: Thu, 21 Mar 2024 15:54:02 +0000
Subject: [PATCH] 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>
---
 .../authorization/AuthorizationExport.tsx     |   1 +
 .../user-profile/AttributesTab.tsx            |   8 +-
 .../attribute/AddTranslationsDialog.tsx       | 112 +++++++++++-------
 3 files changed, 77 insertions(+), 44 deletions(-)

diff --git a/js/apps/admin-ui/src/clients/authorization/AuthorizationExport.tsx b/js/apps/admin-ui/src/clients/authorization/AuthorizationExport.tsx
index a62206348b..de75ebe594 100644
--- a/js/apps/admin-ui/src/clients/authorization/AuthorizationExport.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/AuthorizationExport.tsx
@@ -69,6 +69,7 @@ export const AuthorizationExport = () => {
           name="authDetails"
           label={t("authDetails")}
           labelIcon={t("authDetailsHelp")}
+          resizeOrientation="vertical"
           defaultValue={code!}
           readOnly
           rows={10}
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/AttributesTab.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/AttributesTab.tsx
index 59a6210930..f4441beb0d 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/AttributesTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/AttributesTab.tsx
@@ -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 =
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AddTranslationsDialog.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AddTranslationsDialog.tsx
index 7518819c4a..c3f10f2d02 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AddTranslationsDialog.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AddTranslationsDialog.tsx
@@ -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>
                   )}