diff --git a/public/pages/DetectorsList/List/List.tsx b/public/pages/DetectorsList/List/List.tsx index 3083e41f..7a053fd7 100644 --- a/public/pages/DetectorsList/List/List.tsx +++ b/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 diff --git a/public/pages/DetectorsList/List/__tests__/List.test.tsx b/public/pages/DetectorsList/List/__tests__/List.test.tsx index ed19a546..893aa50a 100644 --- a/public/pages/DetectorsList/List/__tests__/List.test.tsx +++ b/public/pages/DetectorsList/List/__tests__/List.test.tsx @@ -273,6 +273,47 @@ describe(' 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'); diff --git a/public/pages/utils/helpers.ts b/public/pages/utils/helpers.ts index ce123708..cb490776 100644 --- a/public/pages/utils/helpers.ts +++ b/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 == ''