feat: Add "View All" to library sections

The "View All" action appears on sections that pass in a view all action and contain content that exceeds the defined preview limit, which defaults to 4.
openedx · Jul 11, 2024 · 9173cf5 · 9173cf5
1 parent c835702
commit 9173cf5
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 8 deletions.
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -118,7 +118,13 @@ const LibraryAuthoringPage = () => {
           <Routes>
             <Route
               path={TAB_LIST.home}
-              element={<LibraryHome libraryId={libraryId} />}
+              element={(
+                <LibraryHome
+                  libraryId={libraryId}
+                  tabList={TAB_LIST}
+                  handleTabChange={handleTabChange}
+                />
+              )}
             />
             <Route
               path={TAB_LIST.components}

diff --git a/src/library-authoring/LibraryHome.tsx b/src/library-authoring/LibraryHome.tsx
@@ -10,9 +10,11 @@ import LibraryRecentlyModified from './LibraryRecentlyModified';
 
 type LibraryHomeProps = {
   libraryId: string,
+  tabList: { home: string, components: string, collections: string },
+  handleTabChange: (key: string) => void,
 };
 
-const LibraryHome = ({ libraryId } : LibraryHomeProps) => {
+const LibraryHome = ({ libraryId, tabList, handleTabChange } : LibraryHomeProps) => {
   const {
     totalHits: componentCount,
     searchKeywords,
@@ -34,10 +36,18 @@ const LibraryHome = ({ libraryId } : LibraryHomeProps) => {
         renderEmptyState()
         || (
           <>
-            <LibrarySection title={`Collections (${collectionCount})`}>
+            <LibrarySection
+              title={`Collections (${collectionCount})`}
+              contentCount={collectionCount}
+              // TODO: add viewAllAction here once collections implemented
+            >
               <LibraryCollections />
             </LibrarySection>
-            <LibrarySection title={`Components (${componentCount})`}>
+            <LibrarySection
+              title={`Components (${componentCount})`}
+              contentCount={componentCount}
+              viewAllAction={() => handleTabChange(tabList.components)}
+            >
               <LibraryComponents libraryId={libraryId} variant="preview" />
             </LibrarySection>
           </>

diff --git a/src/library-authoring/LibraryRecentlyModified.tsx b/src/library-authoring/LibraryRecentlyModified.tsx
@@ -10,7 +10,10 @@ const RecentlyModified: React.FC<{ libraryId: string }> = ({ libraryId }) => {
 
   return componentCount > 0
     ? (
-      <LibrarySection title="Recently Modified">
+      <LibrarySection
+        title="Recently Modified"
+        contentCount={componentCount}
+      >
         <LibraryComponents libraryId={libraryId} variant="preview" />
       </LibrarySection>
     )

diff --git a/src/library-authoring/components/LibraryComponents.tsx b/src/library-authoring/components/LibraryComponents.tsx
@@ -5,6 +5,7 @@ import { useSearchContext } from '../../search-manager';
 import { NoComponents, NoSearchResults } from '../EmptyStates';
 import { useLibraryBlockTypes } from '../data/apiHook';
 import { ComponentCard, ComponentCardLoading } from './ComponentCard';
+import { LIBRARY_SECTION_PREVIEW_LIMIT } from './LibrarySection';
 
 type LibraryComponentsProps = {
   libraryId: string,
@@ -33,7 +34,7 @@ const LibraryComponents = ({
   } = useSearchContext();
 
   const { componentList, tagCounts } = useMemo(() => {
-    const result = variant === 'preview' ? hits.slice(0, 4) : hits;
+    const result = variant === 'preview' ? hits.slice(0, LIBRARY_SECTION_PREVIEW_LIMIT) : hits;
     const tagsCountsResult = {};
     result.forEach((component) => {
       if (!component.tags) {

diff --git a/src/library-authoring/components/LibrarySection.tsx b/src/library-authoring/components/LibrarySection.tsx
@@ -1,10 +1,34 @@
+/* eslint-disable react/require-default-props */
 import React from 'react';
-import { Card } from '@openedx/paragon';
+import { Card, ActionRow, Button } from '@openedx/paragon';
 
-const LibrarySection = ({ title, children } : { title: string, children: React.ReactNode }) => (
+export const LIBRARY_SECTION_PREVIEW_LIMIT = 4;
+
+const LibrarySection: React.FC<{
+  title: string,
+  viewAllAction?: () => void,
+  contentCount: number,
+  previewLimit?: number,
+  children: React.ReactNode,
+}> = ({
+  title,
+  viewAllAction,
+  contentCount,
+  previewLimit = LIBRARY_SECTION_PREVIEW_LIMIT,
+  children,
+}) => (
   <Card>
     <Card.Header
       title={title}
+      actions={
+        viewAllAction
+        && contentCount > previewLimit
+        && (
+          <ActionRow>
+            <Button variant="tertiary" onClick={viewAllAction}>View All</Button>
+          </ActionRow>
+        )
+      }
     />
     <Card.Section>
       {children}