catalog: PaginatedCatalogTable debounce text filter

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>

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<any>;
+}) {
+  const styles = useToolbarStyles();
+  return (
+    <Toolbar className={styles.root}>
+      <Typography variant="h5" className={styles.text}>
+        {props.title}
+      </Typography>
+      <EntitySearchBar />
+    </Toolbar>
+  );
+}

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 (
     <Table
@@ -49,11 +45,6 @@ export function PaginatedCatalogTable(props: PaginatedCatalogTableProps) {
         pageSize: Number.MAX_SAFE_INTEGER,
         emptyRowsWhenPaging: false,
       }}
-      onSearchChange={(searchText: string) =>
-        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 */