diff --git a/.changeset/smart-cycles-fall.md b/.changeset/smart-cycles-fall.md new file mode 100644 index 0000000000..dcc5e942bd --- /dev/null +++ b/.changeset/smart-cycles-fall.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Fixed entity relation cards (e.g., "Has components") only showing one entity at a time by using `paginationOptions: { type: 'none' }` instead of deriving page size from data length. diff --git a/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.test.tsx b/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.test.tsx index 77b0e26a02..1a59deecf8 100644 --- a/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.test.tsx +++ b/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.test.tsx @@ -132,6 +132,24 @@ describe('', () => { expect(rows()[1]).toHaveTextContent('alpha'); }); + it('shows all rows after loading completes', async () => { + const { rerender } = await renderInTestApp( + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + rerender(); + + const rows = screen.getAllByRole('row').slice(1); + expect(rows).toHaveLength(2); + expect(rows[0]).toHaveTextContent('bravo'); + expect(rows[1]).toHaveTextContent('alpha'); + }); + it('does not sort when column has no sortValue', async () => { const unsortableColumns: EntityColumnConfig[] = [ { diff --git a/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.tsx b/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.tsx index 32234b1bc0..7928dc227d 100644 --- a/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.tsx +++ b/plugins/catalog-react/src/components/EntityDataTable/EntityDataTable.tsx @@ -61,7 +61,7 @@ export function EntityDataTable(props: EntityDataTableProps) { mode: 'complete', data: tableData, sortFn, - paginationOptions: { pageSize: tableData.length || 1 }, + paginationOptions: { type: 'none' }, }); return ( @@ -71,7 +71,6 @@ export function EntityDataTable(props: EntityDataTableProps) { loading={loading} error={error} emptyState={emptyState} - pagination={{ type: 'none' }} /> ); }