Add loadMoreOptions callback

Author: cqliu1

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

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import {
   EuiButtonEmpty,
@@ -73,6 +73,11 @@ export const OptionsListPopoverActionBar = ({
     [searchTechnique, compatibleSearchTechniques]
   );
 
+  const loadMoreOptions = useCallback(() => {
+    stateManager.requestSize.next(Math.min(totalCardinality, MAX_OPTIONS_LIST_REQUEST_SIZE));
+    api.loadMoreSubject.next(); // trigger refetch with loadMoreSubject
+  }, [api.loadMoreSubject, stateManager, totalCardinality]);
+
   return (
     <div className="optionsList__actions">
       {compatibleSearchTechniques.length > 0 && (
@@ -117,15 +122,8 @@ export const OptionsListPopoverActionBar = ({
                       availableOptions.length < 1 || 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
+                      if (totalCardinality > availableOptions.length) {
+                        loadMoreOptions();
 
                         const subscription = api.availableOptions$.subscribe((options = []) => {
                           if (options.length === totalCardinality) {
@@ -150,17 +148,12 @@ export const OptionsListPopoverActionBar = ({
                 >
                   <EuiButtonEmpty
                     size="s"
-                    isDisabled={!availableOptions || totalCardinality < 1 || totalCardinality > 100}
+                    isDisabled={
+                      availableOptions.length < 1 || 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
+                      if (totalCardinality > availableOptions.length) {
+                        loadMoreOptions();
 
                         const subscription = api.availableOptions$.subscribe((options = []) => {
                           if (options.length === totalCardinality) {