feat(catalog): Add a title to the PaginatedCatalogTable.

Signed-off-by: Aramis <sennyeyaramis@gmail.com>
Signed-off-by: aramissennyeydd <aramis.sennyey@doordash.com>

.changeset/perfect-chefs-act.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': minor
+---
+
+Number of results is now directly added as the field `count` on `useEntityList`.

.changeset/rare-worms-sort.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Adds a title to the `PaginatedCatalogTable` for better visibility on what you're viewing.

plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx

@@ -235,6 +235,7 @@ describe('<EntityListProvider />', () => {
     await waitFor(() => {
       expect(result.current.entities.length).toBe(1);
     });
+    expect(result.current.count).toBe(1);
 
     await expect(() =>
       waitFor(() => {
@@ -251,6 +252,7 @@ describe('<EntityListProvider />', () => {
     await waitFor(() => {
       expect(result.current.backendEntities.length).toBeGreaterThan(0);
     });
+    expect(result.current.count).toBe(2);
     expect(result.current.backendEntities.length).toBe(2);
     expect(mockCatalogApi.getEntities).toHaveBeenCalledTimes(1);
 
@@ -276,6 +278,8 @@ describe('<EntityListProvider />', () => {
     });
     expect(result.current.backendEntities.length).toBe(2);
 
+    expect(result.current.count).toBe(2);
+
     mockCatalogApi.getEntities!.mockRejectedValueOnce('error');
     act(() => {
       result.current.updateFilters({ kind: new EntityKindFilter('api') });
@@ -455,6 +459,8 @@ describe('<EntityListProvider pagination />', () => {
         orderFields,
       });
     });
+
+    expect(result.current.count).toBe(10);
   });
 
   it('returns an error on catalogApi failure', async () => {

plugins/catalog-react/src/hooks/useEntityListProvider.tsx

@@ -108,6 +108,8 @@ export type EntityListContextProps<
     next?: () => void;
     prev?: () => void;
   };
+
+  count?: number;
 };
 
 /**
@@ -124,6 +126,7 @@ type OutputState<EntityFilters extends DefaultEntityFilters> = {
   entities: Entity[];
   backendEntities: Entity[];
   pageInfo?: QueryEntitiesResponse['pageInfo'];
+  count?: number;
 };
 
 /**
@@ -223,6 +226,7 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
               backendEntities: response.items,
               entities: response.items.filter(entityFilter),
               pageInfo: response.pageInfo,
+              count: response.totalItems,
             });
           }
         } else {
@@ -243,6 +247,7 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
               backendEntities: response.items,
               entities: response.items.filter(entityFilter),
               pageInfo: response.pageInfo,
+              count: response.totalItems,
             });
           }
         }
@@ -262,16 +267,20 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
           const response = await catalogApi.getEntities({
             filter: backendFilter,
           });
+          const entities = response.items.filter(entityFilter);
           setOutputState({
             appliedFilters: requestedFilters,
             backendEntities: response.items,
-            entities: response.items.filter(entityFilter),
+            entities,
+            count: entities.length,
           });
         } else {
+          const entities = outputState.backendEntities.filter(entityFilter);
           setOutputState({
             appliedFilters: requestedFilters,
             backendEntities: outputState.backendEntities,
-            entities: outputState.backendEntities.filter(entityFilter),
+            entities,
+            count: entities.length,
           });
         }
       }
@@ -352,6 +361,7 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
       loading,
       error,
       pageInfo,
+      count: outputState.count,
     }),
     [outputState, updateFilters, queryParameters, loading, error, pageInfo],
   );

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

@@ -88,7 +88,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
   } = props;
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const entityListContext = useEntityList();
-  const { loading, error, entities, filters, pageInfo } = entityListContext;
+  const { loading, error, entities, filters, pageInfo, count } =
+    entityListContext;
   const enablePagination = !!pageInfo;
 
   const tableColumns = useMemo(
@@ -175,7 +176,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
     .filter(s => s)
     .join(' ');
 
-  const title = `${titleDisplay} (${entities.length})`;
+  const title = `${titleDisplay} (${count})`;
   const actions = props.actions || defaultActions;
   const options = {
     actionsColumnIndex: -1,
@@ -216,7 +217,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         pageSizeOptions: [20, 50, 100],
         ...options,
       }}
-      title={`${titleDisplay} (${entities.length})`}
+      title={title}
       data={rows}
       actions={actions}
       subtitle={subtitle}

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

@@ -32,11 +32,12 @@ type PaginatedCatalogTableProps = {
  * @internal
  */
 export function PaginatedCatalogTable(props: PaginatedCatalogTableProps) {
-  const { columns, data, next, prev } = props;
+  const { columns, data, next, prev, title, isLoading } = props;
   const { updateFilters } = useEntityList();
 
   return (
     <Table
+      title={isLoading ? '' : title}
       columns={columns}
       data={data}
       options={{