[Dashboard Controls] Include a "Select All" values option in dropdowns

[teresaalvarezsoler]

Problem: Controls dropdowns are the most popular way to filter dashboards. It's common that users want to select multiple options matching a given string. But currently they have to click in every option which is frustrating and time consuming when there are many of them.

Solutions: We will include a "Select All" option that will allow the automatic selection of all visible values up to 50 values (ES limitation).

Designs to be added by @andreadelrio

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[ThomThomson]

I wonder if we could put the control for this to the right of the options count with the sorting / show only selected button?

@teresaalvarezsoler should we also consider a deselect results button which deselects everything that matches the search? We currently have the deselect all button, but that will deselect everything.

Tagging @amyjtechwriter because we may need some copy help with this one. The button we are considering adding automatically selects every option that matches the user's current search (up to 50 results). Should we call this something like:

• select all, does this make it seem like it will select all options, not just the options in the current search?
• select results, does this sound a little stilted?

[teresaalvarezsoler]

@teresaalvarezsoler should we also consider a deselect results button

This is a good point. We can do something similar to google drive: Select all - Clear. I will let @andreadelrio decide :)

Regarding your concern about users understanding that they are only selecting the visible options, maybe it will be enough just placing the select all option next to the results summary (see "5 options" in the image below).

[andreadelrio]

I agree with the design proposed by Teresa above. I am attaching some mocks with notes about details we should take into about when implementing. As discussed with Devon over DMs, we need to define the threshold for when bulk selection becomes unavailable. For the mock I am using the number 100.

Additionally, I wanted to mention that I explored another option which is similar to the bulk selection model from Gmail. In this model, there are three states in the checkbox: a) all visible options are selected, b) no visible option is selected and, c) some visible options are selected. After thinking about it I believe that model is overkill for our needs but sharing my notes on it in case it is of interest to anyone.

[teresaalvarezsoler]

Thanks @andreadelrio I think any of these work from the user perspective, we can just choose whatever it's easier to implement.

There is a case in which after selecting all options from a given search, the user can make a new search and try to select again all options. That should be fine unless the user hits again the limit of XX values which will disable the Select all option as in your first mockups.

[Heenawter]

I think any of these work from the user perspective, we can just choose whatever it's easier to implement.

I think the "Gmail" model would definitely require some more thought WRT a11y, so let's stick with the "Google sheets" model - since we are (literally) spelling out what each option does rather than using icons, we won't have to do any extra work to make it understandable for screen readers.