Skip to content

Fixed bug - Support multiselect with integers #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ public class MultiSelectArgument<V> extends Argument<V> {

private Display display = Display.AUTO;

private Map<String, V> options = new LinkedHashMap<>();
private Map<Object, V> options = new LinkedHashMap<>();

public MultiSelectArgument(String name) {
super(name, ArgumentType.MULTISELECT);
Expand All @@ -27,11 +27,15 @@ public void setValue(V value) {
super.setValue(value);
}

public Map<String, V> getOptions() {
public Map<Object, V> getOptions() {
return options;
}

public void setOptions(Map<String, V> options) {
public void setOptions(Map<Object, V> options) {
boolean match = options.keySet().stream().allMatch(key -> key instanceof String || key instanceof Integer);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume only Strings and Integers are allowed here, unfortunately I had to change String here to Object, hope this validation is enough

if (!match) {
throw new IllegalArgumentException("Multi-select keys can only be of type String or Integer!");
}
this.options = options;
}

Expand Down
18 changes: 8 additions & 10 deletions ui.frontend/src/components/CodeArgumentInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const CodeArgumentInput: React.FC<CodeArgumentInputProps> = ({ arg }) => {

const controllerRules = (arg: Argument<ArgumentValue>) => ({
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) {
Expand Down Expand Up @@ -114,7 +114,7 @@ const CodeArgumentInput: React.FC<CodeArgumentInputProps> = ({ arg }) => {
orientation="horizontal"
label={argLabel(arg)}
errorMessage={fieldState.error ? fieldState.error.message : undefined}
validationState={fieldState.error ? 'invalid' : 'valid'}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

validationState is deprecated

isInvalid={!!fieldState.error}
aria-label={`Argument '${arg.name}'`}
>
{Object.entries(arg.options).map(([label, val]) => (
Expand All @@ -130,7 +130,7 @@ const CodeArgumentInput: React.FC<CodeArgumentInputProps> = ({ 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]) => (
Expand All @@ -157,8 +157,9 @@ const CodeArgumentInput: React.FC<CodeArgumentInputProps> = ({ 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]) => (
<Checkbox key={val?.toString()} value={val?.toString() || ''}>
Expand All @@ -171,9 +172,9 @@ const CodeArgumentInput: React.FC<CodeArgumentInputProps> = ({ arg }) => {
<div>
<ListView
{...field}
maxHeight="size-1600"
maxHeight="size-2000"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This way always exactly 4 items display

selectionMode="multiple"
selectedKeys={field.value as string[]}
selectedKeys={field.value.map(String)}
onSelectionChange={(val) => field.onChange(Array.from(val as Set<string>))}
aria-label={`Argument '${arg.name}'`}
>
Expand Down Expand Up @@ -220,10 +221,7 @@ const CodeArgumentInput: React.FC<CodeArgumentInputProps> = ({ arg }) => {
};

function argLabel(arg: Argument<ArgumentValue>): string {
if (arg.label) {
return arg.label;
}
return Strings.capitalizeWords(arg.name);
return arg.label ? arg.label : Strings.capitalizeWords(arg.name);
}

export default CodeArgumentInput;
2 changes: 1 addition & 1 deletion ui.frontend/src/utils/api.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export type SelectArgument = Argument<ArgumentValue> & {
};

export type MultiSelectArgument = Argument<ArgumentValue> & {
options: Record<string, ArgumentValue>;
options: Record<string | number, ArgumentValue>;
display: 'AUTO' | 'CHECKBOX' | 'DROPDOWN';
};

Expand Down