[ML] Use EuiDataGrid for transform wizard. (#52510)

Replaces the custom EuiInMemoryTable component with EuiDataGrid for the transforms wizard.

x-pack/legacy/plugins/transform/public/app/common/data_grid.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiDataGridStyle } from '@elastic/eui';
+
+export const euiDataGridStyle: EuiDataGridStyle = {
+  border: 'all',
+  fontSize: 's',
+  cellPadding: 's',
+  stripes: false,
+  rowHover: 'highlight',
+  header: 'shade',
+};
+
+export const euiDataGridToolbarSettings = {
+  showColumnSelector: true,
+  showStyleSelector: false,
+  showSortSelector: true,
+  showFullScreenSelector: false,
+};

x-pack/legacy/plugins/transform/public/app/common/fields.ts

@@ -15,8 +15,6 @@ export interface EsDoc extends Dictionary<any> {
   _source: EsDocSource;
 }
 
-export const MAX_COLUMNS = 5;
-
 export function getFlattenedFields(obj: EsDocSource): EsFieldName[] {
   const flatDocFields: EsFieldName[] = [];
   const newDocFields = Object.keys(obj);
@@ -33,35 +31,33 @@ export function getFlattenedFields(obj: EsDocSource): EsFieldName[] {
   return flatDocFields;
 }
 
-export const getSelectableFields = (docs: EsDoc[]): EsFieldName[] => {
+export const getSelectableFields = (docs: EsDocSource[]): EsFieldName[] => {
   if (docs.length === 0) {
     return [];
   }
 
-  const newDocFields = getFlattenedFields(docs[0]._source);
+  const newDocFields = getFlattenedFields(docs[0]);
   newDocFields.sort();
   return newDocFields;
 };
 
-export const getDefaultSelectableFields = (docs: EsDoc[]): EsFieldName[] => {
+export const getDefaultSelectableFields = (docs: EsDocSource[]): EsFieldName[] => {
   if (docs.length === 0) {
     return [];
   }
 
-  const newDocFields = getFlattenedFields(docs[0]._source);
+  const newDocFields = getFlattenedFields(docs[0]);
   newDocFields.sort();
-  return newDocFields
-    .filter(k => {
-      let value = false;
-      docs.forEach(row => {
-        const source = row._source;
-        if (source[k] !== null) {
-          value = true;
-        }
-      });
-      return value;
-    })
-    .slice(0, MAX_COLUMNS);
+  return newDocFields.filter(k => {
+    let value = false;
+    docs.forEach(row => {
+      const source = row;
+      if (source[k] !== null) {
+        value = true;
+      }
+    });
+    return value;
+  });
 };
 
 export const toggleSelectedField = (

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

@@ -5,6 +5,7 @@
  */
 
 export { AggName, isAggName } from './aggregations';
+export { euiDataGridStyle, euiDataGridToolbarSettings } from './data_grid';
 export {
   getDefaultSelectableFields,
   getFlattenedFields,
@@ -13,7 +14,6 @@ export {
   EsDoc,
   EsDocSource,
   EsFieldName,
-  MAX_COLUMNS,
 } from './fields';
 export { DropDownLabel, DropDownOption, Label } from './dropdown';
 export {