diff --git a/.changeset/funny-papayas-tell.md b/.changeset/funny-papayas-tell.md new file mode 100644 index 0000000000000..d3c58e95c31fe --- /dev/null +++ b/.changeset/funny-papayas-tell.md @@ -0,0 +1,9 @@ +--- +'@backstage/plugin-catalog': minor +--- + +Harmonize `CatalogTable` + +- Show pagination text for `OffsetPagination` +- Use same `OffsetPaginatedCatalogTable` also as fallback if no pagination is set +- Do not show paging if there is only one page diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 0b2d2e4a4cdd0..838216c8bc0dc 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -23,7 +23,7 @@ import { } from '@backstage/catalog-model'; import { CodeSnippet, - Table, + FavoriteToggleIcon, TableColumn, TableProps, WarningPanel, @@ -47,8 +47,7 @@ import { OffsetPaginatedCatalogTable } from './OffsetPaginatedCatalogTable'; import { CursorPaginatedCatalogTable } from './CursorPaginatedCatalogTable'; import { defaultCatalogTableColumnsFunc } from './defaultCatalogTableColumnsFunc'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; -import { catalogTranslationRef } from '../../alpha/translation'; -import { FavoriteToggleIcon } from '@backstage/core-components'; +import { catalogTranslationRef } from '../../alpha'; /** * Props for {@link CatalogTable}. @@ -194,7 +193,8 @@ export const CatalogTable = (props: CatalogTableProps) => { .join(' '); const actions = props.actions || defaultActions; - const options = { + const options: TableProps['options'] = { + paginationPosition: 'both', actionsColumnIndex: -1, loadingType: 'linear' as const, showEmptyDataSourceMessage: !loading, @@ -202,6 +202,12 @@ export const CatalogTable = (props: CatalogTableProps) => { ...tableOptions, }; + if (paginationMode !== 'cursor' && paginationMode !== 'offset') { + entities.sort(refCompare); + } + + const rows = entities.map(toEntityRow); + if (paginationMode === 'cursor') { return ( { actions={actions} subtitle={subtitle} options={options} - data={entities.map(toEntityRow)} + data={rows} next={pageInfo?.next} prev={pageInfo?.prev} /> ); - } else if (paginationMode === 'offset') { - return ( - - ); } - const rows = entities.sort(refCompare).map(toEntityRow); - const pageSize = 20; - const showPagination = rows.length > pageSize; - + // else use offset paging return ( - - isLoading={loading} + ); }; diff --git a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx index 843d5be2c83c1..8f490fc2698b2 100644 --- a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx @@ -37,7 +37,6 @@ export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) { columns={columns} data={data} options={{ - paginationPosition: 'both', ...options, // These settings are configured to force server side pagination pageSizeOptions: [], diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx index e2e73c5af86a8..e506ccfa99a51 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx @@ -108,7 +108,13 @@ describe('OffsetPaginatedCatalogTable', () => { await renderInTestApp( wrapInContext( , - { setOffset: offsetFn, limit: 10, totalItems: data.length, offset: 0 }, + { + setOffset: offsetFn, + limit: 10, + totalItems: data.length, + offset: 0, + paginationMode: 'offset', + }, ), ); diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index 7ebf791046357..9bae10a403781 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -28,26 +28,30 @@ export function OffsetPaginatedCatalogTable( props: TableProps, ) { const { columns, data, options, ...restProps } = props; - const { setLimit, setOffset, limit, totalItems, offset } = useEntityList(); + const { setLimit, setOffset, limit, totalItems, offset, paginationMode } = + useEntityList(); + const clientPagination = paginationMode === 'none'; const [page, setPage] = React.useState( offset && limit ? Math.floor(offset / limit) : 0, ); useEffect(() => { - if (totalItems && page * limit >= totalItems) { - setOffset!(Math.max(0, totalItems - limit)); - } else { - setOffset!(Math.max(0, page * limit)); + if (clientPagination || !setOffset) { + return; } - }, [setOffset, page, limit, totalItems]); + let newOffset = page * limit; + if (totalItems && newOffset >= totalItems) { + newOffset = totalItems - limit; + } + setOffset(Math.max(0, newOffset)); + }, [setOffset, page, limit, totalItems, clientPagination]); return ( { - setPage(newPage); - }} - onRowsPerPageChange={pageSize => { - setLimit(pageSize); - }} - totalCount={totalItems} - localization={{ pagination: { labelDisplayedRows: '' } }} + {...(clientPagination + ? {} + : { + page, + onPageChange: setPage, + onRowsPerPageChange: setLimit, + totalCount: totalItems, + })} {...restProps} /> );