Rework search paging based on cursors

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

plugins/search/api-report.md

@@ -139,10 +139,8 @@ export { searchPlugin };
 // @public (undocumented)
 export const SearchResult: ({
   children,
-  initialPageSize,
 }: {
   children: (results: { results: SearchResult_2[] }) => JSX.Element;
-  initialPageSize?: number | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "SearchTypeProps" needs to be exported by the entry point index.d.ts
@@ -169,7 +167,7 @@ export const useSearch: () => SearchContextValue;
 
 // Warnings were encountered during analysis:
 //
-// src/components/SearchContext/SearchContext.d.ts:23:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts
+// src/components/SearchContext/SearchContext.d.ts:21:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts
 // src/components/SearchFilter/SearchFilter.d.ts:13:5 - (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 // src/components/SearchFilter/SearchFilter.d.ts:14:5 - (ae-forgotten-export) The symbol "Component" needs to be exported by the entry point index.d.ts
 

plugins/search/src/apis.test.ts

@@ -21,7 +21,6 @@ describe('apis', () => {
     term: '',
     filters: {},
     types: [],
-    page: {},
   };
 
   const baseUrl = 'https://base-url.com/';

plugins/search/src/components/SearchBar/SearchBar.test.tsx

@@ -30,7 +30,6 @@ jest.mock('@backstage/core-plugin-api', () => ({
 describe('SearchBar', () => {
   const initialState = {
     term: '',
-    page: {},
     filters: {},
     types: ['*'],
   };

plugins/search/src/components/SearchContext/SearchContext.test.tsx

@@ -14,13 +14,11 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { renderHook, act } from '@testing-library/react-hooks';
-
-import { useSearch, SearchContextProvider } from './SearchContext';
-
 import { useApi } from '@backstage/core-plugin-api';
+import { render, screen, waitFor } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+import { SearchContextProvider, useSearch } from './SearchContext';
 
 jest.mock('@backstage/core-plugin-api', () => ({
   ...jest.requireActual('@backstage/core-plugin-api'),
@@ -38,7 +36,6 @@ describe('SearchContext', () => {
 
   const initialState = {
     term: '',
-    page: {},
     filters: {},
     types: ['*'],
   };
@@ -46,6 +43,7 @@ describe('SearchContext', () => {
   beforeEach(() => {
     query.mockResolvedValue({});
     (useApi as jest.Mock).mockReturnValue({ query: query });
+    window.scrollTo = jest.fn();
   });
 
   afterAll(() => {
@@ -93,26 +91,26 @@ describe('SearchContext', () => {
       initialProps: {
         initialState: {
           ...initialState,
-          page: { offset: 0, limit: 25 },
+          pageCursor: 'SOMEPAGE',
         },
       },
     });
 
     await waitForNextUpdate();
 
-    expect(result.current.page).toEqual({ offset: 0, limit: 25 });
+    expect(result.current.pageCursor).toEqual('SOMEPAGE');
 
     act(() => {
       result.current.setTerm('first term');
     });
 
     act(() => {
-      result.current.setPage({ offset: 75, limit: 25 });
+      result.current.setPageCursor('OTHERPAGE');
     });
 
     await waitForNextUpdate();
 
-    expect(result.current.page).toEqual({ offset: 75, limit: 25 });
+    expect(result.current.pageCursor).toEqual('OTHERPAGE');
 
     act(() => {
       result.current.setTerm('second term');
@@ -120,7 +118,7 @@ describe('SearchContext', () => {
 
     await waitForNextUpdate();
 
-    expect(result.current.page).toEqual({ offset: 0, limit: 25 });
+    expect(result.current.pageCursor).toEqual(undefined);
   });
 
   describe('Performs search (and sets results)', () => {
@@ -145,8 +143,6 @@ describe('SearchContext', () => {
       expect(query).toHaveBeenLastCalledWith({
         filters: {},
         types: ['*'],
-        limit: undefined,
-        offset: undefined,
         term,
       });
     });
@@ -172,8 +168,6 @@ describe('SearchContext', () => {
       expect(query).toHaveBeenLastCalledWith({
         filters,
         types: ['*'],
-        limit: undefined,
-        offset: undefined,
         term: '',
       });
     });
@@ -188,10 +182,8 @@ describe('SearchContext', () => {
 
       await waitForNextUpdate();
 
-      const page = { offset: 25, limit: 50 };
-
       act(() => {
-        result.current.setPage(page);
+        result.current.setPageCursor('SOMEPAGE');
       });
 
       await waitForNextUpdate();
@@ -199,8 +191,7 @@ describe('SearchContext', () => {
       expect(query).toHaveBeenLastCalledWith({
         filters: {},
         types: ['*'],
-        limit: 50,
-        offset: 25,
+        pageCursor: 'SOMEPAGE',
         term: '',
       });
     });
@@ -226,10 +217,72 @@ describe('SearchContext', () => {
       expect(query).toHaveBeenLastCalledWith({
         types,
         filters: {},
-        limit: undefined,
-        offset: undefined,
         term: '',
       });
     });
+
+    it('provides function for fetch the next page', async () => {
+      query.mockResolvedValue({
+        results: [],
+        nextPageCursor: 'NEXT',
+      });
+
+      const { result, waitForNextUpdate } = renderHook(() => useSearch(), {
+        wrapper,
+        initialProps: {
+          initialState,
+        },
+      });
+
+      await waitForNextUpdate();
+
+      expect(result.current.fetchNextPage).toBeDefined();
+      expect(result.current.fetchPreviousPage).toBeUndefined();
+
+      act(() => {
+        result.current.fetchNextPage!();
+      });
+
+      await waitForNextUpdate();
+
+      expect(query).toHaveBeenLastCalledWith({
+        types: ['*'],
+        filters: {},
+        term: '',
+        pageCursor: 'NEXT',
+      });
+    });
+
+    it('provides function for fetch the previous page', async () => {
+      query.mockResolvedValue({
+        results: [],
+        previousPageCursor: 'PREVIOUS',
+      });
+
+      const { result, waitForNextUpdate } = renderHook(() => useSearch(), {
+        wrapper,
+        initialProps: {
+          initialState,
+        },
+      });
+
+      await waitForNextUpdate();
+
+      expect(result.current.fetchNextPage).toBeUndefined();
+      expect(result.current.fetchPreviousPage).toBeDefined();
+
+      act(() => {
+        result.current.fetchPreviousPage!();
+      });
+
+      await waitForNextUpdate();
+
+      expect(query).toHaveBeenLastCalledWith({
+        types: ['*'],
+        filters: {},
+        term: '',
+        pageCursor: 'PREVIOUS',
+      });
+    });
   });
 });

plugins/search/src/components/SearchContext/SearchContext.tsx

@@ -20,6 +20,7 @@ import { SearchResultSet } from '@backstage/search-common';
 import React, {
   createContext,
   PropsWithChildren,
+  useCallback,
   useContext,
   useEffect,
   useState,
@@ -28,8 +29,6 @@ import { useAsync, usePrevious } from 'react-use';
 import { AsyncState } from 'react-use/lib/useAsync';
 import { searchApiRef } from '../../apis';
 
-type Page = { limit?: number; offset?: number };
-
 type SearchContextValue = {
   result: AsyncState<SearchResultSet>;
   term: string;
@@ -38,13 +37,21 @@ type SearchContextValue = {
   setTypes: React.Dispatch<React.SetStateAction<string[]>>;
   filters: JsonObject;
   setFilters: React.Dispatch<React.SetStateAction<JsonObject>>;
-  page: Page;
-  setPage: React.Dispatch<React.SetStateAction<Page>>;
+  pageCursor?: string;
+  setPageCursor: React.Dispatch<React.SetStateAction<string | undefined>>;
+  fetchNextPage?: React.DispatchWithoutAction;
+  fetchPreviousPage?: React.DispatchWithoutAction;
 };
 
 type SettableSearchContext = Omit<
   SearchContextValue,
-  'result' | 'setTerm' | 'setTypes' | 'setFilters' | 'setPage'
+  | 'result'
+  | 'setTerm'
+  | 'setTypes'
+  | 'setFilters'
+  | 'setPageCursor'
+  | 'fetchNextPage'
+  | 'fetchPreviousPage'
 >;
 
 export const SearchContext = createContext<SearchContextValue | undefined>(
@@ -54,14 +61,16 @@ export const SearchContext = createContext<SearchContextValue | undefined>(
 export const SearchContextProvider = ({
   initialState = {
     term: '',
-    page: {},
+    pageCursor: undefined,
     filters: {},
     types: [],
   },
   children,
 }: PropsWithChildren<{ initialState?: SettableSearchContext }>) => {
   const searchApi = useApi(searchApiRef);
-  const [page, setPage] = useState<Page>(initialState.page);
+  const [pageCursor, setPageCursor] = useState<string | undefined>(
+    initialState.pageCursor,
+  );
   const [filters, setFilters] = useState<JsonObject>(initialState.filters);
   const [term, setTerm] = useState<string>(initialState.term);
   const [types, setTypes] = useState<string[]>(initialState.types);
@@ -72,19 +81,31 @@ export const SearchContextProvider = ({
       searchApi.query({
         term,
         filters,
-        offset: page?.offset,
-        limit: page?.limit,
+        pageCursor: pageCursor,
         types,
       }),
-    [term, filters, types, page],
+    [term, filters, types, pageCursor],
   );
 
+  const hasNextPage =
+    !result.loading && !result.error && result.value?.nextPageCursor;
+  const hasPreviousPage =
+    !result.loading && !result.error && result.value?.previousPageCursor;
+  const fetchNextPage = useCallback(() => {
+    setPageCursor(result.value?.nextPageCursor);
+    resetScrollPosition();
+  }, [result.value?.nextPageCursor]);
+  const fetchPreviousPage = useCallback(() => {
+    setPageCursor(result.value?.previousPageCursor);
+    resetScrollPosition();
+  }, [result.value?.previousPageCursor]);
+
   useEffect(() => {
     // Any time a term is reset, we want to start from page 0.
     if (term && prevTerm && term !== prevTerm) {
-      setPage(initialState.page);
+      setPageCursor(undefined);
     }
-  }, [term, prevTerm, initialState.page]);
+  }, [term, prevTerm, initialState.pageCursor]);
 
   const value: SearchContextValue = {
     result,
@@ -94,8 +115,10 @@ export const SearchContextProvider = ({
     setTerm,
     types,
     setTypes,
-    page,
-    setPage,
+    pageCursor,
+    setPageCursor,
+    fetchNextPage: hasNextPage ? fetchNextPage : undefined,
+    fetchPreviousPage: hasPreviousPage ? fetchPreviousPage : undefined,
   };
 
   return <SearchContext.Provider value={value} children={children} />;
@@ -108,3 +131,7 @@ export const useSearch = () => {
   }
   return context;
 };
+
+function resetScrollPosition() {
+  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+}

plugins/search/src/components/SearchFilter/SearchFilter.test.tsx

@@ -32,7 +32,6 @@ describe('SearchFilter', () => {
     term: '',
     filters: {},
     types: [],
-    page: {},
   };
 
   const name = 'field';

plugins/search/src/components/SearchPage/SearchPage.test.tsx

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
+import React from 'react';
 import { useLocation, useOutlet } from 'react-router';
-
 import { useSearch } from '../SearchContext';
 import { SearchPage } from './';
 
@@ -74,25 +73,21 @@ describe('SearchPage', () => {
     const expectedTerm = 'justin bieber';
     const expectedTypes = ['software-catalog'];
     const expectedFilters = { [expectedFilterField]: expectedFilterValue };
-    const expectedOffset = 25;
-    const expectedLimit = 50;
+    const expectedPageCursor = 'SOMEPAGE';
 
-    // e.g. ?query=petstore&offset=25&limit=50&filters[lifecycle][]=experimental&filters[kind]=Component
+    // e.g. ?query=petstore&pageCursor=SOMEPAGE&filters[lifecycle][]=experimental&filters[kind]=Component
     (useLocation as jest.Mock).mockReturnValueOnce({
-      search: `?query=${expectedTerm}&types[]=${expectedTypes[0]}&filters[${expectedFilterField}]=${expectedFilterValue}&offset=${expectedOffset}&limit=${expectedLimit}`,
+      search: `?query=${expectedTerm}&types[]=${expectedTypes[0]}&filters[${expectedFilterField}]=${expectedFilterValue}&pageCursor=${expectedPageCursor}`,
     });
 
     // When we render the page...
     await renderInTestApp(<SearchPage />);
 
-    // Then search context should be initialized with these values...
-    const calls = (SearchContextProvider as jest.Mock).mock.calls[0];
-    const actualInitialState = calls[0].initialState;
-    expect(actualInitialState.term).toEqual(expectedTerm);
-    expect(actualInitialState.types).toEqual(expectedTypes);
-    expect(actualInitialState.page.limit).toEqual(expectedLimit);
-    expect(actualInitialState.page.offset).toEqual(expectedOffset);
-    expect(actualInitialState.filters).toStrictEqual(expectedFilters);
+    // Then search context should be set with these values...
+    expect(setTermMock).toHaveBeenCalledWith(expectedTerm);
+    expect(setTypesMock).toHaveBeenCalledWith(expectedTypes);
+    expect(setPageCursorMock).toHaveBeenCalledWith(expectedPageCursor);
+    expect(setFiltersMock).toHaveBeenCalledWith(expectedFilters);
   });
 
   it('renders provided router element', async () => {
@@ -112,7 +107,7 @@ describe('SearchPage', () => {
     (useSearch as jest.Mock).mockReturnValueOnce({
       term: 'bieber',
       types: ['software-catalog'],
-      page: { offset: 25, limit: 50 },
+      pageCursor: 'SOMEPAGE',
       filters: { anyKey: 'anyValue' },
       setTerm: setTermMock,
       setTypes: setTypesMock,
@@ -120,7 +115,7 @@ describe('SearchPage', () => {
       setPageCursor: setPageCursorMock,
     });
     const expectedLocation = encodeURI(
-      '?query=bieber&types[]=software-catalog&offset=25&limit=50&filters[anyKey]=anyValue',
+      '?query=bieber&types[]=software-catalog&pageCursor=SOMEPAGE&filters[anyKey]=anyValue',
     );
 
     await renderInTestApp(<SearchPage />);

plugins/search/src/components/SearchResult/SearchResult.test.tsx

@@ -24,7 +24,6 @@ jest.mock('../SearchContext', () => ({
   ...jest.requireActual('../SearchContext'),
   useSearch: jest.fn().mockReturnValue({
     result: {},
-    page: {},
   }),
 }));
 
@@ -111,7 +110,6 @@ describe('SearchResult', () => {
           ],
         },
       },
-      page: {},
     });
 
     const { getByText } = await renderInTestApp(
@@ -124,43 +122,4 @@ describe('SearchResult', () => {
 
     expect(getByText('Results 1')).toBeInTheDocument();
   });
-
-  it('Starts on initial page if no offset is set', async () => {
-    (useSearch as jest.Mock).mockReturnValueOnce({
-      page: {},
-      result: {
-        loading: false,
-        error: '',
-        value: { results: [{}], totalCount: 100 },
-      },
-    });
-
-    const { getByLabelText } = await renderInTestApp(
-      <SearchResult>{({}) => <></>}</SearchResult>,
-    );
-
-    expect(getByLabelText('page 1')).toHaveAttribute('aria-current', 'true');
-    expect(getByLabelText('Go to page 2')).toBeInTheDocument();
-    expect(getByLabelText('Go to page 3')).toBeInTheDocument();
-    expect(getByLabelText('Go to page 4')).toBeInTheDocument();
-  });
-
-  it('Shows the right page', async () => {
-    (useSearch as jest.Mock).mockReturnValueOnce({
-      page: { offset: 25 },
-      result: {
-        loading: false,
-        error: '',
-        value: { results: [{}], totalCount: 63 },
-      },
-    });
-
-    const { getByLabelText } = await renderInTestApp(
-      <SearchResult>{({}) => <></>}</SearchResult>,
-    );
-
-    expect(getByLabelText('Go to page 1')).toBeInTheDocument();
-    expect(getByLabelText('page 2')).toHaveAttribute('aria-current', 'true');
-    expect(getByLabelText('Go to page 3')).toBeInTheDocument();
-  });
 });

plugins/search/src/components/SearchResult/SearchResult.tsx

@@ -20,20 +20,17 @@ import {
   ResponseErrorPanel,
 } from '@backstage/core-components';
 import { SearchResult } from '@backstage/search-common';
-import { Pagination } from '@material-ui/lab';
 import React from 'react';
 import { useSearch } from '../SearchContext';
+import { SearchResultPager } from '../SearchResultPager';
 
 type Props = {
   children: (results: { results: SearchResult[] }) => JSX.Element;
-  initialPageSize?: number;
 };
 
-const SearchResultComponent = ({ children, initialPageSize = 25 }: Props) => {
+export const SearchResultComponent = ({ children }: Props) => {
   const {
     result: { loading, error, value },
-    page,
-    setPage,
   } = useSearch();
 
   if (loading) {
@@ -52,23 +49,10 @@ const SearchResultComponent = ({ children, initialPageSize = 25 }: Props) => {
     return <EmptyState missing="data" title="Sorry, no results were found" />;
   }
 
-  const pageSize = page.limit ?? initialPageSize;
-  const totalPages = Math.ceil(value.totalCount / pageSize);
-  const currentPage = page.offset ? Math.floor(page.offset / pageSize) + 1 : 1;
-
-  const handlePageChange = (_: React.ChangeEvent<unknown>, pageNum: number) => {
-    setPage({ offset: (pageNum - 1) * pageSize, limit: pageSize });
-    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-  };
-
   return (
     <>
       {children({ results: value.results })}
-      <Pagination
-        count={totalPages}
-        page={currentPage}
-        onChange={handlePageChange}
-      />
+      <SearchResultPager />
     </>
   );
 };

plugins/search/src/components/SearchResultPager/SearchResultPager.test.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { renderInTestApp } from '@backstage/test-utils';
+import { waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { useSearch } from '../SearchContext';
+import { SearchResultPager } from './SearchResultPager';
+
+jest.mock('../SearchContext', () => ({
+  ...jest.requireActual('../SearchContext'),
+  useSearch: jest.fn().mockReturnValue({
+    result: {},
+  }),
+}));
+
+describe('SearchResultPager', () => {
+  it('renders pager buttons', async () => {
+    const fetchNextPage = jest.fn();
+    const fetchPreviousPage = jest.fn();
+    (useSearch as jest.Mock).mockReturnValueOnce({
+      result: { loading: false, value: [] },
+      fetchNextPage,
+      fetchPreviousPage,
+    });
+
+    const { getByLabelText } = await renderInTestApp(<SearchResultPager />);
+
+    await waitFor(() => {
+      expect(getByLabelText('previous page')).toBeInTheDocument();
+
+      userEvent.click(getByLabelText('previous page'));
+    });
+
+    expect(fetchPreviousPage).toBeCalled();
+
+    await waitFor(() => {
+      expect(getByLabelText('next page')).toBeInTheDocument();
+
+      userEvent.click(getByLabelText('next page'));
+    });
+
+    expect(fetchNextPage).toBeCalled();
+  });
+});

plugins/search/src/components/SearchResultPager/SearchResultPager.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button, makeStyles } from '@material-ui/core';
+import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+import React from 'react';
+import { useSearch } from '../SearchContext';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+export const SearchResultPager = () => {
+  const { fetchNextPage, fetchPreviousPage } = useSearch();
+  const classes = useStyles();
+
+  if (!fetchNextPage && !fetchPreviousPage) {
+    return <></>;
+  }
+
+  return (
+    <nav arial-label="pagination navigation" className={classes.root}>
+      <Button
+        aria-label="previous page"
+        disabled={!fetchPreviousPage}
+        onClick={fetchPreviousPage}
+        startIcon={<ArrowBackIosIcon />}
+        size="small"
+      >
+        Back
+      </Button>
+
+      <Button
+        aria-label="next page"
+        disabled={!fetchNextPage}
+        onClick={fetchNextPage}
+        endIcon={<ArrowForwardIosIcon />}
+        size="small"
+      >
+        Next
+      </Button>
+    </nav>
+  );
+};

plugins/search/src/components/SearchResultPager/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { SearchResultPager } from './SearchResultPager';

plugins/search/src/components/SearchType/SearchType.test.tsx

@@ -31,7 +31,6 @@ describe('SearchType', () => {
     term: '',
     filters: {},
     types: [],
-    page: {},
   };
 
   const name = 'field';

plugins/search/src/components/index.tsx

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
+export * from './DefaultResultListItem';
 export * from './Filters';
-export * from './SearchFilter';
-export * from './SearchType';
 export * from './SearchBar';
+export * from './SearchContext';
+export * from './SearchFilter';
 export * from './SearchPage';
 export * from './SearchResult';
-export * from './DefaultResultListItem';
+export * from './SearchResultPager';
+export * from './SearchType';
 export * from './SidebarSearch';
-export * from './SearchContext';