feat: Add Recently Modified library section

src/library-authoring/LibraryHome.tsx

@@ -1,25 +1,12 @@
 import React from 'react';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import {
-  Card, Stack,
-} from '@openedx/paragon';
+import { Stack } from '@openedx/paragon';
 
 import { NoComponents, NoSearchResults } from './EmptyStates';
 import { useSearchContext } from '../search-manager';
 import LibraryCollections from './LibraryCollections';
 import LibraryComponents from './components/LibraryComponents';
-import messages from './messages';
-
-const Section = ({ title, children } : { title: string, children: React.ReactNode }) => (
-  <Card>
-    <Card.Header
-      title={title}
-    />
-    <Card.Section>
-      {children}
-    </Card.Section>
-  </Card>
-);
+import LibrarySection from './components/LibrarySection';
+import LibraryRecentlyModified from './LibraryRecentlyModified';
 
 type LibraryHomeProps = {
   libraryId: string,
@@ -33,21 +20,29 @@ const LibraryHome = ({ libraryId } : LibraryHomeProps) => {
 
   const collectionCount = 0;
 
-  if (componentCount === 0) {
-    return searchKeywords === '' ? <NoComponents /> : <NoSearchResults />;
-  }
+  const renderEmptyState = () => {
+    if (componentCount === 0) {
+      return searchKeywords === '' ? <NoComponents /> : <NoSearchResults />;
+    }
+    return null;
+  };
 
   return (
     <Stack gap={3}>
-      <Section title="Recently Modified">
-        <FormattedMessage {...messages.recentComponentsTempPlaceholder} />
-      </Section>
-      <Section title={`Collections (${collectionCount})`}>
-        <LibraryCollections />
-      </Section>
-      <Section title={`Components (${componentCount})`}>
-        <LibraryComponents libraryId={libraryId} variant="preview" />
-      </Section>
+      <LibraryRecentlyModified libraryId={libraryId} />
+      {
+        renderEmptyState()
+        || (
+          <>
+            <LibrarySection title={`Collections (${collectionCount})`}>
+              <LibraryCollections />
+            </LibrarySection>
+            <LibrarySection title={`Components (${componentCount})`}>
+              <LibraryComponents libraryId={libraryId} variant="preview" />
+            </LibrarySection>
+          </>
+        )
+      }
     </Stack>
   );
 };

src/library-authoring/LibraryRecentlyModified.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { SearchContextProvider, useSearchContext } from '../search-manager';
+import { SearchSortOption } from '../search-manager/data/api';
+import LibraryComponents from './components/LibraryComponents';
+import LibrarySection from './components/LibrarySection';
+
+const RecentlyModified: React.FC<{ libraryId: string }> = ({ libraryId }) => {
+  const { totalHits: componentCount } = useSearchContext();
+
+  return componentCount > 0
+    ? (
+      <LibrarySection title="Recently Modified">
+        <LibraryComponents libraryId={libraryId} variant="preview" />
+      </LibrarySection>
+    )
+    : null;
+};
+
+const LibraryRecentlyModified: React.FC<{ libraryId: string }> = ({ libraryId }) => (
+  <SearchContextProvider
+    extraFilter={`context_key = "${libraryId}"`}
+    overrideSearchSortOrder={SearchSortOption.RECENTLY_MODIFIED}
+  >
+    <RecentlyModified libraryId={libraryId} />
+  </SearchContextProvider>
+);
+
+export default LibraryRecentlyModified;

src/library-authoring/components/LibrarySection.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Card } from '@openedx/paragon';
+
+const LibrarySection = ({ title, children } : { title: string, children: React.ReactNode }) => (
+  <Card>
+    <Card.Header
+      title={title}
+    />
+    <Card.Section>
+      {children}
+    </Card.Section>
+  </Card>
+);
+
+export default LibrarySection;

src/search-manager/SearchManager.ts

@@ -40,16 +40,17 @@ const SearchContext = React.createContext<SearchContextData | undefined>(undefin
 
 export const SearchContextProvider: React.FC<{
   extraFilter?: Filter;
+  overrideSearchSortOrder?: SearchSortOption
   children: React.ReactNode,
   closeSearchModal?: () => void,
-}> = ({ extraFilter, ...props }) => {
+}> = ({ extraFilter, overrideSearchSortOrder, ...props }) => {
   const [searchKeywords, setSearchKeywords] = React.useState('');
   const [blockTypesFilter, setBlockTypesFilter] = React.useState<string[]>([]);
   const [tagsFilter, setTagsFilter] = React.useState<string[]>([]);
 
   // Use the selected search order option
   // Note: SearchSortOption.RELEVANCE is special -- it is empty string, and represents the default sort setting.
-  const [searchSortOrder, setSearchSortOrder] = React.useState(SearchSortOption.RELEVANCE);
+  const [searchSortOrder, setSearchSortOrder] = React.useState(overrideSearchSortOrder || SearchSortOption.RELEVANCE);
   const sort = searchSortOrder ? [searchSortOrder] : [];
 
   const canClearFilters = blockTypesFilter.length > 0 || tagsFilter.length > 0;

src/search-manager/data/api.ts

@@ -105,6 +105,8 @@ export interface ContentHit {
   content?: ContentDetails;
   /** Same fields with <mark>...</mark> highlights */
   formatted: { displayName: string, content?: ContentDetails };
+  created: number;
+  modified: number;
 }
 
 /**