fix: change collection details component slots (#1363)

openedx · Oct 8, 2024 · 85b5730 · 85b5730
1 parent 8c125df
commit 85b5730
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 23 deletions.
diff --git a/src/library-authoring/collections/CollectionDetails.test.tsx b/src/library-authoring/collections/CollectionDetails.test.tsx
@@ -122,6 +122,7 @@ describe('<CollectionDetails />', () => {
       { blockType: 'Total', count: 3 },
       { blockType: 'Text', count: 2 },
       { blockType: 'Problem', count: 1 },
+      { blockType: 'Video', count: 0 },
     ].forEach(({ blockType, count }) => {
       const blockCount = screen.getByText(blockType).closest('div') as HTMLDivElement;
       expect(within(blockCount).getByText(count.toString())).toBeInTheDocument();
@@ -147,10 +148,10 @@ describe('<CollectionDetails />', () => {
 
     [
       { blockType: 'Total', count: 36 },
-      { blockType: 'Video', count: 8 },
-      { blockType: 'Problem', count: 7 },
-      { blockType: 'Text', count: 6 },
-      { blockType: 'Other', count: 15 },
+      { blockType: 'Problem', count: 2 },
+      { blockType: 'Text', count: 3 },
+      { blockType: 'Video', count: 1 },
+      { blockType: 'Other', count: 30 },
     ].forEach(({ blockType, count }) => {
       const blockCount = screen.getByText(blockType).closest('div') as HTMLDivElement;
       expect(within(blockCount).getByText(count.toString())).toBeInTheDocument();

diff --git a/src/library-authoring/collections/CollectionDetails.tsx b/src/library-authoring/collections/CollectionDetails.tsx
@@ -51,15 +51,9 @@ const CollectionStatsWidget = ({ libraryId, collectionId }: CollectionStatsWidge
     return null;
   }
 
-  const blockTypesArray = Object.entries(blockTypes)
-    .map(([blockType, count]) => ({ blockType, count }))
-    .sort((a, b) => b.count - a.count);
+  const blockSlots = ['problem', 'html', 'video'];
 
-  const totalBlocksCount = blockTypesArray.reduce((acc, { count }) => acc + count, 0);
-  // Show the top 3 block type counts individually, and splice the remaining block types together under "Other".
-  const numBlockTypesShown = 3;
-  const otherBlocks = blockTypesArray.splice(numBlockTypesShown);
-  const otherBlocksCount = otherBlocks.reduce((acc, { count }) => acc + count, 0);
+  const totalBlocksCount = Object.values(blockTypes).reduce((acc, count) => acc + count, 0);
 
   if (totalBlocksCount === 0) {
     return (
@@ -74,22 +68,25 @@ const CollectionStatsWidget = ({ libraryId, collectionId }: CollectionStatsWidge
     );
   }
 
+  const otherBlocksCount = Object.entries(blockTypes).filter(([blockType]) => !blockSlots.includes(blockType))
+    .reduce((acc, [, count]) => acc + count, 0);
+
   return (
     <Stack direction="horizontal" className="p-2 justify-content-between" gap={2}>
       <BlockCount
         label={<FormattedMessage {...messages.detailsTabStatsTotalComponents} />}
         count={totalBlocksCount}
         className="border-right"
       />
-      {blockTypesArray.map(({ blockType, count }) => (
+      {blockSlots.map((blockType) => (
         <BlockCount
           key={blockType}
           label={<BlockTypeLabel blockType={blockType} />}
           blockType={blockType}
-          count={count}
+          count={blockTypes[blockType] || 0}
         />
       ))}
-      {otherBlocks.length > 0 && (
+      {!!otherBlocksCount && (
         <BlockCount
           label={<FormattedMessage {...messages.detailsTabStatsOtherComponents} />}
           count={otherBlocksCount}

diff --git a/src/search-manager/data/api.mock.ts b/src/search-manager/data/api.mock.ts
@@ -51,14 +51,14 @@ export async function mockGetBlockTypes(
     noBlocks: {},
     someBlocks: { problem: 1, html: 2 },
     moreBlocks: {
-      advanced: 1,
-      discussion: 2,
-      library: 3,
-      drag_and_drop_v2: 4,
-      openassessment: 5,
-      html: 6,
-      problem: 7,
-      video: 8,
+      advanced: 8,
+      discussion: 7,
+      library: 6,
+      drag_and_drop_v2: 5,
+      openassessment: 4,
+      html: 3,
+      problem: 2,
+      video: 1,
     },
   };
   jest.spyOn(api, 'fetchBlockTypes').mockResolvedValue(mockResponseMap[mockResponse]);