refactor: split up library context (#1539)

Split the library context into smaller contexts:

* LibraryContext
* ComponentPickerContext
* SidebarContext

src/library-authoring/EmptyStates.tsx

@@ -6,7 +6,7 @@ import {
 import { Add } from '@openedx/paragon/icons';
 import { ClearFiltersButton } from '../search-manager';
 import messages from './messages';
-import { useLibraryContext } from './common/context';
+import { useLibraryContext } from './common/context/LibraryContext';
 
 export const NoComponents = ({
   infoText = messages.noComponents,

src/library-authoring/LibraryAuthoringPage.tsx

@@ -37,19 +37,25 @@ import {
 } from '../search-manager';
 import LibraryContent, { ContentType } from './LibraryContent';
 import { LibrarySidebar } from './library-sidebar';
-import { SidebarBodyComponentId, useLibraryContext } from './common/context';
+import { useComponentPickerContext } from './common/context/ComponentPickerContext';
+import { useLibraryContext } from './common/context/LibraryContext';
+import { SidebarBodyComponentId, useSidebarContext } from './common/context/SidebarContext';
+
 import messages from './messages';
 
 const HeaderActions = () => {
   const intl = useIntl();
+
+  const { readOnly } = useLibraryContext();
+
   const {
-    componentPickerMode,
     openAddContentSidebar,
     openInfoSidebar,
     closeLibrarySidebar,
     sidebarComponentInfo,
-    readOnly,
-  } = useLibraryContext();
+  } = useSidebarContext();
+
+  const { componentPickerMode } = useComponentPickerContext();
 
   const infoSidebarIsOpen = () => (
     sidebarComponentInfo?.type === SidebarBodyComponentId.Info
@@ -94,7 +100,8 @@ const HeaderActions = () => {
 const SubHeaderTitle = ({ title }: { title: string }) => {
   const intl = useIntl();
 
-  const { readOnly, componentPickerMode } = useLibraryContext();
+  const { readOnly } = useLibraryContext();
+  const { componentPickerMode } = useComponentPickerContext();
 
   const showReadOnlyBadge = readOnly && !componentPickerMode;
 
@@ -127,16 +134,14 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
     librariesV2Enabled,
   } = useStudioHome();
 
+  const { componentPickerMode, restrictToLibrary } = useComponentPickerContext();
   const {
     libraryId,
     libraryData,
     isLoadingLibraryData,
-    componentPickerMode,
-    restrictToLibrary,
     showOnlyPublished,
-    sidebarComponentInfo,
-    openInfoSidebar,
   } = useLibraryContext();
+  const { openInfoSidebar, sidebarComponentInfo } = useSidebarContext();
 
   const [activeKey, setActiveKey] = useState<ContentType | undefined>(ContentType.home);
 

src/library-authoring/LibraryContent.test.tsx

@@ -9,7 +9,7 @@ import {
 import { getContentSearchConfigUrl } from '../search-manager/data/api';
 import { mockContentLibrary } from './data/api.mocks';
 import mockEmptyResult from '../search-modal/__mocks__/empty-search-result.json';
-import { LibraryProvider } from './common/context';
+import { LibraryProvider } from './common/context/LibraryContext';
 import LibraryContent from './LibraryContent';
 import { libraryComponentsMock } from './__mocks__';
 
@@ -56,7 +56,9 @@ const clipboardBroadcastChannelMock = {
 
 const withLibraryId = (libraryId: string) => ({
   extraWrapper: ({ children }: { children: React.ReactNode }) => (
-    <LibraryProvider libraryId={libraryId}>{children}</LibraryProvider>
+    <LibraryProvider libraryId={libraryId}>
+      {children}
+    </LibraryProvider>
   ),
 });
 

src/library-authoring/LibraryContent.tsx

@@ -2,7 +2,8 @@ import { useEffect } from 'react';
 import { LoadingSpinner } from '../generic/Loading';
 import { useSearchContext } from '../search-manager';
 import { NoComponents, NoSearchResults } from './EmptyStates';
-import { useLibraryContext } from './common/context';
+import { useLibraryContext } from './common/context/LibraryContext';
+import { useSidebarContext } from './common/context/SidebarContext';
 import CollectionCard from './components/CollectionCard';
 import ComponentCard from './components/ComponentCard';
 import { useLoadOnScroll } from '../hooks';
@@ -37,7 +38,8 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
     isFiltered,
     usageKey,
   } = useSearchContext();
-  const { openAddContentSidebar, openComponentInfoSidebar, openCreateCollectionModal } = useLibraryContext();
+  const { openCreateCollectionModal } = useLibraryContext();
+  const { openAddContentSidebar, openComponentInfoSidebar } = useSidebarContext();
 
   useEffect(() => {
     if (usageKey) {

src/library-authoring/LibraryLayout.tsx

@@ -6,9 +6,9 @@ import {
 } from 'react-router-dom';
 
 import LibraryAuthoringPage from './LibraryAuthoringPage';
-import { LibraryProvider } from './common/context';
+import { LibraryProvider } from './common/context/LibraryContext';
+import { SidebarProvider } from './common/context/SidebarContext';
 import { CreateCollectionModal } from './create-collection';
-import { LibraryTeamModal } from './library-team';
 import LibraryCollectionPage from './collections/LibraryCollectionPage';
 import { ComponentPicker } from './component-picker';
 import { ComponentEditorModal } from './components/ComponentEditorModal';
@@ -27,6 +27,8 @@ const LibraryLayout = () => {
 
   return (
     <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}
       libraryId={libraryId}
       collectionId={collectionId}
@@ -36,19 +38,20 @@ const LibraryLayout = () => {
        * Sidebar > AddContentContainer > ComponentPicker */
       componentPicker={ComponentPicker}
     >
-      <Routes>
-        <Route
-          path="collection/:collectionId"
-          element={<LibraryCollectionPage />}
-        />
-        <Route
-          path="*"
-          element={<LibraryAuthoringPage />}
-        />
-      </Routes>
-      <CreateCollectionModal />
-      <ComponentEditorModal />
-      <LibraryTeamModal />
+      <SidebarProvider>
+        <Routes>
+          <Route
+            path="collection/:collectionId"
+            element={<LibraryCollectionPage />}
+          />
+          <Route
+            path="*"
+            element={<LibraryAuthoringPage />}
+          />
+        </Routes>
+        <CreateCollectionModal />
+        <ComponentEditorModal />
+      </SidebarProvider>
     </LibraryProvider>
   );
 };

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

@@ -12,7 +12,7 @@ import {
   getContentLibraryApiUrl, getCreateLibraryBlockUrl, getLibraryCollectionComponentApiUrl, getLibraryPasteClipboardUrl,
 } from '../data/api';
 import { mockBroadcastChannel, mockClipboardEmpty, mockClipboardHtml } from '../../generic/data/api.mock';
-import { LibraryProvider } from '../common/context';
+import { LibraryProvider } from '../common/context/LibraryContext';
 import AddContentContainer from './AddContentContainer';
 import { ComponentEditorModal } from '../components/ComponentEditorModal';
 import editorCmsApi from '../../editors/data/services/cms/api';

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

@@ -25,7 +25,7 @@ import { ToastContext } from '../../generic/toast-context';
 import { useCopyToClipboard } from '../../generic/clipboard';
 import { getCanEdit } from '../../course-unit/data/selectors';
 import { useCreateLibraryBlock, useLibraryPasteClipboard, useAddComponentsToCollection } from '../data/apiHooks';
-import { useLibraryContext } from '../common/context';
+import { useLibraryContext } from '../common/context/LibraryContext';
 import { canEditComponent } from '../components/ComponentEditorModal';
 import { PickLibraryContentModal } from './PickLibraryContentModal';
 

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

@@ -9,7 +9,7 @@ import {
 import { studioHomeMock } from '../../studio-home/__mocks__';
 import { getStudioHomeApiUrl } from '../../studio-home/data/api';
 import mockResult from '../__mocks__/library-search.json';
-import { LibraryProvider } from '../common/context';
+import { LibraryProvider } from '../common/context/LibraryContext';
 import { ComponentPicker } from '../component-picker';
 import * as api from '../data/api';
 import {

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

@@ -3,7 +3,8 @@ import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { ActionRow, Button, StandardModal } from '@openedx/paragon';
 
 import { ToastContext } from '../../generic/toast-context';
-import { type SelectedComponent, useLibraryContext } from '../common/context';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import type { SelectedComponent } from '../common/context/ComponentPickerContext';
 import { useAddComponentsToCollection } from '../data/apiHooks';
 import messages from './messages';
 

src/library-authoring/collections/CollectionDetails.test.tsx

@@ -10,7 +10,8 @@ import {
   waitFor,
   within,
 } from '../../testUtils';
-import { LibraryProvider, SidebarBodyComponentId } from '../common/context';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
 import * as api from '../data/api';
 import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
 import CollectionDetails from './CollectionDetails';
@@ -30,14 +31,15 @@ const library = mockContentLibrary.libraryData;
 
 const render = () => baseRender(<CollectionDetails />, {
   extraWrapper: ({ children }) => (
-    <LibraryProvider
-      libraryId={library.id}
-      initialSidebarComponentInfo={{
-        id: collectionId,
-        type: SidebarBodyComponentId.CollectionInfo,
-      }}
-    >
-      { children }
+    <LibraryProvider libraryId={library.id}>
+      <SidebarProvider
+        initialSidebarComponentInfo={{
+          id: collectionId,
+          type: SidebarBodyComponentId.CollectionInfo,
+        }}
+      >
+        { children }
+      </SidebarProvider>
     </LibraryProvider>
   ),
 });

src/library-authoring/collections/CollectionDetails.tsx

@@ -6,7 +6,8 @@ import classNames from 'classnames';
 import { getItemIcon } from '../../generic/block-type-utils';
 import { ToastContext } from '../../generic/toast-context';
 import { BlockTypeLabel, useGetBlockTypes } from '../../search-manager';
-import { useLibraryContext } from '../common/context';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
 import { useCollection, useUpdateCollection } from '../data/apiHooks';
 import HistoryWidget from '../generic/history-widget';
 import messages from './messages';
@@ -37,7 +38,8 @@ const BlockCount = ({
 };
 
 const CollectionStatsWidget = () => {
-  const { libraryId, sidebarComponentInfo } = useLibraryContext();
+  const { libraryId } = useLibraryContext();
+  const { sidebarComponentInfo } = useSidebarContext();
   const collectionId = sidebarComponentInfo?.id;
 
   const { data: blockTypes } = useGetBlockTypes([
@@ -97,11 +99,8 @@ const CollectionStatsWidget = () => {
 const CollectionDetails = () => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
-  const {
-    libraryId,
-    sidebarComponentInfo,
-    readOnly,
-  } = useLibraryContext();
+  const { libraryId, readOnly } = useLibraryContext();
+  const { sidebarComponentInfo } = useSidebarContext();
 
   const collectionId = sidebarComponentInfo?.id;
   // istanbul ignore next: This should never happen

src/library-authoring/collections/CollectionInfo.tsx

@@ -8,30 +8,27 @@ import {
 import { useCallback } from 'react';
 import { useNavigate, useMatch } from 'react-router-dom';
 
+import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import { useLibraryContext } from '../common/context/LibraryContext';
 import {
-  useLibraryContext,
   type CollectionInfoTab,
   COLLECTION_INFO_TABS,
-  isCollectionInfoTab,
   COMPONENT_INFO_TABS,
-} from '../common/context';
-import CollectionDetails from './CollectionDetails';
-import messages from './messages';
+  isCollectionInfoTab,
+  useSidebarContext,
+} from '../common/context/SidebarContext';
 import { ContentTagsDrawer } from '../../content-tags-drawer';
 import { buildCollectionUsageKey } from '../../generic/key-utils';
+import CollectionDetails from './CollectionDetails';
+import messages from './messages';
 
 const CollectionInfo = () => {
   const intl = useIntl();
   const navigate = useNavigate();
 
-  const {
-    libraryId,
-    collectionId,
-    setCollectionId,
-    sidebarComponentInfo,
-    componentPickerMode,
-    setSidebarCurrentTab,
-  } = useLibraryContext();
+  const { componentPickerMode } = useComponentPickerContext();
+  const { libraryId, collectionId, setCollectionId } = useLibraryContext();
+  const { sidebarComponentInfo, setSidebarCurrentTab } = useSidebarContext();
 
   const tab: CollectionInfoTab = (
     sidebarComponentInfo?.currentTab && isCollectionInfoTab(sidebarComponentInfo.currentTab)
@@ -43,7 +40,7 @@ const CollectionInfo = () => {
     throw new Error('sidebarCollectionId is required');
   }
 
-  const url = `/library/${libraryId}/collection/${sidebarCollectionId}/`;
+  const url = `/library/${libraryId}/collection/${sidebarCollectionId}`;
   const urlMatch = useMatch(url);
 
   const showOpenCollectionButton = !urlMatch && collectionId !== sidebarCollectionId;

src/library-authoring/collections/CollectionInfoHeader.test.tsx

@@ -8,7 +8,8 @@ import {
   screen,
   waitFor,
 } from '../../testUtils';
-import { LibraryProvider, SidebarBodyComponentId } from '../common/context';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
 import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
 import * as api from '../data/api';
 import CollectionInfoHeader from './CollectionInfoHeader';
@@ -28,14 +29,15 @@ const { collectionId } = mockGetCollectionMetadata;
 
 const render = (libraryId: string = mockLibraryId) => baseRender(<CollectionInfoHeader />, {
   extraWrapper: ({ children }) => (
-    <LibraryProvider
-      libraryId={libraryId}
-      initialSidebarComponentInfo={{
-        id: collectionId,
-        type: SidebarBodyComponentId.CollectionInfo,
-      }}
-    >
-      { children }
+    <LibraryProvider libraryId={libraryId}>
+      <SidebarProvider
+        initialSidebarComponentInfo={{
+          id: collectionId,
+          type: SidebarBodyComponentId.CollectionInfo,
+        }}
+      >
+        { children }
+      </SidebarProvider>
     </LibraryProvider>
   ),
 });

src/library-authoring/collections/CollectionInfoHeader.tsx

@@ -9,19 +9,17 @@ import {
 import { Edit } from '@openedx/paragon/icons';
 
 import { ToastContext } from '../../generic/toast-context';
-import { useLibraryContext } from '../common/context';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
 import { useCollection, useUpdateCollection } from '../data/apiHooks';
 import messages from './messages';
 
 const CollectionInfoHeader = () => {
   const intl = useIntl();
   const [inputIsActive, setIsActive] = useState(false);
 
-  const {
-    libraryId,
-    sidebarComponentInfo,
-    readOnly,
-  } = useLibraryContext();
+  const { libraryId, readOnly } = useLibraryContext();
+  const { sidebarComponentInfo } = useSidebarContext();
 
   const collectionId = sidebarComponentInfo?.id;
   // istanbul ignore if: this should never happen

src/library-authoring/collections/LibraryCollectionComponents.tsx

@@ -2,12 +2,12 @@ import { Stack } from '@openedx/paragon';
 import { NoComponents, NoSearchResults } from '../EmptyStates';
 import { useSearchContext } from '../../search-manager';
 import messages from './messages';
-import { useLibraryContext } from '../common/context';
+import { useSidebarContext } from '../common/context/SidebarContext';
 import LibraryContent, { ContentType } from '../LibraryContent';
 
 const LibraryCollectionComponents = () => {
   const { totalHits: componentCount, isFiltered } = useSearchContext();
-  const { openAddContentSidebar } = useLibraryContext();
+  const { openAddContentSidebar } = useSidebarContext();
 
   if (componentCount === 0) {
     return isFiltered