added "on" label to checkbox (#28087)

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-03-21 08:09:24 +01:00 committed by GitHub
parent 635481a98d
commit adf838f81f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 18 additions and 5 deletions

View file

@ -1,8 +1,12 @@
import { Checkbox, Radio } from "@patternfly/react-core"; import { Checkbox, Radio } from "@patternfly/react-core";
import { Controller } from "react-hook-form"; import { Controller } from "react-hook-form";
import { Options, UserProfileFieldProps } from "./UserProfileFields"; import {
OptionLabel,
Options,
UserProfileFieldProps,
} from "./UserProfileFields";
import { UserProfileGroup } from "./UserProfileGroup"; import { UserProfileGroup } from "./UserProfileGroup";
import { fieldName, isRequiredAttribute } from "./utils"; import { fieldName, isRequiredAttribute, unWrap } from "./utils";
export const OptionComponent = (props: UserProfileFieldProps) => { export const OptionComponent = (props: UserProfileFieldProps) => {
const { form, inputType, attribute } = props; const { form, inputType, attribute } = props;
@ -12,6 +16,10 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
const options = const options =
(attribute.validators?.options as Options | undefined)?.options || []; (attribute.validators?.options as Options | undefined)?.options || [];
const optionLabel = attribute.annotations?.[
"inputOptionLabels"
] as OptionLabel;
return ( return (
<UserProfileGroup {...props}> <UserProfileGroup {...props}>
<Controller <Controller
@ -25,7 +33,7 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
key={option} key={option}
id={option} id={option}
data-testid={option} data-testid={option}
label={option} label={props.t(unWrap(optionLabel?.on || option))}
value={option} value={option}
isChecked={field.value.includes(option)} isChecked={field.value.includes(option)}
onChange={() => { onChange={() => {

View file

@ -1,7 +1,11 @@
import { Select, SelectOption } from "@patternfly/react-core"; import { Select, SelectOption } from "@patternfly/react-core";
import { useState } from "react"; import { useState } from "react";
import { Controller, ControllerRenderProps } from "react-hook-form"; import { Controller, ControllerRenderProps } from "react-hook-form";
import { Options, UserProfileFieldProps } from "./UserProfileFields"; import {
OptionLabel,
Options,
UserProfileFieldProps,
} from "./UserProfileFields";
import { UserProfileGroup } from "./UserProfileGroup"; import { UserProfileGroup } from "./UserProfileGroup";
import { import {
UserFormFields, UserFormFields,
@ -10,7 +14,6 @@ import {
unWrap, unWrap,
} from "./utils"; } from "./utils";
type OptionLabel = Record<string, string> | undefined;
export const SelectComponent = (props: UserProfileFieldProps) => { export const SelectComponent = (props: UserProfileFieldProps) => {
const { t, form, inputType, attribute } = props; const { t, form, inputType, attribute } = props;
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);

View file

@ -54,6 +54,8 @@ export type UserProfileFieldProps = {
renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode; renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
}; };
export type OptionLabel = Record<string, string> | undefined;
export const FIELDS: { export const FIELDS: {
[type in InputType]: (props: UserProfileFieldProps) => JSX.Element; [type in InputType]: (props: UserProfileFieldProps) => JSX.Element;
} = { } = {