From 9190114c60ee165a795f3604c15526ebad5cb41c Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 8 Apr 2024 10:28:17 +0200
Subject: [PATCH] use label function to fetch the translation (#28473)

* use label function to fetch the translation

fixes: #28443
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* removed export from unWrap

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../src/user-profile/OptionsComponent.tsx      |  9 ++++-----
 .../src/user-profile/SelectComponent.tsx       | 18 ++++++------------
 js/libs/ui-shared/src/user-profile/utils.ts    |  2 +-
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx b/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx
index 98f03cf165..61634d03cb 100644
--- 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
index 1e8559b914..352b14989a 100644
--- 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>
diff --git a/js/libs/ui-shared/src/user-profile/utils.ts b/js/libs/ui-shared/src/user-profile/utils.ts
index 07183bcc2a..4009c66ae2 100644
--- a/js/libs/ui-shared/src/user-profile/utils.ts
+++ b/js/libs/ui-shared/src/user-profile/utils.ts
@@ -25,7 +25,7 @@ export type UserProfileError = {
 };
 
 const isBundleKey = (displayName?: string) => displayName?.includes("${");
-export const unWrap = (key: string) => key.substring(2, key.length - 1);
+const unWrap = (key: string) => key.substring(2, key.length - 1);
 
 export const label = (
   t: TFunction,