feat: display both collections and components in recent section

Author: navinkarkera

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -436,8 +436,8 @@ describe('<LibraryAuthoringPage />', () => {
     const doc = await renderLibraryPage();
 
     // Click on the first component
-    waitFor(() => expect(doc.queryByText(displayName)).toBeInTheDocument());
-    fireEvent.click(doc.getAllByText(displayName)[0]);
+    expect((await doc.findAllByText(displayName))[0]).toBeInTheDocument();
+    fireEvent.click((await doc.findAllByText(displayName))[0]);
 
     const sidebar = doc.getByTestId('library-sidebar');
 
@@ -549,4 +549,20 @@ describe('<LibraryAuthoringPage />', () => {
 
     expect(doc.getByText(/no matching components/i)).toBeInTheDocument();
   });
+
+  it('shows both components and collections in recently modified section', async () => {
+    const doc = await renderLibraryPage();
+
+    expect(await doc.findByText('Content library')).toBeInTheDocument();
+    expect((await doc.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+
+    // "Recently Modified" header + sort shown
+    expect(doc.getAllByText('Recently Modified').length).toEqual(2);
+    const recentModifiedContainer = (await doc.findAllByText('Recently Modified'))[1].parentElement?.parentElement?.parentElement;
+    if (recentModifiedContainer) {
+      const container = within(recentModifiedContainer);
+      expect(container.queryAllByText('Text').length).toBeGreaterThan(0);
+      expect(container.queryAllByText('Collection').length).toBeGreaterThan(0);
+    }
+  });
 });

src/library-authoring/LibraryRecentlyModified.tsx

@@ -1,23 +1,77 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { orderBy } from 'lodash';
+import { CardGrid } from '@openedx/paragon';
 
 import { SearchContextProvider, useSearchContext } from '../search-manager';
-import { SearchSortOption } from '../search-manager/data/api';
-import LibraryComponents from './components/LibraryComponents';
-import LibrarySection from './components/LibrarySection';
+import { type CollectionHit, type ContentHit, SearchSortOption } from '../search-manager/data/api';
+import LibrarySection, { LIBRARY_SECTION_PREVIEW_LIMIT } from './components/LibrarySection';
 import messages from './messages';
+import ComponentCard from './components/ComponentCard';
+import { useLibraryBlockTypes } from './data/apiHooks';
+import CollectionCard from './components/CollectionCard';
 
 const RecentlyModified: React.FC<{ libraryId: string }> = ({ libraryId }) => {
   const intl = useIntl();
-  const { totalHits: componentCount } = useSearchContext();
+  const {
+    hits,
+    collectionHits,
+    totalHits,
+    totalCollectionHits,
+  } = useSearchContext();
+
+  const componentCount = totalHits + totalCollectionHits;
+  // Since we only display a fixed number of items in preview,
+  // only these number of items are use in sort step below
+  const componentList = hits.slice(0, LIBRARY_SECTION_PREVIEW_LIMIT);
+  const collectionList = collectionHits.slice(0, LIBRARY_SECTION_PREVIEW_LIMIT);
+  // Sort them by `modified` field in reverse and display them
+  const recentItems = orderBy([
+    ...componentList,
+    ...collectionList,
+  ], ['modified'], ['desc']).slice(0, LIBRARY_SECTION_PREVIEW_LIMIT);
+
+  const { data: blockTypesData } = useLibraryBlockTypes(libraryId);
+  const blockTypes = useMemo(() => {
+    const result = {};
+    if (blockTypesData) {
+      blockTypesData.forEach(blockType => {
+        result[blockType.blockType] = blockType;
+      });
+    }
+    return result;
+  }, [blockTypesData]);
 
   return componentCount > 0
     ? (
       <LibrarySection
         title={intl.formatMessage(messages.recentlyModifiedTitle)}
         contentCount={componentCount}
       >
-        <LibraryComponents libraryId={libraryId} variant="preview" />
+        <CardGrid
+          columnSizes={{
+            sm: 12,
+            md: 6,
+            lg: 4,
+            xl: 3,
+          }}
+          hasEqualColumnHeights
+        >
+          {recentItems.map((contentHit) => (
+            contentHit.type === 'collection' ? (
+              <CollectionCard
+                key={contentHit.id}
+                collectionHit={contentHit as CollectionHit}
+              />
+            ) : (
+              <ComponentCard
+                key={contentHit.id}
+                contentHit={contentHit as ContentHit}
+                blockTypeDisplayName={blockTypes[(contentHit as ContentHit).blockType]?.displayName ?? ''}
+              />
+            )
+          ))}
+        </CardGrid>
       </LibrarySection>
     )
     : null;

src/library-authoring/__mocks__/library-search.json

@@ -20,7 +20,7 @@
             }
           ],
           "created": 1721857069.042984,
-          "modified": 1725398676.078056,
+          "modified": 1725878053.420395,
           "last_published": 1725035862.450613,
           "usage_key": "lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd",
           "block_type": "html",
@@ -293,7 +293,7 @@
             }
           ],
           "created": 1725534795.628254,
-          "modified": 1725534795.628266,
+          "modified": 1725878053.420395,
           "context_key": "lib:OpenedX:CSPROB2",
           "org": "OpenedX",
           "access_id": 16,