diff --git a/.changeset/funny-papayas-tell.md b/.changeset/funny-papayas-tell.md index d3c58e95c3..8931c7a96f 100644 --- a/.changeset/funny-papayas-tell.md +++ b/.changeset/funny-papayas-tell.md @@ -5,5 +5,4 @@ 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/app-visualizer/report.api.md b/plugins/app-visualizer/report.api.md index 6e31446e63..370647afc9 100644 --- a/plugins/app-visualizer/report.api.md +++ b/plugins/app-visualizer/report.api.md @@ -16,6 +16,27 @@ const visualizerPlugin: FrontendPlugin< {}, {}, { + 'nav-item:app-visualizer': ExtensionDefinition<{ + kind: 'nav-item'; + name: undefined; + config: {}; + configInput: {}; + output: ConfigurableExtensionDataRef< + { + title: string; + icon: IconComponent; + routeRef: RouteRef; + }, + 'core.nav-item.target', + {} + >; + inputs: {}; + params: { + title: string; + icon: IconComponent; + routeRef: RouteRef; + }; + }>; 'page:app-visualizer': ExtensionDefinition<{ kind: 'page'; name: undefined; @@ -42,27 +63,6 @@ const visualizerPlugin: FrontendPlugin< routeRef?: RouteRef; }; }>; - 'nav-item:app-visualizer': ExtensionDefinition<{ - kind: 'nav-item'; - name: undefined; - config: {}; - configInput: {}; - output: ConfigurableExtensionDataRef< - { - title: string; - icon: IconComponent; - routeRef: RouteRef; - }, - 'core.nav-item.target', - {} - >; - inputs: {}; - params: { - title: string; - icon: IconComponent; - routeRef: RouteRef; - }; - }>; } >; export default visualizerPlugin; diff --git a/plugins/catalog-import/report-alpha.api.md b/plugins/catalog-import/report-alpha.api.md index 0f20fe1480..24789a42e4 100644 --- a/plugins/catalog-import/report-alpha.api.md +++ b/plugins/catalog-import/report-alpha.api.md @@ -28,6 +28,21 @@ const _default: FrontendPlugin< }, {}, { + 'api:catalog-import': ExtensionDefinition<{ + kind: 'api'; + name: undefined; + config: {}; + configInput: {}; + output: ConfigurableExtensionDataRef< + AnyApiFactory, + 'core.api.factory', + {} + >; + inputs: {}; + params: { + factory: AnyApiFactory; + }; + }>; 'page:catalog-import': ExtensionDefinition<{ kind: 'page'; name: undefined; @@ -54,21 +69,6 @@ const _default: FrontendPlugin< routeRef?: RouteRef; }; }>; - 'api:catalog-import': ExtensionDefinition<{ - kind: 'api'; - name: undefined; - config: {}; - configInput: {}; - output: ConfigurableExtensionDataRef< - AnyApiFactory, - 'core.api.factory', - {} - >; - inputs: {}; - params: { - factory: AnyApiFactory; - }; - }>; } >; export default _default; diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 02f1603114..8cce9ff317 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, - FavoriteToggleIcon, + Table, TableColumn, TableProps, WarningPanel, @@ -48,6 +48,7 @@ import { CursorPaginatedCatalogTable } from './CursorPaginatedCatalogTable'; import { defaultCatalogTableColumnsFunc } from './defaultCatalogTableColumnsFunc'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { catalogTranslationRef } from '../../alpha'; +import { FavoriteToggleIcon } from '@backstage/core-components'; /** * Props for {@link CatalogTable}. @@ -202,12 +203,6 @@ 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={rows} + data={entities.map(toEntityRow)} next={pageInfo?.next} prev={pageInfo?.prev} /> ); + } else if (paginationMode === 'offset') { + return ( + + ); } - // else use offset paging + const rows = entities.sort(refCompare).map(toEntityRow); + const pageSize = 20; + const showPagination = rows.length > pageSize; + return ( - isLoading={loading} + columns={tableColumns} + options={{ + paging: showPagination, + pageSize: pageSize, + pageSizeOptions: [20, 50, 100], + ...options, + }} title={title} + data={rows} actions={actions} subtitle={subtitle} - options={options} - data={rows} + emptyContent={emptyContent} /> ); }; diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx index 600e178c18..54c2550451 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx @@ -108,13 +108,7 @@ describe('OffsetPaginatedCatalogTable', () => { await renderInTestApp( wrapInContext( , - { - setOffset: offsetFn, - limit: 10, - totalItems: data.length, - offset: 0, - paginationMode: 'offset', - }, + { setOffset: offsetFn, limit: 10, totalItems: data.length, offset: 0 }, ), ); diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index e2954e30cb..896cf0f8b6 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -28,24 +28,19 @@ export function OffsetPaginatedCatalogTable( props: TableProps, ) { const { columns, data, options, ...restProps } = props; - const { setLimit, setOffset, limit, totalItems, offset, paginationMode } = - useEntityList(); - const clientPagination = paginationMode === 'none'; + const { setLimit, setOffset, limit, totalItems, offset } = useEntityList(); const [page, setPage] = useState( offset && limit ? Math.floor(offset / limit) : 0, ); useEffect(() => { - if (clientPagination || !setOffset) { - return; + if (totalItems && page * limit >= totalItems) { + setOffset!(Math.max(0, totalItems - limit)); + } else { + setOffset!(Math.max(0, page * limit)); } - let newOffset = page * limit; - if (totalItems && newOffset >= totalItems) { - newOffset = totalItems - limit; - } - setOffset(Math.max(0, newOffset)); - }, [setOffset, page, limit, totalItems, clientPagination]); + }, [setOffset, page, limit, totalItems]); return ( ); diff --git a/plugins/devtools/report-alpha.api.md b/plugins/devtools/report-alpha.api.md index f882d851ca..663c4be34d 100644 --- a/plugins/devtools/report-alpha.api.md +++ b/plugins/devtools/report-alpha.api.md @@ -19,6 +19,42 @@ const _default: FrontendPlugin< }, {}, { + 'api:devtools': ExtensionDefinition<{ + kind: 'api'; + name: undefined; + config: {}; + configInput: {}; + output: ConfigurableExtensionDataRef< + AnyApiFactory, + 'core.api.factory', + {} + >; + inputs: {}; + params: { + factory: AnyApiFactory; + }; + }>; + 'nav-item:devtools': ExtensionDefinition<{ + kind: 'nav-item'; + name: undefined; + config: {}; + configInput: {}; + output: ConfigurableExtensionDataRef< + { + title: string; + icon: IconComponent; + routeRef: RouteRef; + }, + 'core.nav-item.target', + {} + >; + inputs: {}; + params: { + title: string; + icon: IconComponent; + routeRef: RouteRef; + }; + }>; 'page:devtools': ExtensionDefinition<{ kind: 'page'; name: undefined; @@ -45,42 +81,6 @@ const _default: FrontendPlugin< routeRef?: RouteRef; }; }>; - 'nav-item:devtools': ExtensionDefinition<{ - kind: 'nav-item'; - name: undefined; - config: {}; - configInput: {}; - output: ConfigurableExtensionDataRef< - { - title: string; - icon: IconComponent; - routeRef: RouteRef; - }, - 'core.nav-item.target', - {} - >; - inputs: {}; - params: { - title: string; - icon: IconComponent; - routeRef: RouteRef; - }; - }>; - 'api:devtools': ExtensionDefinition<{ - kind: 'api'; - name: undefined; - config: {}; - configInput: {}; - output: ConfigurableExtensionDataRef< - AnyApiFactory, - 'core.api.factory', - {} - >; - inputs: {}; - params: { - factory: AnyApiFactory; - }; - }>; } >; export default _default; diff --git a/plugins/search/report-alpha.api.md b/plugins/search/report-alpha.api.md index f1f87d2377..b8df4d3b4c 100644 --- a/plugins/search/report-alpha.api.md +++ b/plugins/search/report-alpha.api.md @@ -23,6 +23,21 @@ const _default: FrontendPlugin< }, {}, { + 'api:search': ExtensionDefinition<{ + kind: 'api'; + name: undefined; + config: {}; + configInput: {}; + output: ConfigurableExtensionDataRef< + AnyApiFactory, + 'core.api.factory', + {} + >; + inputs: {}; + params: { + factory: AnyApiFactory; + }; + }>; 'nav-item:search': ExtensionDefinition<{ kind: 'nav-item'; name: undefined; @@ -44,21 +59,6 @@ const _default: FrontendPlugin< routeRef: RouteRef; }; }>; - 'api:search': ExtensionDefinition<{ - kind: 'api'; - name: undefined; - config: {}; - configInput: {}; - output: ConfigurableExtensionDataRef< - AnyApiFactory, - 'core.api.factory', - {} - >; - inputs: {}; - params: { - factory: AnyApiFactory; - }; - }>; 'page:search': ExtensionDefinition<{ config: { noTrack: boolean;