paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 24 Packages Projects Releases Wiki Activity

Revert harmonization of CatalogTables

Browse Source 
see https://github.com/backstage/backstage/pull/28449#pullrequestreview-2559283912

Signed-off-by: Andreas Berger <andreas@berger-ecommerce.com>
This commit is contained in:
Andreas Berger
2025-04-28 17:00:39 +02:00
parent 015a3c2b4e
commit fa67031ff9
8 changed files with 128 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/funny-papayas-tell.md
-1
View File
@@ -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
plugins/app-visualizer/report.api.md
+21 -21
View File
@@ -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<undefined>;
},
'core.nav-item.target',
{}
>;
inputs: {};
params: {
title: string;
icon: IconComponent;
routeRef: RouteRef<undefined>;
};
}>;
'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<undefined>;
},
'core.nav-item.target',
{}
>;
inputs: {};
params: {
title: string;
icon: IconComponent;
routeRef: RouteRef<undefined>;
};
}>;
}
>;
export default visualizerPlugin;
plugins/catalog-import/report-alpha.api.md
+15 -15
View File
@@ -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;
plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+30 -14
View File
@@ -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 (
<CursorPaginatedCatalogTable
@@ -218,24 +213,45 @@ export const CatalogTable = (props: CatalogTableProps) => {
actions={actions}
subtitle={subtitle}
options={options}
data={rows}
data={entities.map(toEntityRow)}
next={pageInfo?.next}
prev={pageInfo?.prev}
/>
);
} else if (paginationMode === 'offset') {
return (
<OffsetPaginatedCatalogTable
columns={tableColumns}
emptyContent={emptyContent}
isLoading={loading}
title={title}
actions={actions}
subtitle={subtitle}
options={options}
data={entities.map(toEntityRow)}
/>
);
}
// else use offset paging
const rows = entities.sort(refCompare).map(toEntityRow);
const pageSize = 20;
const showPagination = rows.length > pageSize;
return (
<OffsetPaginatedCatalogTable
columns={tableColumns}
emptyContent={emptyContent}
<Table<CatalogTableRow>
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}
/>
);
};
plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.test.tsx
+1 -7
View File
@@ -108,13 +108,7 @@ describe('OffsetPaginatedCatalogTable', () => {
await renderInTestApp(
wrapInContext(
<OffsetPaginatedCatalogTable data={data} columns={columns} />,
{
setOffset: offsetFn,
limit: 10,
totalItems: data.length,
offset: 0,
paginationMode: 'offset',
},
{ setOffset: offsetFn, limit: 10, totalItems: data.length, offset: 0 },
),
);
plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx
+10 -19
View File
@@ -28,24 +28,19 @@ export function OffsetPaginatedCatalogTable(
props: TableProps<CatalogTableRow>,
) {
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 (
<Table
@@ -60,14 +55,10 @@ export function OffsetPaginatedCatalogTable(
components={{
Toolbar: CatalogTableToolbar,
}}
{...(clientPagination
? {}
: {
page,
onPageChange: setPage,
onRowsPerPageChange: setLimit,
totalCount: totalItems,
})}
page={page}
onPageChange={setPage}
onRowsPerPageChange={setLimit}
totalCount={totalItems}
{...restProps}
/>
);
plugins/devtools/report-alpha.api.md
+36 -36
View File
@@ -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<undefined>;
},
'core.nav-item.target',
{}
>;
inputs: {};
params: {
title: string;
icon: IconComponent;
routeRef: RouteRef<undefined>;
};
}>;
'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<undefined>;
},
'core.nav-item.target',
{}
>;
inputs: {};
params: {
title: string;
icon: IconComponent;
routeRef: RouteRef<undefined>;
};
}>;
'api:devtools': ExtensionDefinition<{
kind: 'api';
name: undefined;
config: {};
configInput: {};
output: ConfigurableExtensionDataRef<
AnyApiFactory,
'core.api.factory',
{}
>;
inputs: {};
params: {
factory: AnyApiFactory;
};
}>;
}
>;
export default _default;
plugins/search/report-alpha.api.md
+15 -15
View File
@@ -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<undefined>;
};
}>;
'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;