From adf838f81ffb84618a1fcac21422cdd188138b21 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Thu, 21 Mar 2024 08:09:24 +0100
Subject: [PATCH] added "on" label to checkbox (#28087)

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../src/user-profile/OptionsComponent.tsx          | 14 +++++++++++---
 .../ui-shared/src/user-profile/SelectComponent.tsx |  7 +++++--
 .../src/user-profile/UserProfileFields.tsx         |  2 ++
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx b/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx
index f919fdd411..98f03cf165 100644
--- a/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx
+++ b/js/libs/ui-shared/src/user-profile/OptionsComponent.tsx
@@ -1,8 +1,12 @@
 import { Checkbox, Radio } from "@patternfly/react-core";
 import { Controller } from "react-hook-form";
-import { Options, UserProfileFieldProps } from "./UserProfileFields";
+import {
+  OptionLabel,
+  Options,
+  UserProfileFieldProps,
+} from "./UserProfileFields";
 import { UserProfileGroup } from "./UserProfileGroup";
-import { fieldName, isRequiredAttribute } from "./utils";
+import { fieldName, isRequiredAttribute, unWrap } from "./utils";
 
 export const OptionComponent = (props: UserProfileFieldProps) => {
   const { form, inputType, attribute } = props;
@@ -12,6 +16,10 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
   const options =
     (attribute.validators?.options as Options | undefined)?.options || [];
 
+  const optionLabel = attribute.annotations?.[
+    "inputOptionLabels"
+  ] as OptionLabel;
+
   return (
     <UserProfileGroup {...props}>
       <Controller
@@ -25,7 +33,7 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
                 key={option}
                 id={option}
                 data-testid={option}
-                label={option}
+                label={props.t(unWrap(optionLabel?.on || 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 6a2222a6c4..edbecb2c24 100644
--- a/js/libs/ui-shared/src/user-profile/SelectComponent.tsx
+++ b/js/libs/ui-shared/src/user-profile/SelectComponent.tsx
@@ -1,7 +1,11 @@
 import { Select, SelectOption } from "@patternfly/react-core";
 import { useState } from "react";
 import { Controller, ControllerRenderProps } from "react-hook-form";
-import { Options, UserProfileFieldProps } from "./UserProfileFields";
+import {
+  OptionLabel,
+  Options,
+  UserProfileFieldProps,
+} from "./UserProfileFields";
 import { UserProfileGroup } from "./UserProfileGroup";
 import {
   UserFormFields,
@@ -10,7 +14,6 @@ import {
   unWrap,
 } from "./utils";
 
-type OptionLabel = Record<string, string> | undefined;
 export const SelectComponent = (props: UserProfileFieldProps) => {
   const { t, form, inputType, attribute } = props;
   const [open, setOpen] = useState(false);
diff --git a/js/libs/ui-shared/src/user-profile/UserProfileFields.tsx b/js/libs/ui-shared/src/user-profile/UserProfileFields.tsx
index 38f06a5a6e..9aef0c72f9 100644
--- a/js/libs/ui-shared/src/user-profile/UserProfileFields.tsx
+++ b/js/libs/ui-shared/src/user-profile/UserProfileFields.tsx
@@ -54,6 +54,8 @@ export type UserProfileFieldProps = {
   renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
 };
 
+export type OptionLabel = Record<string, string> | undefined;
+
 export const FIELDS: {
   [type in InputType]: (props: UserProfileFieldProps) => JSX.Element;
 } = {