Fixing how translatable fields are set and ignoring formatting for root user attributes

Closes #40497

Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com>

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>

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

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}
         />
       )}