diff --git a/.changeset/curvy-poems-joke.md b/.changeset/curvy-poems-joke.md new file mode 100644 index 0000000000..0ec6706ed4 --- /dev/null +++ b/.changeset/curvy-poems-joke.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Use default `CatalogTableToolbar` for offset paginated catalog table diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx index a86dd60b50..7febfc2d32 100644 --- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx @@ -18,10 +18,8 @@ import React, { useEffect } from 'react'; import { Table, TableProps } from '@backstage/core-components'; import { CatalogTableRow } from './types'; -import { - EntityTextFilter, - useEntityList, -} from '@backstage/plugin-catalog-react'; +import { useEntityList } from '@backstage/plugin-catalog-react'; +import { CatalogTableToolbar } from './CatalogTableToolbar'; /** * @internal @@ -30,8 +28,8 @@ export function OffsetPaginatedCatalogTable( props: TableProps, ) { const { columns, data, isLoading, options } = props; - const { updateFilters, setLimit, setOffset, limit, totalItems, offset } = - useEntityList(); + const { setLimit, setOffset, limit, totalItems, offset } = useEntityList(); + const [page, setPage] = React.useState( offset && limit ? Math.floor(offset / limit) : 0, ); @@ -55,11 +53,9 @@ export function OffsetPaginatedCatalogTable( emptyRowsWhenPaging: false, ...options, }} - onSearchChange={(searchText: string) => - updateFilters({ - text: searchText ? new EntityTextFilter(searchText) : undefined, - }) - } + components={{ + Toolbar: CatalogTableToolbar, + }} page={page} onPageChange={newPage => { setPage(newPage);