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>

.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

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

@@ -23,7 +23,6 @@ import {
 } from '@backstage/catalog-model';
 import {
   CodeSnippet,
-  Table,
   TableColumn,
   TableProps,
   WarningPanel,
@@ -47,7 +46,7 @@ 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';
 
 /**
@@ -194,7 +193,8 @@ 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,
@@ -202,6 +202,12 @@ export const CatalogTable = (props: CatalogTableProps) => {
     ...tableOptions,
   };
 
+  if (paginationMode !== 'cursor' && paginationMode !== 'offset') {
+    entities.sort(refCompare);
+  }
+
+  const rows = entities.map(toEntityRow);
+
   if (paginationMode === 'cursor') {
     return (
       <CursorPaginatedCatalogTable
@@ -212,45 +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,
-      }}
+      emptyContent={emptyContent}
+      isLoading={loading}
       title={title}
-      data={rows}
       actions={actions}
       subtitle={subtitle}
-      emptyContent={emptyContent}
+      options={options}
+      data={rows}
     />
   );
 };

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

@@ -35,7 +35,6 @@ export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) {
       columns={columns}
       data={data}
       options={{
-        paginationPosition: 'both',
         ...options,
         // These settings are configured to force server side pagination
         pageSizeOptions: [],

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}
     />
   );