feat: shareable URLs for library components and searches [FC-0076]

src/content-tags-drawer/ContentTagsDrawer.test.jsx

@@ -18,7 +18,7 @@ import {
 } from './data/api.mocks';
 import { getContentTaxonomyTagsApiUrl } from './data/api';
 
-const path = '/content/:contentId/*';
+const path = '/content/:contentId?/*';
 const mockOnClose = jest.fn();
 const mockSetBlockingSheet = jest.fn();
 const mockNavigate = jest.fn();

src/hooks.ts

@@ -1,6 +1,12 @@
-import { useEffect, useState } from 'react';
+import {
+  type Dispatch,
+  type SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import { history } from '@edx/frontend-platform';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 
 export const useScrollToHashElement = ({ isLoading }: { isLoading: boolean }) => {
   const [elementWithHash, setElementWithHash] = useState<string | null>(null);
@@ -77,3 +83,44 @@ export const useLoadOnScroll = (
     return () => { };
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
 };
+
+/**
+ * Hook which stores state variables in the URL search parameters.
+ *
+ * It wraps useState with functions that get/set a query string
+ * search parameter when returning/setting the state variable.
+ *
+ * @param defaultValue: Type
+ *   Returned when no valid value is found in the url search parameter.
+ * @param paramName: name of the url search parameter to store this value in.
+ * @param fromString: returns the Type equivalent of the given string value,
+ *   or undefined if the value is invalid.
+ * @param toString: returns the string equivalent of the given Type value.
+ *   Return defaultValue to clear the url search paramName.
+ */
+export function useStateWithUrlSearchParam<Type>(
+  defaultValue: Type,
+  paramName: string,
+  fromString: (value: string | null) => Type | undefined,
+  toString: (value: Type) => string | undefined,
+): [value: Type, setter: Dispatch<SetStateAction<Type>>] {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const returnValue: Type = fromString(searchParams.get(paramName)) ?? defaultValue;
+  // Function to update the url search parameter
+  const returnSetter: Dispatch<SetStateAction<Type>> = useCallback((value: Type) => {
+    setSearchParams((prevParams) => {
+      const paramValue: string = toString(value) ?? '';
+      const newSearchParams = new URLSearchParams(prevParams);
+      // If using the default paramValue, remove it from the search params.
+      if (paramValue === defaultValue) {
+        newSearchParams.delete(paramName);
+      } else {
+        newSearchParams.set(paramName, paramValue);
+      }
+      return newSearchParams;
+    }, { replace: true });
+  }, [setSearchParams]);
+
+  // Return the computed value and wrapped set state function
+  return [returnValue, returnSetter];
+}

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -431,27 +431,23 @@ describe('<LibraryAuthoringPage />', () => {
     // Click on the first collection
     fireEvent.click((await screen.findByText('Collection 1')));
 
-    const sidebar = screen.getByTestId('library-sidebar');
-
-    const { getByRole } = within(sidebar);
-
     // Click on the Details tab
-    fireEvent.click(getByRole('tab', { name: 'Details' }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Details' }));
 
     // Change to a component
     fireEvent.click((await screen.findAllByText('Introduction to Testing'))[0]);
 
     // Check that the Details tab is still selected
-    expect(getByRole('tab', { name: 'Details' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Details' })).toHaveAttribute('aria-selected', 'true');
 
     // Click on the Previews tab
-    fireEvent.click(getByRole('tab', { name: 'Preview' }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Preview' }));
 
     // Switch back to the collection
     fireEvent.click((await screen.findByText('Collection 1')));
 
     // The Manage (default) tab should be selected because the collection does not have a Preview tab
-    expect(getByRole('tab', { name: 'Manage' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Manage' })).toHaveAttribute('aria-selected', 'true');
   });
 
   it('can filter by capa problem type', async () => {

src/library-authoring/LibraryAuthoringPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import classNames from 'classnames';
 import { StudioFooter } from '@edx/frontend-component-footer';
@@ -16,12 +16,7 @@ import {
   Tabs,
 } from '@openedx/paragon';
 import { Add, ArrowBack, InfoOutline } from '@openedx/paragon/icons';
-import {
-  Link,
-  useLocation,
-  useNavigate,
-  useSearchParams,
-} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import Loading from '../generic/Loading';
 import SubHeader from '../generic/sub-header/SubHeader';
@@ -36,11 +31,12 @@ import {
   SearchKeywordsField,
   SearchSortWidget,
 } from '../search-manager';
-import LibraryContent, { ContentType } from './LibraryContent';
+import LibraryContent from './LibraryContent';
 import { LibrarySidebar } from './library-sidebar';
 import { useComponentPickerContext } from './common/context/ComponentPickerContext';
 import { useLibraryContext } from './common/context/LibraryContext';
 import { SidebarBodyComponentId, useSidebarContext } from './common/context/SidebarContext';
+import { ContentType, useLibraryRoutes } from './routes';
 
 import messages from './messages';
 
@@ -51,7 +47,7 @@ const HeaderActions = () => {
 
   const {
     openAddContentSidebar,
-    openInfoSidebar,
+    openLibrarySidebar,
     closeLibrarySidebar,
     sidebarComponentInfo,
   } = useSidebarContext();
@@ -60,13 +56,19 @@ const HeaderActions = () => {
 
   const infoSidebarIsOpen = sidebarComponentInfo?.type === SidebarBodyComponentId.Info;
 
-  const handleOnClickInfoSidebar = () => {
+  const { navigateTo } = useLibraryRoutes();
+  const handleOnClickInfoSidebar = useCallback(() => {
     if (infoSidebarIsOpen) {
       closeLibrarySidebar();
     } else {
-      openInfoSidebar();
+      openLibrarySidebar();
     }
-  };
+
+    if (!componentPickerMode) {
+      // Reset URL to library home
+      navigateTo();
+    }
+  }, [navigateTo, sidebarComponentInfo, closeLibrarySidebar, openLibrarySidebar]);
 
   return (
     <div className="header-actions">
@@ -124,8 +126,6 @@ interface LibraryAuthoringPageProps {
 
 const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPageProps) => {
   const intl = useIntl();
-  const location = useLocation();
-  const navigate = useNavigate();
 
   const {
     isLoadingPage: isLoadingStudioHome,
@@ -139,29 +139,41 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
     libraryData,
     isLoadingLibraryData,
     showOnlyPublished,
+    componentId,
+    collectionId,
   } = useLibraryContext();
   const { openInfoSidebar, sidebarComponentInfo } = useSidebarContext();
 
+  const { insideCollections, insideComponents, navigateTo } = useLibraryRoutes();
+
+  // The activeKey determines the currently selected tab.
   const [activeKey, setActiveKey] = useState<ContentType>(ContentType.home);
+  const getActiveKey = () => {
+    if (insideCollections) {
+      return ContentType.collections;
+    }
+    if (insideComponents) {
+      return ContentType.components;
+    }
+    return ContentType.home;
+  };
 
   useEffect(() => {
-    const currentPath = location.pathname.split('/').pop();
+    const contentType = getActiveKey();
 
-    if (componentPickerMode || currentPath === libraryId || currentPath === '') {
+    if (componentPickerMode) {
       setActiveKey(ContentType.home);
-    } else if (currentPath && currentPath in ContentType) {
-      setActiveKey(ContentType[currentPath] || ContentType.home);
+    } else {
+      setActiveKey(contentType);
     }
   }, []);
 
   useEffect(() => {
     if (!componentPickerMode) {
-      openInfoSidebar();
+      openInfoSidebar(componentId, collectionId);
     }
   }, []);
 
-  const [searchParams] = useSearchParams();
-
   if (isLoadingLibraryData) {
     return <Loading />;
   }
@@ -181,10 +193,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
   const handleTabChange = (key: ContentType) => {
     setActiveKey(key);
     if (!componentPickerMode) {
-      navigate({
-        pathname: key,
-        search: searchParams.toString(),
-      });
+      navigateTo({ contentType: key });
     }
   };
 

src/library-authoring/LibraryContent.tsx

@@ -6,15 +6,10 @@ import { useLibraryContext } from './common/context/LibraryContext';
 import { useSidebarContext } from './common/context/SidebarContext';
 import CollectionCard from './components/CollectionCard';
 import ComponentCard from './components/ComponentCard';
+import { ContentType } from './routes';
 import { useLoadOnScroll } from '../hooks';
 import messages from './collections/messages';
 
-export enum ContentType {
-  home = '',
-  components = 'components',
-  collections = 'collections',
-}
-
 /**
  * Library Content to show content grid
  *

src/library-authoring/LibraryLayout.tsx

@@ -1,10 +1,12 @@
+import { useCallback } from 'react';
 import {
   Route,
   Routes,
   useParams,
-  useMatch,
+  useLocation,
 } from 'react-router-dom';
 
+import { ROUTES } from './routes';
 import LibraryAuthoringPage from './LibraryAuthoringPage';
 import { LibraryProvider } from './common/context/LibraryContext';
 import { SidebarProvider } from './common/context/SidebarContext';
@@ -16,43 +18,57 @@ import { ComponentEditorModal } from './components/ComponentEditorModal';
 const LibraryLayout = () => {
   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 (
+  const location = useLocation();
+  const context = useCallback((childPage) => (
     <LibraryProvider
-      /** We need to pass the collectionId as key to the LibraryProvider to force a re-render
-      * when we navigate to a collection page. */
-      key={collectionId}
+      /** We need to pass the pathname as key to the LibraryProvider to force a
+       * re-render when we navigate to a new path or page. */
+      key={location.pathname}
       libraryId={libraryId}
-      collectionId={collectionId}
       /** The component picker modal to use. We need to pass it as a reference instead of
        * directly importing it to avoid the import cycle:
        * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
        * Sidebar > AddContentContainer > ComponentPicker */
       componentPicker={ComponentPicker}
     >
       <SidebarProvider>
-        <Routes>
-          <Route
-            path="collection/:collectionId"
-            element={<LibraryCollectionPage />}
-          />
-          <Route
-            path="*"
-            element={<LibraryAuthoringPage />}
-          />
-        </Routes>
-        <CreateCollectionModal />
-        <ComponentEditorModal />
+        <>
+          {childPage}
+          <CreateCollectionModal />
+          <ComponentEditorModal />
+        </>
       </SidebarProvider>
     </LibraryProvider>
+  ), [location.pathname]);
+
+  return (
+    <Routes>
+      <Route
+        path={ROUTES.COMPONENTS}
+        element={context(<LibraryAuthoringPage />)}
+      />
+      <Route
+        path={ROUTES.COLLECTIONS}
+        element={context(<LibraryAuthoringPage />)}
+      />
+      <Route
+        path={ROUTES.COMPONENT}
+        element={context(<LibraryAuthoringPage />)}
+      />
+      <Route
+        path={ROUTES.COLLECTION}
+        element={context(<LibraryCollectionPage />)}
+      />
+      <Route
+        path={ROUTES.HOME}
+        element={context(<LibraryAuthoringPage />)}
+      />
+    </Routes>
   );
 };
 

src/library-authoring/add-content/AddContentContainer.test.tsx

@@ -25,17 +25,13 @@ jest.mock('frontend-components-tinymce-advanced-plugins', () => ({ a11ycheckerCs
 
 const { libraryId } = mockContentLibrary;
 const render = (collectionId?: string) => {
-  const params: { libraryId: string, collectionId?: string } = { libraryId };
-  if (collectionId) {
-    params.collectionId = collectionId;
-  }
+  const params: { libraryId: string, collectionId?: string } = { libraryId, collectionId };
   return baseRender(<AddContentContainer />, {
-    path: '/library/:libraryId/*',
+    path: '/library/:libraryId/:collectionId?',
     params,
     extraWrapper: ({ children }) => (
       <LibraryProvider
         libraryId={libraryId}
-        collectionId={collectionId}
       >
         { children }
         <ComponentEditorModal />

src/library-authoring/add-content/PickLibraryContentModal.test.tsx

@@ -34,7 +34,6 @@ const render = () => baseRender(<PickLibraryContentModal isOpen onClose={onClose
   extraWrapper: ({ children }) => (
     <LibraryProvider
       libraryId={libraryId}
-      collectionId="collectionId"
       componentPicker={ComponentPicker}
     >
       {children}