Force adopters to include the search result pager on their own

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

.changeset/search-happy-owls-sneeze.md

@@ -8,3 +8,6 @@
 ---
 
 Implement optional `pageCursor` based paging in search.
+
+To use paging in your app, add a `<SearchResultPager />` to your
+`SearchPage.tsx`.

packages/app/src/components/search/SearchPage.tsx

@@ -21,6 +21,7 @@ import {
   SearchBar,
   SearchFilter,
   SearchResult,
+  SearchResultPager,
   SearchType,
 } from '@backstage/plugin-search';
 import { DocsResultListItem } from '@backstage/plugin-techdocs';
@@ -104,6 +105,7 @@ const SearchPage = () => {
                 </List>
               )}
             </SearchResult>
+            <SearchResultPager />
           </Grid>
         </Grid>
       </Content>

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

@@ -22,7 +22,6 @@ import {
 import { SearchResult } from '@backstage/search-common';
 import React from 'react';
 import { useSearch } from '../SearchContext';
-import { SearchResultPager } from '../SearchResultPager';
 
 type Props = {
   children: (results: { results: SearchResult[] }) => JSX.Element;
@@ -49,12 +48,7 @@ export const SearchResultComponent = ({ children }: Props) => {
     return <EmptyState missing="data" title="Sorry, no results were found" />;
   }
 
-  return (
-    <>
-      {children({ results: value.results })}
-      <SearchResultPager />
-    </>
-  );
+  return <>{children({ results: value.results })}</>;
 };
 
 export { SearchResultComponent as SearchResult };

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

@@ -23,10 +23,9 @@ import { useSearch } from '../SearchContext';
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
     gap: theme.spacing(2),
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    margin: theme.spacing(4),
   },
 }));
 

plugins/search/src/index.ts

@@ -15,25 +15,26 @@
  */
 
 export { searchApiRef } from './apis';
-export {
-  searchPlugin,
-  searchPlugin as plugin,
-  SearchPage,
-  SearchPageNext,
-  SearchBarNext,
-  SearchResult,
-  DefaultResultListItem,
-} from './plugin';
 export {
   Filters,
   FiltersButton,
   SearchBar,
   SearchContextProvider,
-  useSearch,
-  SearchPage as Router,
   SearchFilter,
-  SearchType,
   SearchFilterNext,
+  SearchPage as Router,
+  SearchResultPager,
+  SearchType,
   SidebarSearch,
+  useSearch,
 } from './components';
 export type { FiltersState } from './components';
+export {
+  DefaultResultListItem,
+  SearchBarNext,
+  SearchPage,
+  SearchPageNext,
+  searchPlugin as plugin,
+  searchPlugin,
+  SearchResult,
+} from './plugin';