Make title consistent across CatalogTable impls

Signed-off-by: Tyler Davis <tylerd@canva.com>

.changeset/lemon-bulldogs-study.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Consistent title behaviour across CatalogTable, CursorPaginatedCatalogTable, and OffsetPaginatedCatalogTable.

plugins/catalog/report.api.md

@@ -214,6 +214,8 @@ export interface CatalogTableProps {
   subtitle?: string;
   // (undocumented)
   tableOptions?: TableProps<CatalogTableRow>['options'];
+  // (undocumented)
+  title?: string;
 }
 
 // @public (undocumented)

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

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

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