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';