diff --git a/src/library-authoring/component-picker/SelectLibrary.test.tsx b/src/library-authoring/component-picker/SelectLibrary.test.tsx
index cc06fa3af..aea3aa4b7 100644
--- a/src/library-authoring/component-picker/SelectLibrary.test.tsx
+++ b/src/library-authoring/component-picker/SelectLibrary.test.tsx
@@ -1,5 +1,6 @@
import {
initializeMocks,
+ fireEvent,
render,
screen,
} from '../../testUtils';
@@ -28,10 +29,21 @@ describe('', () => {
expect(await screen.findByText('Loading...')).toBeInTheDocument();
});
- it('should render the empty status', async () => {
+ it('should render the no library status', async () => {
mockGetContentLibraryV2List.applyMockEmpty();
render();
+ 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();
+
+ 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();
});
diff --git a/src/library-authoring/component-picker/SelectLibrary.tsx b/src/library-authoring/component-picker/SelectLibrary.tsx
index e6d97c559..6ebf11a2e 100644
--- a/src/library-authoring/component-picker/SelectLibrary.tsx
+++ b/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) => (
-
+ {hasSearchQuery ? (
+
+ ) : (
+
+ )}
-
+ {hasSearchQuery ? (
+
+ ) : (
+
+ )}
);
@@ -72,7 +84,7 @@ const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryPro
placeholder={intl.formatMessage(messages.selectLibrarySearchPlaceholder)}
/>
- {data.results.length === 0 && ()}
+ {data.results.length === 0 && ()}
) => setSelectedLibrary(e.target.value)}
@@ -100,14 +112,16 @@ const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryPro
))}
- setCurrentPage(page)}
- variant="secondary"
- className="align-self-center"
- />
+ {data.results.length !== 0 && (
+ setCurrentPage(page)}
+ variant="secondary"
+ className="align-self-center"
+ />
+ )}
);
};
diff --git a/src/library-authoring/component-picker/messages.ts b/src/library-authoring/component-picker/messages.ts
index b2791a3e1..829d50524 100644
--- a/src/library-authoring/component-picker/messages.ts
+++ b/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',