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;