fix: some navigation fixes

src/library-authoring/LibraryAuthoringPage.tsx

@@ -5,6 +5,7 @@ import { StudioFooter } from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Badge,
+  Breadcrumb,
   Button,
   Container,
   Stack,
@@ -13,6 +14,7 @@ import {
 } from '@openedx/paragon';
 import { Add, InfoOutline } from '@openedx/paragon/icons';
 import {
+  Link,
   useLocation,
   useNavigate,
   useSearchParams,
@@ -186,6 +188,23 @@ const LibraryAuthoringPage = () => {
     }
   };
 
+  const breadcumbs = componentPickerMode ? (
+    <Breadcrumb
+      links={[
+        {
+          label: intl.formatMessage(messages.returnToLibrarySelection),
+          onClick: () => {
+            navigate({
+              pathname: '/component-picker',
+              search: searchParams.toString(),
+            });
+          },
+        },
+      ]}
+      linkAs={Link}
+    />
+  ) : undefined;
+
   return (
     <div className="d-flex">
       <div className="flex-grow-1">
@@ -208,7 +227,8 @@ const LibraryAuthoringPage = () => {
           >
             <SubHeader
               title={<SubHeaderTitle title={libraryData.title} />}
-              subtitle={intl.formatMessage(messages.headingSubtitle)}
+              subtitle={!componentPickerMode ? intl.formatMessage(messages.headingSubtitle) : undefined}
+              breadcrumbs={breadcumbs}
               headerActions={<HeaderActions />}
             />
             <SearchKeywordsField className="w-50" />

src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -162,7 +162,7 @@ const LibraryCollectionPage = () => {
       ariaLabel={intl.formatMessage(messages.breadcrumbsAriaLabel)}
       links={[
         {
-          label: intl.formatMessage(messages.returnToLibrarySelection),
+          label: intl.formatMessage(messages.returnToLibrary),
           onClick: () => { setCollectionId(undefined); },
         },
       ]}

src/library-authoring/collections/messages.ts

@@ -126,10 +126,10 @@ const messages = defineMessages({
     defaultMessage: 'Edit collection title',
     description: 'Alt text for edit collection title icon button',
   },
-  returnToLibrarySelection: {
-    id: 'course-authoring.library-authoring.collection.component-picker.return-to-library-selection',
-    defaultMessage: '← Change Library',
-    description: 'Breadcrumbs link to return to library selection',
+  returnToLibrary: {
+    id: 'course-authoring.library-authoring.collection.component-picker.return-to-library',
+    defaultMessage: '← Back to Library',
+    description: 'Breadcrumbs link to return to library',
   },
 });
 

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

@@ -61,7 +61,7 @@ describe('<ComponentPicker />', () => {
     fireEvent.click(screen.getByText('Next'));
 
     // Wait for the content library to load
-    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    await screen.findByText(/← Change Library/i);
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
 
     // Click the add component from the component card
@@ -87,7 +87,7 @@ describe('<ComponentPicker />', () => {
     fireEvent.click(screen.getByText('Next'));
 
     // Wait for the content library to load
-    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    await screen.findByText(/← Change Library/i);
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
 
     // Click the add component from the component card
@@ -113,7 +113,7 @@ describe('<ComponentPicker />', () => {
     fireEvent.click(screen.getByText('Next'));
 
     // Wait for the content library to load
-    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    await screen.findByText(/← Change Library/i);
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
 
     // Click on the component card to open the sidebar
@@ -144,7 +144,7 @@ describe('<ComponentPicker />', () => {
     fireEvent.click(screen.getByText('Next'));
 
     // Wait for the content library to load
-    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    await screen.findByText(/← Change Library/i);
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
 
     // Click on the component card to open the sidebar
@@ -175,7 +175,7 @@ describe('<ComponentPicker />', () => {
     fireEvent.click(screen.getByText('Next'));
 
     // Wait for the content library to load
-    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    await screen.findByText(/← Change Library/i);
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
 
     // Click on the collection card to open the sidebar
@@ -190,7 +190,7 @@ describe('<ComponentPicker />', () => {
     fireEvent.click(within(sidebar).getByRole('button', { name: 'Open' }));
 
     // Wait for the collection  to load
-    await screen.findByText(/← Change Library/i);
+    await screen.findByText(/← Back to Library/i);
     await screen.findByText('Introduction to Testing');
 
     // Click the add component from the component card
@@ -215,7 +215,7 @@ describe('<ComponentPicker />', () => {
     fireEvent.click(screen.getByText('Next'));
 
     // Wait for the content library to load
-    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    await screen.findByText(/← Change Library/i);
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
 
     // Click on the collection card to open the sidebar
@@ -230,7 +230,7 @@ describe('<ComponentPicker />', () => {
     fireEvent.click(within(sidebar).getByRole('button', { name: 'Open' }));
 
     // Wait for the collection  to load
-    await screen.findByText(/← Change Library/i);
+    await screen.findByText(/← Back to Library/i);
     await screen.findByText('Introduction to Testing');
 
     // Click on the collection card to open the sidebar

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

@@ -56,12 +56,6 @@ export const ComponentPicker = () => {
             {intl.formatMessage(messages.selectLibraryNextButton)}
           </Button>
         </Stepper.ActionRow>
-
-        <Stepper.ActionRow eventKey="pick-components">
-          <Button variant="outline-primary" onClick={() => setCurrentStep('select-library')}>
-            {intl.formatMessage(messages.pickComponentPreviousButton)}
-          </Button>
-        </Stepper.ActionRow>
       </div>
     </Stepper>
   );

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

@@ -31,11 +31,6 @@ const messages = defineMessages({
     defaultMessage: 'Next',
     description: 'The text for the next button in the select library component',
   },
-  pickComponentPreviousButton: {
-    id: 'course-authoring.library-authoring.pick-components.previous-button',
-    defaultMessage: 'Previous',
-    description: 'The text for the previous button in the pick component component',
-  },
 });
 
 export default messages;

src/library-authoring/messages.ts

@@ -106,6 +106,11 @@ const messages = defineMessages({
     defaultMessage: 'Read Only',
     description: 'Text in badge when the user has read only access',
   },
+  returnToLibrarySelection: {
+    id: 'course-authoring.library-authoring.pick-components.return-to-library-selection',
+    defaultMessage: '← Change Library',
+    description: 'Breadcrumbs link to return to library selection',
+  },
 });
 
 export default messages;