fix: use Library search results to populate container card preview

Author: pomegranited

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

@@ -6,7 +6,7 @@ import {
   fireEvent,
 } from '../../testUtils';
 import { LibraryProvider } from '../common/context/LibraryContext';
-import { mockContentLibrary, mockGetContainerChildren } from '../data/api.mocks';
+import { mockContentLibrary } from '../data/api.mocks';
 import { type ContainerHit, PublishStatus } from '../../search-manager';
 import ContainerCard from './ContainerCard';
 import { getLibraryContainerApiUrl, getLibraryContainerRestoreApiUrl } from '../data/api';
@@ -40,7 +40,6 @@ let axiosMock: MockAdapter;
 let mockShowToast;
 
 mockContentLibrary.applyMock();
-mockGetContainerChildren.applyMock();
 
 const render = (ui: React.ReactElement, showOnlyPublished: boolean = false) => baseRender(ui, {
   extraWrapper: ({ children }) => (
@@ -155,29 +154,33 @@ describe('<ContainerCard />', () => {
   it('should render no child blocks in card preview', async () => {
     render(<ContainerCard hit={containerHitSample} />);
 
-    expect(screen.queryByTitle('text block')).not.toBeInTheDocument();
+    expect(screen.queryByTitle('lb:org1:Demo_course:html:text-0')).not.toBeInTheDocument();
     expect(screen.queryByText('+0')).not.toBeInTheDocument();
   });
 
   it('should render <=5 child blocks in card preview', async () => {
     const containerWith5Children = {
       ...containerHitSample,
-      usageKey: mockGetContainerChildren.fiveChildren,
-    };
+      content: {
+        childUsageKeys: Array(5).fill('').map((_child, idx) => `lb:org1:Demo_course:html:text-${idx}`),
+      },
+    } satisfies ContainerHit;
     render(<ContainerCard hit={containerWith5Children} />);
 
-    expect((await screen.findAllByTitle(/text block */)).length).toBe(5);
+    expect((await screen.findAllByTitle(/lb:org1:Demo_course:html:text-*/)).length).toBe(5);
     expect(screen.queryByText('+0')).not.toBeInTheDocument();
   });
 
   it('should render >5 child blocks with +N in card preview', async () => {
     const containerWith6Children = {
       ...containerHitSample,
-      usageKey: mockGetContainerChildren.sixChildren,
-    };
+      content: {
+        childUsageKeys: Array(6).fill('').map((_child, idx) => `lb:org1:Demo_course:html:text-${idx}`),
+      },
+    } satisfies ContainerHit;
     render(<ContainerCard hit={containerWith6Children} />);
 
-    expect((await screen.findAllByTitle(/text block */)).length).toBe(4);
+    expect((await screen.findAllByTitle(/lb:org1:Demo_course:html:text-*/)).length).toBe(4);
     expect(screen.queryByText('+2')).toBeInTheDocument();
   });
 });

src/library-authoring/components/ContainerCard.tsx

@@ -12,12 +12,13 @@ import { MoreVert } from '@openedx/paragon/icons';
 import { Link } from 'react-router-dom';
 
 import { getItemIcon, getComponentStyleColor } from '../../generic/block-type-utils';
+import { getBlockType } from '../../generic/key-utils';
 import { ToastContext } from '../../generic/toast-context';
 import { type ContainerHit, PublishStatus } from '../../search-manager';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
-import { useContainerChildren, useRemoveItemsFromCollection } from '../data/apiHooks';
+import { useRemoveItemsFromCollection } from '../data/apiHooks';
 import { useLibraryRoutes } from '../routes';
 import AddComponentWidget from './AddComponentWidget';
 import BaseCard from './BaseCard';
@@ -107,21 +108,19 @@ const ContainerMenu = ({ hit } : ContainerMenuProps) => {
 };
 
 type ContainerCardPreviewProps = {
-  containerId: string;
+  hit: ContainerHit,
   showMaxChildren?: number;
 };
 
-const ContainerCardPreview = ({ containerId, showMaxChildren = 5 }: ContainerCardPreviewProps) => {
-  const { data, isLoading, isError } = useContainerChildren(containerId);
-  if (isLoading || isError) {
-    return null;
-  }
-
-  const hiddenChildren = data.length - showMaxChildren;
+const ContainerCardPreview = ({ hit, showMaxChildren = 5 }: ContainerCardPreviewProps) => {
+  const { content } = hit;
+  const { childUsageKeys } = content ?? { childUsageKeys: [] };
+  const hiddenChildren = childUsageKeys.length - showMaxChildren;
   return (
     <Stack direction="horizontal" gap={2}>
       {
-        data.slice(0, showMaxChildren).map(({ id, blockType, displayName }, idx) => {
+        childUsageKeys.slice(0, showMaxChildren).map((usageKey, idx) => {
+          const blockType = getBlockType(usageKey);
           let blockPreview: ReactNode;
           let classNames;
 
@@ -133,7 +132,7 @@ const ContainerCardPreview = ({ containerId, showMaxChildren = 5 }: ContainerCar
               <Icon
                 src={getItemIcon(blockType)}
                 screenReaderText={blockType}
-                title={displayName}
+                title={usageKey}
               />
             );
           } else {
@@ -147,7 +146,7 @@ const ContainerCardPreview = ({ containerId, showMaxChildren = 5 }: ContainerCar
           }
           return (
             <div
-              key={`container-card-preview-block-${id}`}
+              key={`container-card-preview-block-${usageKey}`}
               className={classNames}
             >
               {blockPreview}
@@ -200,7 +199,7 @@ const ContainerCard = ({ hit } : ContainerCardProps) => {
     <BaseCard
       itemType={itemType}
       displayName={displayName}
-      preview={<ContainerCardPreview containerId={unitId} />}
+      preview={<ContainerCardPreview hit={hit} />}
       tags={tags}
       numChildren={numChildrenCount}
       actions={(

src/search-manager/data/api.ts

@@ -171,13 +171,17 @@ export interface CollectionHit extends BaseContentHit {
  * Information about a single container returned in the search results
  * Defined in edx-platform/openedx/core/djangoapps/content/search/documents.py
  */
+interface ContainerHitContent {
+  childUsageKeys: string[],
+}
 export interface ContainerHit extends BaseContentHit {
   type: 'library_container';
   blockType: 'unit'; // This should be expanded to include other container types
   numChildren?: number;
   published?: ContentPublishedData;
   publishStatus: PublishStatus;
   formatted: BaseContentHit['formatted'] & { published?: ContentPublishedData, };
+  content?: ContainerHitContent;
 }
 
 export type HitType = ContentHit | CollectionHit | ContainerHit;