diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_action_bar.test.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_action_bar.test.tsx index c98783029c7f5..e642a446f7681 100644 --- a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_action_bar.test.tsx +++ b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_action_bar.test.tsx @@ -56,7 +56,7 @@ const renderComponent = ({ ); }; -const getSelectAllCheckbox = () => screen.getByRole('checkbox', { name: /Select all/i }); +const getSelectAllCheckbox = () => screen.queryByRole('checkbox', { name: /Select all/i }); const getSearchInput = () => screen.getByRole('searchbox', { name: /Filter suggestions/i }); @@ -93,6 +93,16 @@ describe('Options list popover', () => { expect(getSelectAllCheckbox()).not.toBeChecked(); }); + test('hides "Select all" checkbox if the control only allows single selections', async () => { + const contextMock = getOptionsListContextMock(); + contextMock.componentApi.setTotalCardinality(80); + contextMock.componentApi.setAvailableOptions(take(allOptions, 10)); + contextMock.componentApi.setSingleSelect(true); + renderComponent(contextMock); + + expect(getSelectAllCheckbox()).not.toBeInTheDocument(); + }); + test('Select all is checked when all available options are selected ', async () => { const contextMock = getOptionsListContextMock(); contextMock.componentApi.setTotalCardinality(80); diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_action_bar.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_action_bar.tsx index c81113e9749e7..0a248def56e13 100644 --- a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_action_bar.tsx +++ b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_action_bar.tsx @@ -88,6 +88,7 @@ export const OptionsListPopoverActionBar = ({ allowExpensiveQueries, availableOptions = [], dataLoading, + singleSelect, ] = useBatchedPublishingSubjects( componentApi.searchTechnique$, componentApi.searchStringValid$, @@ -97,7 +98,8 @@ export const OptionsListPopoverActionBar = ({ componentApi.fieldName$, componentApi.parentApi.allowExpensiveQueries$, componentApi.availableOptions$, - componentApi.dataLoading$ + componentApi.dataLoading$, + componentApi.singleSelect$ ); const compatibleSearchTechniques = useMemo(() => { @@ -188,38 +190,40 @@ export const OptionsListPopoverActionBar = ({ )} - - - 0 && !areAllSelected} - disabled={isBulkSelectDisabled} - data-test-subj="optionsList-control-selectAll" - onChange={() => { - if (areAllSelected) { - handleBulkAction(componentApi.deselectAll); - setAllSelected(false); - } else { - handleBulkAction(componentApi.selectAll); - setAllSelected(true); - } - }} - css={styles.selectAllCheckbox} - label={ - - {OptionsListStrings.popover.getSelectAllButtonLabel()} - + {!singleSelect && ( + + - - + > + 0 && !areAllSelected} + disabled={isBulkSelectDisabled} + data-test-subj="optionsList-control-selectAll" + onChange={() => { + if (areAllSelected) { + handleBulkAction(componentApi.deselectAll); + setAllSelected(false); + } else { + handleBulkAction(componentApi.selectAll); + setAllSelected(true); + } + }} + css={styles.selectAllCheckbox} + label={ + + {OptionsListStrings.popover.getSelectAllButtonLabel()} + + } + /> + + + )}