From 6ec1610cd8b1c4e515cd77229bcc0946a1d66372 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Thu, 13 Feb 2025 15:01:58 +0100
Subject: [PATCH] small refactor to better understand (#37291) (#37292)

fixes: #37268

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
(cherry picked from commit 7a8d18122aea42278332120093d5cefce9748356)
---
 .../attribute/AddTranslationsDialog.tsx       |  5 +++-
 .../attribute/TranslatableField.tsx           | 24 ++++++++++++++-----
 2 files changed, 22 insertions(+), 7 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 b70718c82c5..06730e25d3d 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
@@ -139,7 +139,10 @@ export const AddTranslationsDialog = ({
         spaceItems={{ default: "spaceItemsNone" }}
       >
         <FlexItem>
-          <Trans i18nKey="addTranslationsModalTitle" values={{ fieldName }}>
+          <Trans
+            i18nKey="addTranslationsModalTitle"
+            values={{ fieldName: t(fieldName) }}
+          >
             You are able to translate the fieldName based on your locale or
             <strong>location</strong>
           </Trans>
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 5ec6afa909c..d4d57162f07 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
@@ -1,4 +1,5 @@
 import KeycloakAdminClient from "@keycloak/keycloak-admin-client";
+import RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import { FormErrorText } from "@keycloak/keycloak-ui-shared";
 import {
   Alert,
@@ -9,6 +10,7 @@ import {
   TextInput,
 } from "@patternfly/react-core";
 import { GlobeRouteIcon } from "@patternfly/react-icons";
+import { TFunction } from "i18next";
 import { useEffect } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
@@ -67,6 +69,18 @@ type TranslatableFieldProps = {
   fieldName: string;
 };
 
+function hasTranslation(value: string, t: TFunction) {
+  return t(value) === value && value !== "";
+}
+
+function isTranslationRequired(
+  value: string,
+  t: TFunction,
+  realm?: RealmRepresentation,
+) {
+  return realm?.internationalizationEnabled && hasTranslation(value, t);
+}
+
 export const TranslatableField = ({
   attributeName,
   prefix,
@@ -84,16 +98,14 @@ export const TranslatableField = ({
   const requiredTranslationName = `${translationPrefix}.0.value`;
 
   useEffect(() => {
-    if (realm?.internationalizationEnabled) {
-      if (t(value) === value && value !== "") {
-        setValue(fieldName, `\${${prefix}.${value}}`);
-      }
+    if (isTranslationRequired(value, t, realm)) {
+      setValue(fieldName, `\${${prefix}.${value}}`);
     }
   }, [value]);
 
   return (
     <>
-      {realm?.internationalizationEnabled && (
+      {isTranslationRequired(value, t, realm) && (
         <input
           type="hidden"
           data-testid="requiredTranslationName"
@@ -139,7 +151,7 @@ export const TranslatableField = ({
             title={
               <Trans
                 i18nKey="addTranslationsModalSubTitle"
-                values={{ fieldName }}
+                values={{ fieldName: t(fieldName) }}
               >
                 You are able to translate the fieldName based on your locale or
                 <strong>location</strong>