simplify state and update types

Author: alvarezmelissa87

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

@@ -82,13 +82,7 @@ export const TransformList: FC<Props> = ({
   const { refresh } = useRefreshTransformList({ isLoading: setIsLoading });
 
   const [searchQueryText, setSearchQueryText] = useState<string>('');
-  const [filteredTransforms, setFilteredTransforms] = useState<{
-    active: boolean;
-    items: TransformListRow[];
-  }>({
-    active: false,
-    items: [],
-  });
+  const [filteredTransforms, setFilteredTransforms] = useState<TransformListRow[]>([]);
   const [expandedRowItemIds, setExpandedRowItemIds] = useState<TransformId[]>([]);
   const [transformSelection, setTransformSelection] = useState<TransformListRow[]>([]);
   const [isActionsMenuOpen, setIsActionsMenuOpen] = useState(false);
@@ -109,12 +103,12 @@ export const TransformList: FC<Props> = ({
     transformSelection
   );
 
-  const setQueryClauses = (queryClauses: any) => {
+  const updateFilteredItems = (queryClauses: any) => {
     if (queryClauses.length) {
       const filtered = filterTransforms(transforms, queryClauses);
-      setFilteredTransforms({ active: true, items: filtered });
+      setFilteredTransforms(filtered);
     } else {
-      setFilteredTransforms({ active: false, items: [] });
+      setFilteredTransforms(transforms);
     }
   };
 
@@ -126,18 +120,18 @@ export const TransformList: FC<Props> = ({
         if (query && query.ast !== undefined && query.ast.clauses !== undefined) {
           clauses = query.ast.clauses;
         }
-        setQueryClauses(clauses);
+        updateFilteredItems(clauses);
       } else {
-        setQueryClauses([]);
+        updateFilteredItems([]);
       }
     };
     filterList();
     // eslint-disable-next-line
-  }, [searchQueryText, transforms]); // missing dependency setQueryClauses
+  }, [searchQueryText, transforms]); // missing dependency updateFilteredItems
 
-  const { onTableChange, pageOfItems, pagination, sorting } = useTableSettings(
+  const { onTableChange, pageOfItems, pagination, sorting } = useTableSettings<TransformListRow>(
     TRANSFORM_LIST_COLUMN.ID,
-    filteredTransforms.active ? filteredTransforms.items : transforms
+    filteredTransforms
   );
 
   // Before the transforms have been loaded for the first time, display the loading indicator only.

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

@@ -12,27 +12,28 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
+  SearchFilterConfig,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { TermClause, FieldClause, Value } from './common';
 import { TRANSFORM_STATE } from '../../../../../../common';
 import { TRANSFORM_MODE, TransformListRow } from '../../../../common';
 import { getTaskStateBadge } from './use_columns';
 
-const filters = [
+const filters: SearchFilterConfig[] = [
   {
-    type: 'field_value_selection' as const,
+    type: 'field_value_selection',
     field: 'state.state',
     name: i18n.translate('xpack.transform.statusFilter', { defaultMessage: 'Status' }),
-    multiSelect: 'or' as const,
+    multiSelect: 'or',
     options: Object.values(TRANSFORM_STATE).map((val) => ({
       value: val,
       name: val,
       view: getTaskStateBadge(val),
     })),
   },
   {
-    type: 'field_value_selection' as const,
+    type: 'field_value_selection',
     field: 'mode',
     name: i18n.translate('xpack.transform.modeFilter', { defaultMessage: 'Mode' }),
     multiSelect: false,
@@ -116,7 +117,7 @@ export const filterTransforms = (
 
 function getError(errorMessage: string | null) {
   if (errorMessage) {
-    return i18n.translate('xpack.ml.transformList.searchBar.invalidSearchErrorMessage', {
+    return i18n.translate('xpack.transform.transformList.searchBar.invalidSearchErrorMessage', {
       defaultMessage: 'Invalid search: {errorMessage}',
       values: { errorMessage },
     });

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

@@ -8,7 +8,6 @@ import { useState } from 'react';
 import { Direction, EuiBasicTableProps, EuiTableSortingType } from '@elastic/eui';
 import sortBy from 'lodash/sortBy';
 import get from 'lodash/get';
-import { TransformListRow } from '../../../../common';
 
 const PAGE_SIZE = 10;
 const PAGE_SIZE_OPTIONS = [10, 25, 50];
@@ -17,27 +16,46 @@ const propertyMap = {
   Mode: 'mode',
 };
 
-interface AnalyticsBasicTableSettings {
+// Copying from EUI EuiBasicTable types as type is not correctly picked up for table's onChange
+// Can be removed when https://github.com/elastic/eui/issues/4011 is addressed in EUI
+export interface Criteria<T> {
+  page?: {
+    index: number;
+    size: number;
+  };
+  sort?: {
+    field: keyof T;
+    direction: Direction;
+  };
+}
+export interface CriteriaWithPagination<T> extends Criteria<T> {
+  page: {
+    index: number;
+    size: number;
+  };
+}
+
+interface AnalyticsBasicTableSettings<T> {
   pageIndex: number;
   pageSize: number;
   totalItemCount: number;
   hidePerPageOptions: boolean;
-  sortField: string;
+  sortField: keyof T;
   sortDirection: Direction;
 }
 
-interface UseTableSettingsReturnValue {
-  onTableChange: EuiBasicTableProps<TransformListRow>['onChange'];
-  pageOfItems: TransformListRow[];
-  pagination: EuiBasicTableProps<TransformListRow>['pagination'];
+interface UseTableSettingsReturnValue<T> {
+  onTableChange: EuiBasicTableProps<T>['onChange'];
+  pageOfItems: T[];
+  pagination: EuiBasicTableProps<T>['pagination'];
   sorting: EuiTableSortingType<any>;
 }
 
-export function useTableSettings(
-  sortByField: string,
-  items: TransformListRow[]
-): UseTableSettingsReturnValue {
-  const [tableSettings, setTableSettings] = useState<AnalyticsBasicTableSettings>({
+export function useTableSettings<TypeOfItem>(
+  sortByField: keyof TypeOfItem,
+  items: TypeOfItem[]
+): UseTableSettingsReturnValue<TypeOfItem> {
+  const [tableSettings, setTableSettings] = useState<AnalyticsBasicTableSettings<TypeOfItem>>({
     pageIndex: 0,
     pageSize: PAGE_SIZE,
     totalItemCount: 0,
@@ -47,10 +65,10 @@ export function useTableSettings(
   });
 
   const getPageOfItems = (
-    list: any[],
+    list: TypeOfItem[],
     index: number,
     size: number,
-    sortField: string,
+    sortField: keyof TypeOfItem,
     sortDirection: Direction
   ) => {
     list = sortBy(list, (item) =>
@@ -73,13 +91,10 @@ export function useTableSettings(
     };
   };
 
-  const onTableChange = ({
+  const onTableChange: EuiBasicTableProps<TypeOfItem>['onChange'] = ({
     page = { index: 0, size: PAGE_SIZE },
     sort = { field: sortByField, direction: 'asc' },
-  }: {
-    page?: { index: number; size: number };
-    sort?: { field: string; direction: Direction };
-  }) => {
+  }: CriteriaWithPagination<TypeOfItem>) => {
     const { index, size } = page;
     const { field, direction } = sort;