[8.x] [ML] Adds ability to toggle visibility for empty fields when choosing an aggregation or field in Anomaly detection, data frame analytics (#186670)

x-pack/packages/ml/field_stats_flyout/field_stats_flyout_provider.tsx

@@ -142,6 +142,7 @@ export const FieldStatsFlyoutProvider: FC<FieldStatsFlyoutProviderProps> = (prop
           // Get all field names for each returned doc and flatten it
           // to a list of unique field names used across all docs.
           const fieldsWithData = new Set(docs.map(Object.keys).flat(1));
+
           manager.set(cacheKey, fieldsWithData);
           if (!unmounted) {
             setPopulatedFields(fieldsWithData);

x-pack/packages/ml/field_stats_flyout/field_stats_info_button.tsx

@@ -88,6 +88,7 @@ export const FieldStatsInfoButton: FC<FieldStatsInfoButtonProps> = (props) => {
         defaultMessage: '(no data found in 1000 sample records)',
       })
     : '';
+
   return (
     <EuiFlexGroup gutterSize="none" alignItems="center">
       <EuiFlexItem grow={false}>
@@ -135,22 +136,22 @@ export const FieldStatsInfoButton: FC<FieldStatsInfoButtonProps> = (props) => {
         grow={false}
         css={{
           paddingRight: themeVars.euiTheme.euiSizeXS,
-          paddingBottom: themeVars.euiTheme.euiSizeXS,
         }}
       >
-        <FieldIcon
-          color={isEmpty ? themeVars.euiTheme.euiColorDisabled : undefined}
-          type={getKbnFieldIconType(field.type)}
-          fill="none"
-        />
+        {!hideTrigger ? (
+          <FieldIcon
+            color={isEmpty ? themeVars.euiTheme.euiColorDisabled : undefined}
+            type={getKbnFieldIconType(field.type)}
+            fill="none"
+          />
+        ) : null}
       </EuiFlexItem>
       <EuiText
         color={isEmpty ? 'subdued' : undefined}
         size="s"
         aria-label={label}
         title={label}
         className="euiComboBoxOption__content"
-        css={{ paddingBottom: themeVars.euiTheme.euiSizeXS }}
       >
         {label}
       </EuiText>

x-pack/packages/ml/field_stats_flyout/index.ts

@@ -21,7 +21,6 @@ export {
   type FieldStatsInfoButtonProps,
 } from './field_stats_info_button';
 export { useFieldStatsTrigger } from './use_field_stats_trigger';
-export {
-  EuiComboBoxWithFieldStats,
-  type EuiComboBoxWithFieldStatsProps,
-} from './eui_combo_box_with_field_stats';
+
+export { OptionListWithFieldStats } from './options_list_with_stats/option_list_with_stats';
+export type { DropDownLabel } from './options_list_with_stats/types';

x-pack/packages/ml/field_stats_flyout/options_list_with_stats/option_list_popover.tsx

@@ -0,0 +1,158 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import type { FC } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
+import { isDefined } from '@kbn/ml-is-defined';
+import type {
+  EuiComboBoxOptionOption,
+  EuiComboBoxSingleSelectionShape,
+  EuiSelectableOption,
+} from '@elastic/eui';
+import { EuiFlexItem, EuiSelectable, htmlIdGenerator } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { type DropDownLabel } from './types';
+import { useFieldStatsFlyoutContext } from '../use_field_stats_flyout_context';
+import { OptionsListPopoverFooter } from './option_list_popover_footer';
+
+interface OptionsListPopoverProps {
+  options: DropDownLabel[];
+  renderOption: (option: DropDownLabel) => React.ReactNode;
+  singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
+  onChange?:
+    | ((newSuggestions: DropDownLabel[]) => void)
+    | ((
+        newSuggestions: Array<EuiComboBoxOptionOption<string | number | string[] | undefined>>
+      ) => void);
+  setPopoverOpen: (open: boolean) => void;
+  isLoading?: boolean;
+}
+
+interface OptionsListPopoverSuggestionsProps {
+  options: DropDownLabel[];
+  renderOption: (option: DropDownLabel) => React.ReactNode;
+  singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
+  onChange?:
+    | ((newSuggestions: DropDownLabel[]) => void)
+    | ((
+        newSuggestions: Array<EuiComboBoxOptionOption<string | number | string[] | undefined>>
+      ) => void);
+  setPopoverOpen: (open: boolean) => void;
+}
+const OptionsListPopoverSuggestions: FC<OptionsListPopoverSuggestionsProps> = ({
+  options,
+  renderOption,
+  singleSelection,
+  onChange,
+  setPopoverOpen,
+}) => {
+  const [selectableOptions, setSelectableOptions] = useState<DropDownLabel[]>([]); // will be set in following useEffect
+  useEffect(() => {
+    /* This useEffect makes selectableOptions responsive to search, show only selected, and clear selections */
+    const _selectableOptions = (options ?? []).map((suggestion) => {
+      const key = suggestion.label ?? suggestion.field?.id;
+      return {
+        ...suggestion,
+        key,
+        checked: undefined,
+        'data-test-subj': `optionsListControlSelection-${key}`,
+      };
+    });
+    setSelectableOptions(_selectableOptions);
+  }, [options]);
+
+  return (
+    <EuiSelectable
+      searchProps={{ 'data-test-subj': 'optionsListFilterInput' }}
+      singleSelection={Boolean(singleSelection)}
+      searchable
+      options={selectableOptions as Array<EuiSelectableOption<string>>}
+      renderOption={renderOption}
+      listProps={{ onFocusBadge: false }}
+      onChange={(opts, _, changedOption) => {
+        const option = changedOption as DropDownLabel;
+        if (singleSelection) {
+          if (onChange) {
+            onChange([option as EuiComboBoxOptionOption<string | number | string[] | undefined>]);
+            setPopoverOpen(false);
+          }
+        } else {
+          if (onChange) {
+            onChange([option as EuiComboBoxOptionOption<string | number | string[] | undefined>]);
+            setPopoverOpen(false);
+          }
+        }
+      }}
+    >
+      {(list, search) => (
+        <>
+          {search}
+          {list}
+        </>
+      )}
+    </EuiSelectable>
+  );
+};
+
+export const OptionsListPopover = ({
+  options,
+  renderOption,
+  singleSelection,
+  onChange,
+  setPopoverOpen,
+  isLoading,
+}: OptionsListPopoverProps) => {
+  const { populatedFields } = useFieldStatsFlyoutContext();
+
+  const [showEmptyFields, setShowEmptyFields] = useState(false);
+  const id = useMemo(() => htmlIdGenerator()(), []);
+
+  const filteredOptions = useMemo(() => {
+    return showEmptyFields
+      ? options
+      : options.filter((option) => {
+          if (isDefined(option['data-is-empty'])) {
+            return !option['data-is-empty'];
+          }
+          if (
+            Object.hasOwn(option, 'isGroupLabel') ||
+            Object.hasOwn(option, 'isGroupLabelOption')
+          ) {
+            const key = option.key ?? option.searchableLabel;
+            return key ? populatedFields?.has(key) : false;
+          }
+          if (option.field) {
+            return populatedFields?.has(option.field.id);
+          }
+          return true;
+        });
+  }, [options, showEmptyFields, populatedFields]);
+  return (
+    <div
+      id={`control-popover-${id}`}
+      className={'optionsList__popover'}
+      data-test-subj={`optionsListControlPopover`}
+    >
+      <EuiFlexItem
+        data-test-subj={`optionsListControlAvailableOptions`}
+        css={css({ width: '100%', height: '100%' })}
+      >
+        <OptionsListPopoverSuggestions
+          renderOption={renderOption}
+          options={filteredOptions}
+          singleSelection={singleSelection}
+          onChange={onChange}
+          setPopoverOpen={setPopoverOpen}
+        />
+      </EuiFlexItem>
+      <OptionsListPopoverFooter
+        showEmptyFields={showEmptyFields}
+        setShowEmptyFields={setShowEmptyFields}
+        isLoading={isLoading}
+      />
+    </div>
+  );
+};

x-pack/packages/ml/field_stats_flyout/options_list_with_stats/option_list_popover_footer.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import type { FC } from 'react';
+import { EuiPopoverFooter, EuiSwitch, EuiProgress, useEuiBackgroundColor } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import { euiThemeVars } from '@kbn/ui-theme';
+
+export const OptionsListPopoverFooter: FC<{
+  showEmptyFields: boolean;
+  setShowEmptyFields: (showEmptyFields: boolean) => void;
+  isLoading?: boolean;
+}> = ({ showEmptyFields, setShowEmptyFields, isLoading }) => {
+  return (
+    <EuiPopoverFooter
+      paddingSize="none"
+      css={css({
+        height: euiThemeVars.euiButtonHeight,
+        backgroundColor: useEuiBackgroundColor('subdued'),
+        alignItems: 'center',
+        display: 'flex',
+        paddingLeft: euiThemeVars.euiSizeS,
+      })}
+    >
+      {isLoading ? (
+        // @ts-expect-error css should be ok
+        <div css={css({ position: 'absolute', width: '100%' })}>
+          <EuiProgress
+            data-test-subj="optionsList-control-popover-loading"
+            size="xs"
+            color="accent"
+          />
+        </div>
+      ) : null}
+
+      <EuiSwitch
+        data-test-subj="optionsListIncludeEmptyFields"
+        label={i18n.translate('xpack.ml.controls.optionsList.popover.includeEmptyFieldsLabel', {
+          defaultMessage: 'Include empty fields',
+        })}
+        checked={showEmptyFields}
+        onChange={(e) => setShowEmptyFields(e.target.checked)}
+      />
+    </EuiPopoverFooter>
+  );
+};