From 9d3a05f1bd27be694108a15274dddcca1d7950ae Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 19 Sep 2024 22:20:38 +0530
Subject: [PATCH] feat: show children count in collection card (#1298)

---
 src/library-authoring/components/CollectionCard.test.tsx | 6 ++++--
 src/library-authoring/components/CollectionCard.tsx      | 7 ++++++-
 src/library-authoring/components/messages.ts             | 5 +++++
 src/search-manager/data/api.ts                           | 2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/library-authoring/components/CollectionCard.test.tsx b/src/library-authoring/components/CollectionCard.test.tsx
index cc353312e..a3be58151 100644
--- a/src/library-authoring/components/CollectionCard.test.tsx
+++ b/src/library-authoring/components/CollectionCard.test.tsx
@@ -17,6 +17,7 @@ const CollectionHitSample: CollectionHit = {
   },
   created: 1722434322294,
   modified: 1722434322294,
+  numChildren: 2,
   tags: {},
 };
 
@@ -32,7 +33,8 @@ describe('<CollectionCard />', () => {
   it('should render the card with title and description', () => {
     render(<CollectionCard collectionHit={CollectionHitSample} />);
 
-    expect(screen.getByText('Collection Display Formated Name')).toBeInTheDocument();
-    expect(screen.getByText('Collection description')).toBeInTheDocument();
+    expect(screen.queryByText('Collection Display Formated Name')).toBeInTheDocument();
+    expect(screen.queryByText('Collection description')).toBeInTheDocument();
+    expect(screen.queryByText('Collection (2)')).toBeInTheDocument();
   });
 });
diff --git a/src/library-authoring/components/CollectionCard.tsx b/src/library-authoring/components/CollectionCard.tsx
index 477a264e4..3968a7d68 100644
--- a/src/library-authoring/components/CollectionCard.tsx
+++ b/src/library-authoring/components/CollectionCard.tsx
@@ -21,8 +21,13 @@ const CollectionCard = ({ collectionHit } : CollectionCardProps) => {
     type,
     formatted,
     tags,
+    numChildren,
   } = collectionHit;
   const { displayName = '', description = '' } = formatted;
+  const blockTypeDisplayName = numChildren ? intl.formatMessage(
+    messages.collectionTypeWithCount,
+    { numChildren },
+  ) : intl.formatMessage(messages.collectionType);
 
   return (
     <BaseComponentCard
@@ -40,7 +45,7 @@ const CollectionCard = ({ collectionHit } : CollectionCardProps) => {
           />
         </ActionRow>
       )}
-      blockTypeDisplayName={intl.formatMessage(messages.collectionType)}
+      blockTypeDisplayName={blockTypeDisplayName}
       openInfoSidebar={() => {}}
     />
   );
diff --git a/src/library-authoring/components/messages.ts b/src/library-authoring/components/messages.ts
index 344a35b8a..e801f7ec0 100644
--- a/src/library-authoring/components/messages.ts
+++ b/src/library-authoring/components/messages.ts
@@ -16,6 +16,11 @@ const messages = defineMessages({
     defaultMessage: 'Collection',
     description: 'Collection type text',
   },
+  collectionTypeWithCount: {
+    id: 'course-authoring.library-authoring.collection.type-with-count',
+    defaultMessage: 'Collection ({numChildren})',
+    description: 'Collection type text with children count',
+  },
   menuEdit: {
     id: 'course-authoring.library-authoring.component.menu.edit',
     defaultMessage: 'Edit',
diff --git a/src/search-manager/data/api.ts b/src/search-manager/data/api.ts
index 8c4cf183d..6dbb805e7 100644
--- a/src/search-manager/data/api.ts
+++ b/src/search-manager/data/api.ts
@@ -135,7 +135,7 @@ export interface ContentHit extends BaseContentHit {
  */
 export interface CollectionHit extends BaseContentHit {
   description: string;
-  componentCount?: number;
+  numChildren?: number;
 }
 
 /**