feat: collection empty states

Author: navinkarkera

src/library-authoring/EmptyStates.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 import React, { useContext } from 'react';
 import { useParams } from 'react-router';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
@@ -10,27 +11,37 @@ import messages from './messages';
 import { LibraryContext } from './common/context';
 import { useContentLibrary } from './data/apiHooks';
 
-export const NoComponents = () => {
+type NoSearchResultsProps = {
+  searchType?: 'collection' | 'component',
+};
+
+export const NoComponents = ({ searchType = 'component' }: NoSearchResultsProps) => {
   const { openAddContentSidebar } = useContext(LibraryContext);
   const { libraryId } = useParams();
   const { data: libraryData } = useContentLibrary(libraryId);
   const canEditLibrary = libraryData?.canEditLibrary ?? false;
 
   return (
     <Stack direction="horizontal" gap={3} className="mt-6 justify-content-center">
-      <FormattedMessage {...messages.noComponents} />
+      {searchType === 'collection'
+        ? <FormattedMessage {...messages.noCollections} />
+        : <FormattedMessage {...messages.noComponents} />}
       {canEditLibrary && (
         <Button iconBefore={Add} onClick={() => openAddContentSidebar()}>
-          <FormattedMessage {...messages.addComponent} />
+          {searchType === 'collection'
+            ? <FormattedMessage {...messages.addCollection} />
+            : <FormattedMessage {...messages.addComponent} />}
         </Button>
       )}
     </Stack>
   );
 };
 
-export const NoSearchResults = () => (
-  <Stack direction="horizontal" gap={3} className="mt-6 justify-content-center">
-    <FormattedMessage {...messages.noSearchResults} />
+export const NoSearchResults = ({ searchType = 'component' }: NoSearchResultsProps) => (
+  <Stack direction="horizontal" gap={3} className="my-6 justify-content-center">
+    {searchType === 'collection'
+      ? <FormattedMessage {...messages.noSearchResultsCollections} />
+      : <FormattedMessage {...messages.noSearchResults} />}
     <ClearFiltersButton variant="primary" size="md" />
   </Stack>
 );

src/library-authoring/LibraryCollections.tsx

@@ -51,7 +51,7 @@ const LibraryCollections = ({ variant }: LibraryCollectionsProps) => {
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
 
   if (totalCollectionHits === 0) {
-    return isFiltered ? <NoSearchResults /> : <NoComponents />;
+    return isFiltered ? <NoSearchResults searchType="collection" /> : <NoComponents searchType="collection" />;
   }
 
   return (

src/library-authoring/messages.ts

@@ -25,16 +25,31 @@ const messages = defineMessages({
     defaultMessage: 'No matching components found in this library.',
     description: 'Message displayed when no search results are found',
   },
+  noSearchResultsCollections: {
+    id: 'course-authoring.library-authoring.no-search-results-collections',
+    defaultMessage: 'No matching collections found in this library.',
+    description: 'Message displayed when no matching collections are found',
+  },
   noComponents: {
     id: 'course-authoring.library-authoring.no-components',
     defaultMessage: 'You have not added any content to this library yet.',
     description: 'Message displayed when the library is empty',
   },
+  noCollections: {
+    id: 'course-authoring.library-authoring.no-collections',
+    defaultMessage: 'You have not added any collection to this library yet.',
+    description: 'Message displayed when the library has no collections',
+  },
   addComponent: {
     id: 'course-authoring.library-authoring.add-component',
     defaultMessage: 'Add component',
     description: 'Button text to add a new component',
   },
+  addCollection: {
+    id: 'course-authoring.library-authoring.add-collection',
+    defaultMessage: 'Add collection',
+    description: 'Button text to add a new collection',
+  },
   homeTab: {
     id: 'course-authoring.library-authoring.home-tab',
     defaultMessage: 'Home',