From c8d64f289105c979a99fcbf7fd4b64b976be2805 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 24 Jul 2024 17:48:59 +0200
Subject: [PATCH] added `inputOptionLabelsI18nPrefix` when looking up label
 (#31577)

fixes: #31111

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

diff --git a/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx b/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx
index 61634d03cb9..77f222fc911 100644
--- a/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx
+++ b/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx
@@ -18,6 +18,9 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
 
   const optionLabel =
     (attribute.annotations?.["inputOptionLabels"] as OptionLabel) || {};
+  const prefix = attribute.annotations?.[
+    "inputOptionLabelsI18nPrefix"
+  ] as string;
 
   return (
     <UserProfileGroup {...props}>
@@ -32,7 +35,7 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
                 key={option}
                 id={option}
                 data-testid={option}
-                label={label(props.t, optionLabel[option], option)}
+                label={label(props.t, optionLabel[option], option, prefix)}
                 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 a1f07e28546..5c4531c53d2 100644
--- a/js/libs/ui-shared/src/user-profile/SelectComponent.tsx
+++ b/js/libs/ui-shared/src/user-profile/SelectComponent.tsx
@@ -40,9 +40,12 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
 
   const optionLabel =
     (attribute.annotations?.["inputOptionLabels"] as OptionLabel) || {};
+  const prefix = attribute.annotations?.[
+    "inputOptionLabelsI18nPrefix"
+  ] as string;
 
   const fetchLabel = (option: string) =>
-    label(props.t, optionLabel[option], option);
+    label(props.t, optionLabel[option], option, prefix);
 
   const convertOptions = (selected: string) =>
     options
diff --git a/js/libs/ui-shared/src/user-profile/TextComponent.tsx b/js/libs/ui-shared/src/user-profile/TextComponent.tsx
index b3ae3832dd5..e6a5929eb26 100644
--- a/js/libs/ui-shared/src/user-profile/TextComponent.tsx
+++ b/js/libs/ui-shared/src/user-profile/TextComponent.tsx
@@ -20,6 +20,8 @@ export const TextComponent = (props: UserProfileFieldProps) => {
         placeholder={label(
           props.t,
           attribute.annotations?.["inputTypePlaceholder"] as string,
+          attribute.name,
+          attribute.annotations?.["inputOptionLabelsI18nPrefix"] as string,
         )}
         readOnly={attribute.readOnly}
         isRequired={isRequired}
diff --git a/js/libs/ui-shared/src/user-profile/utils.ts b/js/libs/ui-shared/src/user-profile/utils.ts
index a86e760308c..4bd0924542f 100644
--- a/js/libs/ui-shared/src/user-profile/utils.ts
+++ b/js/libs/ui-shared/src/user-profile/utils.ts
@@ -31,7 +31,13 @@ export const label = (
   t: TFunction,
   text: string | undefined,
   fallback?: string,
-) => (isBundleKey(text) ? t(unWrap(text!)) : text) || fallback;
+  prefix?: string,
+) => {
+  const value = text || fallback;
+  const bundleKey = isBundleKey(value) ? unWrap(value!) : value;
+  const key = prefix ? `${prefix}.${bundleKey}` : bundleKey;
+  return t(key || "");
+};
 
 export const labelAttribute = (
   t: TFunction,