diff --git a/site/src/components/PaginationWidget/PaginationWidget.stories.tsx b/site/src/components/PaginationWidget/PaginationWidget.stories.tsx index 6e36bff4ac1b8..e05a112e0729b 100644 --- a/site/src/components/PaginationWidget/PaginationWidget.stories.tsx +++ b/site/src/components/PaginationWidget/PaginationWidget.stories.tsx @@ -25,11 +25,6 @@ const Template: Story = ( args: PaginationWidgetProps, ) => -export const UnknownPageNumbers = Template.bind({}) -UnknownPageNumbers.args = { - numRecords: undefined, -} - export const LessThan8Pages = Template.bind({}) LessThan8Pages.args = { numRecords: 84, diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx index e3765e524a398..d247f29ed59d7 100644 --- a/site/src/components/PaginationWidget/PaginationWidget.tsx +++ b/site/src/components/PaginationWidget/PaginationWidget.tsx @@ -34,24 +34,24 @@ export const PaginationWidget = ({ const currentPage = paginationState.context.page const numRecordsPerPage = paginationState.context.limit - const numPages = numRecords - ? Math.ceil(numRecords / numRecordsPerPage) - : undefined + const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0 const firstPageActive = currentPage === 1 && numPages !== 0 const lastPageActive = currentPage === numPages && numPages !== 0 + // if beyond page 1, show pagination widget even if there's only one true page, so user can navigate back + const showWidget = numPages > 1 || currentPage > 1 return ( -
- - + +
+ - {numPages && - buildPagedList(numPages, currentPage).map((page) => - typeof page !== "number" ? ( - - ) : ( - send({ type: "GO_TO_PAGE", page })} - /> - ), - )} + {buildPagedList(numPages, currentPage).map((page) => + typeof page !== "number" ? ( + + ) : ( + send({ type: "GO_TO_PAGE", page })} + /> + ), + )} - - -
+ +
+ ) }