refactor(CatalogTable): use builtin material toolbar for client side paginated impl

Signed-off-by: Phil Kuang <pkuang@factset.com>

.changeset/little-mangos-reply.md

@@ -2,4 +2,4 @@
 '@backstage/plugin-catalog': patch
 ---
 
-Allow overriding default components in underlying Catalog Material table
+Revert client side paginated catalog table to using built in Material Table toolbar component

plugins/catalog/report.api.md

@@ -210,8 +210,6 @@ export interface CatalogTableProps {
   // (undocumented)
   columns?: TableColumn<CatalogTableRow>[] | CatalogTableColumnsFunc;
   // (undocumented)
-  components?: TableProps<CatalogTableRow>['components'];
-  // (undocumented)
   emptyContent?: ReactNode;
   // (undocumented)
   subtitle?: string;

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -49,7 +49,6 @@ import { defaultCatalogTableColumnsFunc } from './defaultCatalogTableColumnsFunc
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { catalogTranslationRef } from '../../alpha/translation';
 import { FavoriteToggleIcon } from '@backstage/core-components';
-import { CatalogTableToolbar } from './CatalogTableToolbar';
 
 /**
  * Props for {@link CatalogTable}.
@@ -67,7 +66,6 @@ export interface CatalogTableProps {
    */
   title?: string;
   subtitle?: string;
-  components?: TableProps<CatalogTableRow>['components'];
 }
 
 const refCompare = (a: Entity, b: Entity) => {
@@ -96,7 +94,6 @@ export const CatalogTable = (props: CatalogTableProps) => {
     tableOptions,
     subtitle,
     emptyContent,
-    components,
   } = props;
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const entityListContext = useEntityList();
@@ -218,7 +215,6 @@ export const CatalogTable = (props: CatalogTableProps) => {
         data={entities.map(toEntityRow)}
         next={pageInfo?.next}
         prev={pageInfo?.prev}
-        components={components}
       />
     );
   } else if (paginationMode === 'offset') {
@@ -232,7 +228,6 @@ export const CatalogTable = (props: CatalogTableProps) => {
         subtitle={subtitle}
         options={options}
         data={entities.map(toEntityRow)}
-        components={components}
       />
     );
   }
@@ -251,10 +246,6 @@ export const CatalogTable = (props: CatalogTableProps) => {
         pageSizeOptions: [20, 50, 100],
         ...options,
       }}
-      components={{
-        Toolbar: CatalogTableToolbar,
-        ...(components ?? {}),
-      }}
       title={title}
       data={rows}
       actions={actions}

plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx

@@ -30,8 +30,7 @@ type PaginatedCatalogTableProps = {
  */
 
 export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) {
-  const { columns, components, data, next, prev, options, ...restProps } =
-    props;
+  const { columns, data, next, prev, options, ...restProps } = props;
 
   return (
     <Table
@@ -55,7 +54,6 @@ export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) {
       }}
       components={{
         Toolbar: CatalogTableToolbar,
-        ...(components ?? {}),
       }}
       /* this will enable the prev button accordingly */
       page={prev ? 1 : 0}

plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx

@@ -27,7 +27,7 @@ import { CatalogTableToolbar } from './CatalogTableToolbar';
 export function OffsetPaginatedCatalogTable(
   props: TableProps<CatalogTableRow>,
 ) {
-  const { columns, components, data, options, ...restProps } = props;
+  const { columns, data, options, ...restProps } = props;
   const { setLimit, setOffset, limit, totalItems, offset } = useEntityList();
 
   const [page, setPage] = React.useState(
@@ -55,7 +55,6 @@ export function OffsetPaginatedCatalogTable(
       }}
       components={{
         Toolbar: CatalogTableToolbar,
-        ...(components ?? {}),
       }}
       page={page}
       onPageChange={newPage => {