[ML] Transform: Fix use of saved search in pivot wizard. (#51079)

Fixes applying saved searches in the transform wizard. Previously, upon initializing the transform wizard's state, we would miss passing on the initialized data from kibanaContext. The resulting bug was that saved search were not applied in the generated transform config and source preview table.

Author: walterra

x-pack/legacy/plugins/ml/public/application/components/ml_in_memory_table/index.ts

@@ -4,5 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { ProgressBar, MlInMemoryTable } from './ml_in_memory_table';
+export { ProgressBar, mlInMemoryTableFactory } from './ml_in_memory_table';
 export * from './types';

x-pack/legacy/plugins/ml/public/application/components/ml_in_memory_table/ml_in_memory_table.tsx

@@ -71,34 +71,38 @@ const getInitialSorting = (columns: any, sorting: any) => {
   };
 };
 
-import { MlInMemoryTableBasic } from './types';
-
-export class MlInMemoryTable extends MlInMemoryTableBasic {
-  static getDerivedStateFromProps(nextProps: any, prevState: any) {
-    const derivedState = {
-      ...prevState.prevProps,
-      pageIndex: nextProps.pagination.initialPageIndex,
-      pageSize: nextProps.pagination.initialPageSize,
-    };
+import { mlInMemoryTableBasicFactory } from './types';
 
-    if (nextProps.items !== prevState.prevProps.items) {
-      Object.assign(derivedState, {
-        prevProps: {
-          items: nextProps.items,
-        },
-      });
-    }
+export function mlInMemoryTableFactory<T>() {
+  const MlInMemoryTableBasic = mlInMemoryTableBasicFactory<T>();
+
+  return class MlInMemoryTable extends MlInMemoryTableBasic {
+    static getDerivedStateFromProps(nextProps: any, prevState: any) {
+      const derivedState = {
+        ...prevState.prevProps,
+        pageIndex: nextProps.pagination.initialPageIndex,
+        pageSize: nextProps.pagination.initialPageSize,
+      };
 
-    const { sortName, sortDirection } = getInitialSorting(nextProps.columns, nextProps.sorting);
-    if (
-      sortName !== prevState.prevProps.sortName ||
-      sortDirection !== prevState.prevProps.sortDirection
-    ) {
-      Object.assign(derivedState, {
-        sortName,
-        sortDirection,
-      });
+      if (nextProps.items !== prevState.prevProps.items) {
+        Object.assign(derivedState, {
+          prevProps: {
+            items: nextProps.items,
+          },
+        });
+      }
+
+      const { sortName, sortDirection } = getInitialSorting(nextProps.columns, nextProps.sorting);
+      if (
+        sortName !== prevState.prevProps.sortName ||
+        sortDirection !== prevState.prevProps.sortDirection
+      ) {
+        Object.assign(derivedState, {
+          sortName,
+          sortDirection,
+        });
+      }
+      return derivedState;
     }
-    return derivedState;
-  }
+  };
 }

x-pack/legacy/plugins/ml/public/application/components/ml_in_memory_table/types.ts

@@ -8,24 +8,21 @@ import { Component, HTMLAttributes, ReactElement, ReactNode } from 'react';
 
 import { CommonProps, EuiInMemoryTable } from '@elastic/eui';
 
-// At some point this could maybe solved with a generic <T>.
-type Item = any;
-
 // Not using an enum here because the original HorizontalAlignment is also a union type of string.
 type HorizontalAlignment = 'left' | 'center' | 'right';
 
-type SortableFunc = (item: Item) => any;
-type Sortable = boolean | SortableFunc;
+type SortableFunc<T> = <T>(item: T) => any;
+type Sortable<T> = boolean | SortableFunc<T>;
 type DATA_TYPES = any;
-type FooterFunc = (payload: { items: Item[]; pagination: any }) => ReactNode;
+type FooterFunc = <T>(payload: { items: T[]; pagination: any }) => ReactNode;
 type RenderFunc = (value: any, record?: any) => ReactNode;
-export interface FieldDataColumnType {
+export interface FieldDataColumnType<T> {
   field: string;
   name: ReactNode;
   description?: string;
   dataType?: DATA_TYPES;
   width?: string;
-  sortable?: Sortable;
+  sortable?: Sortable<T>;
   align?: HorizontalAlignment;
   truncateText?: boolean;
   render?: RenderFunc;
@@ -34,38 +31,38 @@ export interface FieldDataColumnType {
   'data-test-subj'?: string;
 }
 
-export interface ComputedColumnType {
+export interface ComputedColumnType<T> {
   render: RenderFunc;
   name?: ReactNode;
   description?: string;
-  sortable?: (item: Item) => any;
+  sortable?: (item: T) => any;
   width?: string;
   truncateText?: boolean;
   'data-test-subj'?: string;
 }
 
 type ICON_TYPES = any;
-type IconTypesFunc = (item: Item) => ICON_TYPES; // (item) => oneOf(ICON_TYPES)
+type IconTypesFunc<T> = (item: T) => ICON_TYPES; // (item) => oneOf(ICON_TYPES)
 type BUTTON_ICON_COLORS = any;
-type ButtonIconColorsFunc = (item: Item) => BUTTON_ICON_COLORS; // (item) => oneOf(ICON_BUTTON_COLORS)
-interface DefaultItemActionType {
+type ButtonIconColorsFunc<T> = (item: T) => BUTTON_ICON_COLORS; // (item) => oneOf(ICON_BUTTON_COLORS)
+interface DefaultItemActionType<T> {
   type?: 'icon' | 'button';
   name: string;
   description: string;
-  onClick?(item: Item): void;
+  onClick?(item: T): void;
   href?: string;
   target?: string;
-  available?(item: Item): boolean;
-  enabled?(item: Item): boolean;
+  available?(item: T): boolean;
+  enabled?(item: T): boolean;
   isPrimary?: boolean;
-  icon?: ICON_TYPES | IconTypesFunc; // required when type is 'icon'
-  color?: BUTTON_ICON_COLORS | ButtonIconColorsFunc;
+  icon?: ICON_TYPES | IconTypesFunc<T>; // required when type is 'icon'
+  color?: BUTTON_ICON_COLORS | ButtonIconColorsFunc<T>;
 }
 
-interface CustomItemActionType {
-  render(item: Item, enabled: boolean): ReactNode;
-  available?(item: Item): boolean;
-  enabled?(item: Item): boolean;
+interface CustomItemActionType<T> {
+  render(item: T, enabled: boolean): ReactNode;
+  available?(item: T): boolean;
+  enabled?(item: T): boolean;
   isPrimary?: boolean;
 }
 
@@ -76,20 +73,20 @@ export interface ExpanderColumnType {
   render: RenderFunc;
 }
 
-type SupportedItemActionType = DefaultItemActionType | CustomItemActionType;
+type SupportedItemActionType<T> = DefaultItemActionType<T> | CustomItemActionType<T>;
 
-export interface ActionsColumnType {
-  actions: SupportedItemActionType[];
+export interface ActionsColumnType<T> {
+  actions: Array<SupportedItemActionType<T>>;
   name?: ReactNode;
   description?: string;
   width?: string;
 }
 
-export type ColumnType =
-  | ActionsColumnType
-  | ComputedColumnType
+export type ColumnType<T> =
+  | ActionsColumnType<T>
+  | ComputedColumnType<T>
   | ExpanderColumnType
-  | FieldDataColumnType;
+  | FieldDataColumnType<T>;
 
 type QueryType = any;
 
@@ -161,17 +158,17 @@ export interface OnTableChangeArg extends Sorting {
   page: { index: number; size: number };
 }
 
-type ItemIdTypeFunc = (item: Item) => string;
+type ItemIdTypeFunc = <T>(item: T) => string;
 type ItemIdType =
   | string // the name of the item id property
   | ItemIdTypeFunc;
 
-export type EuiInMemoryTableProps = CommonProps & {
-  columns: ColumnType[];
+export type EuiInMemoryTableProps<T> = CommonProps & {
+  columns: Array<ColumnType<T>>;
   hasActions?: boolean;
   isExpandable?: boolean;
   isSelectable?: boolean;
-  items?: Item[];
+  items?: T[];
   loading?: boolean;
   message?: HTMLAttributes<HTMLDivElement>;
   error?: string;
@@ -184,16 +181,18 @@ export type EuiInMemoryTableProps = CommonProps & {
   responsive?: boolean;
   selection?: SelectionType;
   itemId?: ItemIdType;
-  itemIdToExpandedRowMap?: Record<string, Item>;
-  rowProps?: (item: Item) => void | Record<string, any>;
+  itemIdToExpandedRowMap?: Record<string, JSX.Element>;
+  rowProps?: (item: T) => void | Record<string, any>;
   cellProps?: () => void | Record<string, any>;
   onTableChange?: (arg: OnTableChangeArg) => void;
 };
 
-interface ComponentWithConstructor<T> extends Component {
+type EuiInMemoryTableType = typeof EuiInMemoryTable;
+
+interface ComponentWithConstructor<T> extends EuiInMemoryTableType {
   new (): Component<T>;
 }
 
-export const MlInMemoryTableBasic = (EuiInMemoryTable as any) as ComponentWithConstructor<
-  EuiInMemoryTableProps
->;
+export function mlInMemoryTableBasicFactory<T>() {
+  return EuiInMemoryTable as ComponentWithConstructor<EuiInMemoryTableProps<T>>;
+}

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration/exploration.tsx

@@ -35,7 +35,7 @@ import euiThemeDark from '@elastic/eui/dist/eui_theme_dark.json';
 
 import {
   ColumnType,
-  MlInMemoryTableBasic,
+  mlInMemoryTableBasicFactory,
   OnTableChangeArg,
   SortingPropType,
   SORT_DIRECTION,
@@ -59,7 +59,7 @@ import {
 } from '../../../../common';
 
 import { getOutlierScoreFieldName } from './common';
-import { useExploreData } from './use_explore_data';
+import { useExploreData, TableItem } from './use_explore_data';
 import {
   DATA_FRAME_TASK_STATE,
   Query as QueryType,
@@ -167,7 +167,7 @@ export const Exploration: FC<Props> = React.memo(({ jobId, jobStatus }) => {
     docFieldsCount = docFields.length;
   }
 
-  const columns: ColumnType[] = [];
+  const columns: Array<ColumnType<TableItem>> = [];
 
   if (jobConfig !== undefined && selectedFields.length > 0 && tableItems.length > 0) {
     // table cell color coding takes into account:
@@ -188,7 +188,7 @@ export const Exploration: FC<Props> = React.memo(({ jobId, jobStatus }) => {
 
     columns.push(
       ...selectedFields.sort(sortColumns(tableItems[0], jobConfig.dest.results_field)).map(k => {
-        const column: ColumnType = {
+        const column: ColumnType<TableItem> = {
           field: k,
           name: k,
           sortable: true,
@@ -425,6 +425,8 @@ export const Exploration: FC<Props> = React.memo(({ jobId, jobStatus }) => {
     });
   }
 
+  const MlInMemoryTableBasic = mlInMemoryTableBasicFactory<TableItem>();
+
   return (
     <EuiPanel grow={false}>
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" responsive={false}>

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration/use_explore_data.ts

@@ -27,7 +27,7 @@ import {
 import { getOutlierScoreFieldName } from './common';
 import { SavedSearchQuery } from '../../../../../contexts/kibana';
 
-type TableItem = Record<string, any>;
+export type TableItem = Record<string, any>;
 
 interface LoadExploreDataArg {
   field: string;

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/results_table.tsx

@@ -30,7 +30,7 @@ import { Query as QueryType } from '../../../analytics_management/components/ana
 
 import {
   ColumnType,
-  MlInMemoryTableBasic,
+  mlInMemoryTableBasicFactory,
   OnTableChangeArg,
   SortingPropType,
   SORT_DIRECTION,
@@ -55,7 +55,7 @@ import {
 import { getTaskStateBadge } from '../../../analytics_management/components/analytics_list/columns';
 import { DATA_FRAME_TASK_STATE } from '../../../analytics_management/components/analytics_list/common';
 
-import { useExploreData } from './use_explore_data';
+import { useExploreData, TableItem } from './use_explore_data';
 import { ExplorationTitle } from './regression_exploration';
 
 const PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
@@ -108,12 +108,12 @@ export const ResultsTable: FC<Props> = React.memo(
       docFieldsCount = docFields.length;
     }
 
-    const columns: ColumnType[] = [];
+    const columns: Array<ColumnType<TableItem>> = [];
 
     if (jobConfig !== undefined && selectedFields.length > 0 && tableItems.length > 0) {
       columns.push(
         ...selectedFields.sort(sortRegressionResultsColumns(tableItems[0], jobConfig)).map(k => {
-          const column: ColumnType = {
+          const column: ColumnType<TableItem> = {
             field: k,
             name: k,
             sortable: true,
@@ -363,6 +363,8 @@ export const ResultsTable: FC<Props> = React.memo(
         ? errorMessage
         : searchError;
 
+    const MlInMemoryTableBasic = mlInMemoryTableBasicFactory<TableItem>();
+
     return (
       <EuiPanel grow={false}>
         <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" responsive={false}>

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/use_explore_data.ts

@@ -31,7 +31,7 @@ import {
   SearchQuery,
 } from '../../../../common';
 
-type TableItem = Record<string, any>;
+export type TableItem = Record<string, any>;
 
 interface LoadExploreDataArg {
   field: string;

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx

@@ -34,7 +34,7 @@ import { getColumns } from './columns';
 import { ExpandedRow } from './expanded_row';
 import {
   ProgressBar,
-  MlInMemoryTable,
+  mlInMemoryTableFactory,
   OnTableChangeArg,
   SortDirection,
   SORT_DIRECTION,
@@ -326,6 +326,8 @@ export const DataFrameAnalyticsList: FC<Props> = ({
     setSortDirection(direction);
   };
 
+  const MlInMemoryTable = mlInMemoryTableFactory<DataFrameAnalyticsListRow>();
+
   return (
     <Fragment>
       <EuiFlexGroup justifyContent="spaceBetween">

x-pack/legacy/plugins/ml/public/application/overview/components/analytics_panel/table.tsx

@@ -8,7 +8,7 @@ import React, { FC, useState } from 'react';
 import { EuiBadge } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
-  MlInMemoryTable,
+  mlInMemoryTableFactory,
   SortDirection,
   SORT_DIRECTION,
   OnTableChangeArg,
@@ -27,7 +27,7 @@ import { AnalyticsViewAction } from '../../../data_frame_analytics/pages/analyti
 import { formatHumanReadableDateTimeSeconds } from '../../../util/date_utils';
 
 interface Props {
-  items: any[];
+  items: DataFrameAnalyticsListRow[];
 }
 export const AnalyticsTable: FC<Props> = ({ items }) => {
   const [pageIndex, setPageIndex] = useState(0);
@@ -37,7 +37,7 @@ export const AnalyticsTable: FC<Props> = ({ items }) => {
   const [sortDirection, setSortDirection] = useState<SortDirection>(SORT_DIRECTION.ASC);
 
   // id, type, status, progress, created time, view icon
-  const columns: ColumnType[] = [
+  const columns: Array<ColumnType<DataFrameAnalyticsListRow>> = [
     {
       field: DataFrameAnalyticsListColumn.id,
       name: i18n.translate('xpack.ml.overview.analyticsList.id', { defaultMessage: 'ID' }),
@@ -113,6 +113,8 @@ export const AnalyticsTable: FC<Props> = ({ items }) => {
     },
   };
 
+  const MlInMemoryTable = mlInMemoryTableFactory<DataFrameAnalyticsListRow>();
+
   return (
     <MlInMemoryTable
       allowNeutralSort={false}