diff --git a/.changeset/empty-books-occur.md b/.changeset/empty-books-occur.md new file mode 100644 index 0000000000..69218c5cfa --- /dev/null +++ b/.changeset/empty-books-occur.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search-react': patch +--- + +Correctly disable next button in `SearchPagination` on last page diff --git a/plugins/search-react/api-report.md b/plugins/search-react/api-report.md index bd8d1e0794..30b5d4b581 100644 --- a/plugins/search-react/api-report.md +++ b/plugins/search-react/api-report.md @@ -227,6 +227,7 @@ export type SearchPaginationBaseProps = { className?: string; total?: number; cursor?: string; + hasNextPage?: boolean; onCursorChange?: (pageCursor: string) => void; limit?: number; limitLabel?: ReactNode; @@ -257,7 +258,11 @@ export type SearchPaginationLimitText = (params: { // @public export type SearchPaginationProps = Omit< SearchPaginationBaseProps, - 'pageLimit' | 'onPageLimitChange' | 'pageCursor' | 'onPageCursorChange' + | 'pageLimit' + | 'onPageLimitChange' + | 'pageCursor' + | 'onPageCursorChange' + | 'hasNextPage' >; // @public diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx index 34b6deaff5..7ab9e8604c 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx +++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx @@ -77,6 +77,10 @@ export type SearchPaginationBaseProps = { * The cursor for the current page. */ cursor?: string; + /** + * Whether a next page exists + */ + hasNextPage?: boolean; /** * Callback fired when the current page cursor is changed. */ @@ -118,6 +122,7 @@ export const SearchPaginationBase = (props: SearchPaginationBaseProps) => { const { total: count = -1, cursor: pageCursor, + hasNextPage, onCursorChange: onPageCursorChange, limit: rowsPerPage = 25, limitLabel: labelRowsPerPage = 'Results per page:', @@ -151,6 +156,9 @@ export const SearchPaginationBase = (props: SearchPaginationBaseProps) => { component="div" count={count} page={page} + nextIconButtonProps={{ + ...(hasNextPage !== undefined && { disabled: !hasNextPage }), + }} onPageChange={handlePageChange} rowsPerPage={rowsPerPage} labelRowsPerPage={labelRowsPerPage} @@ -167,7 +175,11 @@ export const SearchPaginationBase = (props: SearchPaginationBaseProps) => { */ export type SearchPaginationProps = Omit< SearchPaginationBaseProps, - 'pageLimit' | 'onPageLimitChange' | 'pageCursor' | 'onPageCursorChange' + | 'pageLimit' + | 'onPageLimitChange' + | 'pageCursor' + | 'onPageCursorChange' + | 'hasNextPage' >; /** @@ -176,11 +188,13 @@ export type SearchPaginationProps = Omit< * @public */ export const SearchPagination = (props: SearchPaginationProps) => { - const { pageLimit, setPageLimit, pageCursor, setPageCursor } = useSearch(); + const { pageLimit, setPageLimit, pageCursor, setPageCursor, fetchNextPage } = + useSearch(); return (