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

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}