Merge pull request #24033 from CiscoRob/patch-2

Update CatalogTable to hide total count until entities are initialized

.changeset/swift-humans-hunt.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Avoiding pre-loading display total count undefined for table counts

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

@@ -343,7 +343,7 @@ describe('CatalogTable component', () => {
     expect(screen.getByText('Should be rendered')).toBeInTheDocument();
   });
 
-  it('should render the label column with customised title and value as specified', async () => {
+  it('should render the label column with customized title and value as specified', async () => {
     const columns = [
       CatalogTable.columns.createNameColumn({ defaultKind: 'API' }),
       CatalogTable.columns.createLabelColumn('category', { title: 'Category' }),
@@ -381,7 +381,7 @@ describe('CatalogTable component', () => {
     expect(labelCellValue).toBeInTheDocument();
   });
 
-  it('should render the label column with customised title and value as specified using function', async () => {
+  it('should render the label column with customized title and value as specified using function', async () => {
     const columns: CatalogTableColumnsFunc = ({
       filters,
       entities: entities1,

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

@@ -91,7 +91,6 @@ export const CatalogTable = (props: CatalogTableProps) => {
   const { loading, error, entities, filters, pageInfo, totalItems } =
     entityListContext;
   const enablePagination = !!pageInfo;
-
   const tableColumns = useMemo(
     () =>
       typeof columns === 'function' ? columns(entityListContext) : columns,
@@ -170,13 +169,18 @@ export const CatalogTable = (props: CatalogTableProps) => {
 
   const currentKind = filters.kind?.value || '';
   const currentType = filters.type?.value || '';
+  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 titleDisplay = [titlePreamble, currentType, pluralize(currentKind)]
+  const title = [
+    titlePreamble,
+    currentType,
+    pluralize(currentKind),
+    currentCount,
+  ]
     .filter(s => s)
     .join(' ');
 
-  const title = `${titleDisplay} (${totalItems})`;
   const actions = props.actions || defaultActions;
   const options = {
     actionsColumnIndex: -1,
@@ -192,7 +196,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         columns={tableColumns}
         emptyContent={emptyContent}
         isLoading={loading}
-        title={titleDisplay}
+        title={title}
         actions={actions}
         subtitle={subtitle}
         options={options}