[8.x] [Controls] Fix load more request size (#207901) (#208657)

# Backport This will backport the following commits from `main` to `8.x`: - [[Controls] Fix load more request size (#207901)](#207901)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>
elastic · Jan 29, 2025 · ce405bc · ce405bc
1 parent b65acc7
commit ce405bc
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 10 deletions.
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/mocks/api_mocks.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/mocks/api_mocks.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 
 import { DataViewField } from '@kbn/data-views-plugin/common';
 
@@ -19,6 +19,7 @@ import type {
   OptionsListSortingType,
   OptionsListSuggestions,
 } from '../../../../common/options_list';
+import { MIN_OPTIONS_LIST_REQUEST_SIZE } from '../options_list_control/constants';
 
 export const getOptionsListMocks = () => {
   const selectedOptions$ = new BehaviorSubject<OptionsListSelection[] | undefined>(undefined);
@@ -30,14 +31,15 @@ export const getOptionsListMocks = () => {
       field$: new BehaviorSubject<DataViewField | undefined>({ type: 'string' } as DataViewField),
       availableOptions$: new BehaviorSubject<OptionsListSuggestions | undefined>(undefined),
       invalidSelections$: new BehaviorSubject<Set<OptionsListSelection>>(new Set([])),
-      totalCardinality$: new BehaviorSubject<number | undefined>(undefined),
+      totalCardinality$: new BehaviorSubject<number>(0),
       dataLoading$: new BehaviorSubject<boolean>(false),
       parentApi: {
         allowExpensiveQueries$: new BehaviorSubject<boolean>(true),
       },
       fieldFormatter: new BehaviorSubject((value: string | number) => String(value)),
       makeSelection: jest.fn(),
       setExclude: (next: boolean | undefined) => exclude$.next(next),
+      loadMoreSubject: new Subject<void>(),
     },
     stateManager: {
       searchString: new BehaviorSubject<string>(''),
@@ -48,6 +50,7 @@ export const getOptionsListMocks = () => {
       sort: new BehaviorSubject<OptionsListSortingType | undefined>(undefined),
       selectedOptions: selectedOptions$ as PublishingSubject<OptionsListSelection[] | undefined>,
       searchTechnique: new BehaviorSubject<OptionsListSearchTechnique | undefined>(undefined),
+      requestSize: new BehaviorSubject<number>(MIN_OPTIONS_LIST_REQUEST_SIZE),
     },
     displaySettings: {} as OptionsListDisplaySettings,
     // setSelectedOptions and setExistsSelected are not exposed via API because

diff --git a/...s/data_controls/options_list_control/components/options_list_popover_suggestions.test.tsx b/...s/data_controls/options_list_control/components/options_list_popover_suggestions.test.tsx
@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+
+import { fireEvent, render, waitFor } from '@testing-library/react';
+
+import { take } from 'lodash';
+import { getOptionsListMocks } from '../../mocks/api_mocks';
+import { MAX_OPTIONS_LIST_REQUEST_SIZE, MIN_OPTIONS_LIST_REQUEST_SIZE } from '../constants';
+import { ContextStateManager, OptionsListControlContext } from '../options_list_context_provider';
+import type { OptionsListComponentApi } from '../types';
+import { OptionsListPopoverSuggestions } from './options_list_popover_suggestions';
+
+describe('Options list popover', () => {
+  const allOptions = [
+    { value: 'moo', docCount: 1 },
+    { value: 'tweet', docCount: 2 },
+    { value: 'oink', docCount: 3 },
+    { value: 'bark', docCount: 4 },
+    { value: 'meow', docCount: 5 },
+    { value: 'woof', docCount: 6 },
+    { value: 'roar', docCount: 7 },
+    { value: 'honk', docCount: 8 },
+  ];
+
+  const mountComponent = ({
+    api,
+    displaySettings,
+    stateManager,
+    showOnlySelected,
+  }: {
+    api: any;
+    displaySettings: any;
+    stateManager: any;
+    showOnlySelected?: boolean;
+  }) => {
+    return render(
+      <OptionsListControlContext.Provider
+        value={{
+          api: api as unknown as OptionsListComponentApi,
+          displaySettings,
+          stateManager: stateManager as unknown as ContextStateManager,
+        }}
+      >
+        <OptionsListPopoverSuggestions showOnlySelected={showOnlySelected ?? false} />
+      </OptionsListControlContext.Provider>
+    );
+  };
+
+  test('displays "load more" text when possible', async () => {
+    const mocks = getOptionsListMocks();
+    mocks.api.totalCardinality$.next(allOptions.length);
+    mocks.api.availableOptions$.next(take(allOptions, 5));
+    const suggestionsComponent = mountComponent(mocks);
+
+    // the cardinality is larger than the available options, so display text
+    let optionComponents = await suggestionsComponent.findAllByRole('option');
+    expect(optionComponents.length).toBe(6);
+    expect(
+      suggestionsComponent.queryByTestId('optionsList-control-selection-honk')
+    ).not.toBeInTheDocument();
+    expect(suggestionsComponent.queryByTestId('optionslist--canLoadMore')).toBeInTheDocument();
+
+    // we are displaying all the available options - so don't display "load more" text
+    mocks.api.availableOptions$.next(allOptions);
+    await waitFor(async () => {
+      optionComponents = await suggestionsComponent.findAllByRole('option');
+      expect(optionComponents.length).toBe(9);
+    });
+    expect(
+      suggestionsComponent.queryByTestId('optionsList-control-selection-honk')
+    ).toBeInTheDocument();
+    expect(suggestionsComponent.queryByTestId('optionslist--canLoadMore')).not.toBeInTheDocument();
+  });
+
+  test('only fetch up to maximum request size on scroll', async () => {
+    const mocks = getOptionsListMocks();
+    mocks.api.totalCardinality$.next(100);
+    mocks.api.availableOptions$.next(take(allOptions, 5));
+    const suggestionsComponent = mountComponent(mocks);
+
+    // ensure we fetch the cardinality on scroll
+    expect(mocks.stateManager.requestSize.getValue()).toBe(MIN_OPTIONS_LIST_REQUEST_SIZE);
+    fireEvent.scroll(suggestionsComponent.getByTestId('optionsList--scrollListener'));
+    expect(mocks.stateManager.requestSize.getValue()).toBe(100);
+
+    // reset request size + update cardinality
+    mocks.stateManager.requestSize.next(MIN_OPTIONS_LIST_REQUEST_SIZE);
+    mocks.api.totalCardinality$.next(MAX_OPTIONS_LIST_REQUEST_SIZE + 100);
+    await waitFor(async () => {
+      // wait for request size to be reset in UI
+      const optionComponents = await suggestionsComponent.findAllByRole('option');
+      expect(optionComponents.length).toBe(6);
+    });
+
+    // ensure we don't fetch more than MAX_OPTIONS_LIST_REQUEST_SIZE
+    fireEvent.scroll(suggestionsComponent.getByTestId('optionsList--scrollListener'));
+    expect(mocks.stateManager.requestSize.getValue()).toBe(MAX_OPTIONS_LIST_REQUEST_SIZE);
+  });
+});
diff --git a/...ntrols/data_controls/options_list_control/components/options_list_popover_suggestions.tsx b/...ntrols/data_controls/options_list_control/components/options_list_popover_suggestions.tsx
@@ -118,6 +118,7 @@ export const OptionsListPopoverSuggestions = ({
     if (canLoadMoreSuggestions) {
       options.push({
         key: 'loading-option',
+        'data-test-subj': 'optionslist--canLoadMore',
         className: 'optionslist--loadingMoreGroupLabel',
         label: OptionsListStrings.popover.getLoadingMoreMessage(),
         isGroupLabel: true,
@@ -150,8 +151,8 @@ export const OptionsListPopoverSuggestions = ({
     if (scrollTop + clientHeight >= scrollHeight - parseInt(euiThemeVars.euiSizeXXL, 10)) {
       // reached the "bottom" of the list, where euiSizeXXL acts as a "margin of error" so that the user doesn't
       // have to scroll **all the way** to the bottom in order to load more options
-      stateManager.requestSize.next(totalCardinality ?? MAX_OPTIONS_LIST_REQUEST_SIZE);
-      api.loadMoreSubject.next(null); // trigger refetch with loadMoreSubject
+      stateManager.requestSize.next(Math.min(totalCardinality, MAX_OPTIONS_LIST_REQUEST_SIZE));
+      api.loadMoreSubject.next(); // trigger refetch with loadMoreSubject
     }
   }, [api.loadMoreSubject, stateManager.requestSize, totalCardinality]);
 
@@ -186,7 +187,7 @@ export const OptionsListPopoverSuggestions = ({
 
   return (
     <>
-      <div ref={listRef}>
+      <div data-test-subj="optionsList--scrollListener" ref={listRef}>
         <EuiSelectable
           options={selectableOptions}
           renderOption={(option) => renderOption(option, searchString)}
@@ -196,7 +197,7 @@ export const OptionsListPopoverSuggestions = ({
             selectableOptions.length
           )}
           emptyMessage={<OptionsListPopoverEmptyMessage showOnlySelected={showOnlySelected} />}
-          onChange={(newSuggestions, _, changedOption) => {
+          onChange={(newSuggestions, event, changedOption) => {
             api.makeSelection(changedOption.key, showOnlySelected);
           }}
         >

diff --git a/...shared/controls/public/controls/data_controls/options_list_control/fetch_and_validate.tsx b/...shared/controls/public/controls/data_controls/options_list_control/fetch_and_validate.tsx
@@ -58,7 +58,10 @@ export function fetchAndValidate$({
     stateManager.sort,
     stateManager.searchTechnique,
     // cannot use requestSize directly, because we need to be able to reset the size to the default without refetching
-    api.loadMoreSubject.pipe(debounceTime(100)), // debounce load more so "loading" state briefly shows
+    api.loadMoreSubject.pipe(
+      startWith(null), // start with null so that `combineLatest` subscription fires
+      debounceTime(100) // debounce load more so "loading" state briefly shows
+    ),
     apiPublishesReload(api.parentApi)
       ? api.parentApi.reload$.pipe(
           tap(() => requestCache.clearCache()),

diff --git a/...s/public/controls/data_controls/options_list_control/get_options_list_control_factory.tsx b/...s/public/controls/data_controls/options_list_control/get_options_list_control_factory.tsx
@@ -17,6 +17,7 @@ import {
   filter,
   map,
   skip,
+  Subject,
 } from 'rxjs';
 
 import { buildExistsFilter, buildPhraseFilter, buildPhrasesFilter, Filter } from '@kbn/es-query';
@@ -172,7 +173,7 @@ export const getOptionsListControlFactory = (): DataControlFactory<
         });
 
       /** Fetch the suggestions and perform validation */
-      const loadMoreSubject = new BehaviorSubject<null>(null);
+      const loadMoreSubject = new Subject<void>();
       const fetchSubscription = fetchAndValidate$({
         api: {
           ...dataControl.api,

diff --git a/...tform/plugins/shared/controls/public/controls/data_controls/options_list_control/types.ts b/...tform/plugins/shared/controls/public/controls/data_controls/options_list_control/types.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { BehaviorSubject } from 'rxjs';
+import { Subject } from 'rxjs';
 
 import type { PublishingSubject } from '@kbn/presentation-publishing';
 import type {
@@ -37,6 +37,6 @@ export type OptionsListComponentApi = OptionsListControlApi &
   PublishesOptions & {
     deselectOption: (key: string | undefined) => void;
     makeSelection: (key: string | undefined, showOnlySelected: boolean) => void;
-    loadMoreSubject: BehaviorSubject<null>;
+    loadMoreSubject: Subject<void>;
     setExclude: (next: boolean | undefined) => void;
   };