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]);