[7.x] [ML] Transforms: Use EuiInMemoryTable instead of custom typed table. (#59782)

x-pack/index.js

@@ -31,7 +31,6 @@ import { crossClusterReplication } from './legacy/plugins/cross_cluster_replicat
 import { upgradeAssistant } from './legacy/plugins/upgrade_assistant';
 import { uptime } from './legacy/plugins/uptime';
 import { encryptedSavedObjects } from './legacy/plugins/encrypted_saved_objects';
-import { transform } from './legacy/plugins/transform';
 import { actions } from './legacy/plugins/actions';
 import { alerting } from './legacy/plugins/alerting';
 import { lens } from './legacy/plugins/lens';
@@ -61,7 +60,6 @@ module.exports = function(kibana) {
     infra(kibana),
     taskManager(kibana),
     rollup(kibana),
-    transform(kibana),
     siem(kibana),
     remoteClusters(kibana),
     crossClusterReplication(kibana),

x-pack/plugins/transform/public/app/index.scss

@@ -15,4 +15,3 @@
 @import 'sections/create_transform/components/wizard/index';
 @import 'sections/transform_management/components/create_transform_button/index';
 @import 'sections/transform_management/components/stats_bar/index';
-@import 'sections/transform_management/components/transform_list/index';

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/columns.tsx

@@ -9,6 +9,9 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiBadge,
+  EuiTableActionsColumnType,
+  EuiTableComputedColumnType,
+  EuiTableFieldDataColumnType,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
@@ -21,13 +24,6 @@ import {
 
 import { TransformId, TRANSFORM_STATE } from '../../../../../../common';
 
-import {
-  ActionsColumnType,
-  ComputedColumnType,
-  ExpanderColumnType,
-  FieldDataColumnType,
-} from '../../../../../shared_imports';
-
 import {
   getTransformProgress,
   TransformListRow,
@@ -89,15 +85,15 @@ export const getColumns = (
   }
 
   const columns: [
-    ExpanderColumnType<TransformListRow>,
-    FieldDataColumnType<TransformListRow>,
-    FieldDataColumnType<TransformListRow>,
-    FieldDataColumnType<TransformListRow>,
-    FieldDataColumnType<TransformListRow>,
-    ComputedColumnType<TransformListRow>,
-    ComputedColumnType<TransformListRow>,
-    ComputedColumnType<TransformListRow>,
-    ActionsColumnType<TransformListRow>
+    EuiTableComputedColumnType<TransformListRow>,
+    EuiTableFieldDataColumnType<TransformListRow>,
+    EuiTableFieldDataColumnType<TransformListRow>,
+    EuiTableFieldDataColumnType<TransformListRow>,
+    EuiTableFieldDataColumnType<TransformListRow>,
+    EuiTableComputedColumnType<TransformListRow>,
+    EuiTableComputedColumnType<TransformListRow>,
+    EuiTableComputedColumnType<TransformListRow>,
+    EuiTableActionsColumnType<TransformListRow>
   ] = [
     {
       name: (

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx

@@ -4,27 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, MouseEventHandler, FC, useContext, useState } from 'react';
+import React, { MouseEventHandler, FC, useContext, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
 import {
+  Direction,
   EuiBadge,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiCallOut,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiInMemoryTable,
   EuiPopover,
   EuiTitle,
-  Direction,
 } from '@elastic/eui';
 
 import { TransformId, TRANSFORM_STATE } from '../../../../../../common';
 
-import { OnTableChangeArg, SortDirection, SORT_DIRECTION } from '../../../../../shared_imports';
-
 import {
   useRefreshTransformList,
   TransformListRow,
@@ -43,7 +42,6 @@ import { StopAction } from './action_stop';
 import { ItemIdToExpandedRowMap, Query, Clause } from './common';
 import { getColumns } from './columns';
 import { ExpandedRow } from './expanded_row';
-import { ProgressBar, transformTableFactory } from './transform_table';
 
 function getItemIdToExpandedRowMap(
   itemIds: TransformId[],
@@ -74,8 +72,6 @@ interface Props {
   transformsLoading: boolean;
 }
 
-const TransformTable = transformTableFactory<TransformListRow>();
-
 export const TransformList: FC<Props> = ({
   errorMessage,
   isInitialized,
@@ -100,7 +96,7 @@ export const TransformList: FC<Props> = ({
   const [pageSize, setPageSize] = useState(10);
 
   const [sortField, setSortField] = useState<string>(TRANSFORM_LIST_COLUMN.ID);
-  const [sortDirection, setSortDirection] = useState<SortDirection | Direction>(SORT_DIRECTION.ASC);
+  const [sortDirection, setSortDirection] = useState<Direction>('asc');
 
   const { capabilities } = useContext(AuthorizationContext);
   const disabled =
@@ -186,52 +182,46 @@ export const TransformList: FC<Props> = ({
   // Before the transforms have been loaded for the first time, display the loading indicator only.
   // Otherwise a user would see 'No transforms found' during the initial loading.
   if (!isInitialized) {
-    return <ProgressBar isLoading={isLoading || transformsLoading} />;
+    return null;
   }
 
   if (typeof errorMessage !== 'undefined') {
     return (
-      <Fragment>
-        <ProgressBar isLoading={isLoading || transformsLoading} />
-        <EuiCallOut
-          title={i18n.translate('xpack.transform.list.errorPromptTitle', {
-            defaultMessage: 'An error occurred getting the transform list.',
-          })}
-          color="danger"
-          iconType="alert"
-        >
-          <pre>{JSON.stringify(errorMessage)}</pre>
-        </EuiCallOut>
-      </Fragment>
+      <EuiCallOut
+        title={i18n.translate('xpack.transform.list.errorPromptTitle', {
+          defaultMessage: 'An error occurred getting the transform list.',
+        })}
+        color="danger"
+        iconType="alert"
+      >
+        <pre>{JSON.stringify(errorMessage)}</pre>
+      </EuiCallOut>
     );
   }
 
   if (transforms.length === 0) {
     return (
-      <Fragment>
-        <ProgressBar isLoading={isLoading || transformsLoading} />
-        <EuiEmptyPrompt
-          title={
-            <h2>
-              {i18n.translate('xpack.transform.list.emptyPromptTitle', {
-                defaultMessage: 'No transforms found',
-              })}
-            </h2>
-          }
-          actions={[
-            <EuiButtonEmpty
-              onClick={onCreateTransform}
-              isDisabled={disabled}
-              data-test-subj="transformCreateFirstButton"
-            >
-              {i18n.translate('xpack.transform.list.emptyPromptButtonText', {
-                defaultMessage: 'Create your first transform',
-              })}
-            </EuiButtonEmpty>,
-          ]}
-          data-test-subj="transformNoTransformsFound"
-        />
-      </Fragment>
+      <EuiEmptyPrompt
+        title={
+          <h2>
+            {i18n.translate('xpack.transform.list.emptyPromptTitle', {
+              defaultMessage: 'No transforms found',
+            })}
+          </h2>
+        }
+        actions={[
+          <EuiButtonEmpty
+            onClick={onCreateTransform}
+            isDisabled={disabled}
+            data-test-subj="transformCreateFirstButton"
+          >
+            {i18n.translate('xpack.transform.list.emptyPromptButtonText', {
+              defaultMessage: 'Create your first transform',
+            })}
+          </EuiButtonEmpty>,
+        ]}
+        data-test-subj="transformNoTransformsFound"
+      />
     );
   }
 
@@ -362,15 +352,15 @@ export const TransformList: FC<Props> = ({
 
   const onTableChange = ({
     page = { index: 0, size: 10 },
-    sort = { field: TRANSFORM_LIST_COLUMN.ID, direction: SORT_DIRECTION.ASC },
-  }: OnTableChangeArg) => {
+    sort = { field: TRANSFORM_LIST_COLUMN.ID as string, direction: 'asc' },
+  }) => {
     const { index, size } = page;
     setPageIndex(index);
     setPageSize(size);
 
     const { field, direction } = sort;
-    setSortField(field);
-    setSortDirection(direction);
+    setSortField(field as string);
+    setSortDirection(direction as Direction);
   };
 
   const selection = {
@@ -379,8 +369,7 @@ export const TransformList: FC<Props> = ({
 
   return (
     <div data-test-subj="transformListTableContainer">
-      <ProgressBar isLoading={isLoading || transformsLoading} />
-      <TransformTable
+      <EuiInMemoryTable
         allowNeutralSort={false}
         className="transform__TransformTable"
         columns={columns}
@@ -391,6 +380,7 @@ export const TransformList: FC<Props> = ({
         items={filterActive ? filteredTransforms : transforms}
         itemId={TRANSFORM_LIST_COLUMN.ID}
         itemIdToExpandedRowMap={itemIdToExpandedRowMap}
+        loading={isLoading || transformsLoading}
         onTableChange={onTableChange}
         pagination={pagination}
         rowProps={item => ({
@@ -399,11 +389,9 @@ export const TransformList: FC<Props> = ({
         selection={selection}
         sorting={sorting}
         search={search}
-        data-test-subj={
-          isLoading || transformsLoading
-            ? 'transformListTable loading'
-            : 'transformListTable loaded'
-        }
+        data-test-subj={`transformListTable ${
+          isLoading || transformsLoading ? 'loading' : 'loaded'
+        }`}
       />
     </div>
   );