small refactor to better understand (#37291)

fixes: #37268

Signed-off-by: Erik Jan de Wit <[email protected]>

Author: edewit

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>

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>