fix TS and add code comments

elastic · Nov 4, 2020 · a5bd56e · a5bd56e
1 parent ee8410c
commit a5bd56e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/x-pack/plugins/watcher/__jest__/client_integration/helpers/watch_list.helpers.ts b/x-pack/plugins/watcher/__jest__/client_integration/helpers/watch_list.helpers.ts
@@ -95,4 +95,5 @@ export type TestSubjects =
   | 'createWatchButton'
   | 'emptyPrompt'
   | 'emptyPrompt.createWatchButton'
-  | 'editWatchButton';
+  | 'editWatchButton'
+  | 'watchesTableContainer';
diff --git a/x-pack/plugins/watcher/__jest__/client_integration/watch_list.test.ts b/x-pack/plugins/watcher/__jest__/client_integration/watch_list.test.ts
@@ -90,13 +90,16 @@ describe('<WatchList />', () => {
 
           const searchInput = find('watchesTableContainer').find('.euiFieldSearch');
 
+          // Enter the name of "watch1" in the search box
+          // @ts-ignore
           searchInput.instance().value = watch1.name;
           searchInput.simulate('keyup', { key: 'Enter', keyCode: 13, which: 13 });
 
           component.update();
 
           const { tableCellsValues } = table.getMetaData('watchesTable');
 
+          // Expect "watch1" is only visible in the table
           expect(tableCellsValues.length).toEqual(1);
           const row = tableCellsValues[0];
           const { name, id, watchStatus } = watch1;
@@ -123,6 +126,7 @@ describe('<WatchList />', () => {
 
           const { tableCellsValues: updatedTableCellsValues } = table.getMetaData('watchesTable');
 
+          // Verify "watch1" is still the only watch visible in the table
           expect(updatedTableCellsValues.length).toEqual(1);
           const updatedRow = updatedTableCellsValues[0];
 

diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx b/x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx
@@ -7,6 +7,7 @@
 import React, { useState, useMemo, useEffect, Fragment } from 'react';
 
 import {
+  CriteriaWithPagination,
   EuiButton,
   EuiButtonEmpty,
   EuiFlexGroup,
@@ -57,7 +58,10 @@ export const WatchList = () => {
   // Filter out deleted watches on the client, because the API will return 200 even though some watches
   // may not really be deleted until after they're done firing and this could take some time.
   const [deletedWatches, setDeletedWatches] = useState<string[]>([]);
-  const [pagination, setPagination] = useState({ pageIndex: 0 });
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: PAGINATION.initialPageSize,
+  });
   const [query, setQuery] = useState('');
 
   useEffect(() => {
@@ -381,7 +385,7 @@ export const WatchList = () => {
           : '',
     };
 
-    const handleOnChange = (search) => {
+    const handleOnChange = (search: { queryText: string }) => {
       setQuery(search.queryText);
       return true;
     };
@@ -420,7 +424,7 @@ export const WatchList = () => {
     content = (
       <div data-test-subj="watchesTableContainer">
         <EuiInMemoryTable
-          onTableChange={({ page: { index, size } }) =>
+          onTableChange={({ page: { index, size } }: CriteriaWithPagination<never>) =>
             setPagination({ pageIndex: index, pageSize: size })
           }
           items={availableWatches}