Translate User Profile Attribute Group (#24445)

Translate User Profile Attribute Group Name and Description

Fixes keycloak#24431

Co-authored-by: agagancarczyk <4890675+agagancarczyk@users.noreply.github.com>

js/apps/admin-ui/src/user/UserProfileFields.tsx

@@ -14,7 +14,7 @@ import { SelectComponent } from "./components/SelectComponent";
 import { TextAreaComponent } from "./components/TextAreaComponent";
 import { TextComponent } from "./components/TextComponent";
 import { UserFormFields } from "./form-state";
-import { fieldName, isRootAttribute } from "./utils";
+import { fieldName, isRootAttribute, label } from "./utils";
 import { MultiInputComponent } from "./components/MultiInputComponent";
 
 export type UserProfileError = {
@@ -146,11 +146,13 @@ export const UserProfileFields = ({
       sections={groupsWithAttributes
         .filter((group) => group.attributes.length > 0)
         .map(({ group, attributes }) => ({
-          title: group.displayHeader || group.name || t("general"),
+          title: label(group.displayHeader, group.name, t) || t("general"),
           panel: (
             <div className="pf-c-form">
               {group.displayDescription && (
-                <Text className="pf-u-pb-lg">{group.displayDescription}</Text>
+                <Text className="pf-u-pb-lg">
+                  {label(group.displayDescription, "", t)}
+                </Text>
               )}
               {attributes.map((attribute) => (
                 <FormField

js/apps/admin-ui/src/user/components/MultiInputComponent.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
 import { UserProfileFieldProps } from "../UserProfileFields";
-import { fieldName, label } from "../utils";
+import { fieldName, labelAttribute } from "../utils";
 import { UserProfileGroup } from "./UserProfileGroup";
 
 export const MultiInputComponent = ({
@@ -13,10 +13,10 @@ export const MultiInputComponent = ({
   return (
     <UserProfileGroup form={form} attribute={attribute}>
       <MultiLineInput
-        aria-label={label(attribute, t)}
+        aria-label={labelAttribute(attribute, t)}
         name={fieldName(attribute)!}
         addButtonLabel={t("addMultivaluedLabel", {
-          fieldLabel: label(attribute, t),
+          fieldLabel: labelAttribute(attribute, t),
         })}
       />
     </UserProfileGroup>

js/apps/admin-ui/src/user/components/UserProfileGroup.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { HelpItem } from "ui-shared";
 
 import { UserFormFields } from "../form-state";
-import { label } from "../utils";
+import { labelAttribute } from "../utils";
 import { isRequiredAttribute } from "../utils/user-profile";
 
 export type UserProfileGroupProps = {
@@ -28,7 +28,7 @@ export const UserProfileGroup = ({
   return (
     <FormGroup
       key={attribute.name}
-      label={label(attribute, t) || ""}
+      label={labelAttribute(attribute, t) || ""}
       fieldId={attribute.name}
       isRequired={isRequiredAttribute(attribute)}
       validated={errors.username ? "error" : "default"}

js/apps/admin-ui/src/user/utils.ts

@@ -5,10 +5,16 @@ export const isBundleKey = (displayName?: string) =>
   displayName?.includes("${");
 export const unWrap = (key: string) => key.substring(2, key.length - 1);
 
-export const label = (attribute: UserProfileAttributeMetadata, t: TFunction) =>
-  (isBundleKey(attribute.displayName)
-    ? t(unWrap(attribute.displayName!))
-    : attribute.displayName) || attribute.name;
+export const label = (
+  text: string | undefined,
+  fallback: string | undefined,
+  t: TFunction,
+) => (isBundleKey(text) ? t(unWrap(text!)) : text) || fallback;
+
+export const labelAttribute = (
+  attribute: UserProfileAttributeMetadata,
+  t: TFunction,
+) => label(attribute.displayName, attribute.name, t);
 
 const ROOT_ATTRIBUTES = ["username", "firstName", "lastName", "email"];