use label function to fetch the translation

fixes: keycloak#28443 Signed-off-by: Erik Jan de Wit <[email protected]>
john-gom · Apr 5, 2024 · 8b09fb7 · 8b09fb7
1 parent a0cf09e
commit 8b09fb7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 17 deletions.
diff --git a/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx b/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx
@@ -6,7 +6,7 @@ import {
   UserProfileFieldProps,
 } from "./UserProfileFields";
 import { UserProfileGroup } from "./UserProfileGroup";
-import { fieldName, isRequiredAttribute, unWrap } from "./utils";
+import { fieldName, isRequiredAttribute, label } from "./utils";
 
 export const OptionComponent = (props: UserProfileFieldProps) => {
   const { form, inputType, attribute } = props;
@@ -16,9 +16,8 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
   const options =
     (attribute.validators?.options as Options | undefined)?.options || [];
 
-  const optionLabel = attribute.annotations?.[
-    "inputOptionLabels"
-  ] as OptionLabel;
+  const optionLabel =
+    (attribute.annotations?.["inputOptionLabels"] as OptionLabel) || {};
 
   return (
     <UserProfileGroup {...props}>
@@ -33,7 +32,7 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
                 key={option}
                 id={option}
                 data-testid={option}
-                label={props.t(unWrap(optionLabel?.on || option))}
+                label={label(props.t, optionLabel[option], option)}
                 value={option}
                 isChecked={field.value.includes(option)}
                 onChange={() => {

diff --git a/js/libs/ui-shared/src/user-profile/SelectComponent.tsx b/js/libs/ui-shared/src/user-profile/SelectComponent.tsx
@@ -7,12 +7,7 @@ import {
   UserProfileFieldProps,
 } from "./UserProfileFields";
 import { UserProfileGroup } from "./UserProfileGroup";
-import {
-  UserFormFields,
-  fieldName,
-  isRequiredAttribute,
-  unWrap,
-} from "./utils";
+import { UserFormFields, fieldName, isRequiredAttribute, label } from "./utils";
 
 export const SelectComponent = (props: UserProfileFieldProps) => {
   const { t, form, inputType, attribute } = props;
@@ -38,11 +33,10 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
   const options =
     (attribute.validators?.options as Options | undefined)?.options || [];
 
-  const optionLabel = attribute.annotations?.[
-    "inputOptionLabels"
-  ] as OptionLabel;
-  const label = (label: string) =>
-    optionLabel ? t(unWrap(optionLabel[label])) : label;
+  const optionLabel =
+    (attribute.annotations?.["inputOptionLabels"] as OptionLabel) || {};
+  const fetchLabel = (option: string) =>
+    label(props.t, optionLabel[option], option);
 
   return (
     <UserProfileGroup {...props}>
@@ -78,7 +72,7 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
                 key={option}
                 value={option}
               >
-                {option ? label(option) : t("choose")}
+                {option ? fetchLabel(option) : t("choose")}
               </SelectOption>
             ))}
           </Select>