Harmonize CatalogTable

- Show pagination text for `OffsetPagination` - Use same `OffsetPaginatedCatalogTable` also as fallback if no pagination is set - Do not show paging if there is only one page Signed-off-by: Andreas Berger <andreas@berger-ecommerce.com>
backstage · Jan 13, 2025 · d563f05 · d563f05
1 parent 6c1cb93
commit d563f05
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 40 deletions.
diff --git a/.changeset/funny-papayas-tell.md b/.changeset/funny-papayas-tell.md
@@ -0,0 +1,9 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Harmonize `CatalogTable`
+
+- Show pagination text for `OffsetPagination`
+- Use same `OffsetPaginatedCatalogTable` also as fallback if no pagination is set
+- Do not show paging if there is only one page
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -23,7 +23,6 @@ import {
 } from '@backstage/catalog-model';
 import {
   CodeSnippet,
-  Table,
   TableColumn,
   TableProps,
   WarningPanel,
@@ -47,9 +46,8 @@ import { OffsetPaginatedCatalogTable } from './OffsetPaginatedCatalogTable';
 import { CursorPaginatedCatalogTable } from './CursorPaginatedCatalogTable';
 import { defaultCatalogTableColumnsFunc } from './defaultCatalogTableColumnsFunc';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { catalogTranslationRef } from '../../alpha/translation';
+import { catalogTranslationRef } from '../../alpha';
 import { FavoriteToggleIcon } from '@backstage/core-components';
-import { CatalogTableToolbar } from './CatalogTableToolbar';
 
 /**
  * Props for {@link CatalogTable}.
@@ -195,14 +193,21 @@ export const CatalogTable = (props: CatalogTableProps) => {
       .join(' ');
 
   const actions = props.actions || defaultActions;
-  const options = {
+  const options: TableProps['options'] = {
+    paginationPosition: 'both',
     actionsColumnIndex: -1,
     loadingType: 'linear' as const,
     showEmptyDataSourceMessage: !loading,
     padding: 'dense' as const,
     ...tableOptions,
   };
 
+  if (paginationMode !== 'cursor' && paginationMode !== 'offset') {
+    entities.sort(refCompare);
+  }
+
+  const rows = entities.map(toEntityRow);
+
   if (paginationMode === 'cursor') {
     return (
       <CursorPaginatedCatalogTable
@@ -213,48 +218,24 @@ export const CatalogTable = (props: CatalogTableProps) => {
         actions={actions}
         subtitle={subtitle}
         options={options}
-        data={entities.map(toEntityRow)}
+        data={rows}
         next={pageInfo?.next}
         prev={pageInfo?.prev}
       />
     );
-  } else if (paginationMode === 'offset') {
-    return (
-      <OffsetPaginatedCatalogTable
-        columns={tableColumns}
-        emptyContent={emptyContent}
-        isLoading={loading}
-        title={title}
-        actions={actions}
-        subtitle={subtitle}
-        options={options}
-        data={entities.map(toEntityRow)}
-      />
-    );
   }
 
-  const rows = entities.sort(refCompare).map(toEntityRow);
-  const pageSize = 20;
-  const showPagination = rows.length > pageSize;
-
+  // else use offset paging
   return (
-    <Table<CatalogTableRow>
-      isLoading={loading}
+    <OffsetPaginatedCatalogTable
       columns={tableColumns}
-      options={{
-        paging: showPagination,
-        pageSize: pageSize,
-        pageSizeOptions: [20, 50, 100],
-        ...options,
-      }}
-      components={{
-        Toolbar: CatalogTableToolbar,
-      }}
+      emptyContent={emptyContent}
+      isLoading={loading}
       title={title}
-      data={rows}
       actions={actions}
       subtitle={subtitle}
-      emptyContent={emptyContent}
+      options={options}
+      data={rows}
     />
   );
 };

diff --git a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx
@@ -37,7 +37,6 @@ export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) {
       columns={columns}
       data={data}
       options={{
-        paginationPosition: 'both',
         ...options,
         // These settings are configured to force server side pagination
         pageSizeOptions: [],

diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx
@@ -36,21 +36,23 @@ export function OffsetPaginatedCatalogTable(
 
   useEffect(() => {
     if (totalItems && page * limit >= totalItems) {
-      setOffset!(Math.max(0, totalItems - limit));
+      setOffset?.(Math.max(0, totalItems - limit));
     } else {
-      setOffset!(Math.max(0, page * limit));
+      setOffset?.(Math.max(0, page * limit));
     }
   }, [setOffset, page, limit, totalItems]);
 
+  const showPagination = (totalItems ?? data.length) > limit;
+
   return (
     <Table
       columns={columns}
       data={data}
       options={{
-        paginationPosition: 'both',
         pageSizeOptions: [5, 10, 20, 50, 100],
         pageSize: limit,
         emptyRowsWhenPaging: false,
+        paging: showPagination,
         ...options,
       }}
       components={{
@@ -64,7 +66,6 @@ export function OffsetPaginatedCatalogTable(
         setLimit(pageSize);
       }}
       totalCount={totalItems}
-      localization={{ pagination: { labelDisplayedRows: '' } }}
       {...restProps}
     />
   );