fix: Change "choose library" phrasing depending on contentType (#2276)

* fix: change library dialog phrasing depending on contentType

* fix: separate i18n messages

* fix: i18n improvements

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

@@ -271,7 +271,7 @@ describe('<ComponentPicker />', () => {
     await screen.findByText(/Change Library/i);
     fireEvent.click(screen.getByText(/Change Library/i));
 
-    await screen.findByText('Select which Library would you like to reference components from.');
+    await screen.findByText('Choose a library to browse components.');
   });
 
   it('should pick multiple components using the component card button', async () => {

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

@@ -114,7 +114,11 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
       activeKey={currentStep}
     >
       <Stepper.Step eventKey="select-library" title="Select a library">
-        <SelectLibrary selectedLibrary={selectedLibrary} setSelectedLibrary={handleLibrarySelection} />
+        <SelectLibrary
+          selectedLibrary={selectedLibrary}
+          setSelectedLibrary={handleLibrarySelection}
+          itemType={visibleTabs.length === 1 ? visibleTabs[0] : ContentType.components}
+        />
       </Stepper.Step>
 
       <Stepper.Step eventKey="pick-components" title="Pick some components">

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

@@ -13,6 +13,7 @@ import Loading from '../../generic/Loading';
 import AlertError from '../../generic/alert-error';
 import { useContentLibraryV2List } from '../data/apiHooks';
 import messages from './messages';
+import { ContentType } from '../routes';
 
 interface EmptyStateProps {
   hasSearchQuery: boolean;
@@ -40,9 +41,10 @@ const EmptyState = ({ hasSearchQuery }: EmptyStateProps) => (
 interface SelectLibraryProps {
   selectedLibrary: string;
   setSelectedLibrary: (libraryKey: string) => void;
+  itemType: ContentType;
 }
 
-const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryProps) => {
+const SelectLibrary = ({ selectedLibrary, setSelectedLibrary, itemType }: SelectLibraryProps) => {
   const intl = useIntl();
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -75,7 +77,9 @@ const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryPro
   return (
     <Stack gap={2} className="p-5">
       <small className="text-primary-700">
-        {intl.formatMessage(messages.selectLibraryInfo)}
+        <FormattedMessage
+          {...messages[`selectLibraryInfo.${itemType}`]}
+        />
       </small>
       <SearchField
         onSubmit={handleSearch}

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

@@ -1,11 +1,31 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  selectLibraryInfo: {
-    id: 'course-authoring.library-authoring.pick-components.select-library.info',
-    defaultMessage: 'Select which Library would you like to reference components from.',
+  'selectLibraryInfo.components': {
+    id: 'course-authoring.library-authoring.pick-components.select-library.info.components',
+    defaultMessage: 'Choose a library to browse components.',
     description: 'The info text for the select library component',
   },
+  'selectLibraryInfo.units': {
+    id: 'course-authoring.library-authoring.pick-components.select-library.info.units',
+    defaultMessage: 'Choose a library to browse units.',
+    description: 'The info text for the select library for units',
+  },
+  'selectLibraryInfo.sections': {
+    id: 'course-authoring.library-authoring.pick-components.select-library.info.sections',
+    defaultMessage: 'Choose a library to browse sections.',
+    description: 'The info text for the select library for sections',
+  },
+  'selectLibraryInfo.subsections': {
+    id: 'course-authoring.library-authoring.pick-components.select-library.info.subsections',
+    defaultMessage: 'Choose a library to browse subsections.',
+    description: 'The info text for the select library for subsections',
+  },
+  'selectLibraryInfo.collections': {
+    id: 'course-authoring.library-authoring.pick-components.select-library.info.collections',
+    defaultMessage: 'Choose a library to browse collections.',
+    description: 'The info text for the select library for collections',
+  },
   selectLibrarySearchPlaceholder: {
     id: 'course-authoring.library-authoring.pick-components.select-library.search-placeholder',
     defaultMessage: 'Search for a library',