diff --git a/core/src/main/java/com/vml/es/aem/acm/core/code/arg/MultiSelectArgument.java b/core/src/main/java/com/vml/es/aem/acm/core/code/arg/MultiSelectArgument.java index 7f493193..b0792171 100644 --- a/core/src/main/java/com/vml/es/aem/acm/core/code/arg/MultiSelectArgument.java +++ b/core/src/main/java/com/vml/es/aem/acm/core/code/arg/MultiSelectArgument.java @@ -31,8 +31,9 @@ public Map getOptions() { return options; } - public void setOptions(Map options) { - this.options = options; + public void setOptions(Map options) { + this.options = options.entrySet().stream() + .collect(Collectors.toMap(e -> ObjectUtils.toString(e.getKey()), Map.Entry::getValue)); } public void setOptions(Collection options) { diff --git a/ui.frontend/src/components/CodeArgumentInput.tsx b/ui.frontend/src/components/CodeArgumentInput.tsx index 226d8a4f..f32c7d8a 100644 --- a/ui.frontend/src/components/CodeArgumentInput.tsx +++ b/ui.frontend/src/components/CodeArgumentInput.tsx @@ -20,7 +20,7 @@ const CodeArgumentInput: React.FC = ({ arg }) => { const controllerRules = (arg: Argument) => ({ validate: (value: ArgumentValue) => { - if (arg.required && (value === null || value === undefined || value === '' || (typeof value === 'number' && isNaN(value)) || (typeof value == 'boolean' && !value))) { + if (arg.required && (value === null || value === undefined || value === '' || (typeof value === 'number' && isNaN(value)) || (typeof value == 'boolean' && !value) || (Array.isArray(value) && value.length === 0))) { return 'Value is required'; } if (arg.validator) { @@ -114,7 +114,7 @@ const CodeArgumentInput: React.FC = ({ arg }) => { orientation="horizontal" label={argLabel(arg)} errorMessage={fieldState.error ? fieldState.error.message : undefined} - validationState={fieldState.error ? 'invalid' : 'valid'} + isInvalid={!!fieldState.error} aria-label={`Argument '${arg.name}'`} > {Object.entries(arg.options).map(([label, val]) => ( @@ -130,7 +130,7 @@ const CodeArgumentInput: React.FC = ({ arg }) => { selectedKey={field.value?.toString() || ''} onSelectionChange={field.onChange} errorMessage={fieldState.error ? fieldState.error.message : undefined} - validationState={fieldState.error ? 'invalid' : 'valid'} + isInvalid={!!fieldState.error} aria-label={`Argument '${arg.name}'`} > {Object.entries(arg.options).map(([label, val]) => ( @@ -157,8 +157,9 @@ const CodeArgumentInput: React.FC = ({ arg }) => { orientation="horizontal" label={argLabel(arg)} errorMessage={fieldState.error ? fieldState.error.message : undefined} - validationState={fieldState.error ? 'invalid' : 'valid'} + isInvalid={!!fieldState.error} aria-label={`Argument '${arg.name}'`} + value={field.value.map(String)} > {Object.entries(arg.options).map(([label, val]) => ( @@ -171,9 +172,9 @@ const CodeArgumentInput: React.FC = ({ arg }) => {
field.onChange(Array.from(val as Set))} aria-label={`Argument '${arg.name}'`} > @@ -220,10 +221,7 @@ const CodeArgumentInput: React.FC = ({ arg }) => { }; function argLabel(arg: Argument): string { - if (arg.label) { - return arg.label; - } - return Strings.capitalizeWords(arg.name); + return arg.label ? arg.label : Strings.capitalizeWords(arg.name); } export default CodeArgumentInput; diff --git a/ui.frontend/src/utils/api.types.ts b/ui.frontend/src/utils/api.types.ts index cac5f825..cf60e543 100644 --- a/ui.frontend/src/utils/api.types.ts +++ b/ui.frontend/src/utils/api.types.ts @@ -58,7 +58,7 @@ export type SelectArgument = Argument & { }; export type MultiSelectArgument = Argument & { - options: Record; + options: Record; display: 'AUTO' | 'CHECKBOX' | 'DROPDOWN'; };