[Controls] [Dashboard] Use EuiSelectable for options list suggestions

src/plugins/controls/common/options_list/types.ts

@@ -40,6 +40,7 @@ export interface OptionsListSuggestions {
  * The Options list response is returned from the serverside Options List route.
  */
 export interface OptionsListResponse {
+  rejected: boolean;
   suggestions: OptionsListSuggestions;
   totalCardinality: number;
   invalidSelections?: string[];

src/plugins/controls/public/__stories__/controls.stories.tsx

@@ -61,6 +61,7 @@ const storybookStubOptionsListRequest = async (
             {}
           ),
           totalCardinality: 100,
+          rejected: false,
         }),
       120
     )

src/plugins/controls/public/options_list/components/options_list.scss

@@ -7,15 +7,6 @@
   height: 100%;
 }
 
-.optionsList__items {
-  @include euiScrollBar;
-
-  overflow-y: auto;
-  max-height: $euiSize * 30;
-  width: $euiSize * 25;
-  max-width: 100%;
-}
-
 .optionsList__actions {
   padding: $euiSizeS;
   border-bottom: $euiBorderThin;

src/plugins/controls/public/options_list/components/options_list_control.tsx

@@ -43,18 +43,22 @@ export const OptionsListControl = ({ typeaheadSubject }: { typeaheadSubject: Sub
   const existsSelected = select((state) => state.explicitInput.existsSelected);
   const controlStyle = select((state) => state.explicitInput.controlStyle);
   const singleSelect = select((state) => state.explicitInput.singleSelect);
+  const fieldName = select((state) => state.explicitInput.fieldName);
   const exclude = select((state) => state.explicitInput.exclude);
   const id = select((state) => state.explicitInput.id);
 
   const loading = select((state) => state.output.loading);
 
   // debounce loading state so loading doesn't flash when user types
-  const [buttonLoading, setButtonLoading] = useState(true);
-  const debounceSetButtonLoading = useMemo(
-    () => debounce((latestLoading: boolean) => setButtonLoading(latestLoading), 100),
+  const [debouncedLoading, setDebouncedLoading] = useState(true);
+  const debounceSetLoading = useMemo(
+    () =>
+      debounce((latestLoading: boolean) => {
+        setDebouncedLoading(latestLoading);
+      }, 100),
     []
   );
-  useEffect(() => debounceSetButtonLoading(loading ?? false), [loading, debounceSetButtonLoading]);
+  useEffect(() => debounceSetLoading(loading ?? false), [loading, debounceSetLoading]);
 
   // remove all other selections if this control is single select
   useEffect(() => {
@@ -111,7 +115,7 @@ export const OptionsListControl = ({ typeaheadSubject }: { typeaheadSubject: Sub
     <div className="optionsList--filterBtnWrapper" ref={resizeRef}>
       <EuiFilterButton
         iconType="arrowDown"
-        isLoading={buttonLoading}
+        isLoading={debouncedLoading}
         className={classNames('optionsList--filterBtn', {
           'optionsList--filterBtnSingle': controlStyle !== 'twoLine',
           'optionsList--filterBtnPlaceholder': !hasSelections,
@@ -145,9 +149,13 @@ export const OptionsListControl = ({ typeaheadSubject }: { typeaheadSubject: Sub
         className="optionsList__popoverOverride"
         closePopover={() => setIsPopoverOpen(false)}
         anchorClassName="optionsList__anchorOverride"
-        aria-labelledby={`control-popover-${id}`}
+        aria-label={OptionsListStrings.popover.getAriaLabel(fieldName)}
       >
-        <OptionsListPopover width={dimensions.width} updateSearchString={updateSearchString} />
+        <OptionsListPopover
+          width={dimensions.width}
+          isLoading={debouncedLoading}
+          updateSearchString={updateSearchString}
+        />
       </EuiPopover>
     </EuiFilterGroup>
   );

src/plugins/controls/public/options_list/components/options_list_popover.test.tsx

@@ -21,6 +21,7 @@ import { ControlOutput, OptionsListEmbeddableInput } from '../..';
 describe('Options list popover', () => {
   const defaultProps = {
     width: 500,
+    isLoading: false,
     updateSearchString: jest.fn(),
   };
 
@@ -56,13 +57,13 @@ describe('Options list popover', () => {
 
   test('available options list width responds to container size', async () => {
     let popover = await mountComponent({ popoverProps: { width: 301 } });
-    let availableOptionsDiv = findTestSubject(popover, 'optionsList-control-available-options');
-    expect(availableOptionsDiv.getDOMNode().getAttribute('style')).toBe('width: 301px;');
+    let popoverDiv = findTestSubject(popover, 'optionsList-control-popover');
+    expect(popoverDiv.getDOMNode().getAttribute('style')).toBe('width: 301px;');
 
     // the div cannot be smaller than 301 pixels wide
     popover = await mountComponent({ popoverProps: { width: 300 } });
-    availableOptionsDiv = findTestSubject(popover, 'optionsList-control-available-options');
-    expect(availableOptionsDiv.getDOMNode().getAttribute('style')).toBe(null);
+    popoverDiv = findTestSubject(popover, 'optionsList-control-available-options');
+    expect(popoverDiv.getDOMNode().getAttribute('style')).toBe(null);
   });
 
   test('no available options', async () => {
@@ -92,13 +93,12 @@ describe('Options list popover', () => {
       explicitInput: { selectedOptions: selections },
     });
     clickShowOnlySelections(popover);
-    const availableOptionsDiv = findTestSubject(popover, 'optionsList-control-available-options');
-    availableOptionsDiv
-      .childAt(0)
-      .children()
-      .forEach((child, i) => {
-        expect(child.text()).toBe(selections[i]);
-      });
+    const availableOptions = popover.find(
+      '[data-test-subj="optionsList-control-available-options"] ul'
+    );
+    availableOptions.children().forEach((child, i) => {
+      expect(child.text()).toBe(`${selections[i]} - Checked option.`);
+    });
   });
 
   test('disable search and sort when show only selected toggle is true', async () => {
@@ -132,11 +132,18 @@ describe('Options list popover', () => {
       },
     });
     const validSelection = findTestSubject(popover, 'optionsList-control-selection-bark');
-    expect(validSelection.text()).toEqual('bark75');
+    expect(validSelection.find('.euiSelectableListItem__text').text()).toEqual(
+      'bark - Checked option.'
+    );
+    expect(
+      validSelection.find('div[data-test-subj="optionsList-document-count-badge"]').text().trim()
+    ).toEqual('75');
     const title = findTestSubject(popover, 'optionList__ignoredSelectionLabel').text();
     expect(title).toEqual('Ignored selection');
     const invalidSelection = findTestSubject(popover, 'optionsList-control-ignored-selection-woof');
-    expect(invalidSelection.text()).toEqual('woof');
+    expect(invalidSelection.find('.euiSelectableListItem__text').text()).toEqual(
+      'woof - Checked option.'
+    );
     expect(invalidSelection.hasClass('optionsList__selectionInvalid')).toBe(true);
   });
 
@@ -221,8 +228,10 @@ describe('Options list popover', () => {
       explicitInput: { existsSelected: true },
     });
     clickShowOnlySelections(popover);
-    const availableOptionsDiv = findTestSubject(popover, 'optionsList-control-available-options');
-    expect(availableOptionsDiv.children().at(0).text()).toBe('Exists');
+    const availableOptions = popover.find(
+      '[data-test-subj="optionsList-control-available-options"] ul'
+    );
+    expect(availableOptions.text()).toBe('Exists - Checked option.');
   });
 
   test('when sorting suggestions, show both sorting types for keyword field', async () => {

src/plugins/controls/public/options_list/components/options_list_popover.tsx

@@ -22,10 +22,15 @@ import { OptionsListPopoverInvalidSelections } from './options_list_popover_inva
 
 export interface OptionsListPopoverProps {
   width: number;
+  isLoading: boolean;
   updateSearchString: (newSearchString: string) => void;
 }
 
-export const OptionsListPopover = ({ width, updateSearchString }: OptionsListPopoverProps) => {
+export const OptionsListPopover = ({
+  width,
+  isLoading,
+  updateSearchString,
+}: OptionsListPopoverProps) => {
   // Redux embeddable container Context
   const { useEmbeddableSelector: select } = useReduxEmbeddableContext<
     OptionsListReduxState,
@@ -45,9 +50,10 @@ export const OptionsListPopover = ({ width, updateSearchString }: OptionsListPop
   const [showOnlySelected, setShowOnlySelected] = useState(false);
 
   return (
-    <span
-      role="listbox"
+    <div
       id={`control-popover-${id}`}
+      style={{ width: width > 300 ? width : undefined }}
+      data-test-subj={`optionsList-control-popover`}
       aria-label={OptionsListStrings.popover.getAriaLabel(fieldName)}
     >
       <EuiPopoverTitle paddingSize="s">{title}</EuiPopoverTitle>
@@ -59,17 +65,15 @@ export const OptionsListPopover = ({ width, updateSearchString }: OptionsListPop
         />
       )}
       <div
-        className="optionsList __items"
-        style={{ width: width > 300 ? width : undefined }}
         data-test-subj={`optionsList-control-available-options`}
-        data-option-count={Object.keys(availableOptions ?? {}).length}
+        data-option-count={isLoading ? 0 : Object.keys(availableOptions ?? {}).length}
       >
-        <OptionsListPopoverSuggestions showOnlySelected={showOnlySelected} />
+        <OptionsListPopoverSuggestions showOnlySelected={showOnlySelected} isLoading={isLoading} />
         {!showOnlySelected && invalidSelections && !isEmpty(invalidSelections) && (
           <OptionsListPopoverInvalidSelections />
         )}
       </div>
       {!hideExclude && <OptionsListPopoverFooter />}
-    </span>
+    </div>
   );
 };

src/plugins/controls/public/options_list/components/options_list_popover_empty_message.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiIcon, EuiSpacer } from '@elastic/eui';
+
+import { OptionsListStrings } from './options_list_strings';
+
+export const OptionsListPopoverEmptyMessage = ({
+  showOnlySelected,
+}: {
+  showOnlySelected: boolean;
+}) => {
+  return (
+    <span
+      className="euiFilterSelect__note"
+      data-test-subj={`optionsList-control-${
+        showOnlySelected ? 'selectionsEmptyMessage' : 'noSelectionsMessage'
+      }`}
+    >
+      <span className="euiFilterSelect__noteContent">
+        <EuiIcon type="minusInCircle" />
+        <EuiSpacer size="xs" />
+        {showOnlySelected
+          ? OptionsListStrings.popover.getSelectionsEmptyMessage()
+          : OptionsListStrings.popover.getEmptyMessage()}
+      </span>
+    </span>
+  );
+};

src/plugins/controls/public/options_list/components/options_list_popover_invalid_selections.tsx

@@ -6,9 +6,15 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { EuiFilterSelectItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import {
+  EuiSelectableOption,
+  EuiSelectable,
+  EuiSpacer,
+  EuiTitle,
+  EuiScreenReaderOnly,
+} from '@elastic/eui';
 import { useReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public';
 
 import { OptionsListReduxState } from '../types';
@@ -26,6 +32,31 @@ export const OptionsListPopoverInvalidSelections = () => {
 
   // Select current state from Redux using multiple selectors to avoid rerenders.
   const invalidSelections = select((state) => state.componentState.invalidSelections);
+  const fieldName = select((state) => state.explicitInput.fieldName);
+
+  const [selectableOptions, setSelectableOptions] = useState<EuiSelectableOption[]>([]); // will be set in following useEffect
+  useEffect(() => {
+    /* This useEffect makes selectableOptions responsive to unchecking options */
+    const options: EuiSelectableOption[] = (invalidSelections ?? []).map((key) => {
+      return {
+        key,
+        label: key,
+        checked: 'on',
+        className: 'optionsList__selectionInvalid',
+        'data-test-subj': `optionsList-control-ignored-selection-${key}`,
+        prepend: (
+          <EuiScreenReaderOnly>
+            <div>
+              {OptionsListStrings.popover.getInvalidSelectionScreenReaderText()}
+              {'" "'} {/* Adds a pause for the screen reader */}
+            </div>
+          </EuiScreenReaderOnly>
+        ),
+      };
+    });
+    setSelectableOptions(options);
+  }, [invalidSelections]);
+
   return (
     <>
       <EuiSpacer size="s" />
@@ -40,18 +71,20 @@ export const OptionsListPopoverInvalidSelections = () => {
           )}
         </label>
       </EuiTitle>
-      {invalidSelections?.map((ignoredSelection, index) => (
-        <EuiFilterSelectItem
-          data-test-subj={`optionsList-control-ignored-selection-${ignoredSelection}`}
-          checked={'on'}
-          className="optionsList__selectionInvalid"
-          key={index}
-          onClick={() => dispatch(deselectOption(ignoredSelection))}
-          aria-label={OptionsListStrings.popover.getInvalidSelectionAriaLabel(ignoredSelection)}
-        >
-          {`${ignoredSelection}`}
-        </EuiFilterSelectItem>
-      ))}
+      <EuiSelectable
+        aria-label={OptionsListStrings.popover.getInvalidSelectionsSectionAriaLabel(
+          fieldName,
+          invalidSelections?.length ?? 0
+        )}
+        options={selectableOptions}
+        listProps={{ onFocusBadge: false, isVirtualized: false }}
+        onChange={(newSuggestions, _, changedOption) => {
+          setSelectableOptions(newSuggestions);
+          dispatch(deselectOption(changedOption.label));
+        }}
+      >
+        {(list) => list}
+      </EuiSelectable>
     </>
   );
 };

src/plugins/controls/public/options_list/components/options_list_popover_suggestion_badge.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { css } from '@emotion/react';
+import { EuiScreenReaderOnly, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
+
+import { OptionsListStrings } from './options_list_strings';
+
+export const OptionsListPopoverSuggestionBadge = ({ documentCount }: { documentCount: number }) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <>
+      <EuiToolTip
+        content={OptionsListStrings.popover.getDocumentCountTooltip(documentCount)}
+        position={'right'}
+      >
+        <EuiText
+          size="xs"
+          aria-hidden={true}
+          className="eui-textNumber"
+          color={euiTheme.colors.subduedText}
+          data-test-subj="optionsList-document-count-badge"
+          css={css`
+            font-weight: ${euiTheme.font.weight.medium} !important;
+          `}
+        >
+          {`${documentCount.toLocaleString()}`}
+        </EuiText>
+      </EuiToolTip>
+      <EuiScreenReaderOnly>
+        <div>
+          {'" "'} {/* Adds a pause for the screen reader */}
+          {OptionsListStrings.popover.getDocumentCountScreenReaderText(documentCount)}
+        </div>
+      </EuiScreenReaderOnly>
+    </>
+  );
+};