catalog: add PaginatedCatalogTable

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

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

@@ -46,6 +46,7 @@ import pluralize from 'pluralize';
 import React, { ReactNode, useMemo } from 'react';
 import { columnFactories } from './columns';
 import { CatalogTableColumnsFunc, CatalogTableRow } from './types';
+import { PaginatedCatalogTable } from './PaginatedCatalogTable';
 
 /**
  * Props for {@link CatalogTable}.
@@ -138,9 +139,6 @@ export const CatalogTable = (props: CatalogTableProps) => {
     [columns, entityListContext],
   );
 
-  // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar
-  const titlePreamble = capitalize(filters.user?.value ?? 'all');
-
   if (error) {
     return (
       <div>
@@ -211,19 +209,66 @@ export const CatalogTable = (props: CatalogTableProps) => {
     },
   ];
 
-  const rows = entities.sort(refCompare).map(toEntityRow);
-
-  const showPagination = rows.length > 20;
   const currentKind = filters.kind?.value || '';
   const currentType = filters.type?.value || '';
+  // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar
+  const titlePreamble = capitalize(filters.user?.value ?? 'all');
   const titleDisplay = [titlePreamble, currentType, pluralize(currentKind)]
     .filter(s => s)
     .join(' ');
 
+  if (props.enablePagination) {
+    return (
+      <PaginatedCatalogTable
+        columns={tableColumns}
+        data={entities.map(toEntityRow)}
+      />
+    );
+  }
+
+  return (
+    <LegacyCatalogTable
+      columns={tableColumns}
+      emptyContent={emptyContent}
+      entities={entities}
+      loading={loading}
+      title={`${titleDisplay} (${entities.length})`}
+      actions={actions || defaultActions}
+      subtitle={subtitle}
+      options={tableOptions}
+    />
+  );
+};
+
+/** @internal */
+function LegacyCatalogTable(props: {
+  actions?: TableProps<CatalogTableRow>['actions'];
+  columns: TableColumn<CatalogTableRow>[];
+  emptyContent: React.ReactNode;
+  entities: Entity[];
+  loading: boolean;
+  options?: TableProps<CatalogTableRow>['options'];
+  subtitle?: string;
+  title: string;
+}) {
+  const {
+    actions,
+    columns,
+    emptyContent,
+    entities,
+    loading,
+    subtitle,
+    options,
+    title,
+  } = props;
+
+  const rows = entities.sort(refCompare).map(toEntityRow);
+  const showPagination = rows.length > 20;
+
   return (
     <Table<CatalogTableRow>
       isLoading={loading}
-      columns={tableColumns}
+      columns={columns}
       options={{
         paging: showPagination,
         pageSize: 20,
@@ -232,16 +277,16 @@ export const CatalogTable = (props: CatalogTableProps) => {
         showEmptyDataSourceMessage: !loading,
         padding: 'dense',
         pageSizeOptions: [20, 50, 100],
-        ...tableOptions,
+        ...options,
       }}
-      title={`${titleDisplay} (${entities.length})`}
+      title={title}
       data={rows}
-      actions={actions || defaultActions}
+      actions={actions}
       subtitle={subtitle}
       emptyContent={emptyContent}
     />
   );
-};
+}
 
 CatalogTable.columns = columnFactories;