Add changeset per contributor guide

Change display to avoid displaying counts when not loaded yet

Signed-off-by: Coderrob <rolindle@cisco.com>

.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

@@ -88,14 +88,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
   } = props;
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const entityListContext = useEntityList();
-  const {
-    loading,
-    error,
-    entities,
-    filters,
-    pageInfo,
-    totalItems = 0,
-  } = entityListContext;
+  const { loading, error, entities, filters, pageInfo, totalItems } =
+    entityListContext;
   const enablePagination = !!pageInfo;
   const tableColumns = useMemo(
     () =>
@@ -175,13 +169,20 @@ export const CatalogTable = (props: CatalogTableProps) => {
 
   const currentKind = filters.kind?.value || '';
   const currentType = filters.type?.value || '';
+  const currentCount = Number.isSafeInteger(totalItems)
+    ? `(${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,
@@ -197,7 +198,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         columns={tableColumns}
         emptyContent={emptyContent}
         isLoading={loading}
-        title={titleDisplay}
+        title={title}
         actions={actions}
         subtitle={subtitle}
         options={options}