diff --git a/src/library-authoring/collections/CollectionDetails.test.tsx b/src/library-authoring/collections/CollectionDetails.test.tsx
index ad68c091d3..e68f1c8653 100644
--- a/src/library-authoring/collections/CollectionDetails.test.tsx
+++ b/src/library-authoring/collections/CollectionDetails.test.tsx
@@ -122,6 +122,7 @@ describe('', () => {
{ 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('', () => {
[
{ 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
index 87c8b63324..2d58fd4ee2 100644
--- 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,6 +68,9 @@ const CollectionStatsWidget = ({ libraryId, collectionId }: CollectionStatsWidge
);
}
+ const otherBlocksCount = Object.entries(blockTypes).filter(([blockType]) => !blockSlots.includes(blockType))
+ .reduce((acc, [, count]) => acc + count, 0);
+
return (
- {blockTypesArray.map(({ blockType, count }) => (
+ {blockSlots.map((blockType) => (
}
blockType={blockType}
- count={count}
+ count={blockTypes[blockType] || 0}
/>
))}
- {otherBlocks.length > 0 && (
+ {!!otherBlocksCount && (
}
count={otherBlocksCount}
diff --git a/src/search-manager/data/api.mock.ts b/src/search-manager/data/api.mock.ts
index bfed5a3694..e4673dd01b 100644
--- 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]);