diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx new file mode 100644 index 0000000000..2a33692471 --- /dev/null +++ b/plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx @@ -0,0 +1,50 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { EntitySearchBar } from '@backstage/plugin-catalog-react'; +import { Toolbar, Typography, makeStyles } from '@material-ui/core'; + +const useToolbarStyles = makeStyles( + theme => ({ + root: { + paddingTop: theme.spacing(1.25), + paddingLeft: theme.spacing(2.5), + paddingBottom: theme.spacing(0.75), + display: 'flex', + justifyContent: 'space-between', + }, + text: { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }), + { name: 'BackstageTableToolbar' }, +); + +export function CatalogTableToolbar(props: { + title?: string | React.ReactElement; +}) { + const styles = useToolbarStyles(); + return ( + + + {props.title} + + + + ); +} diff --git a/plugins/catalog/src/components/CatalogTable/PaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/PaginatedCatalogTable.tsx index 34087f1b36..38691b49d2 100644 --- a/plugins/catalog/src/components/CatalogTable/PaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/PaginatedCatalogTable.tsx @@ -18,10 +18,7 @@ import React from 'react'; import { Table, TableProps } from '@backstage/core-components'; import { CatalogTableRow } from './types'; -import { - EntityTextFilter, - useEntityList, -} from '@backstage/plugin-catalog-react'; +import { CatalogTableToolbar } from './CatalogTableToolbar'; type PaginatedCatalogTableProps = { prev?(): void; @@ -33,7 +30,6 @@ type PaginatedCatalogTableProps = { */ export function PaginatedCatalogTable(props: PaginatedCatalogTableProps) { const { columns, data, next, prev, title, isLoading, options } = props; - const { updateFilters } = useEntityList(); return ( - updateFilters({ - text: searchText ? new EntityTextFilter(searchText) : undefined, - }) - } onPageChange={page => { if (page > 0) { next?.(); @@ -61,6 +52,9 @@ export function PaginatedCatalogTable(props: PaginatedCatalogTableProps) { prev?.(); } }} + components={{ + Toolbar: CatalogTableToolbar, + }} /* this will enable the prev button accordingly */ page={prev ? 1 : 0} /* this will enable the next button accordingly */