From 39f1abc1ee01b9bcb206eb9a9ae1ace83239d869 Mon Sep 17 00:00:00 2001
From: Tyler Davis <tylerd@canva.com>
Date: Thu, 14 Nov 2024 09:46:20 +1100
Subject: [PATCH] Make title consistent across CatalogTable impls

Signed-off-by: Tyler Davis <tylerd@canva.com>
---
 .changeset/lemon-bulldogs-study.md            |  5 +++++
 plugins/catalog/report.api.md                 |  2 ++
 .../components/CatalogTable/CatalogTable.tsx  | 20 +++++++++----------
 .../CursorPaginatedCatalogTable.tsx           |  5 +----
 .../OffsetPaginatedCatalogTable.tsx           |  4 ++--
 5 files changed, 19 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/lemon-bulldogs-study.md

diff --git a/.changeset/lemon-bulldogs-study.md b/.changeset/lemon-bulldogs-study.md
new file mode 100644
index 0000000000..7bb15b8193
--- /dev/null
+++ b/.changeset/lemon-bulldogs-study.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Consistent title behaviour across CatalogTable, CursorPaginatedCatalogTable, and OffsetPaginatedCatalogTable.
diff --git a/plugins/catalog/report.api.md b/plugins/catalog/report.api.md
index 6b8f246514..bc74b9b3d1 100644
--- a/plugins/catalog/report.api.md
+++ b/plugins/catalog/report.api.md
@@ -214,6 +214,8 @@ export interface CatalogTableProps {
   subtitle?: string;
   // (undocumented)
   tableOptions?: TableProps<CatalogTableRow>['options'];
+  // (undocumented)
+  title?: string;
 }
 
 // @public (undocumented)
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 2d5e78a0d6..cd32e6bfef 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -60,6 +60,7 @@ export interface CatalogTableProps {
   actions?: TableProps<CatalogTableRow>['actions'];
   tableOptions?: TableProps<CatalogTableRow>['options'];
   emptyContent?: ReactNode;
+  title?: string;
   subtitle?: string;
 }
 
@@ -173,14 +174,11 @@ export const CatalogTable = (props: CatalogTableProps) => {
   const currentCount = typeof totalItems === 'number' ? `(${totalItems})` : '';
   // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar
   const titlePreamble = capitalize(filters.user?.value ?? 'all');
-  const title = [
-    titlePreamble,
-    currentType,
-    pluralize(currentKind),
-    currentCount,
-  ]
-    .filter(s => s)
-    .join(' ');
+  const title =
+    props.title ||
+    [titlePreamble, currentType, pluralize(currentKind), currentCount]
+      .filter(s => s)
+      .join(' ');
 
   const actions = props.actions || defaultActions;
   const options = {
@@ -197,8 +195,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
         columns={tableColumns}
         emptyContent={emptyContent}
         isLoading={loading}
-        title={title}
         actions={actions}
+        title={title}
         subtitle={subtitle}
         options={options}
         data={entities.map(toEntityRow)}
@@ -212,8 +210,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
         columns={tableColumns}
         emptyContent={emptyContent}
         isLoading={loading}
-        title={title}
         actions={actions}
+        title={title}
         subtitle={subtitle}
         options={options}
         data={entities.map(toEntityRow)}
@@ -235,9 +233,9 @@ export const CatalogTable = (props: CatalogTableProps) => {
         pageSizeOptions: [20, 50, 100],
         ...options,
       }}
-      title={title}
       data={rows}
       actions={actions}
+      title={title}
       subtitle={subtitle}
       emptyContent={emptyContent}
     />
diff --git a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx
index 7198f8a60c..843d5be2c8 100644
--- a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx
@@ -30,12 +30,10 @@ type PaginatedCatalogTableProps = {
  */
 
 export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) {
-  const { columns, data, next, prev, title, isLoading, options, ...restProps } =
-    props;
+  const { columns, data, next, prev, options, ...restProps } = props;
 
   return (
     <Table
-      title={isLoading ? '' : title}
       columns={columns}
       data={data}
       options={{
@@ -62,7 +60,6 @@ export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) {
       /* this will enable the next button accordingly */
       totalCount={next ? Number.MAX_VALUE : Number.MAX_SAFE_INTEGER}
       localization={{ pagination: { labelDisplayedRows: '' } }}
-      isLoading={isLoading}
       {...restProps}
     />
   );
diff --git a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx
index 7febfc2d32..7ebf791046 100644
--- a/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/OffsetPaginatedCatalogTable.tsx
@@ -27,7 +27,7 @@ import { CatalogTableToolbar } from './CatalogTableToolbar';
 export function OffsetPaginatedCatalogTable(
   props: TableProps<CatalogTableRow>,
 ) {
-  const { columns, data, isLoading, options } = props;
+  const { columns, data, options, ...restProps } = props;
   const { setLimit, setOffset, limit, totalItems, offset } = useEntityList();
 
   const [page, setPage] = React.useState(
@@ -65,7 +65,7 @@ export function OffsetPaginatedCatalogTable(
       }}
       totalCount={totalItems}
       localization={{ pagination: { labelDisplayedRows: '' } }}
-      isLoading={isLoading}
+      {...restProps}
     />
   );
 }