[8.x] [ML] Add control to show or hide empty fields in dropdown in Transform (#195485) (#196451)

# Backport This will backport the following commits from `main` to `8.x`: - [[ML] Add control to show or hide empty fields in dropdown in Transform (#195485)](https://github.com/elastic/kibana/pull/195485)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Quynh Nguyen (Quinn) <43350163+qn895@users.noreply.github.com>
2025-04-24 01:38:56 -04:00 · 2024-10-16 10:49:31 +11:00 · 2024-10-16 10:49:31 +11:00 · e24a6653d2
commit e24a6653d2
parent 2a288431d3
8 changed files with 119 additions and 45 deletions
--- a/x-pack/packages/ml/field_stats_flyout/options_list_with_stats/option_list_popover.tsx
+++ b/x-pack/packages/ml/field_stats_flyout/options_list_with_stats/option_list_popover.tsx
@ -107,7 +107,9 @@ export const OptionsListPopover = ({
 }: OptionsListPopoverProps) => {
  const { populatedFields } = useFieldStatsFlyoutContext();

-  const [showEmptyFields, setShowEmptyFields] = useState(false);
+  const [showEmptyFields, setShowEmptyFields] = useState(
+    populatedFields ? !(populatedFields.size > 0) : true
+  );
  const id = useMemo(() => htmlIdGenerator()(), []);

  const filteredOptions = useMemo(() => {
--- a/x-pack/packages/ml/field_stats_flyout/options_list_with_stats/option_list_with_stats.tsx
+++ b/x-pack/packages/ml/field_stats_flyout/options_list_with_stats/option_list_with_stats.tsx
@ -7,7 +7,11 @@

 import type { FC } from 'react';
 import React, { useMemo, useState } from 'react';
-import type { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape } from '@elastic/eui';
+import type {
+  EuiComboBoxOptionOption,
+  EuiComboBoxSingleSelectionShape,
+  EuiFormControlLayoutProps,
+} from '@elastic/eui';
 import { EuiInputPopover, htmlIdGenerator, EuiFormControlLayout, EuiFieldText } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
@ -18,8 +22,6 @@ import type { DropDownLabel } from './types';
 const MIN_POPOVER_WIDTH = 400;

 export const optionCss = css`
-  display: flex;
-  align-items: center;
  .euiComboBoxOption__enterBadge {
    display: none;
  }
@ -31,7 +33,8 @@ export const optionCss = css`
  }
 `;

-interface OptionListWithFieldStatsProps {
+interface OptionListWithFieldStatsProps
+  extends Pick<EuiFormControlLayoutProps, 'prepend' | 'compressed'> {
  options: DropDownLabel[];
  placeholder?: string;
  'aria-label'?: string;
@ -58,6 +61,8 @@ export const OptionListWithFieldStats: FC<OptionListWithFieldStatsProps> = ({
  isDisabled,
  isLoading,
  isClearable = true,
+  prepend,
+  compressed,
  'aria-label': ariaLabel,
  'data-test-subj': dataTestSubj,
 }) => {
@ -68,13 +73,12 @@ export const OptionListWithFieldStats: FC<OptionListWithFieldStatsProps> = ({
  const comboBoxOptions: DropDownLabel[] = useMemo(
    () =>
      Array.isArray(options)
-        ? options.map(({ isEmpty, hideTrigger: hideInspectButton, ...o }) => ({
+        ? options.map(({ isEmpty, ...o }) => ({
            ...o,
            css: optionCss,
            // Change data-is-empty- because EUI is passing all props to dom element
            // so isEmpty is invalid, but we need this info to render option correctly
            'data-is-empty': isEmpty,
-            'data-hide-inspect': hideInspectButton,
          }))
        : [],
    [options]
@ -89,6 +93,8 @@ export const OptionListWithFieldStats: FC<OptionListWithFieldStatsProps> = ({
      id={popoverId}
      input={
        <EuiFormControlLayout
+          prepend={prepend}
+          compressed={compressed}
          fullWidth={fullWidth}
          // Adding classname to make functional tests similar to EuiComboBox
          className={singleSelection ? 'euiComboBox__inputWrap--plainText' : ''}
--- a/x-pack/packages/ml/field_stats_flyout/options_list_with_stats/types.ts
+++ b/x-pack/packages/ml/field_stats_flyout/options_list_with_stats/types.ts
@ -9,8 +9,9 @@ import type { EuiComboBoxOptionOption, EuiSelectableOption } from '@elastic/eui'
 import type { Aggregation, Field } from '@kbn/ml-anomaly-utils';

 interface BaseOption<T> {
-  key?: string;
  label: string | React.ReactNode;
+  key?: string;
+  value?: string | number | string[];
  isEmpty?: boolean;
  hideTrigger?: boolean;
  'data-is-empty'?: boolean;
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_dropdown/dropdown.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_dropdown/dropdown.tsx
@ -8,7 +8,7 @@
 import React from 'react';

 import type { EuiComboBoxOptionsListProps, EuiComboBoxOptionOption } from '@elastic/eui';
-import { EuiComboBox } from '@elastic/eui';
+import { OptionListWithFieldStats } from '@kbn/ml-field-stats-flyout/options_list_with_stats/option_list_with_stats';

 interface Props {
  options: EuiComboBoxOptionOption[];
@ -30,7 +30,7 @@ export const DropDown: React.FC<Props> = ({
  isDisabled,
 }) => {
  return (
-    <EuiComboBox
+    <OptionListWithFieldStats
      fullWidth
      placeholder={placeholder}
      singleSelection={{ asPlainText: true }}
@ -40,7 +40,6 @@ export const DropDown: React.FC<Props> = ({
      isClearable={false}
      data-test-subj={testSubj}
      isDisabled={isDisabled}
-      renderOption={renderOption}
    />
  );
 };
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/sub_aggs_section.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/sub_aggs_section.tsx
@ -11,11 +11,14 @@ import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import { EuiSpacer, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { FieldStatsInfoButton, useFieldStatsTrigger } from '@kbn/ml-field-stats-flyout';
 import { AggListForm } from './list_form';
 import { DropDown } from '../aggregation_dropdown';
 import type { PivotAggsConfig } from '../../../../common';
 import { PivotConfigurationContext } from '../pivot_configuration/pivot_configuration';
 import { MAX_NESTING_SUB_AGGS } from '../../../../common/pivot_aggs';
+import type { DropDownOptionWithField } from '../step_define/common/get_pivot_dropdown_options';
+import type { DropDownOption } from '../../../../common/dropdown';

 /**
 * Component for managing sub-aggregation of the provided
@ -54,11 +57,47 @@ export const SubAggsSection: FC<{ item: PivotAggsConfig }> = ({ item }) => {
    }
    return nestingLevel <= MAX_NESTING_SUB_AGGS;
  }, [item]);
+  const { handleFieldStatsButtonClick, populatedFields } = useFieldStatsTrigger();

+  const options = useMemo(() => {
+    const opts: EuiComboBoxOptionOption[] = [];
+    state.aggOptions.forEach(({ label, field, options: aggOptions }: DropDownOptionWithField) => {
+      const isEmpty = populatedFields && field.id ? !populatedFields.has(field.id) : false;
+
+      const aggOption: DropDownOption = {
+        isGroupLabel: true,
+        key: field.id,
+        searchableLabel: label,
+        // @ts-ignore Purposefully passing label as element instead of string
+        // for more robust rendering
+        label: (
+          <FieldStatsInfoButton
+            isEmpty={populatedFields && !populatedFields.has(field.id)}
+            field={field}
+            label={label}
+            onButtonClick={handleFieldStatsButtonClick}
+          />
+        ),
+      };
+
+      if (aggOptions.length) {
+        opts.push(aggOption);
+        opts.push(
+          ...aggOptions.map((o) => ({
+            ...o,
+            isEmpty,
+            isGroupLabel: false,
+            searchableLabel: o.label,
+          }))
+        );
+      }
+    });
+    return opts;
+  }, [handleFieldStatsButtonClick, populatedFields, state.aggOptions]);
  const dropdown = (
    <DropDown
      changeHandler={addSubAggHandler}
-      options={state.aggOptions}
+      options={options}
      placeholder={i18n.translate('xpack.transform.stepDefineForm.addSubAggregationPlaceholder', {
        defaultMessage: 'Add a sub-aggregation ...',
      })}
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/pivot_configuration/pivot_configuration.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/pivot_configuration/pivot_configuration.tsx
@ -12,7 +12,6 @@ import { EuiFormRow, type EuiComboBoxOptionOption } from '@elastic/eui';

 import { i18n } from '@kbn/i18n';
 import { useFieldStatsTrigger, FieldStatsInfoButton } from '@kbn/ml-field-stats-flyout';
-
 import { type DropDownOptionWithField } from '../step_define/common/get_pivot_dropdown_options';
 import type { DropDownOption } from '../../../../common';
 import { AggListForm } from '../aggregation_list';
@ -41,28 +40,42 @@ export const PivotConfiguration: FC<StepDefineFormHook['pivotConfig']> = memo(
    const { aggList, aggOptions, aggOptionsData, groupByList, groupByOptions, groupByOptionsData } =
      state;

-    const aggOptionsWithFieldStats: EuiComboBoxOptionOption[] = useMemo(
-      () =>
-        aggOptions.map(({ label, field, options }: DropDownOptionWithField) => {
-          const aggOption: DropDownOption = {
-            isGroupLabelOption: true,
-            key: field.id,
-            // @ts-ignore Purposefully passing label as element instead of string
-            // for more robust rendering
-            label: (
-              <FieldStatsInfoButton
-                isEmpty={populatedFields && !populatedFields.has(field.id)}
-                field={field}
-                label={label}
-                onButtonClick={handleFieldStatsButtonClick}
-              />
-            ),
-            options: options ?? [],
-          };
-          return aggOption;
-        }),
-      [aggOptions, handleFieldStatsButtonClick, populatedFields]
-    );
+    const aggOptionsWithFieldStats: EuiComboBoxOptionOption[] = useMemo(() => {
+      const opts: EuiComboBoxOptionOption[] = [];
+      aggOptions.forEach(({ label, field, options }: DropDownOptionWithField) => {
+        const isEmpty = populatedFields && field.id ? !populatedFields.has(field.id) : false;
+
+        const aggOption: DropDownOption = {
+          isGroupLabel: true,
+          key: field.id,
+          searchableLabel: label,
+          // @ts-ignore Purposefully passing label as element instead of string
+          // for more robust rendering
+          label: (
+            <FieldStatsInfoButton
+              isEmpty={populatedFields && !populatedFields.has(field.id)}
+              field={field}
+              label={label}
+              onButtonClick={handleFieldStatsButtonClick}
+            />
+          ),
+        };
+
+        if (options.length) {
+          opts.push(aggOption);
+          opts.push(
+            ...options.map((o) => ({
+              ...o,
+              isEmpty,
+              isGroupLabel: false,
+              searchableLabel: o.label,
+            }))
+          );
+        }
+      });
+      return opts;
+    }, [aggOptions, handleFieldStatsButtonClick, populatedFields]);
+
    return (
      <PivotConfigurationContext.Provider value={{ actions, state }}>
        <EuiFormRow
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/latest_function_form.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/latest_function_form.tsx
@ -10,7 +10,8 @@ import React, { type FC } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButtonIcon, EuiCallOut, EuiComboBox, EuiCopy, EuiFormRow } from '@elastic/eui';
-import { useFieldStatsTrigger } from '@kbn/ml-field-stats-flyout';
+import type { DropDownLabel } from '@kbn/ml-field-stats-flyout';
+import { OptionListWithFieldStats, useFieldStatsTrigger } from '@kbn/ml-field-stats-flyout';
 import type { LatestFunctionService } from './hooks/use_latest_function_config';

 interface LatestFunctionFormProps {
@ -73,7 +74,7 @@ export const LatestFunctionForm: FC<LatestFunctionFormProps> = ({
      >
        <>
          {latestFunctionService.sortFieldOptions.length > 0 && (
-            <EuiComboBox
+            <OptionListWithFieldStats
              fullWidth
              placeholder={i18n.translate('xpack.transform.stepDefineForm.sortPlaceholder', {
                defaultMessage: 'Add a date field ...',
@ -83,15 +84,19 @@ export const LatestFunctionForm: FC<LatestFunctionFormProps> = ({
              selectedOptions={
                latestFunctionService.config.sort ? [latestFunctionService.config.sort] : []
              }
-              onChange={(selected) => {
-                latestFunctionService.updateLatestFunctionConfig({
-                  sort: { value: selected[0].value, label: selected[0].label as string },
-                });
+              onChange={(selected: DropDownLabel[]) => {
+                if (typeof selected[0].value === 'string') {
+                  latestFunctionService.updateLatestFunctionConfig({
+                    sort: {
+                      value: selected[0].value,
+                      label: selected[0].label?.toString(),
+                    },
+                  });
+                }
                closeFlyout();
              }}
              isClearable={false}
              data-test-subj="transformWizardSortFieldSelector"
-              renderOption={renderOption}
            />
          )}
          {latestFunctionService.sortFieldOptions.length === 0 && (
--- a/x-pack/test/functional/services/transform/wizard.ts
+++ b/x-pack/test/functional/services/transform/wizard.ts
@ -444,7 +444,10 @@ export function TransformWizardProvider({ getService, getPageObjects }: FtrProvi
    },

    async setSortFieldValue(identificator: string, label: string) {
-      await comboBox.set('transformWizardSortFieldSelector > comboBoxInput', identificator);
+      await ml.commonUI.setOptionsListWithFieldStatsValue(
+        'transformWizardSortFieldSelector > comboBoxInput',
+        identificator
+      );
      await this.assertSortFieldInputValue(identificator);
    },

@ -507,7 +510,10 @@ export function TransformWizardProvider({ getService, getPageObjects }: FtrProvi
      expectedLabel: string,
      expectedIntervalLabel?: string
    ) {
-      await comboBox.set('transformGroupBySelection > comboBoxInput', identifier);
+      await ml.commonUI.setOptionsListWithFieldStatsValue(
+        'transformGroupBySelection > comboBoxInput',
+        identifier
+      );
      await this.assertGroupByInputValue([]);
      await this.assertGroupByEntryExists(index, expectedLabel, expectedIntervalLabel);
    },
@ -582,7 +588,10 @@ export function TransformWizardProvider({ getService, getPageObjects }: FtrProvi
      formData?: Record<string, any>,
      parentSelector = ''
    ) {
-      await comboBox.set(this.getAggComboBoxInputSelector(parentSelector), identifier);
+      await ml.commonUI.setOptionsListWithFieldStatsValue(
+        this.getAggComboBoxInputSelector(parentSelector),
+        identifier
+      );
      await this.assertAggregationInputValue([], parentSelector);
      await this.assertAggregationEntryExists(index, expectedLabel, parentSelector);