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>
This commit is contained in:
Erik Jan de Wit 2024-04-08 10:28:17 +02:00 committed by GitHub
parent 8455fbdeaf
commit 9190114c60
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 18 deletions

View file

@ -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={() => {

View file

@ -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>

View file

@ -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,