[sumac] fix: empty state for library selection on component picker [FC-0062] (#1441)

This PR fixes the empty state text for adding library content if the user can't access any library.

src/library-authoring/component-picker/SelectLibrary.test.tsx

@@ -1,5 +1,6 @@
 import {
   initializeMocks,
+  fireEvent,
   render,
   screen,
 } from '../../testUtils';
@@ -28,10 +29,21 @@ describe('<ComponentPicker />', () => {
     expect(await screen.findByText('Loading...')).toBeInTheDocument();
   });
 
-  it('should render the empty status', async () => {
+  it('should render the no library status', async () => {
     mockGetContentLibraryV2List.applyMockEmpty();
     render(<ComponentPicker />);
 
+    expect(await screen.findByText(/you don't have any libraries created yet,/i)).toBeInTheDocument();
+  });
+
+  it('should render the no search result status', async () => {
+    mockGetContentLibraryV2List.applyMockEmpty();
+    render(<ComponentPicker />);
+
+    const searchField = await screen.findByPlaceholderText('Search for a library');
+    fireEvent.change(searchField, { target: { value: 'test' } });
+    fireEvent.submit(searchField);
+
     expect(await screen.findByText(/there are no libraries with the current filters/i)).toBeInTheDocument();
   });
 

src/library-authoring/component-picker/SelectLibrary.tsx

@@ -14,13 +14,25 @@ import AlertError from '../../generic/alert-error';
 import { useContentLibraryV2List } from '../data/apiHooks';
 import messages from './messages';
 
-const EmptyState = () => (
+interface EmptyStateProps {
+  hasSearchQuery: boolean;
+}
+
+const EmptyState = ({ hasSearchQuery }: EmptyStateProps) => (
   <Alert className="mt-4 align-self-center">
     <Alert.Heading>
-      <FormattedMessage {...messages.selectLibraryEmptyStateTitle} />
+      {hasSearchQuery ? (
+        <FormattedMessage {...messages.selectLibraryNoSearchResultsTitle} />
+      ) : (
+        <FormattedMessage {...messages.selectLibraryNoLibrariesTitle} />
+      )}
     </Alert.Heading>
     <p>
-      <FormattedMessage {...messages.selectLibraryEmptyStateMessage} />
+      {hasSearchQuery ? (
+        <FormattedMessage {...messages.selectLibraryNoSearchResultsMessage} />
+      ) : (
+        <FormattedMessage {...messages.selectLibraryNoLibrariesMessage} />
+      )}
     </p>
   </Alert>
 );
@@ -72,7 +84,7 @@ const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryPro
         placeholder={intl.formatMessage(messages.selectLibrarySearchPlaceholder)}
       />
       <div>
-        {data.results.length === 0 && (<EmptyState />)}
+        {data.results.length === 0 && (<EmptyState hasSearchQuery={!!searchQuery} />)}
         <Form.RadioSet
           name="selected-library"
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSelectedLibrary(e.target.value)}
@@ -100,14 +112,16 @@ const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryPro
           ))}
         </Form.RadioSet>
       </div>
-      <Pagination
-        paginationLabel={intl.formatMessage(messages.selectLibraryPaginationLabel)}
-        pageCount={data!.numPages}
-        currentPage={data!.currentPage}
-        onPageSelect={(page: number) => setCurrentPage(page)}
-        variant="secondary"
-        className="align-self-center"
-      />
+      {data.results.length !== 0 && (
+        <Pagination
+          paginationLabel={intl.formatMessage(messages.selectLibraryPaginationLabel)}
+          pageCount={data!.numPages}
+          currentPage={data!.currentPage}
+          onPageSelect={(page: number) => setCurrentPage(page)}
+          variant="secondary"
+          className="align-self-center"
+        />
+      )}
     </Stack>
   );
 };

src/library-authoring/component-picker/messages.ts

@@ -16,15 +16,26 @@ const messages = defineMessages({
     defaultMessage: 'Library pagination',
     description: 'The pagination label for the select library component',
   },
-  selectLibraryEmptyStateTitle: {
-    id: 'course-authoring.library-authoring.pick-components.select-library.empty-state.title',
+  selectLibraryNoSearchResultsTitle: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.no-search.results.title',
     defaultMessage: 'We could not find any result',
-    description: 'The title for the empty state in the select library component',
+    description: 'The title for the no search results state in the select library component',
   },
-  selectLibraryEmptyStateMessage: {
-    id: 'course-authoring.library-authoring.pick-components.select-library.empty-state.message',
+  selectLibraryNoSearchResultsMessage: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.no-search.message',
     defaultMessage: 'There are no libraries with the current filters.',
-    description: 'The message for the empty state in the select library component',
+    description: 'The message for the no search results state in the select library component',
+  },
+  selectLibraryNoLibrariesTitle: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.no-libraries.title',
+    defaultMessage: 'No libraries found',
+    description: 'The title for the no libraries state in the select library component',
+  },
+  selectLibraryNoLibrariesMessage: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.no-libraries.message',
+    defaultMessage: 'You don\'t have any libraries created yet, or you don\'t have access to any libraries. To '
+      + 'create a new library, go to Studio Home or contact your system administrator.',
+    description: 'The message for the no libraries state in the select library component',
   },
   selectLibraryNextButton: {
     id: 'course-authoring.library-authoring.pick-components.select-library.next-button',