fix: Show published count component in library content picker (#1481)

When using the library component picker, show the correct number on component count (published components) in collection cards.

src/library-authoring/components/CollectionCard.test.tsx

@@ -27,14 +27,24 @@ const CollectionHitSample: CollectionHit = {
   created: 1722434322294,
   modified: 1722434322294,
   numChildren: 2,
+  published: {
+    numChildren: 1,
+  },
   tags: {},
 };
 
 let axiosMock: MockAdapter;
 let mockShowToast;
 
-const render = (ui: React.ReactElement) => baseRender(ui, {
-  extraWrapper: ({ children }) => <LibraryProvider libraryId="lib:Axim:TEST">{ children }</LibraryProvider>,
+const render = (ui: React.ReactElement, showOnlyPublished: boolean = false) => baseRender(ui, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider
+      libraryId="lib:Axim:TEST"
+      showOnlyPublished={showOnlyPublished}
+    >
+      { children }
+    </LibraryProvider>
+  ),
 });
 
 describe('<CollectionCard />', () => {
@@ -52,6 +62,14 @@ describe('<CollectionCard />', () => {
     expect(screen.queryByText('Collection (2)')).toBeInTheDocument();
   });
 
+  it('should render published content', () => {
+    render(<CollectionCard collectionHit={CollectionHitSample} />, true);
+
+    expect(screen.queryByText('Collection Display Formated Name')).toBeInTheDocument();
+    expect(screen.queryByText('Collection description')).toBeInTheDocument();
+    expect(screen.queryByText('Collection (1)')).toBeInTheDocument();
+  });
+
   it('should navigate to the collection if the open menu clicked', async () => {
     render(<CollectionCard collectionHit={CollectionHitSample} />);
 

src/library-authoring/components/CollectionCard.tsx

@@ -111,6 +111,7 @@ const CollectionCard = ({ collectionHit } : CollectionCardProps) => {
   const {
     openCollectionInfoSidebar,
     componentPickerMode,
+    showOnlyPublished,
   } = useLibraryContext();
 
   const {
@@ -118,7 +119,13 @@ const CollectionCard = ({ collectionHit } : CollectionCardProps) => {
     formatted,
     tags,
     numChildren,
+    published,
   } = collectionHit;
+
+  const numChildrenCount = showOnlyPublished ? (
+    published?.numChildren || 0
+  ) : numChildren;
+
   const { displayName = '', description = '' } = formatted;
 
   return (
@@ -127,7 +134,7 @@ const CollectionCard = ({ collectionHit } : CollectionCardProps) => {
       displayName={displayName}
       description={description}
       tags={tags}
-      numChildren={numChildren}
+      numChildren={numChildrenCount}
       actions={!componentPickerMode && (
         <ActionRow>
           <CollectionMenu collectionHit={collectionHit} />

src/search-manager/data/api.ts

@@ -143,6 +143,7 @@ export interface ContentHit extends BaseContentHit {
 export interface ContentPublishedData {
   description?: string,
   displayName?: string,
+  numChildren?: number,
 }
 
 /**
@@ -153,6 +154,7 @@ export interface CollectionHit extends BaseContentHit {
   type: 'collection';
   description: string;
   numChildren?: number;
+  published?: ContentPublishedData;
 }
 
 /**