feat: show info banner in component picker (#1498) (#1501)

Displays a infor banner if only published content is visible in component picker.

(cherry picked from commit efd2b3d)

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

@@ -267,4 +267,14 @@ describe('<ComponentPicker />', () => {
 
     await waitFor(() => expect(onChange).toHaveBeenCalledWith([]));
   });
+
+  it('should display an alert banner when showOnlyPublished is true', async () => {
+    render(<ComponentPicker />);
+
+    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);
+  });
 });

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<ComponentPickerProps> = ({
 
   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<ComponentPickerProps> = ({
       <Stepper.Step eventKey="pick-components" title="Pick some components">
         <LibraryProvider
           libraryId={selectedLibrary}
-          showOnlyPublished={variant === 'published'}
+          showOnlyPublished={showOnlyPublished}
           {...libraryProviderProps}
         >
+          { showOnlyPublished
+            && (
+            <Alert variant="info" className="m-2">
+              <FormattedMessage {...messages.pickerInfoBanner} />
+            </Alert>
+            )}
           <InnerComponentPicker returnToLibrarySelection={returnToLibrarySelection} />
         </LibraryProvider>
       </Stepper.Step>

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;