diff --git a/.changeset/search-happy-owls-sneeze.md b/.changeset/search-happy-owls-sneeze.md
index 4740c767d2..1f3cfd5dd1 100644
--- a/.changeset/search-happy-owls-sneeze.md
+++ b/.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 `` to your
+`SearchPage.tsx`.
diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx
index 1c8d750e08..54f59d1a6e 100644
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/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 = () => {
)}
+
diff --git a/plugins/search/src/components/SearchResult/SearchResult.tsx b/plugins/search/src/components/SearchResult/SearchResult.tsx
index ff01e96e74..34b6840f21 100644
--- a/plugins/search/src/components/SearchResult/SearchResult.tsx
+++ b/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 ;
}
- return (
- <>
- {children({ results: value.results })}
-
- >
- );
+ return <>{children({ results: value.results })}>;
};
export { SearchResultComponent as SearchResult };
diff --git a/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx b/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx
index 97fa0048e3..f1850772bb 100644
--- a/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx
+++ b/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),
},
}));
diff --git a/plugins/search/src/index.ts b/plugins/search/src/index.ts
index f09ba739bd..d178329ab4 100644
--- a/plugins/search/src/index.ts
+++ b/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';