Add Select all and Deselect all buttons to options list popover

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

Author: cqliu1

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_action_bar.tsx

@@ -7,14 +7,15 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import {
   EuiButtonIcon,
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
+  EuiLink,
   EuiText,
   EuiToolTip,
 } from '@elastic/eui';
@@ -27,6 +28,7 @@ import { getCompatibleSearchTechniques } from '../../../../../common/options_lis
 import { useOptionsListContext } from '../options_list_context_provider';
 import { OptionsListPopoverSortingButton } from './options_list_popover_sorting_button';
 import { OptionsListStrings } from '../options_list_strings';
+import { MAX_OPTIONS_LIST_BULK_SELECT_SIZE, MAX_OPTIONS_LIST_REQUEST_SIZE } from '../constants';
 
 interface OptionsListPopoverProps {
   showOnlySelected: boolean;
@@ -50,13 +52,15 @@ export const OptionsListPopoverActionBar = ({
     totalCardinality,
     field,
     allowExpensiveQueries,
+    availableOptions = [],
   ] = useBatchedPublishingSubjects(
     componentApi.searchTechnique$,
     componentApi.searchStringValid$,
     componentApi.invalidSelections$,
     componentApi.totalCardinality$,
     componentApi.field$,
-    componentApi.parentApi.allowExpensiveQueries$
+    componentApi.parentApi.allowExpensiveQueries$,
+    componentApi.availableOptions$
   );
 
   const compatibleSearchTechniques = useMemo(() => {
@@ -69,6 +73,11 @@ export const OptionsListPopoverActionBar = ({
     [searchTechnique, compatibleSearchTechniques]
   );
 
+  const loadMoreOptions = useCallback(() => {
+    componentApi.setRequestSize(Math.min(totalCardinality, MAX_OPTIONS_LIST_REQUEST_SIZE));
+    componentApi.loadMoreSubject.next(); // trigger refetch with loadMoreSubject
+  }, [componentApi, totalCardinality]);
+
   return (
     <div className="optionsList__actions">
       {compatibleSearchTechniques.length > 0 && (
@@ -99,7 +108,81 @@ export const OptionsListPopoverActionBar = ({
           {allowExpensiveQueries && (
             <EuiFlexItem grow={false}>
               <EuiText size="xs" color="subdued" data-test-subj="optionsList-cardinality-label">
-                {OptionsListStrings.popover.getCardinalityLabel(totalCardinality)}
+                {OptionsListStrings.popover.getCardinalityLabel(totalCardinality)} |{' '}
+                <EuiToolTip
+                  content={
+                    totalCardinality > MAX_OPTIONS_LIST_BULK_SELECT_SIZE
+                      ? OptionsListStrings.popover.getMaximumBulkSelectionTooltip()
+                      : undefined
+                  }
+                >
+                  <EuiLink
+                    disabled={
+                      availableOptions.length < 1 ||
+                      totalCardinality < 1 ||
+                      totalCardinality > MAX_OPTIONS_LIST_BULK_SELECT_SIZE
+                    }
+                    onClick={() => {
+                      if (totalCardinality > availableOptions.length) {
+                        loadMoreOptions();
+
+                        const subscription = componentApi.availableOptions$.subscribe(
+                          (options = []) => {
+                            if (options.length === totalCardinality) {
+                              componentApi.selectAll(
+                                options.map(({ value }) => value as string) ?? []
+                              );
+                              subscription.unsubscribe();
+                            }
+                          }
+                        );
+                      } else {
+                        componentApi.selectAll(
+                          availableOptions.map(({ value }) => value as string) ?? []
+                        );
+                      }
+                    }}
+                  >
+                    {OptionsListStrings.popover.getSelectAllButtonLabel()}
+                  </EuiLink>
+                </EuiToolTip>{' '}
+                <EuiToolTip
+                  content={
+                    totalCardinality > 100
+                      ? OptionsListStrings.popover.getMaximumBulkSelectionTooltip()
+                      : undefined
+                  }
+                >
+                  <EuiLink
+                    disabled={
+                      availableOptions.length < 1 ||
+                      totalCardinality < 1 ||
+                      totalCardinality > MAX_OPTIONS_LIST_BULK_SELECT_SIZE
+                    }
+                    onClick={() => {
+                      if (totalCardinality > availableOptions.length) {
+                        loadMoreOptions();
+
+                        const subscription = componentApi.availableOptions$.subscribe(
+                          (options = []) => {
+                            if (options.length === totalCardinality) {
+                              componentApi.deselectAll(
+                                options.map(({ value }) => value as string) ?? []
+                              );
+                              subscription.unsubscribe();
+                            }
+                          }
+                        );
+                      } else {
+                        componentApi.deselectAll(
+                          availableOptions.map(({ value }) => value as string) ?? []
+                        );
+                      }
+                    }}
+                  >
+                    {OptionsListStrings.popover.getDeselectAllButtonLabel()}
+                  </EuiLink>
+                </EuiToolTip>
               </EuiText>
             </EuiFlexItem>
           )}

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/constants.ts

@@ -20,3 +20,4 @@ export const OPTIONS_LIST_DEFAULT_SORT: OptionsListSortingType = {
 
 export const MIN_OPTIONS_LIST_REQUEST_SIZE = 10;
 export const MAX_OPTIONS_LIST_REQUEST_SIZE = 1000;
+export const MAX_OPTIONS_LIST_BULK_SELECT_SIZE = 100;

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/get_options_list_control_factory.tsx

@@ -398,6 +398,34 @@ export const getOptionsListControlFactory = (): DataControlFactory<
         setSort: (sort: OptionsListSortingType | undefined) => {
           sort$.next(sort);
         },
+        selectAll: (keys: string[]) => {
+          const field = api.field$.getValue();
+          if (keys.length < 1 || !field) {
+            api.setBlockingError(
+              new Error(OptionsListStrings.control.getInvalidSelectionMessage())
+            );
+            return;
+          }
+
+          const selectedOptions = selectionsManager.api.selectedOptions$.getValue() ?? [];
+          const newSelections = keys.filter((value) => !selectedOptions.includes(value as string));
+          selectionsManager.api.setSelectedOptions([...selectedOptions, ...newSelections]);
+        },
+        deselectAll: (keys: string[]) => {
+          const field = api.field$.getValue();
+          if (keys.length < 1 || !field) {
+            api.setBlockingError(
+              new Error(OptionsListStrings.control.getInvalidSelectionMessage())
+            );
+            return;
+          }
+
+          const selectedOptions = selectionsManager.api.selectedOptions$.getValue() ?? [];
+          const remainingSelections = selectedOptions.filter(
+            (option) => !keys.includes(option as string)
+          );
+          selectionsManager.api.setSelectedOptions(remainingSelections);
+        },
       };
 
       if (selectionsManager.api.hasInitialSelections) {

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/options_list_strings.ts

@@ -9,6 +9,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { OptionsListSearchTechnique } from '../../../../common/options_list/suggestions_searching';
+import { MAX_OPTIONS_LIST_BULK_SELECT_SIZE } from './constants';
 
 export const OptionsListStrings = {
   control: {
@@ -267,6 +268,19 @@ export const OptionsListStrings = {
           'Appears in {documentCount, number} {documentCount, plural, one {document} other {documents}}',
         values: { documentCount },
       }),
+    getSelectAllButtonLabel: () =>
+      i18n.translate('controls.optionsList.popover.selectAllButtonLabel', {
+        defaultMessage: 'Select all',
+      }),
+    getDeselectAllButtonLabel: () =>
+      i18n.translate('controls.optionsList.popover.deselectAllButtonLabel', {
+        defaultMessage: 'Deselect all',
+      }),
+    getMaximumBulkSelectionTooltip: () =>
+      i18n.translate('controls.optionsList.popover.maximumBulkSelectionTooltip', {
+        defaultMessage: 'Bulk selection is only available for fewer than {maxOptions} options',
+        values: { maxOptions: MAX_OPTIONS_LIST_BULK_SELECT_SIZE },
+      }),
   },
   controlAndPopover: {
     getExists: (negate: number = +false) =>

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/types.ts

@@ -49,7 +49,11 @@ export type OptionsListComponentApi = OptionsListControlApi &
   StateManager<TemporaryState>['api'] & {
     deselectOption: (key: string | undefined) => void;
     makeSelection: (key: string | undefined, showOnlySelected: boolean) => void;
+    selectAll: (keys: string[]) => void;
+    deselectAll: (keys: string[]) => void;
     loadMoreSubject: Subject<void>;
     sort$: PublishingSubject<OptionsListSortingType | undefined>;
     setSort: (sort: OptionsListSortingType | undefined) => void;
+    selectAll: (keys: string[]) => void;
+    deselectAll: (keys: string[]) => void;
   };