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

* [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.

* [ML] Fix search for Transforms and Analytics tables (#52163)

* [ML] fix TransformTable init

* [ML] fix Analytics table

* [ML] Fix table imports.

Author: walterra

x-pack/legacy/plugins/ml/public/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/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/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/data_frame_analytics/pages/analytics_exploration/components/exploration/exploration.tsx

@@ -32,7 +32,7 @@ import euiThemeDark from '@elastic/eui/dist/eui_theme_dark.json';
 
 import {
   ColumnType,
-  MlInMemoryTableBasic,
+  mlInMemoryTableBasicFactory,
   OnTableChangeArg,
   SortingPropType,
   SORT_DIRECTION,
@@ -53,7 +53,7 @@ import {
 } from '../../../../common';
 
 import { getOutlierScoreFieldName } from './common';
-import { INDEX_STATUS, useExploreData } from './use_explore_data';
+import { INDEX_STATUS, useExploreData, TableItem } from './use_explore_data';
 
 const customColorScaleFactory = (n: number) => (t: number) => {
   if (t < 1 / n) {
@@ -74,7 +74,7 @@ interface GetDataFrameAnalyticsResponse {
 
 const PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
 
-const ExplorationTitle: React.SFC<{ jobId: string }> = ({ jobId }) => (
+const ExplorationTitle: React.FC<{ jobId: string }> = ({ jobId }) => (
   <EuiTitle size="xs">
     <span>
       {i18n.translate('xpack.ml.dataframe.analytics.exploration.jobIdTitle', {
@@ -165,7 +165,7 @@ export const Exploration: FC<Props> = React.memo(({ jobId }) => {
     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:
@@ -186,7 +186,7 @@ export const Exploration: FC<Props> = React.memo(({ jobId }) => {
 
     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,
@@ -396,6 +396,8 @@ export const Exploration: FC<Props> = React.memo(({ jobId }) => {
     );
   }
 
+  const MlInMemoryTableBasic = mlInMemoryTableBasicFactory<TableItem>();
+
   return (
     <EuiPanel grow={false}>
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" responsive={false}>

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

@@ -31,7 +31,7 @@ export enum INDEX_STATUS {
   ERROR,
 }
 
-type TableItem = Record<string, any>;
+export type TableItem = Record<string, any>;
 
 interface LoadExploreDataArg {
   field: string;

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

@@ -28,7 +28,7 @@ import { getColumns } from './columns';
 import { ExpandedRow } from './expanded_row';
 import {
   ProgressBar,
-  MlInMemoryTable,
+  mlInMemoryTableFactory,
   OnTableChangeArg,
   SortDirection,
   SORT_DIRECTION,
@@ -58,6 +58,8 @@ function stringMatch(str: string | undefined, substr: string) {
   );
 }
 
+const MlInMemoryTable = mlInMemoryTableFactory<DataFrameAnalyticsListRow>();
+
 interface Props {
   isManagementTable?: boolean;
   isMlEnabledInSpace?: boolean;

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

@@ -8,7 +8,7 @@ import React, { FC, Fragment, useState } from 'react';
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
-  MlInMemoryTable,
+  mlInMemoryTableFactory,
   SortDirection,
   SORT_DIRECTION,
   OnTableChangeArg,
@@ -27,6 +27,8 @@ import { AnalyticsViewAction } from '../../../data_frame_analytics/pages/analyti
 import { formatHumanReadableDateTimeSeconds } from '../../../util/date_utils';
 import { AnalyticsStatsBar } from './analytics_stats_bar';
 
+const MlInMemoryTable = mlInMemoryTableFactory<DataFrameAnalyticsListRow>();
+
 interface Props {
   items: any[];
 }
@@ -38,7 +40,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' }),

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

@@ -17,7 +17,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
-  MlInMemoryTable,
+  mlInMemoryTableFactory,
   SortDirection,
   SORT_DIRECTION,
   OnTableChangeArg,
@@ -45,6 +45,8 @@ export enum AnomalyDetectionListColumns {
   jobsInGroup = 'jobs_in_group',
 }
 
+const MlInMemoryTable = mlInMemoryTableFactory<Group>();
+
 interface Props {
   items: GroupsDictionary;
   statsBarData: JobStatsBarStats;
@@ -60,7 +62,7 @@ export const AnomalyDetectionTable: FC<Props> = ({ items, jobsList, statsBarData
   const [sortDirection, setSortDirection] = useState<SortDirection>(SORT_DIRECTION.ASC);
 
   // columns: group, max anomaly, jobs in group, latest timestamp, docs processed, action to explorer
-  const columns: ColumnType[] = [
+  const columns: Array<ColumnType<Group>> = [
     {
       field: AnomalyDetectionListColumns.id,
       name: i18n.translate('xpack.ml.overview.anomalyDetection.tableId', {

x-pack/legacy/plugins/transform/public/app/lib/kibana/index.ts

@@ -5,10 +5,12 @@
  */
 
 export {
-  isKibanaContextInitialized,
+  useKibanaContext,
+  InitializedKibanaContextValue,
   KibanaContext,
   KibanaContextValue,
   SavedSearchQuery,
+  RenderOnlyWithInitializedKibanaContext,
 } from './kibana_context';
 export { KibanaProvider } from './kibana_provider';
 export { useCurrentIndexPattern } from './use_current_index_pattern';