Dont unwrap literal fields

Signed-off-by: John Gomersall <thegoms@gmail.com>
john-gom · Apr 6, 2024 · e698400 · e698400
1 parent 811c70d
commit e698400
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/js/apps/account-ui/test/personal-info/personal-info.spec.ts b/js/apps/account-ui/test/personal-info/personal-info.spec.ts
@@ -55,6 +55,8 @@ test.describe("Personal info with userprofile enabled", async () => {
     await expect(page.locator("#select")).toBeVisible();
     await expect(page.getByTestId("help-label-select")).toBeVisible();
     expect(page.getByText("Alternative email")).toBeDefined();
+    page.locator("#select").click();
+    expect(await page.waitForSelector("text=Three")).toBeDefined();
   });
 
   test("save user profile", async ({ page }) => {

diff --git a/js/apps/account-ui/test/personal-info/user-profile.json b/js/apps/account-ui/test/personal-info/user-profile.json
@@ -124,7 +124,12 @@
       },
       "annotations": {
         "inputType": "select",
-        "inputHelperTextBefore": "This is helping a lot"
+        "inputHelperTextBefore": "This is helping a lot",
+        "inputOptionLabels": {
+          "one": "One",
+          "two": "Two",
+          "three": "Three"
+        }
       },
       "validations": {
         "options": {

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;
@@ -41,8 +36,7 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
   const optionLabel = attribute.annotations?.[
     "inputOptionLabels"
   ] as OptionLabel;
-  const label = (label: string) =>
-    optionLabel ? t(unWrap(optionLabel[label])) : label;
+  const getLabel = (option: string) => label(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 ? getLabel(option) : t("choose")}
               </SelectOption>
             ))}
           </Select>