diff --git a/src/library-authoring/component-picker/ComponentPicker.test.tsx b/src/library-authoring/component-picker/ComponentPicker.test.tsx index 89d7462173..f9f9fc132e 100644 --- a/src/library-authoring/component-picker/ComponentPicker.test.tsx +++ b/src/library-authoring/component-picker/ComponentPicker.test.tsx @@ -266,4 +266,14 @@ describe('', () => { await waitFor(() => expect(onChange).toHaveBeenCalledWith([])); }); + + it('should display an alert banner when showOnlyPublished is true', async () => { + render(); + + expect(await screen.findByText('Test Library 1')).toBeInTheDocument(); + fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i)); + + // Wait for the content library to load + await screen.findByText(/Only published content is visible and available for reuse./i); + }); }); diff --git a/src/library-authoring/component-picker/ComponentPicker.tsx b/src/library-authoring/component-picker/ComponentPicker.tsx index 8f8cc77bd1..7455384fe9 100644 --- a/src/library-authoring/component-picker/ComponentPicker.tsx +++ b/src/library-authoring/component-picker/ComponentPicker.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { useLocation } from 'react-router-dom'; -import { Stepper } from '@openedx/paragon'; +import { Alert, Stepper } from '@openedx/paragon'; +import { FormattedMessage } from '@edx/frontend-platform/i18n'; import { type ComponentSelectedEvent, @@ -11,6 +12,7 @@ import { import LibraryAuthoringPage from '../LibraryAuthoringPage'; import LibraryCollectionPage from '../collections/LibraryCollectionPage'; import SelectLibrary from './SelectLibrary'; +import messages from './messages'; interface LibraryComponentPickerProps { returnToLibrarySelection: () => void; @@ -65,6 +67,7 @@ export const ComponentPicker: React.FC = ({ const queryParams = new URLSearchParams(location.search); const variant = queryParams.get('variant') || 'draft'; + const showOnlyPublished = variant === 'published'; const handleLibrarySelection = (library: string) => { setCurrentStep('pick-components'); @@ -99,9 +102,15 @@ export const ComponentPicker: React.FC = ({ + { showOnlyPublished + && ( + + + + )} diff --git a/src/library-authoring/component-picker/messages.ts b/src/library-authoring/component-picker/messages.ts index 829d50524d..963a761bdb 100644 --- a/src/library-authoring/component-picker/messages.ts +++ b/src/library-authoring/component-picker/messages.ts @@ -42,6 +42,11 @@ const messages = defineMessages({ defaultMessage: 'Next', description: 'The text for the next button in the select library component', }, + pickerInfoBanner: { + id: 'course-authoring.library-authoring.pick-components.component-picker.information-alert', + defaultMessage: 'Only published content is visible and available for reuse.', + description: 'The alert text on top of component-picker if only published content is visible.', + }, }); export default messages;