refactor: create SidebarContext

src/library-authoring/LibraryAuthoringPage.tsx

@@ -37,19 +37,26 @@ import {
 } from '../search-manager';
 import LibraryContent, { ContentType } from './LibraryContent';
 import { LibrarySidebar } from './library-sidebar';
-import { SidebarBodyComponentId, useLibraryContext } from './common/context/LibraryContext';
 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 {
     openAddContentSidebar,
     openInfoSidebar,
     closeLibrarySidebar,
     sidebarComponentInfo,
-    readOnly,
-  } = useLibraryContext();
+  } = useSidebarContext();
+
   const { componentPickerMode } = useComponentPickerContext();
 
   const infoSidebarIsOpen = () => (
@@ -134,10 +141,13 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
     libraryData,
     isLoadingLibraryData,
     showOnlyPublished,
-    sidebarComponentInfo,
-    openInfoSidebar,
   } = useLibraryContext();
 
+  const {
+    openInfoSidebar,
+    sidebarComponentInfo,
+  } = useSidebarContext();
+
   const {
     componentPickerMode,
     restrictToLibrary,

src/library-authoring/LibraryContent.tsx

@@ -3,6 +3,7 @@ import { LoadingSpinner } from '../generic/Loading';
 import { useSearchContext } from '../search-manager';
 import { NoComponents, NoSearchResults } from './EmptyStates';
 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

@@ -7,6 +7,7 @@ import {
 
 import LibraryAuthoringPage from './LibraryAuthoringPage';
 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';
@@ -27,28 +28,30 @@ const LibraryLayout = () => {
 
   return (
     <LibraryProvider
-      key={collectionId}
+      key={collectionId} // TODO: Check why this is needed
       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 */
+        /** 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}
     >
-      <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 />
+        <LibraryTeamModal />
+      </SidebarProvider>
     </LibraryProvider>
   );
 };

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

@@ -10,7 +10,8 @@ import {
   waitFor,
   within,
 } from '../../testUtils';
-import { LibraryProvider, SidebarBodyComponentId } from '../common/context/LibraryContext';
+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

@@ -7,6 +7,7 @@ import { getItemIcon } from '../../generic/block-type-utils';
 import { ToastContext } from '../../generic/toast-context';
 import { BlockTypeLabel, useGetBlockTypes } from '../../search-manager';
 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

@@ -7,31 +7,28 @@ import {
 } from '@openedx/paragon';
 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/LibraryContext';
-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,
-    setSidebarCurrentTab,
-  } = useLibraryContext();
   const { componentPickerMode } = useComponentPickerContext();
+  const { libraryId, collectionId, setCollectionId } = useLibraryContext();
+  const { sidebarComponentInfo, setSidebarCurrentTab } = useSidebarContext();
 
   const tab: CollectionInfoTab = (
     sidebarComponentInfo?.currentTab && isCollectionInfoTab(sidebarComponentInfo.currentTab)

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

@@ -8,7 +8,8 @@ import {
   screen,
   waitFor,
 } from '../../testUtils';
-import { LibraryProvider, SidebarBodyComponentId } from '../common/context/LibraryContext';
+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';
@@ -30,12 +31,15 @@ const render = (libraryId: string = mockLibraryId) => baseRender(<CollectionInfo
   extraWrapper: ({ children }) => (
     <LibraryProvider
       libraryId={libraryId}
-      initialSidebarComponentInfo={{
-        id: collectionId,
-        type: SidebarBodyComponentId.CollectionInfo,
-      }}
     >
-      { children }
+      <SidebarProvider
+        initialSidebarComponentInfo={{
+          id: collectionId,
+          type: SidebarBodyComponentId.CollectionInfo,
+        }}
+      >
+        { children }
+      </SidebarProvider>
     </LibraryProvider>
   ),
 });

src/library-authoring/collections/CollectionInfoHeader.tsx

@@ -10,18 +10,16 @@ import { Edit } from '@openedx/paragon/icons';
 
 import { ToastContext } from '../../generic/toast-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/LibraryContext';
+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

src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -29,16 +29,15 @@ import {
 import { useCollection, useContentLibrary } from '../data/apiHooks';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
 import messages from './messages';
 import { LibrarySidebar } from '../library-sidebar';
 import LibraryCollectionComponents from './LibraryCollectionComponents';
 
 const HeaderActions = () => {
   const intl = useIntl();
-  const {
-    openAddContentSidebar,
-    readOnly,
-  } = useLibraryContext();
+  const { readOnly } = useLibraryContext();
+  const { openAddContentSidebar } = useSidebarContext();
 
   if (readOnly) {
     return null;
@@ -67,8 +66,8 @@ const SubHeaderTitle = ({
 }) => {
   const intl = useIntl();
 
-  const { readOnly } = useLibraryContext();
   const { componentPickerMode } = useComponentPickerContext();
+  const { readOnly } = useLibraryContext();
 
   const showReadOnlyBadge = readOnly && !componentPickerMode;
 
@@ -105,13 +104,9 @@ const LibraryCollectionPage = () => {
     throw new Error('Rendered without collectionId or libraryId URL parameter');
   }
 
-  const {
-    sidebarComponentInfo,
-    openCollectionInfoSidebar,
-    showOnlyPublished,
-    setCollectionId,
-  } = useLibraryContext();
   const { componentPickerMode } = useComponentPickerContext();
+  const { showOnlyPublished, setCollectionId } = useLibraryContext();
+  const { sidebarComponentInfo, openCollectionInfoSidebar } = useSidebarContext();
 
   const {
     data: collectionData,