From 5894ab663b28fa2cc7b755a5df7ed382aa4cef13 Mon Sep 17 00:00:00 2001
From: Pedro Igor <pigor.craveiro@gmail.com>
Date: Wed, 25 Jun 2025 17:13:20 -0300
Subject: [PATCH] Fixing how translatable fields are set and ignoring
 formatting for root user attributes

Closes #40497

Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com>
---
 .../user-profile/attribute/AddTranslationsDialog.tsx      | 8 +++++++-
 .../user-profile/attribute/AttributeGeneralSettings.tsx   | 6 ++++++
 .../user-profile/attribute/TranslatableField.tsx          | 8 +++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

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 06730e25d3d..572d2b401e7 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
@@ -34,6 +34,7 @@ type AddTranslationsDialogProps = {
   translationKey: string;
   fieldName: string;
   toggleDialog: () => void;
+  predefinedAttributes?: string[];
 };
 
 export const AddTranslationsDialog = ({
@@ -41,6 +42,7 @@ export const AddTranslationsDialog = ({
   translationKey,
   fieldName,
   toggleDialog,
+  predefinedAttributes,
 }: AddTranslationsDialogProps) => {
   const { adminClient } = useAdminClient();
   const { t } = useTranslation();
@@ -155,7 +157,11 @@ export const AddTranslationsDialog = ({
                 label={t("translationKey")}
                 data-testid="translation-key"
                 isDisabled
-                value={t(orgKey) !== orgKey ? `\${${orgKey}}` : translationKey}
+                value={
+                  predefinedAttributes?.includes(orgKey)
+                    ? `\${${orgKey}}`
+                    : `\${${translationKey}}`
+                }
               />
             </FormGroup>
             <FlexItem>
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx
index c6c122e3855..9e911330a5d 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx
@@ -126,6 +126,12 @@ export const AttributeGeneralSettings = () => {
             attributeName="name"
             prefix="profile.attributes"
             fieldName="displayName"
+            predefinedAttributes={[
+              "username",
+              "email",
+              "firstName",
+              "lastName",
+            ]}
           />
         </FormGroup>
         <DefaultSwitchControl
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/TranslatableField.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/TranslatableField.tsx
index 4246d571900..bc1f577aff6 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/TranslatableField.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/TranslatableField.tsx
@@ -67,6 +67,7 @@ type TranslatableFieldProps = {
   attributeName: string;
   prefix: string;
   fieldName: string;
+  predefinedAttributes?: string[];
 };
 
 function hasTranslation(value: string, t: TFunction) {
@@ -85,6 +86,7 @@ export const TranslatableField = ({
   attributeName,
   prefix,
   fieldName,
+  predefinedAttributes,
 }: TranslatableFieldProps) => {
   const { t } = useTranslation();
   const { realmRepresentation: realm } = useRealm();
@@ -98,7 +100,10 @@ export const TranslatableField = ({
   const requiredTranslationName = `${translationPrefix}.0.value`;
 
   useEffect(() => {
-    if (realm?.internationalizationEnabled && !value) {
+    if (predefinedAttributes?.includes(value)) {
+      return;
+    }
+    if (realm?.internationalizationEnabled && value) {
       setValue(fieldName, `\${${prefix}.${value}}`);
     }
   }, [value]);
@@ -117,6 +122,7 @@ export const TranslatableField = ({
           orgKey={value}
           translationKey={`${prefix}.${value}`}
           fieldName={fieldName}
+          predefinedAttributes={predefinedAttributes}
           toggleDialog={toggle}
         />
       )}