Ability to provide a comma separated list of values in "Add filter" on the Dashboards Discover page

[jimishs]

Is your feature request related to a problem? Please describe.

While using OpenSearch Dashboards Discover panel, when i click on add filter, i am unable to provide a comma separated list of values to match for a specific field. The only way to do this is to click through each value in the dropdown and hit enter, or enter individual values manually and hit enter after each. This can become cumbersome when i have say a list of 100 IP addresses that i want to filter out. (I would also imagine in this case the dropdown to have many hundreds of IP addresses making this problem much more harder)

Describe the solution you'd like We should consider adding support for a separator in the filter criteria. Eg: if i enter "1.2.3.4, 5.6.7.8", it should automatically convert that to two values in the list "1.2.3.4" and "5.6.7.8". This would enable customers who have a list of comma separated values (csv is a common format to filter against) to enter it directly into this field.

In addition we should also allow the user to select multiple values from the dropdown without having to click or hit enter or any other key, between each selection. Eg: clicking on an option in a dropdown simply ticks it and i just keep going until all the values are selected at which point i can hit enter and the values would all be populated automatically.

Describe alternatives you've considered

Manually entering each value and hitting enter after each. This is painful, much less user friendly and in some cases not feasible when i have hundreds of these values.

Additional context I spoke to a customer who ingests security event logs and would like to filter out activity from specific IP addresses or clients by providing a comma separated list of values (obtained through threat intel feeds)

[kgcreative]

Combo box has a withDelimiter prop we can use to allow paste to recognize and split those options.

[joshuarrrr]

To add the property, we'd probably start from src/plugins/data/public/ui/filter_bar/filter_editor/phrases_values_input.tsx

[joshuarrrr]

@kgcreative @KrooshalUX The current combo box is insufficient to do what @jimishs has requested here. To better understand how withDelimiter actually changes the component, compare these two demos

without (current behavior in https://playground.opensearch.org)

https://user-images.githubusercontent.com/1679762/229944563-9aad4cb5-0462-446d-aca4-850eac1935fc.mov

with comma delimiter (from https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3686)

https://user-images.githubusercontent.com/1679762/229944612-3190dbe1-0ea6-4d49-976a-901bafe858ba.mov

Note that withDelimiter adds each entry every time the delimiter is typed, essentially replacing/augmenting typing enter. However, it still doesn't allow pasted input, which was one of the major requests here. For what it's worth, I think it's still a minor improvement, and worth merging, but it doesn't actually solve the issue reported here.

We'd also need to change other aspects of the combobox behavior to achieve

In addition we should also allow the user to select multiple values from the dropdown without having to click or hit enter or any other key, between each selection. Eg: clicking on an option in a dropdown simply ticks it and i just keep going until all the values are selected at which point i can hit enter and the values would all be populated automatically.

[joshuarrrr]

Transferring to the OUI repo so we can nail down the right interaction patterns in the component itself.

[KrooshalUX]

@joshuarrrr to your point about pasted input, that would need to be changed at the OUI level.

UX will need to do a design pass at this - especially around handling potential errors matching pasted strings against the available tags. If I paste a value that doesn't match something in the available filters, how are we communicating that visually within the component itself (do the non matched strings highlight? get automatically removed? etc.

WRT "select multiple values from the drop down without having to click or hit enter or any other key between each selection" - this is an issue of scale, and across several projects we are seeing potential interaction fatigue (search, scroll) against large groups of data. We may need to look at Frankenstein-ing OuiComboBox and OuiContextMenu or another interface entirely to address a more "Select all of X type" interaction. (CC @lauralexis who may be interested in this as well)