[Controls] Bulk select for options list control by cqliu1 · Pull Request #221010 · elastic/kibana

cqliu1 · 2025-05-20T15:02:08Z

Summary

This adds Select all and Deselect all buttons to the options list popover to allow users to make bulk selections. Bulk selections will only be available when there are 100 or fewer available options.

Disabled bulk select

Bulk selection is disabled when there are no available options.

Bulk selection is also disabled when total cardinality is over 100.

When `showOnlySelected` is enabled

Even if the total cardinality is greater than the bulk selection limit, bulk selection is enabled when showOnlySelected is enabled, and the number of selection options is fewer than the bulk selection limit (e.g. fewer than 100 selections). Per feedback, we opted to disabled bulk selection when this is enabled.

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

See some risk examples
...

kibanamachine · 2025-05-21T17:35:27Z

Cloud deployments require a Github label, please add ci:cloud-deploy or ci:cloud-redeploy and trigger the job through the checkbox again.

elasticmachine · 2025-05-23T22:20:58Z

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

Fix select and deselect logic Fix types Fetch more options on select/deselect all Add loadMoreOptions callback Add const for bulk selection limit Add i18n Remove unused import Handle showOnlySelected with bulk selection Add options list action bar tests Remove console log Clean up code Added test

Heenawter · 2025-05-27T17:39:13Z

...c/controls/data_controls/options_list_control/components/options_list_popover_action_bar.tsx

+                <EuiToolTip
+                  content={
+                    hasTooManyOptions
+                      ? OptionsListStrings.popover.getMaximumBulkSelectionTooltip()
+                      : undefined
+                  }
+                >
+                  <EuiButtonEmpty
+                    size="xs"
+                    disabled={isBulkSelectDisabled}
+                    data-test-subj="optionsList-control-selectAll"
+                    onClick={() => handleBulkAction(componentApi.selectAll)}
+                  >
+                    {OptionsListStrings.popover.getSelectAllButtonLabel()}
+                  </EuiButtonEmpty>
+                </EuiToolTip>
+                <EuiToolTip
+                  content={
+                    hasTooManyOptions
+                      ? OptionsListStrings.popover.getMaximumBulkSelectionTooltip()
+                      : undefined
+                  }
+                >
+                  <EuiButtonEmpty
+                    size="xs"
+                    disabled={isBulkSelectDisabled}
+                    data-test-subj="optionsList-control-deselectAll"
+                    onClick={() => handleBulkAction(componentApi.deselectAll)}
+                  >
+                    {OptionsListStrings.popover.getDeselectAllButtonLabel()}
+                  </EuiButtonEmpty>
+                </EuiToolTip>


Can we reduce the space here so that there is equal space on both sides of the |?

Yeah, by switching to EuiLink component instead, it renders more like EuiText. I opted to add | between select and deselect bc they looked almost like a single link.

Maybe we wait on @elastic/kibana-design for this one 😆 The double | feels a bit busy to me and I would prefer just adding some padding between "select all" and "deselect all" (about the same size as the gap with the |, but without actually rendering the | if that makes sense)... But I'm not sure

Heenawter · 2025-05-27T17:42:53Z

...c/controls/data_controls/options_list_control/components/options_list_popover_action_bar.tsx

+                <EuiToolTip
+                  content={
+                    hasTooManyOptions
+                      ? OptionsListStrings.popover.getMaximumBulkSelectionTooltip()
+                      : undefined
+                  }
+                >
+                  <EuiButtonEmpty
+                    size="xs"
+                    disabled={isBulkSelectDisabled}
+                    data-test-subj="optionsList-control-selectAll"
+                    onClick={() => handleBulkAction(componentApi.selectAll)}
+                  >
+                    {OptionsListStrings.popover.getSelectAllButtonLabel()}
+                  </EuiButtonEmpty>
+                </EuiToolTip>
+                <EuiToolTip
+                  content={
+                    hasTooManyOptions
+                      ? OptionsListStrings.popover.getMaximumBulkSelectionTooltip()
+                      : undefined
+                  }
+                >
+                  <EuiButtonEmpty
+                    size="xs"
+                    disabled={isBulkSelectDisabled}
+                    data-test-subj="optionsList-control-deselectAll"
+                    onClick={() => handleBulkAction(componentApi.deselectAll)}
+                  >
+                    {OptionsListStrings.popover.getDeselectAllButtonLabel()}
+                  </EuiButtonEmpty>
+                </EuiToolTip>


I wonder if we could make this work a little better for the min popover size (300px)? Ideally, I would want it constrained to a single line for this size, at least in English... But if we can't (since I know this will change depending on the length of the cardinality string), I would hope that we could at least make the two line layout look a bit more... intentional 😆 i.e. keeping "select all" + "deselect all" grouped, or using icons, or... something.

Min size Larger

Here I removed the | and I use a euiSizeS space between Select all and Deselect All.

...c/controls/data_controls/options_list_control/components/options_list_popover_action_bar.tsx

Heenawter · 2025-05-27T21:26:30Z

...c/controls/data_controls/options_list_control/components/options_list_popover_action_bar.tsx

+
+      if (totalCardinality > availableOptions.length) {
+        const newAvailableOptions = (await loadMoreOptions()) ?? [];
+        bulkAction(newAvailableOptions.map(({ value }) => value as string));
+        return;
+      }


I wonder if we need a more obvious loading state for this?

Would it be sufficient to just disable select/deselect buttons while the control is loading? I don't think we need any additional loading indicators since we have the spinner in the base control and the loading bar at the bottom of the popover.

I wonder if it would be possible to add the following "loading icon" indicator beside each option (i.e. where the "checked" status usually is) as soon as "select all" is clicked in? This gives a better indication for "we are waiting to make the selections" to me...

If not then yeah, maybe just disabling the "select all / deselect all" buttons would be sufficient

I'm pretty sure that loading indicator is just the Eui icon being async imported - but maybe we could checkmark the visible ones right away - though that might make the code uglier.

m pretty sure that loading indicator is just the Eui icon being async imported

I know! I just don't love how we have two consecutive loading states happening, so if we could simulate the same "loading" state, I think this would help with the feeling of "I clicked this button but nothing is happening!"

...c/controls/data_controls/options_list_control/components/options_list_popover_action_bar.tsx

...rols/public/controls/data_controls/options_list_control/get_options_list_control_factory.tsx

…s/options-list/select-deselect-all

…-fix'

…ithub.com/cqliu1/kibana into controls/options-list/select-deselect-all

…s/options-list/select-deselect-all

cqliu1 · 2025-06-20T22:07:16Z

...ls/data_controls/options_list_control/components/options_list_popover_invalid_selections.tsx

        )}
        options={selectableOptions}
-        listProps={{ onFocusBadge: false, isVirtualized: false }}
+        listProps={{ onFocusBadge: false }}


By enable virtualization in the EuiSelectable component in the invalid selections component, we get a list with a fixed height with scrolling enabled similar to the list of available options above it. This fixes the issue described in #222121.

Jun-20-2025.16-34-52.mp4

…s/options-list/select-deselect-all

andreadelrio

Design changes LGTM, nice job!

make the

mbondyra · 2025-06-26T09:49:56Z

...trols/data_controls/options_list_control/components/options_list_popover_action_bar.test.tsx

+  { value: 'toot', docCount: 11 },
+];
+
+const renderComponent = ({


I added some edits to these tests to make it more user-focused, like using selectors like getByRole, not getByTestId. or using get selectors and not query selectors (query should only be used when checking for non-existance, since they have worse messaging)

elasticmachine · 2025-06-26T10:33:50Z

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`controls`	470.3KB	472.5KB	+2.2KB

History

💚 Build #312865 succeeded a647172
💚 Build #311615 succeeded d3847e6
💚 Build #311135 succeeded 52466b3
💚 Build #311095 succeeded 6a739eb
💔 Build #304364 failed 73855a4

kibanamachine · 2025-06-26T16:25:01Z

Starting backport for target branches: 8.19

https://github.com/elastic/kibana/actions/runs/15907258379

cqliu1 force-pushed the controls/options-list/select-deselect-all branch from d036377 to 812c7ee Compare May 21, 2025 17:30

cqliu1 force-pushed the controls/options-list/select-deselect-all branch from d0646ff to 263c283 Compare May 23, 2025 19:01

cqliu1 changed the title ~~[Controls] Select/deselect all for options list control~~ May 23, 2025

cqliu1 changed the title ~~[Controls] Bulk select all for options list control~~ May 23, 2025

cqliu1 marked this pull request as ready for review May 23, 2025 22:19

cqliu1 requested a review from a team as a code owner May 23, 2025 22:19

cqliu1 added release_note:feature Makes this part of the condensed release notes release_note:enhancement backport:version Backport to applied version labels and removed release_note:feature Makes this part of the condensed release notes labels May 23, 2025

cqliu1 added 2 commits May 27, 2025 07:34

Remove dup types

080d7d7

cqliu1 force-pushed the controls/options-list/select-deselect-all branch from bd338d9 to 080d7d7 Compare May 27, 2025 14:42

Heenawter self-requested a review May 27, 2025 16:27

cqliu1 added the ci:cloud-deploy Create or update a Cloud deployment label May 27, 2025

Heenawter reviewed May 27, 2025

View reviewed changes

cqliu1 added 5 commits May 29, 2025 10:13

Merge branch 'main' of https://github.com/elastic/kibana into control…

3b75d48

…s/options-list/select-deselect-all

Change to EuiButtonEmpty to EuiLink for bulk selection buttons

0bf6334

Remove filter in select all

b3cec9a

Disable select and deselect when is enabled

1d56acc

Update test

b9109fb

cqliu1 and others added 10 commits June 20, 2025 11:14

Fix select all checkbox

dd6ce97

Fix select all checkbox label

670edb8

Add invalid selection count to header

b16f91b

Merge branch 'main' of https://github.com/elastic/kibana into control…

5567aa1

…s/options-list/select-deselect-all

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

6a739eb

…-fix'

Remove scss file

3edfa43

Add padding between cardinality and select all

58905a8

Enable virtualization on EuiSelectable for invalid selections

890f9ca

Merge branch 'controls/options-list/select-deselect-all' of https://g…

4726e3a

…ithub.com/cqliu1/kibana into controls/options-list/select-deselect-all

Merge branch 'main' of https://github.com/elastic/kibana into control…

52466b3

…s/options-list/select-deselect-all

cqliu1 commented Jun 20, 2025

View reviewed changes

Merge branch 'main' of https://github.com/elastic/kibana into control…

d3847e6

…s/options-list/select-deselect-all

andreadelrio approved these changes Jun 23, 2025

View reviewed changes

cqliu1 and others added 3 commits June 25, 2025 14:58

Merge branch 'main' into controls/options-list/select-deselect-all

a647172

make the test more user focused

74b472b

make the

Update options_list_popover_action_bar.test.tsx

2d3adff

mbondyra reviewed Jun 26, 2025

View reviewed changes

mbondyra approved these changes Jun 26, 2025

View reviewed changes

cqliu1 merged commit 749aeb7 into elastic:main Jun 26, 2025
10 checks passed

cqliu1 added v9.2.0 v9.1.0 backport:skip This PR does not require backporting and removed v8.19.0 v9.1.0 labels Jun 26, 2025

cqliu1 deleted the controls/options-list/select-deselect-all branch June 26, 2025 19:17

florent-leborgne mentioned this pull request Sep 22, 2025

[Dashboards] Select all and Deselect all buttons in options list controls elastic/docs-content#3075

Closed

florent-leborgne added the needs_docs label Sep 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Controls] Bulk select for options list control #221010

[Controls] Bulk select for options list control #221010
cqliu1 merged 36 commits intoelastic:mainfrom
cqliu1:controls/options-list/select-deselect-all

cqliu1 commented May 20, 2025 •

edited by kibanamachine

Loading

kibanamachine commented May 21, 2025

elasticmachine commented May 23, 2025

Heenawter May 27, 2025

cqliu1 May 29, 2025

Heenawter May 29, 2025

Heenawter May 27, 2025 •

edited

Loading

cqliu1 May 29, 2025 •

edited

Loading

Uh oh!

Heenawter May 27, 2025

cqliu1 May 29, 2025

Heenawter May 29, 2025

ThomThomson May 29, 2025

Heenawter May 29, 2025

Uh oh!

Uh oh!

Uh oh!

cqliu1 Jun 20, 2025 •

edited

Loading

andreadelrio left a comment

mbondyra Jun 26, 2025 •

edited

Loading

elasticmachine commented Jun 26, 2025 •

edited

Loading

Uh oh!

kibanamachine commented Jun 26, 2025

Labels

8 participants

Conversation

cqliu1 commented May 20, 2025 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Disabled bulk select

When showOnlySelected is enabled

Checklist

Identify risks

kibanamachine commented May 21, 2025

elasticmachine commented May 23, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Heenawter May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

cqliu1 May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cqliu1 Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

andreadelrio left a comment

Choose a reason for hiding this comment

mbondyra Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

elasticmachine commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💚 Build Succeeded

Metrics [docs]

Async chunks

History

Uh oh!

kibanamachine commented Jun 26, 2025

Labels

8 participants

cqliu1 commented May 20, 2025 •

edited by kibanamachine

Loading

When `showOnlySelected` is enabled

Heenawter May 27, 2025 •

edited

Loading

cqliu1 May 29, 2025 •

edited

Loading

cqliu1 Jun 20, 2025 •

edited

Loading

mbondyra Jun 26, 2025 •

edited

Loading

elasticmachine commented Jun 26, 2025 •

edited

Loading