Fetch more options on select/deselect all

Author: cqliu1

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

@@ -28,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_REQUEST_SIZE } from '../constants';
 
 interface OptionsListPopoverProps {
   showOnlySelected: boolean;
@@ -47,16 +48,14 @@ export const OptionsListPopoverActionBar = ({
   const [
     searchTechnique,
     searchStringValid,
-    selectedOptions = [],
     invalidSelections,
     totalCardinality,
     field,
     allowExpensiveQueries,
-    availableOptions,
+    availableOptions = [],
   ] = useBatchedPublishingSubjects(
     stateManager.searchTechnique,
     stateManager.searchStringValid,
-    stateManager.selectedOptions,
     api.invalidSelections$,
     api.totalCardinality$,
     api.field$,
@@ -114,33 +113,69 @@ export const OptionsListPopoverActionBar = ({
                 >
                   <EuiButtonEmpty
                     size="s"
-                    isDisabled={!availableOptions || totalCardinality < 0 || totalCardinality > 100}
+                    isDisabled={
+                      availableOptions.length < 1 || totalCardinality < 1 || totalCardinality > 100
+                    }
                     onClick={() => {
-                      const availableOptionValues = (
-                        availableOptions?.map(({ value }) => value as string) ?? []
-                      ).filter((value) => !selectedOptions.includes(value));
-                      availableOptionValues.forEach((value: string) => {
-                        api.makeSelection(value, showOnlySelected);
-                      });
+                      if (
+                        availableOptions.length > 0 &&
+                        totalCardinality > availableOptions.length
+                      ) {
+                        // load more options
+                        stateManager.requestSize.next(
+                          Math.min(totalCardinality, MAX_OPTIONS_LIST_REQUEST_SIZE)
+                        );
+                        api.loadMoreSubject.next(); // trigger refetch with loadMoreSubject
+
+                        const subscription = api.availableOptions$.subscribe((options = []) => {
+                          if (options.length === totalCardinality) {
+                            api.selectAll(options.map(({ value }) => value as string) ?? []);
+                            subscription.unsubscribe();
+                          }
+                        });
+                      } else {
+                        api.selectAll(availableOptions.map(({ value }) => value as string) ?? []);
+                      }
                     }}
                   >
                     Select all
                   </EuiButtonEmpty>
                 </EuiToolTip>
-                <EuiButtonEmpty
-                  size="s"
-                  isDisabled={totalCardinality > 100}
-                  onClick={() => {
-                    const availableOptionValues = (
-                      availableOptions?.map(({ value }) => value as string) ?? []
-                    ).filter((value) => selectedOptions.includes(value));
-                    availableOptionValues.forEach((value: string) => {
-                      api.makeSelection(value, showOnlySelected);
-                    });
-                  }}
+                <EuiToolTip
+                  content={
+                    totalCardinality > 100
+                      ? 'Bulk selection is only available for less than 100 options'
+                      : undefined
+                  }
                 >
-                  Deselect all
-                </EuiButtonEmpty>
+                  <EuiButtonEmpty
+                    size="s"
+                    isDisabled={!availableOptions || totalCardinality < 1 || totalCardinality > 100}
+                    onClick={() => {
+                      if (
+                        availableOptions.length > 0 &&
+                        totalCardinality > availableOptions.length
+                      ) {
+                        // load more options
+                        stateManager.requestSize.next(
+                          Math.min(totalCardinality, MAX_OPTIONS_LIST_REQUEST_SIZE)
+                        );
+                        api.loadMoreSubject.next(); // trigger refetch with loadMoreSubject
+
+                        const subscription = api.availableOptions$.subscribe((options = []) => {
+                          if (options.length === totalCardinality) {
+                            api.deselectAll(options.map(({ value }) => value as string) ?? []);
+                            subscription.unsubscribe();
+                          }
+                        });
+                      } else {
+                        api.deselectAll(availableOptions.map(({ value }) => value as string) ?? []);
+                      }
+                    }}
+                  >
+                    Deselect all
+                  </EuiButtonEmpty>
+                </EuiToolTip>
               </EuiText>
             </EuiFlexItem>
           )}

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

@@ -422,6 +422,34 @@ export const getOptionsListControlFactory = (): DataControlFactory<
             );
           }
         },
+        selectAll: (keys: string[]) => {
+          const field = api.field$.getValue();
+          if (keys.length < 1 || !field) {
+            api.setBlockingError(
+              new Error(OptionsListStrings.control.getInvalidSelectionMessage())
+            );
+            return;
+          }
+
+          const selectedOptions = stateManager.selectedOptions.getValue() ?? [];
+          const newSelections = keys.filter((value) => !selectedOptions.includes(value as string));
+          selections.internalApi.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 = stateManager.selectedOptions.getValue() ?? [];
+          const remainingSelections = selectedOptions.filter(
+            (option) => !keys.includes(option as string)
+          );
+          selections.internalApi.setSelectedOptions(remainingSelections);
+        },
       };
 
       if (selections.internalApi.hasInitialSelections) {

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

@@ -39,6 +39,8 @@ export type OptionsListComponentApi = OptionsListControlApi &
   PublishesOptions & {
     deselectOption: (key: string | undefined) => void;
     makeSelection: (key: string | undefined, showOnlySelected: boolean) => void;
+    selectAll: (keys: string[]) => void;
+    deselectAll: (keys: string[]) => void;
     loadMoreSubject: Subject<void>;
     setExclude: (next: boolean | undefined) => void;
   };