Fix issue of not resetting to first page when applying filters (#115)

* Reset to first page when filter change

* Add test case

public/pages/DetectorsList/List/List.tsx

@@ -168,6 +168,7 @@ export const DetectorList = (props: ListProps) => {
     const searchText = e.target.value;
     setState({
       ...state,
+      page: 0,
       queryParams: {
         ...state.queryParams,
         search: searchText,
@@ -181,6 +182,10 @@ export const DetectorList = (props: ListProps) => {
       const sanitizedQuery = sanitizeSearchText(searchValue);
       setIndexQuery(sanitizedQuery);
       await dispatch(getPrioritizedIndices(sanitizedQuery));
+      setState(state => ({
+        ...state,
+        page: 0,
+      }));
     }
   }, 300);
 
@@ -195,6 +200,7 @@ export const DetectorList = (props: ListProps) => {
         : options.map(option => option.label as DETECTOR_STATE);
     setState(state => ({
       ...state,
+      page: 0,
       selectedDetectorStates: states,
     }));
   };
@@ -209,6 +215,7 @@ export const DetectorList = (props: ListProps) => {
 
     setState({
       ...state,
+      page: 0,
       selectedIndices: indices,
     });
   };
@@ -234,8 +241,6 @@ export const DetectorList = (props: ListProps) => {
     state.selectedDetectorStates,
     state.queryParams.sortField,
     state.queryParams.sortDirection,
-    state.queryParams.size,
-    state.page
   );
 
   // get detectors to display based on this page

public/pages/DetectorsList/List/__tests__/List.test.tsx

@@ -273,6 +273,47 @@ describe('<ListControls /> spec', () => {
       expect(queryByText('detector_name_0')).toBeNull();
       expect(queryByText('index_0')).toBeNull();
     });
+    test('should reset to first page when filtering', async () => {
+      const randomDetectors = new Array(40).fill(null).map((_, index) => {
+        const hasAnomaly = Math.random() > 0.5;
+        return {
+          id: `detector_id_${index}`,
+          indices: [`index_${index}`],
+          name: `detector_name_${index}`,
+          totalAnomalies: hasAnomaly ? Math.floor(Math.random() * 10) : 0,
+          lastActiveAnomaly: hasAnomaly ? Date.now() + index : 0,
+        };
+      });
+      httpClientMock.get = jest.fn().mockResolvedValue({
+        data: {
+          ok: true,
+          response: {
+            detectorList: randomDetectors,
+            totalDetectors: randomDetectors.length,
+          },
+        },
+      });
+
+      const { getByText, getByPlaceholderText, queryByText, getAllByTestId } = renderWithRouter(
+        {
+          ...initialDetectorsState,
+          requesting: true,
+        }
+      );
+      // Initial load, only first 20 items
+      await wait();
+      getByText('detector_name_0')
+
+      // Go to next page
+      userEvent.click(getAllByTestId('pagination-button-next')[0]);
+      await wait();
+
+      // Search for detector which is on prev page
+      userEvent.type(getByPlaceholderText('Search'), 'detector_name_0');
+      await wait();
+      getByText('detector_name_0');
+      expect(queryByText('detector_name_30')).toBeNull();
+    });
     test('should display rows if there are data', async () => {
       const tempAnomalyTime = moment('2019-10-19T09:00:00');
       const tempLastUpdateTime = moment('2019-10-19T07:00:00');

public/pages/utils/helpers.ts

@@ -72,9 +72,7 @@ export const filterAndSortDetectors = (
   selectedIndices: string[],
   selectedDetectorStates: DETECTOR_STATE[],
   sortField: string,
-  sortDirection: string,
-  size: number,
-  page: number
+  sortDirection: string
 ) => {
   let filteredBySearch =
     search == ''