fix: redo collection navigation

src/library-authoring/LibraryLayout.tsx

@@ -1,7 +1,6 @@
 import {
-  Route,
-  Routes,
   useParams,
+  useMatch,
 } from 'react-router-dom';
 
 import LibraryAuthoringPage from './LibraryAuthoringPage';
@@ -11,25 +10,24 @@ import LibraryCollectionPage from './collections/LibraryCollectionPage';
 import { ComponentEditorModal } from './components/ComponentEditorModal';
 
 const LibraryLayout = () => {
-  const { libraryId, collectionId } = useParams();
+  const { libraryId } = useParams();
+
+  const match = useMatch('/library/:libraryId/collection/:collectionId');
+
+  const collectionId = match?.params.collectionId;
 
   if (libraryId === undefined) {
     // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
     throw new Error('Error: route is missing libraryId.');
   }
 
   return (
-    <LibraryProvider libraryId={libraryId} collectionId={collectionId}>
-      <Routes>
-        <Route
-          path="collection/:collectionId"
-          element={<LibraryCollectionPage />}
-        />
-        <Route
-          path="*"
-          element={<LibraryAuthoringPage />}
-        />
-      </Routes>
+    <LibraryProvider key={collectionId} libraryId={libraryId} collectionId={collectionId}>
+      {collectionId ? (
+        <LibraryCollectionPage />
+      ) : (
+        <LibraryAuthoringPage />
+      )}
       <CreateCollectionModal />
       <ComponentEditorModal />
     </LibraryProvider>

src/library-authoring/collections/CollectionInfo.tsx

@@ -16,32 +16,39 @@ const CollectionInfo = () => {
   const intl = useIntl();
   const navigate = useNavigate();
 
-  const { libraryId, sidebarCollectionId: collectionId, componentPickerMode } = useLibraryContext();
+  const {
+    libraryId,
+    collectionId,
+    setCollectionId,
+    sidebarCollectionId,
+    componentPickerMode,
+  } = useLibraryContext();
 
-  const url = `/library/${libraryId}/collection/${collectionId}/`;
+  const url = `/library/${libraryId}/collection/${sidebarCollectionId}/`;
   const urlMatch = useMatch(url);
 
+  const showOpenCollectionButton = !urlMatch && collectionId !== sidebarCollectionId;
+
+  if (!sidebarCollectionId) {
+    throw new Error('sidebarCollectionId is required');
+  }
+
   const handleOpenCollection = useCallback(() => {
     if (!componentPickerMode) {
       navigate(url);
     } else {
-      // FIXME: Set state here
+      setCollectionId(sidebarCollectionId);
     }
   }, [componentPickerMode, url]);
 
-  if (!collectionId) {
-    return null;
-  }
-
   return (
     <Stack>
-      {!urlMatch && (
+      {showOpenCollectionButton && (
         <div className="d-flex flex-wrap">
           <Button
             onClick={handleOpenCollection}
             variant="outline-primary"
             className="m-1 text-nowrap flex-grow-1"
-            disabled={!!urlMatch}
           >
             {intl.formatMessage(messages.openCollectionButton)}
           </Button>

src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -11,7 +11,7 @@ import {
   Stack,
 } from '@openedx/paragon';
 import { Add, InfoOutline } from '@openedx/paragon/icons';
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import Loading from '../../generic/Loading';
 import ErrorAlert from '../../generic/alert-error';
@@ -32,13 +32,14 @@ import messages from './messages';
 import { LibrarySidebar } from '../library-sidebar';
 import LibraryCollectionComponents from './LibraryCollectionComponents';
 
-const HeaderActions = ({ canEditLibrary }: { canEditLibrary: boolean; }) => {
+const HeaderActions = () => {
   const intl = useIntl();
   const {
     openAddContentSidebar,
+    readOnly,
   } = useLibraryContext();
 
-  if (!canEditLibrary) {
+  if (readOnly) {
     return null;
   }
 
@@ -49,7 +50,6 @@ const HeaderActions = ({ canEditLibrary }: { canEditLibrary: boolean; }) => {
         iconBefore={Add}
         variant="primary rounded-0"
         onClick={openAddContentSidebar}
-        disabled={!canEditLibrary}
       >
         {intl.formatMessage(messages.newContentButton)}
       </Button>
@@ -94,7 +94,7 @@ const SubHeaderTitle = ({
 const LibraryCollectionPage = () => {
   const intl = useIntl();
 
-  const { libraryId, collectionId } = useParams();
+  const { libraryId, collectionId } = useLibraryContext();
 
   if (!collectionId || !libraryId) {
     // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
@@ -104,6 +104,8 @@ const LibraryCollectionPage = () => {
   const {
     sidebarBodyComponent,
     openCollectionInfoSidebar,
+    componentPickerMode,
+    setCollectionId,
   } = useLibraryContext();
 
   const {
@@ -132,33 +134,51 @@ const LibraryCollectionPage = () => {
   if (isError) {
     return <ErrorAlert error={error} />;
   }
-
-  const breadcrumbs = [
-    {
-      label: libraryData.title,
-      to: `/library/${libraryId}`,
-    },
-    {
-      label: intl.formatMessage(messages.allCollections),
-      to: `/library/${libraryId}/collections`,
-    },
-    // Adding empty breadcrumb to add the last `>` spacer.
-    {
-      label: '',
-      to: '',
-    },
-  ];
+  const breadcumbs = !componentPickerMode ? (
+    <Breadcrumb
+      ariaLabel={intl.formatMessage(messages.breadcrumbsAriaLabel)}
+      links={[
+        {
+          label: libraryData.title,
+          to: `/library/${libraryId}`,
+        },
+        {
+          label: intl.formatMessage(messages.allCollections),
+          to: `/library/${libraryId}/collections`,
+        },
+        // Adding empty breadcrumb to add the last `>` spacer.
+        {
+          label: '',
+          to: '',
+        },
+      ]}
+      linkAs={Link}
+    />
+  ) : (
+    <Breadcrumb
+      ariaLabel={intl.formatMessage(messages.breadcrumbsAriaLabel)}
+      links={[
+        {
+          label: '← Test',
+          onClick: () => { setCollectionId(undefined); },
+        },
+      ]}
+      linkAs={Link}
+    />
+  );
 
   return (
     <div className="d-flex">
       <div className="flex-grow-1">
-        <Header
-          number={libraryData.slug}
-          title={libraryData.title}
-          org={libraryData.org}
-          contextId={libraryId}
-          isLibrary
-        />
+        {!componentPickerMode && (
+          <Header
+            number={libraryData.slug}
+            title={libraryData.title}
+            org={libraryData.org}
+            contextId={libraryId}
+            isLibrary
+          />
+        )}
         <Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
           <SearchContextProvider
             extraFilter={[`context_key = "${libraryId}"`, `collections.key = "${collectionId}"`]}
@@ -172,14 +192,8 @@ const LibraryCollectionPage = () => {
                   infoClickHandler={() => openCollectionInfoSidebar(collectionId)}
                 />
               )}
-              breadcrumbs={(
-                <Breadcrumb
-                  ariaLabel={intl.formatMessage(messages.breadcrumbsAriaLabel)}
-                  links={breadcrumbs}
-                  linkAs={Link}
-                />
-              )}
-              headerActions={<HeaderActions canEditLibrary={libraryData.canEditLibrary} />}
+              breadcrumbs={breadcumbs}
+              headerActions={<HeaderActions />}
             />
             <SearchKeywordsField className="w-50" placeholder={intl.formatMessage(messages.searchPlaceholder)} />
             <div className="d-flex mt-3 mb-4 align-items-center">

src/library-authoring/common/context.tsx

@@ -22,9 +22,10 @@ export interface LibraryContextData {
   libraryData?: ContentLibrary;
   readOnly: boolean;
   isLoadingLibraryData: boolean;
+  collectionId: string | undefined;
+  setCollectionId: (collectionId?: string) => void;
   // Whether we're in "component picker" mode
   componentPickerMode: boolean;
-  homeCollectionId?: string;
   // Sidebar stuff - only one sidebar is active at any given time:
   sidebarBodyComponent: SidebarBodyComponentId | null;
   closeLibrarySidebar: () => void;
@@ -71,11 +72,12 @@ interface LibraryProviderProps {
 export const LibraryProvider = ({
   children,
   libraryId,
-  collectionId,
+  collectionId: collectionIdProp,
   componentPickerMode = false,
   sidebarCollectionId: sideBarCollectionIdProp,
   sidebarComponentUsageKey: sidebarComponentUsageKeyProp,
 }: LibraryProviderProps) => {
+  const [collectionId, setCollectionId] = useState(collectionIdProp);
   const [sidebarBodyComponent, setSidebarBodyComponent] = useState<SidebarBodyComponentId | null>(null);
   const [sidebarComponentUsageKey, setSidebarComponentUsageKey] = useState<string | undefined>(
     sidebarComponentUsageKeyProp,
@@ -125,6 +127,7 @@ export const LibraryProvider = ({
     libraryId,
     libraryData,
     collectionId,
+    setCollectionId,
     readOnly,
     isLoadingLibraryData,
     componentPickerMode,
@@ -145,6 +148,7 @@ export const LibraryProvider = ({
   }), [
     libraryId,
     collectionId,
+    setCollectionId,
     libraryData,
     readOnly,
     isLoadingLibraryData,

src/library-authoring/component-info/ComponentInfo.tsx

@@ -35,7 +35,6 @@ const ComponentInfo = () => {
   } = useAddComponentToCourse();
 
   if (addComponentToCourseSuccess) {
-    console.log('Component added to course');
     // FIXME: Add function to message parent that component was added to course
   }
 

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

@@ -2,12 +2,25 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Stepper } from '@openedx/paragon';
 import { useState } from 'react';
 
-import { LibraryProvider } from '../common/context';
+import { LibraryProvider, useLibraryContext } from '../common/context';
 import LibraryAuthoringPage from '../LibraryAuthoringPage';
+import LibraryCollectionPage from '../collections/LibraryCollectionPage';
 import SelectLibrary from './SelectLibrary';
 import messages from './messages';
 
-const ComponentPicker = () => {
+const InnerComponentPicker = () => {
+  const {
+    collectionId,
+  } = useLibraryContext();
+
+  if (collectionId) {
+    return <LibraryCollectionPage />;
+  }
+  return <LibraryAuthoringPage />;
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const ComponentPicker = () => {
   const intl = useIntl();
 
   const [currentStep, setCurrentStep] = useState('select-library');
@@ -23,7 +36,7 @@ const ComponentPicker = () => {
 
       <Stepper.Step eventKey="pick-components" title="Pick some components">
         <LibraryProvider libraryId={selectedLibrary} componentPickerMode>
-          <LibraryAuthoringPage />
+          <InnerComponentPicker />
         </LibraryProvider>
       </Stepper.Step>
 
@@ -44,5 +57,3 @@ const ComponentPicker = () => {
     </Stepper>
   );
 };
-
-export default ComponentPicker;

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

@@ -1,2 +1,2 @@
 // eslint-disable-next-line import/prefer-default-export
-export { default as ComponentPicker } from './ComponentPicker';
+export { ComponentPicker } from './ComponentPicker';

src/library-authoring/components/ComponentCard.tsx

@@ -94,7 +94,6 @@ const ComponentCard = ({ contentHit }: ComponentCardProps) => {
   } = useAddComponentToCourse();
 
   if (addComponentToCourseSuccess) {
-    console.log('Component added to course');
     // FIXME: Add function to message parent that component was added to course
   }