From 970cb48e07d994b900e618e295fb1bd68d520511 Mon Sep 17 00:00:00 2001 From: Andreas Berger Date: Mon, 13 Jan 2025 09:16:43 +0100 Subject: [PATCH 01/10] 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 Signed-off-by: Andreas Berger --- .changeset/funny-papayas-tell.md | 9 ++++ .../components/CatalogTable/CatalogTable.tsx | 47 +++++++------------ .../CursorPaginatedCatalogTable.tsx | 1 - .../OffsetPaginatedCatalogTable.tsx | 9 ++-- 4 files changed, 30 insertions(+), 36 deletions(-) create mode 100644 .changeset/funny-papayas-tell.md diff --git a/.changeset/funny-papayas-tell.md b/.changeset/funny-papayas-tell.md new file mode 100644 index 0000000000..d3c58e95c3 --- /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 9b3a950ffd..2076750da8 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -23,7 +23,6 @@ import { } from '@backstage/catalog-model'; import { CodeSnippet, - Table, TableColumn, TableProps, WarningPanel, @@ -47,7 +46,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 { catalogTranslationRef } from '../../alpha'; import { FavoriteToggleIcon } from '@backstage/core-components'; /** @@ -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 e49ecf3cd9..1fcc2683be 100644 --- a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx @@ -35,7 +35,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.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index 96c81088ca..7f599cad76 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -36,21 +36,23 @@ export function OffsetPaginatedCatalogTable( useEffect(() => { if (totalItems && page * limit >= totalItems) { - setOffset!(Math.max(0, totalItems - limit)); + setOffset?.(Math.max(0, totalItems - limit)); } else { - setOffset!(Math.max(0, page * limit)); + setOffset?.(Math.max(0, page * limit)); } }, [setOffset, page, limit, totalItems]); + const showPagination = (totalItems ?? data.length) > limit; + return ( ); From 181f2d108d861e50c5d2dde7d48ff49e5aafe686 Mon Sep 17 00:00:00 2001 From: Andreas Berger Date: Fri, 17 Jan 2025 15:53:08 +0100 Subject: [PATCH 02/10] distinguish between client and server side paging Signed-off-by: Andreas Berger --- .../components/CatalogTable/CatalogTable.tsx | 3 ++- .../OffsetPaginatedCatalogTable.tsx | 24 ++++++++++--------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 2076750da8..b20ac84889 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -23,6 +23,7 @@ import { } from '@backstage/catalog-model'; import { CodeSnippet, + FavoriteToggleIcon, TableColumn, TableProps, WarningPanel, @@ -47,7 +48,6 @@ 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}. @@ -236,6 +236,7 @@ export const CatalogTable = (props: CatalogTableProps) => { subtitle={subtitle} options={options} data={rows} + clientPagination={paginationMode === 'none'} /> ); }; diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index 7f599cad76..b88558c822 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -25,9 +25,12 @@ import { CatalogTableToolbar } from './CatalogTableToolbar'; * @internal */ export function OffsetPaginatedCatalogTable( - props: TableProps, + props: TableProps & { + // If true, the pagination will be handled client side, the table will use all rows provided in the data prop + clientPagination?: boolean; + }, ) { - const { columns, data, options, ...restProps } = props; + const { columns, data, options, clientPagination, ...restProps } = props; const { setLimit, setOffset, limit, totalItems, offset } = useEntityList(); const [page, setPage] = useState( @@ -42,7 +45,8 @@ export function OffsetPaginatedCatalogTable( } }, [setOffset, page, limit, totalItems]); - const showPagination = (totalItems ?? data.length) > limit; + const showPagination = + (clientPagination ? data.length : totalItems ?? data.length) > limit; return (
{ - setPage(newPage); - }} - onRowsPerPageChange={pageSize => { - setLimit(pageSize); - }} - totalCount={totalItems} + page={clientPagination ? undefined : page} + onPageChange={clientPagination ? undefined : newPage => setPage(newPage)} + onRowsPerPageChange={ + clientPagination ? undefined : pageSize => setLimit(pageSize) + } + totalCount={clientPagination ? undefined : totalItems} {...restProps} /> ); From 07d9f518f5f85c8873132553b2b3130505c9d83a Mon Sep 17 00:00:00 2001 From: Andreas Berger Date: Fri, 17 Jan 2025 16:05:15 +0100 Subject: [PATCH 03/10] use paging mode from context Signed-off-by: Andreas Berger --- .../components/CatalogTable/CatalogTable.tsx | 1 - .../OffsetPaginatedCatalogTable.tsx | 33 ++++++++++--------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index b20ac84889..02f1603114 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -236,7 +236,6 @@ export const CatalogTable = (props: CatalogTableProps) => { subtitle={subtitle} options={options} data={rows} - clientPagination={paginationMode === 'none'} /> ); }; diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index b88558c822..d27754ee29 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -25,28 +25,29 @@ import { CatalogTableToolbar } from './CatalogTableToolbar'; * @internal */ export function OffsetPaginatedCatalogTable( - props: TableProps & { - // If true, the pagination will be handled client side, the table will use all rows provided in the data prop - clientPagination?: boolean; - }, + props: TableProps, ) { - const { columns, data, options, clientPagination, ...restProps } = props; - const { setLimit, setOffset, limit, totalItems, offset } = useEntityList(); + const { columns, data, options, ...restProps } = props; + const { setLimit, setOffset, limit, totalItems, offset, paginationMode } = + useEntityList(); + const clientPagination = paginationMode === 'none'; const [page, setPage] = useState( offset && limit ? Math.floor(offset / limit) : 0, ); useEffect(() => { + if (clientPagination) { + return; + } if (totalItems && page * limit >= totalItems) { setOffset?.(Math.max(0, totalItems - limit)); } else { setOffset?.(Math.max(0, page * limit)); } - }, [setOffset, page, limit, totalItems]); + }, [setOffset, page, limit, totalItems, clientPagination]); - const showPagination = - (clientPagination ? data.length : totalItems ?? data.length) > limit; + const showPagination = (totalItems ?? data.length) > limit; return (
setPage(newPage)} - onRowsPerPageChange={ - clientPagination ? undefined : pageSize => setLimit(pageSize) - } - totalCount={clientPagination ? undefined : totalItems} + {...(clientPagination + ? {} + : { + page, + onPageChange: newPage => setPage(newPage), + onRowsPerPageChange: pageSize => setLimit(pageSize), + totalCount: totalItems, + })} {...restProps} /> ); From 8c1f0e92e24e9e6b6082302124286d6287d21964 Mon Sep 17 00:00:00 2001 From: Andreas Berger Date: Fri, 17 Jan 2025 16:08:41 +0100 Subject: [PATCH 04/10] clean up code Signed-off-by: Andreas Berger --- .../components/CatalogTable/OffsetPaginatedCatalogTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index d27754ee29..0bec07722e 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -67,8 +67,8 @@ export function OffsetPaginatedCatalogTable( ? {} : { page, - onPageChange: newPage => setPage(newPage), - onRowsPerPageChange: pageSize => setLimit(pageSize), + onPageChange: setPage, + onRowsPerPageChange: setLimit, totalCount: totalItems, })} {...restProps} From 572fa299959888259d63f80f77cc3990b04b9960 Mon Sep 17 00:00:00 2001 From: Andreas Berger Date: Fri, 17 Jan 2025 16:11:41 +0100 Subject: [PATCH 05/10] fix tests Signed-off-by: Andreas Berger --- .../CatalogTable/OffsetPaginatedCatalogTable.test.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx index 54c2550451..600e178c18 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', + }, ), ); From cf02a9ce06fb654c5fdae6f0a50f133885d13494 Mon Sep 17 00:00:00 2001 From: Andreas Berger Date: Fri, 17 Jan 2025 16:21:44 +0100 Subject: [PATCH 06/10] optimize code Signed-off-by: Andreas Berger --- .../CatalogTable/OffsetPaginatedCatalogTable.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index 0bec07722e..2f7e5a168e 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -37,14 +37,14 @@ export function OffsetPaginatedCatalogTable( ); useEffect(() => { - if (clientPagination) { + 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]); const showPagination = (totalItems ?? data.length) > limit; From 7e07b110488a390ae1a6277236b7b14e324f7c87 Mon Sep 17 00:00:00 2001 From: Andreas Berger Date: Mon, 20 Jan 2025 08:42:54 +0100 Subject: [PATCH 07/10] do always show paging bar, so the user can change the limit even if there is only one page available Signed-off-by: Andreas Berger --- .../components/CatalogTable/OffsetPaginatedCatalogTable.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index 2f7e5a168e..e2954e30cb 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -47,8 +47,6 @@ export function OffsetPaginatedCatalogTable( setOffset(Math.max(0, newOffset)); }, [setOffset, page, limit, totalItems, clientPagination]); - const showPagination = (totalItems ?? data.length) > limit; - return (
Date: Mon, 17 Feb 2025 16:51:21 +0100 Subject: [PATCH 08/10] Revert "fix api-reports (why ever they changed?)" This reverts commit 6a3dc95fe5948abfc893cc57c7250e6a53d686ad. Signed-off-by: Andreas Berger --- plugins/app-visualizer/report.api.md | 42 ++++++------- plugins/catalog-import/report-alpha.api.md | 30 ++++----- plugins/devtools/report-alpha.api.md | 72 +++++++++++----------- plugins/search/report-alpha.api.md | 30 ++++----- 4 files changed, 87 insertions(+), 87 deletions(-) diff --git a/plugins/app-visualizer/report.api.md b/plugins/app-visualizer/report.api.md index 370647afc9..6e31446e63 100644 --- a/plugins/app-visualizer/report.api.md +++ b/plugins/app-visualizer/report.api.md @@ -16,27 +16,6 @@ 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; @@ -63,6 +42,27 @@ 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 24789a42e4..0f20fe1480 100644 --- a/plugins/catalog-import/report-alpha.api.md +++ b/plugins/catalog-import/report-alpha.api.md @@ -28,21 +28,6 @@ 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; @@ -69,6 +54,21 @@ 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/devtools/report-alpha.api.md b/plugins/devtools/report-alpha.api.md index 663c4be34d..f882d851ca 100644 --- a/plugins/devtools/report-alpha.api.md +++ b/plugins/devtools/report-alpha.api.md @@ -19,42 +19,6 @@ 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; @@ -81,6 +45,42 @@ 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 b8df4d3b4c..f1f87d2377 100644 --- a/plugins/search/report-alpha.api.md +++ b/plugins/search/report-alpha.api.md @@ -23,21 +23,6 @@ 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; @@ -59,6 +44,21 @@ 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; From fa67031ff9bd9dd9be789162ebf70039f65f2c01 Mon Sep 17 00:00:00 2001 From: Andreas Berger Date: Mon, 28 Apr 2025 17:00:39 +0200 Subject: [PATCH 09/10] Revert harmonization of CatalogTables see https://github.com/backstage/backstage/pull/28449#pullrequestreview-2559283912 Signed-off-by: Andreas Berger --- .changeset/funny-papayas-tell.md | 1 - plugins/app-visualizer/report.api.md | 42 +++++------ plugins/catalog-import/report-alpha.api.md | 30 ++++---- .../components/CatalogTable/CatalogTable.tsx | 44 ++++++++---- .../OffsetPaginatedCatalogTable.test.tsx | 8 +-- .../OffsetPaginatedCatalogTable.tsx | 29 +++----- plugins/devtools/report-alpha.api.md | 72 +++++++++---------- plugins/search/report-alpha.api.md | 30 ++++---- 8 files changed, 128 insertions(+), 128 deletions(-) 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; From eef2c5c3fdc2817c1957517751bbf5cf0d6ac72a Mon Sep 17 00:00:00 2001 From: Andreas Berger Date: Wed, 7 May 2025 11:13:53 +0200 Subject: [PATCH 10/10] Apply suggestions from code review Co-authored-by: Vincenzo Scamporlino Signed-off-by: Andreas Berger --- .changeset/funny-papayas-tell.md | 5 +---- plugins/catalog/src/components/CatalogTable/CatalogTable.tsx | 1 - 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/.changeset/funny-papayas-tell.md b/.changeset/funny-papayas-tell.md index 8931c7a96f..98beaf89e0 100644 --- a/.changeset/funny-papayas-tell.md +++ b/.changeset/funny-papayas-tell.md @@ -2,7 +2,4 @@ '@backstage/plugin-catalog': minor --- -Harmonize `CatalogTable` - -- Show pagination text for `OffsetPagination` -- Do not show paging if there is only one page +Show the pagination text for the offset-paginated catalog table, and remove the pagination bar from the top of the `CatalogTable` when pagination is enabled. diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 8cce9ff317..464688c590 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -195,7 +195,6 @@ export const CatalogTable = (props: CatalogTableProps) => { const actions = props.actions || defaultActions; const options: TableProps['options'] = { - paginationPosition: 'both', actionsColumnIndex: -1, loadingType: 'linear' as const, showEmptyDataSourceMessage: !loading,