From 9062b528370a91038c785f7861fa6b4ae5c7da1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Thu, 10 Oct 2024 14:59:13 -0300
Subject: [PATCH] refactor: change context state names

---
 .../LibraryAuthoringPage.tsx                  |  6 +-
 src/library-authoring/LibraryLayout.tsx       |  4 +-
 .../collections/CollectionDetails.test.tsx    |  2 +-
 .../collections/CollectionDetails.tsx         |  4 +-
 .../collections/CollectionInfo.tsx            | 17 +++--
 .../collections/CollectionInfoHeader.test.tsx |  2 +-
 .../collections/CollectionInfoHeader.tsx      |  2 +-
 .../collections/LibraryCollectionPage.tsx     |  4 +-
 src/library-authoring/common/context.tsx      | 70 +++++++++++--------
 .../component-info/ComponentDetails.test.tsx  |  2 +-
 .../component-info/ComponentDetails.tsx       |  2 +-
 .../component-info/ComponentInfo.test.tsx     | 21 +++---
 .../component-info/ComponentInfo.tsx          |  2 +-
 .../ComponentInfoHeader.test.tsx              |  2 +-
 .../component-info/ComponentInfoHeader.tsx    |  2 +-
 .../ComponentManagement.test.tsx              |  2 +-
 .../component-info/ComponentManagement.tsx    |  2 +-
 .../component-info/ComponentPreview.test.tsx  | 29 ++++++--
 .../component-info/ComponentPreview.tsx       |  2 +-
 .../components/CollectionCard.tsx             |  6 +-
 20 files changed, 111 insertions(+), 72 deletions(-)

diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
index d4f0583f6..61f035689 100644
--- a/src/library-authoring/LibraryAuthoringPage.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -70,10 +70,6 @@ const HeaderActions = () => {
     readOnly,
   } = useLibraryContext();
 
-  if (!readOnly) {
-    return null;
-  }
-
   const infoSidebarIsOpen = () => (
     sidebarBodyComponent === SidebarBodyComponentId.Info
   );
@@ -105,7 +101,7 @@ const HeaderActions = () => {
           iconBefore={Add}
           variant="primary rounded-0"
           onClick={openAddContentSidebar}
-          disabled={!canEditLibrary}
+          disabled={readOnly}
         >
           {intl.formatMessage(messages.newContentButton)}
         </Button>
diff --git a/src/library-authoring/LibraryLayout.tsx b/src/library-authoring/LibraryLayout.tsx
index 78d60674a..a37d3d040 100644
--- a/src/library-authoring/LibraryLayout.tsx
+++ b/src/library-authoring/LibraryLayout.tsx
@@ -11,7 +11,7 @@ import LibraryCollectionPage from './collections/LibraryCollectionPage';
 import { ComponentEditorModal } from './components/ComponentEditorModal';
 
 const LibraryLayout = () => {
-  const { libraryId } = useParams();
+  const { libraryId, collectionId } = useParams();
 
   if (libraryId === undefined) {
     // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
@@ -19,7 +19,7 @@ const LibraryLayout = () => {
   }
 
   return (
-    <LibraryProvider libraryId={libraryId}>
+    <LibraryProvider libraryId={libraryId} collectionId={collectionId}>
       <Routes>
         <Route
           path="collection/:collectionId"
diff --git a/src/library-authoring/collections/CollectionDetails.test.tsx b/src/library-authoring/collections/CollectionDetails.test.tsx
index f0a099168..6b33d2dfb 100644
--- a/src/library-authoring/collections/CollectionDetails.test.tsx
+++ b/src/library-authoring/collections/CollectionDetails.test.tsx
@@ -30,7 +30,7 @@ const library = mockContentLibrary.libraryData;
 
 const render = () => baseRender(<CollectionDetails />, {
   extraWrapper: ({ children }) => (
-    <LibraryProvider libraryId={library.id} collectionId={collectionId}>
+    <LibraryProvider libraryId={library.id} sidebarCollectionId={collectionId}>
       { children }
     </LibraryProvider>
   ),
diff --git a/src/library-authoring/collections/CollectionDetails.tsx b/src/library-authoring/collections/CollectionDetails.tsx
index 7a63447dd..73f9f6959 100644
--- a/src/library-authoring/collections/CollectionDetails.tsx
+++ b/src/library-authoring/collections/CollectionDetails.tsx
@@ -37,7 +37,7 @@ const BlockCount = ({
 };
 
 const CollectionStatsWidget = () => {
-  const { libraryId, currentCollectionId: collectionId } = useLibraryContext();
+  const { libraryId, sidebarCollectionId: collectionId } = useLibraryContext();
 
   const { data: blockTypes } = useGetBlockTypes([
     `context_key = "${libraryId}"`,
@@ -98,7 +98,7 @@ const CollectionDetails = () => {
   const { showToast } = useContext(ToastContext);
   const {
     libraryId,
-    currentCollectionId: collectionId,
+    sidebarCollectionId: collectionId,
     readOnly,
   } = useLibraryContext();
 
diff --git a/src/library-authoring/collections/CollectionInfo.tsx b/src/library-authoring/collections/CollectionInfo.tsx
index a7f4f8df4..03e7fe6b4 100644
--- a/src/library-authoring/collections/CollectionInfo.tsx
+++ b/src/library-authoring/collections/CollectionInfo.tsx
@@ -5,7 +5,8 @@ import {
   Tab,
   Tabs,
 } from '@openedx/paragon';
-import { Link, useMatch } from 'react-router-dom';
+import { useCallback } from 'react';
+import { useNavigate, useMatch } from 'react-router-dom';
 
 import { useLibraryContext } from '../common/context';
 import CollectionDetails from './CollectionDetails';
@@ -13,12 +14,21 @@ import messages from './messages';
 
 const CollectionInfo = () => {
   const intl = useIntl();
+  const navigate = useNavigate();
 
-  const { libraryId, currentCollectionId: collectionId } = useLibraryContext();
+  const { libraryId, sidebarCollectionId: collectionId, componentPickerMode } = useLibraryContext();
 
   const url = `/library/${libraryId}/collection/${collectionId}/`;
   const urlMatch = useMatch(url);
 
+  const handleOpenCollection = useCallback(() => {
+    if (!componentPickerMode) {
+      navigate(url);
+    } else {
+      // FIXME: Set state here
+    }
+  }, [componentPickerMode, url]);
+
   if (!collectionId) {
     return null;
   }
@@ -28,8 +38,7 @@ const CollectionInfo = () => {
       {!urlMatch && (
         <div className="d-flex flex-wrap">
           <Button
-            as={Link}
-            to={url}
+            onClick={handleOpenCollection}
             variant="outline-primary"
             className="m-1 text-nowrap flex-grow-1"
             disabled={!!urlMatch}
diff --git a/src/library-authoring/collections/CollectionInfoHeader.test.tsx b/src/library-authoring/collections/CollectionInfoHeader.test.tsx
index f783746fe..6f0cf35c2 100644
--- a/src/library-authoring/collections/CollectionInfoHeader.test.tsx
+++ b/src/library-authoring/collections/CollectionInfoHeader.test.tsx
@@ -28,7 +28,7 @@ const { collectionId } = mockGetCollectionMetadata;
 
 const render = (libraryId: string = mockLibraryId) => baseRender(<CollectionInfoHeader />, {
   extraWrapper: ({ children }) => (
-    <LibraryProvider libraryId={libraryId} collectionId={collectionId}>
+    <LibraryProvider libraryId={libraryId} sidebarCollectionId={collectionId}>
       { children }
     </LibraryProvider>
   ),
diff --git a/src/library-authoring/collections/CollectionInfoHeader.tsx b/src/library-authoring/collections/CollectionInfoHeader.tsx
index ed41556a8..58db6c0e3 100644
--- a/src/library-authoring/collections/CollectionInfoHeader.tsx
+++ b/src/library-authoring/collections/CollectionInfoHeader.tsx
@@ -19,7 +19,7 @@ const CollectionInfoHeader = () => {
 
   const {
     libraryId,
-    currentCollectionId: collectionId,
+    sidebarCollectionId: collectionId,
     readOnly,
   } = useLibraryContext();
 
diff --git a/src/library-authoring/collections/LibraryCollectionPage.tsx b/src/library-authoring/collections/LibraryCollectionPage.tsx
index 87e5f9bea..498afce22 100644
--- a/src/library-authoring/collections/LibraryCollectionPage.tsx
+++ b/src/library-authoring/collections/LibraryCollectionPage.tsx
@@ -80,7 +80,7 @@ const SubHeaderTitle = ({
           variant="primary"
         />
       </Stack>
-      { !canEditLibrary && (
+      {!canEditLibrary && (
         <div>
           <Badge variant="primary" style={{ fontSize: '50%' }}>
             {intl.formatMessage(messages.readOnlyBadge)}
@@ -194,7 +194,7 @@ const LibraryCollectionPage = () => {
         </Container>
         <StudioFooter />
       </div>
-      { !!sidebarBodyComponent && (
+      {!!sidebarBodyComponent && (
         <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">
           <LibrarySidebar />
         </div>
diff --git a/src/library-authoring/common/context.tsx b/src/library-authoring/common/context.tsx
index 2282d6b82..1b8401525 100644
--- a/src/library-authoring/common/context.tsx
+++ b/src/library-authoring/common/context.tsx
@@ -1,5 +1,10 @@
 import { useToggle } from '@openedx/paragon';
-import React from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 
 import type { ContentLibrary } from '../data/api';
 import { useContentLibrary } from '../data/apiHooks';
@@ -19,20 +24,21 @@ export interface LibraryContextData {
   isLoadingLibraryData: boolean;
   // 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;
   openAddContentSidebar: () => void;
   openInfoSidebar: () => void;
   openComponentInfoSidebar: (usageKey: string) => void;
-  currentComponentUsageKey?: string;
+  sidebarComponentUsageKey?: string;
   // "Create New Collection" modal
   isCreateCollectionModalOpen: boolean;
   openCreateCollectionModal: () => void;
   closeCreateCollectionModal: () => void;
   // Current collection
   openCollectionInfoSidebar: (collectionId: string) => void;
-  currentCollectionId?: string;
+  sidebarCollectionId?: string;
   // Editor modal - for editing some component
   /** If the editor is open and the user is editing some component, this is its usageKey */
   componentBeingEdited: string | undefined;
@@ -53,9 +59,10 @@ const LibraryContext = React.createContext<LibraryContextData | undefined>(undef
 interface LibraryProviderProps {
   children?: React.ReactNode;
   libraryId: string;
-  componentPickerMode?: boolean;
   collectionId?: string;
-  componentUsageKey?: string;
+  componentPickerMode?: boolean;
+  sidebarCollectionId?: string;
+  sidebarComponentUsageKey?: string;
 }
 
 /**
@@ -64,46 +71,49 @@ interface LibraryProviderProps {
 export const LibraryProvider = ({
   children,
   libraryId,
-  componentPickerMode = false,
   collectionId,
-  componentUsageKey,
+  componentPickerMode = false,
+  sidebarCollectionId: sideBarCollectionIdProp,
+  sidebarComponentUsageKey: sidebarComponentUsageKeyProp,
 }: LibraryProviderProps) => {
-  const [sidebarBodyComponent, setSidebarBodyComponent] = React.useState<SidebarBodyComponentId | null>(null);
-  const [currentComponentUsageKey, setCurrentComponentUsageKey] = React.useState<string | undefined>(componentUsageKey);
-  const [currentCollectionId, setcurrentCollectionId] = React.useState<string | undefined>(collectionId);
+  const [sidebarBodyComponent, setSidebarBodyComponent] = useState<SidebarBodyComponentId | null>(null);
+  const [sidebarComponentUsageKey, setSidebarComponentUsageKey] = useState<string | undefined>(
+    sidebarComponentUsageKeyProp,
+  );
+  const [sidebarCollectionId, setSidebarCollectionId] = useState<string | undefined>(sideBarCollectionIdProp);
   const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false);
-  const [componentBeingEdited, openComponentEditor] = React.useState<string | undefined>();
-  const closeComponentEditor = React.useCallback(() => openComponentEditor(undefined), []);
+  const [componentBeingEdited, openComponentEditor] = useState<string | undefined>();
+  const closeComponentEditor = useCallback(() => openComponentEditor(undefined), []);
 
-  const resetSidebar = React.useCallback(() => {
-    setCurrentComponentUsageKey(undefined);
-    setcurrentCollectionId(undefined);
+  const resetSidebar = useCallback(() => {
+    setSidebarComponentUsageKey(undefined);
+    setSidebarCollectionId(undefined);
     setSidebarBodyComponent(null);
   }, []);
 
-  const closeLibrarySidebar = React.useCallback(() => {
+  const closeLibrarySidebar = useCallback(() => {
     resetSidebar();
-    setCurrentComponentUsageKey(undefined);
+    setSidebarComponentUsageKey(undefined);
   }, []);
-  const openAddContentSidebar = React.useCallback(() => {
+  const openAddContentSidebar = useCallback(() => {
     resetSidebar();
     setSidebarBodyComponent(SidebarBodyComponentId.AddContent);
   }, []);
-  const openInfoSidebar = React.useCallback(() => {
+  const openInfoSidebar = useCallback(() => {
     resetSidebar();
     setSidebarBodyComponent(SidebarBodyComponentId.Info);
   }, []);
-  const openComponentInfoSidebar = React.useCallback(
+  const openComponentInfoSidebar = useCallback(
     (usageKey: string) => {
       resetSidebar();
-      setCurrentComponentUsageKey(usageKey);
+      setSidebarComponentUsageKey(usageKey);
       setSidebarBodyComponent(SidebarBodyComponentId.ComponentInfo);
     },
     [],
   );
-  const openCollectionInfoSidebar = React.useCallback((newCollectionId: string) => {
+  const openCollectionInfoSidebar = useCallback((newCollectionId: string) => {
     resetSidebar();
-    setcurrentCollectionId(newCollectionId);
+    setSidebarCollectionId(newCollectionId);
     setSidebarBodyComponent(SidebarBodyComponentId.CollectionInfo);
   }, []);
 
@@ -111,9 +121,10 @@ export const LibraryProvider = ({
 
   const readOnly = componentPickerMode || !libraryData?.canEditLibrary;
 
-  const context = React.useMemo<LibraryContextData>(() => ({
+  const context = useMemo<LibraryContextData>(() => ({
     libraryId,
     libraryData,
+    collectionId,
     readOnly,
     isLoadingLibraryData,
     componentPickerMode,
@@ -122,17 +133,18 @@ export const LibraryProvider = ({
     openAddContentSidebar,
     openInfoSidebar,
     openComponentInfoSidebar,
-    currentComponentUsageKey,
+    sidebarComponentUsageKey,
     isCreateCollectionModalOpen,
     openCreateCollectionModal,
     closeCreateCollectionModal,
     openCollectionInfoSidebar,
-    currentCollectionId,
+    sidebarCollectionId,
     componentBeingEdited,
     openComponentEditor,
     closeComponentEditor,
   }), [
     libraryId,
+    collectionId,
     libraryData,
     readOnly,
     isLoadingLibraryData,
@@ -142,12 +154,12 @@ export const LibraryProvider = ({
     openAddContentSidebar,
     openInfoSidebar,
     openComponentInfoSidebar,
-    currentComponentUsageKey,
+    sidebarComponentUsageKey,
     isCreateCollectionModalOpen,
     openCreateCollectionModal,
     closeCreateCollectionModal,
     openCollectionInfoSidebar,
-    currentCollectionId,
+    sidebarCollectionId,
     componentBeingEdited,
     openComponentEditor,
     closeComponentEditor,
@@ -161,7 +173,7 @@ export const LibraryProvider = ({
 };
 
 export function useLibraryContext(): LibraryContextData {
-  const ctx = React.useContext(LibraryContext);
+  const ctx = useContext(LibraryContext);
   if (ctx === undefined) {
     /* istanbul ignore next */
     throw new Error('useLibraryContext() was used in a component without a <LibraryProvider> ancestor.');
diff --git a/src/library-authoring/component-info/ComponentDetails.test.tsx b/src/library-authoring/component-info/ComponentDetails.test.tsx
index d25f4ee0c..622957472 100644
--- a/src/library-authoring/component-info/ComponentDetails.test.tsx
+++ b/src/library-authoring/component-info/ComponentDetails.test.tsx
@@ -21,7 +21,7 @@ const { libraryId: mockLibraryId } = mockContentLibrary;
 
 const render = (usageKey: string) => baseRender(<ComponentDetails />, {
   extraWrapper: ({ children }) => (
-    <LibraryProvider libraryId={mockLibraryId} componentUsageKey={usageKey}>
+    <LibraryProvider libraryId={mockLibraryId} sidebarComponentUsageKey={usageKey}>
       {children}
     </LibraryProvider>
   ),
diff --git a/src/library-authoring/component-info/ComponentDetails.tsx b/src/library-authoring/component-info/ComponentDetails.tsx
index 709bb2a6a..3ce4e78b3 100644
--- a/src/library-authoring/component-info/ComponentDetails.tsx
+++ b/src/library-authoring/component-info/ComponentDetails.tsx
@@ -12,7 +12,7 @@ import messages from './messages';
 const ComponentDetails = () => {
   const intl = useIntl();
 
-  const { currentComponentUsageKey: usageKey } = useLibraryContext();
+  const { sidebarComponentUsageKey: usageKey } = useLibraryContext();
 
   // istanbul ignore if: this should never happen
   if (!usageKey) {
diff --git a/src/library-authoring/component-info/ComponentInfo.test.tsx b/src/library-authoring/component-info/ComponentInfo.test.tsx
index f200777bc..57acb2b2b 100644
--- a/src/library-authoring/component-info/ComponentInfo.test.tsx
+++ b/src/library-authoring/component-info/ComponentInfo.test.tsx
@@ -21,9 +21,14 @@ jest.mock('./ComponentManagement', () => ({
   default: () => <div>Mocked management tab</div>,
 }));
 
-const withLibraryId = (libraryId: string) => ({
+const withLibraryId = (libraryId: string, sidebarComponentUsageKey: string) => ({
   extraWrapper: ({ children }: { children: React.ReactNode }) => (
-    <LibraryProvider libraryId={libraryId}>{children}</LibraryProvider>
+    <LibraryProvider
+      libraryId={libraryId}
+      sidebarComponentUsageKey={sidebarComponentUsageKey}
+    >
+      {children}
+    </LibraryProvider>
   ),
 });
 
@@ -31,8 +36,8 @@ describe('<ComponentInfo> Sidebar', () => {
   it('should show a disabled "Edit" button when the component type is not editable', async () => {
     initializeMocks();
     render(
-      <ComponentInfo usageKey={mockLibraryBlockMetadata.usageKeyThirdPartyXBlock} />,
-      withLibraryId(mockContentLibrary.libraryId),
+      <ComponentInfo />,
+      withLibraryId(mockContentLibrary.libraryId, mockLibraryBlockMetadata.usageKeyThirdPartyXBlock),
     );
 
     const editButton = await screen.findByRole('button', { name: /Edit component/ });
@@ -42,8 +47,8 @@ describe('<ComponentInfo> Sidebar', () => {
   it('should show a disabled "Edit" button when the library is read-only', async () => {
     initializeMocks();
     render(
-      <ComponentInfo usageKey={mockLibraryBlockMetadata.usageKeyPublished} />,
-      withLibraryId(mockContentLibrary.libraryIdReadOnly),
+      <ComponentInfo />,
+      withLibraryId(mockContentLibrary.libraryIdReadOnly, mockLibraryBlockMetadata.usageKeyPublished),
     );
 
     const editButton = await screen.findByRole('button', { name: /Edit component/ });
@@ -53,8 +58,8 @@ describe('<ComponentInfo> Sidebar', () => {
   it('should show a working "Edit" button for a normal component', async () => {
     initializeMocks();
     render(
-      <ComponentInfo usageKey={mockLibraryBlockMetadata.usageKeyPublished} />,
-      withLibraryId(mockContentLibrary.libraryId),
+      <ComponentInfo />,
+      withLibraryId(mockContentLibrary.libraryId, mockLibraryBlockMetadata.usageKeyPublished),
     );
 
     const editButton = await screen.findByRole('button', { name: /Edit component/ });
diff --git a/src/library-authoring/component-info/ComponentInfo.tsx b/src/library-authoring/component-info/ComponentInfo.tsx
index 251508ec1..faec4a338 100644
--- a/src/library-authoring/component-info/ComponentInfo.tsx
+++ b/src/library-authoring/component-info/ComponentInfo.tsx
@@ -22,7 +22,7 @@ const ComponentInfo = () => {
   const { showToast } = useContext(ToastContext);
 
   const {
-    currentComponentUsageKey: usageKey,
+    sidebarComponentUsageKey: usageKey,
     readOnly,
     openComponentEditor,
     componentPickerMode,
diff --git a/src/library-authoring/component-info/ComponentInfoHeader.test.tsx b/src/library-authoring/component-info/ComponentInfoHeader.test.tsx
index e3dcba9b0..dbd39a2d1 100644
--- a/src/library-authoring/component-info/ComponentInfoHeader.test.tsx
+++ b/src/library-authoring/component-info/ComponentInfoHeader.test.tsx
@@ -24,7 +24,7 @@ const xBlockFields = {
 
 const render = (libraryId: string = mockLibraryId) => baseRender(<ComponentInfoHeader />, {
   extraWrapper: ({ children }) => (
-    <LibraryProvider libraryId={libraryId} componentUsageKey={usageKey}>
+    <LibraryProvider libraryId={libraryId} sidebarComponentUsageKey={usageKey}>
       {children}
     </LibraryProvider>
   ),
diff --git a/src/library-authoring/component-info/ComponentInfoHeader.tsx b/src/library-authoring/component-info/ComponentInfoHeader.tsx
index 1097719ef..0456aa3d1 100644
--- a/src/library-authoring/component-info/ComponentInfoHeader.tsx
+++ b/src/library-authoring/component-info/ComponentInfoHeader.tsx
@@ -18,7 +18,7 @@ const ComponentInfoHeader = () => {
   const [inputIsActive, setIsActive] = useState(false);
 
   const {
-    currentComponentUsageKey: usageKey,
+    sidebarComponentUsageKey: usageKey,
     readOnly,
   } = useLibraryContext();
 
diff --git a/src/library-authoring/component-info/ComponentManagement.test.tsx b/src/library-authoring/component-info/ComponentManagement.test.tsx
index d58517dc6..60a930df9 100644
--- a/src/library-authoring/component-info/ComponentManagement.test.tsx
+++ b/src/library-authoring/component-info/ComponentManagement.test.tsx
@@ -36,7 +36,7 @@ const matchInnerText = (nodeName: string, textToMatch: string) => (_: string, el
 
 const render = (usageKey: string) => baseRender(<ComponentManagement />, {
   extraWrapper: ({ children }) => (
-    <LibraryProvider libraryId={mockLibraryId} componentUsageKey={usageKey}>
+    <LibraryProvider libraryId={mockLibraryId} sidebarComponentUsageKey={usageKey}>
       {children}
     </LibraryProvider>
   ),
diff --git a/src/library-authoring/component-info/ComponentManagement.tsx b/src/library-authoring/component-info/ComponentManagement.tsx
index 0aac4d391..4804329d5 100644
--- a/src/library-authoring/component-info/ComponentManagement.tsx
+++ b/src/library-authoring/component-info/ComponentManagement.tsx
@@ -13,7 +13,7 @@ import { useContentTaxonomyTagsData } from '../../content-tags-drawer/data/apiHo
 
 const ComponentManagement = () => {
   const intl = useIntl();
-  const { currentComponentUsageKey: usageKey, readOnly } = useLibraryContext();
+  const { sidebarComponentUsageKey: usageKey, readOnly } = useLibraryContext();
 
   if (!usageKey) {
     throw new Error('usageKey is required');
diff --git a/src/library-authoring/component-info/ComponentPreview.test.tsx b/src/library-authoring/component-info/ComponentPreview.test.tsx
index 859eb6cd1..a4236ce69 100644
--- a/src/library-authoring/component-info/ComponentPreview.test.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.test.tsx
@@ -1,27 +1,44 @@
 import {
   fireEvent,
   initializeMocks,
-  render,
+  render as baseRender,
   screen,
 } from '../../testUtils';
-import { mockLibraryBlockMetadata } from '../data/api.mocks';
+import { LibraryProvider } from '../common/context';
+import { mockContentLibrary, mockLibraryBlockMetadata } from '../data/api.mocks';
 import ComponentPreview from './ComponentPreview';
 
 mockLibraryBlockMetadata.applyMock();
+mockContentLibrary.applyMock();
+
+const {
+  libraryId,
+} = mockContentLibrary;
+
+const usageKey = mockLibraryBlockMetadata.usageKeyPublished;
+
+const render = () => baseRender(<ComponentPreview />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider
+      libraryId={libraryId}
+      sidebarComponentUsageKey={usageKey}
+    >
+      { children }
+    </LibraryProvider>
+  ),
+});
 
 describe('<ComponentPreview />', () => {
   it('renders a preview of the component', async () => {
     initializeMocks();
-    const usageKey = mockLibraryBlockMetadata.usageKeyPublished;
-    render(<ComponentPreview usageKey={usageKey} />);
+    render();
     const iframe = (await screen.findByTitle('Preview')) as HTMLIFrameElement;
     expect(iframe.src).toEqual(`http://localhost:18000/xblocks/v2/${usageKey}/embed/student_view/`);
   });
 
   it('shows an expanded preview of the component', async () => {
     initializeMocks();
-    const usageKey = mockLibraryBlockMetadata.usageKeyPublished;
-    render(<ComponentPreview usageKey={usageKey} />);
+    render();
     await screen.findByTitle('Preview'); // Wait for the preview to appear
     const expandButton = screen.getByRole('button', { name: /Expand/ });
     fireEvent.click(expandButton);
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index bb099e3fc..69eb597d7 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -33,7 +33,7 @@ const ComponentPreview = () => {
   const intl = useIntl();
 
   const [isModalOpen, openModal, closeModal] = useToggle();
-  const { currentComponentUsageKey: usageKey } = useLibraryContext();
+  const { sidebarComponentUsageKey: usageKey } = useLibraryContext();
 
   // istanbul ignore if: this should never happen
   if (!usageKey) {
diff --git a/src/library-authoring/components/CollectionCard.tsx b/src/library-authoring/components/CollectionCard.tsx
index f357fac0a..8181b35e2 100644
--- a/src/library-authoring/components/CollectionCard.tsx
+++ b/src/library-authoring/components/CollectionCard.tsx
@@ -27,7 +27,7 @@ const CollectionMenu = ({ collectionHit } : CollectionMenuProps) => {
   const { showToast } = useContext(ToastContext);
   const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
   const [confirmBtnState, setConfirmBtnState] = useState('default');
-  const { closeLibrarySidebar, currentCollectionId } = useLibraryContext();
+  const { closeLibrarySidebar, sidebarCollectionId } = useLibraryContext();
 
   const restoreCollectionMutation = useRestoreCollection(collectionHit.contextKey, collectionHit.blockId);
   const restoreCollection = useCallback(() => {
@@ -42,7 +42,7 @@ const CollectionMenu = ({ collectionHit } : CollectionMenuProps) => {
   const deleteCollectionMutation = useDeleteCollection(collectionHit.contextKey, collectionHit.blockId);
   const deleteCollection = useCallback(() => {
     setConfirmBtnState('pending');
-    if (currentCollectionId === collectionHit.blockId) {
+    if (sidebarCollectionId === collectionHit.blockId) {
       // Close sidebar if current collection is open to avoid displaying
       // deleted collection in sidebar
       closeLibrarySidebar();
@@ -62,7 +62,7 @@ const CollectionMenu = ({ collectionHit } : CollectionMenuProps) => {
         setConfirmBtnState('default');
         closeDeleteModal();
       });
-  }, [currentCollectionId]);
+  }, [sidebarCollectionId]);
 
   return (
     <>