From adb7247f17b6a5702f55f5f2772d731c16bccf4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Thu, 3 Oct 2024 19:22:16 -0300
Subject: [PATCH] feat: move library props to context (WIP)

---
 src/content-tags-drawer/ContentTagsDrawer.tsx |  12 +-
 .../LibraryAuthoringPage.test.tsx             |   2 +-
 .../LibraryAuthoringPage.tsx                  |  30 +--
 .../collections/CollectionDetails.test.tsx    |  25 +-
 .../collections/CollectionDetails.tsx         |  34 +--
 .../collections/CollectionInfo.tsx            |  23 +-
 .../collections/CollectionInfoHeader.test.tsx |  49 ++--
 .../collections/CollectionInfoHeader.tsx      |  26 +-
 .../collections/LibraryCollectionPage.tsx     |   2 +-
 src/library-authoring/common/context.tsx      |  30 ++-
 .../component-info/ComponentDetails.test.tsx  |  38 +--
 .../component-info/ComponentDetails.tsx       |  15 +-
 .../component-info/ComponentInfo.tsx          |  49 ++--
 .../ComponentInfoHeader.test.tsx              | 120 +++------
 .../component-info/ComponentInfoHeader.tsx    |  20 +-
 .../ComponentManagement.test.tsx              |  46 ++--
 .../component-info/ComponentManagement.tsx    |  13 +-
 .../component-info/ComponentPreview.tsx       |  15 +-
 .../component-picker/ComponentPicker.tsx      |  23 +-
 .../component-picker/SelectLibrary.tsx        |   5 +-
 .../component-picker/messages.ts              |  10 +
 .../components/BaseComponentCard.tsx          |   4 +-
 src/library-authoring/data/api.mocks.ts       |  70 +++++-
 src/library-authoring/data/api.ts             |   3 +-
 .../library-info/LibraryInfo.test.tsx         | 236 ++++++++----------
 .../library-info/LibraryInfo.tsx              |  19 +-
 .../library-info/LibraryInfoHeader.test.tsx   | 139 ++++-------
 .../library-info/LibraryInfoHeader.tsx        |  22 +-
 .../library-info/LibraryPublishStatus.tsx     |  56 +++--
 .../library-sidebar/LibrarySidebar.tsx        |  29 +--
 30 files changed, 599 insertions(+), 566 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsDrawer.tsx b/src/content-tags-drawer/ContentTagsDrawer.tsx
index 28ab128d94..8dac497dcc 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.tsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.tsx
@@ -154,7 +154,11 @@ const ContentTagsDrawerVariantFooter = ({ onClose }: ContentTagsDrawerVariantFoo
   );
 };
 
-const ContentTagsComponentVariantFooter = () => {
+interface ContentTagsComponentVariantFooterProps {
+  readOnly?: boolean;
+}
+
+const ContentTagsComponentVariantFooter = ({ readOnly = false }: ContentTagsComponentVariantFooterProps) => {
   const intl = useIntl();
   const {
     commitGlobalStagedTagsStatus,
@@ -195,7 +199,7 @@ const ContentTagsComponentVariantFooter = () => {
             </div>
           )}
         </div>
-      ) : (
+      ) : !readOnly && (
         <Button
           variant="outline-primary"
           onClick={toEditMode}
@@ -212,6 +216,7 @@ interface ContentTagsDrawerProps {
   id?: string;
   onClose?: () => void;
   variant?: 'drawer' | 'component';
+  readOnly?: boolean;
 }
 
 /**
@@ -227,6 +232,7 @@ const ContentTagsDrawer = ({
   id,
   onClose,
   variant = 'drawer',
+  readOnly = false,
 }: ContentTagsDrawerProps) => {
   const intl = useIntl();
   // TODO: We can delete 'params' when the iframe is no longer used on edx-platform
@@ -303,7 +309,7 @@ const ContentTagsDrawer = ({
         case 'drawer':
           return <ContentTagsDrawerVariantFooter onClose={onCloseDrawer} />;
         case 'component':
-          return <ContentTagsComponentVariantFooter />;
+          return <ContentTagsComponentVariantFooter readOnly={readOnly} />;
         default:
           return null;
       }
diff --git a/src/library-authoring/LibraryAuthoringPage.test.tsx b/src/library-authoring/LibraryAuthoringPage.test.tsx
index b2b044429a..2f3a41fd6d 100644
--- a/src/library-authoring/LibraryAuthoringPage.test.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.test.tsx
@@ -74,7 +74,7 @@ const returnLowNumberResults = (_url, req) => {
   return newMockResult;
 };
 
-const path = '/library/:libraryId/*';
+const path = '/library/:libraryId';
 const libraryTitle = mockContentLibrary.libraryData.title;
 
 describe('<LibraryAuthoringPage />', () => {
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
index 98a8203ce1..1ff5137845 100644
--- a/src/library-authoring/LibraryAuthoringPage.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import classNames from 'classnames';
 import { StudioFooter } from '@edx/frontend-component-footer';
@@ -33,7 +33,6 @@ import {
 import LibraryComponents from './components/LibraryComponents';
 import LibraryCollections from './collections/LibraryCollections';
 import LibraryHome from './LibraryHome';
-import { useContentLibrary } from './data/apiHooks';
 import { LibrarySidebar } from './library-sidebar';
 import { SidebarBodyComponentId, useLibraryContext } from './common/context';
 import messages from './messages';
@@ -119,23 +118,19 @@ const SubHeaderTitle = ({ title, showReadOnlyBadge }: { title: string, showReadO
   );
 };
 
-interface LibraryAuthoringPageProps {
-  libraryId?: string;
-  componentPicker?: boolean;
-}
-
-const LibraryAuthoringPage = (props: LibraryAuthoringPageProps) => {
+const LibraryAuthoringPage = () => {
   const intl = useIntl();
   const location = useLocation();
   const navigate = useNavigate();
 
   const {
     libraryId,
+    libraryData,
+    isLoadingLibraryData,
     componentPickerMode,
     sidebarBodyComponent,
     openInfoSidebar,
   } = useLibraryContext();
-  const { data: libraryData, isLoading } = useContentLibrary(libraryId);
 
   const currentPath = location.pathname.split('/').pop();
   let initialActiveKey: string | undefined;
@@ -155,7 +150,7 @@ const LibraryAuthoringPage = (props: LibraryAuthoringPageProps) => {
 
   const [searchParams] = useSearchParams();
 
-  if (isLoading) {
+  if (isLoadingLibraryData) {
     return <Loading />;
   }
 
@@ -168,14 +163,13 @@ const LibraryAuthoringPage = (props: LibraryAuthoringPageProps) => {
   }
 
   const handleTabChange = (key: string) => {
-    if (componentPickerMode) {
-      setActiveKey(key);
-      return;
+    setActiveKey(key);
+    if (!componentPickerMode) {
+      navigate({
+        pathname: key,
+        search: searchParams.toString(),
+      });
     }
-    navigate({
-      pathname: key,
-      search: searchParams.toString(),
-    });
   };
 
   return (
@@ -247,7 +241,7 @@ const LibraryAuthoringPage = (props: LibraryAuthoringPageProps) => {
       </div>
       {!!sidebarBodyComponent && (
         <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">
-          <LibrarySidebar library={libraryData} />
+          <LibrarySidebar />
         </div>
       )}
     </div>
diff --git a/src/library-authoring/collections/CollectionDetails.test.tsx b/src/library-authoring/collections/CollectionDetails.test.tsx
index 5c4e69064e..ba48eb6e68 100644
--- a/src/library-authoring/collections/CollectionDetails.test.tsx
+++ b/src/library-authoring/collections/CollectionDetails.test.tsx
@@ -5,11 +5,12 @@ import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager
 import {
   initializeMocks,
   fireEvent,
-  render,
+  render as baseRender,
   screen,
   waitFor,
   within,
 } from '../../testUtils';
+import { LibraryProvider } from '../common/context';
 import * as api from '../data/api';
 import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
 import CollectionDetails from './CollectionDetails';
@@ -17,6 +18,7 @@ import CollectionDetails from './CollectionDetails';
 let axiosMock: MockAdapter;
 let mockShowToast: (message: string) => void;
 
+mockContentLibrary.applyMock();
 mockGetCollectionMetadata.applyMock();
 mockContentSearchConfig.applyMock();
 mockGetBlockTypes.applyMock();
@@ -26,6 +28,14 @@ const { description: originalDescription } = mockGetCollectionMetadata.collectio
 
 const library = mockContentLibrary.libraryData;
 
+const render = () => baseRender(<CollectionDetails />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={library.id} collectionId={collectionId}>
+      { children }
+    </LibraryProvider>
+  ),
+});
+
 describe('<CollectionDetails />', () => {
   beforeEach(() => {
     const mocks = initializeMocks();
@@ -35,12 +45,11 @@ describe('<CollectionDetails />', () => {
 
   afterEach(() => {
     jest.clearAllMocks();
-    axiosMock.restore();
     fetchMock.mockReset();
   });
 
   it('should render Collection Details', async () => {
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
 
     // Collection Description
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
@@ -55,7 +64,7 @@ describe('<CollectionDetails />', () => {
   });
 
   it('should allow modifying the description', async () => {
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText(originalDescription)).toBeInTheDocument();
@@ -89,7 +98,7 @@ describe('<CollectionDetails />', () => {
   });
 
   it('should show error while modifing the description', async () => {
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText(originalDescription)).toBeInTheDocument();
@@ -114,7 +123,7 @@ describe('<CollectionDetails />', () => {
 
   it('should render Collection stats', async () => {
     mockGetBlockTypes('someBlocks');
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText('Collection Stats')).toBeInTheDocument();
@@ -132,7 +141,7 @@ describe('<CollectionDetails />', () => {
 
   it('should render Collection stats for empty collection', async () => {
     mockGetBlockTypes('noBlocks');
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText('Collection Stats')).toBeInTheDocument();
@@ -141,7 +150,7 @@ describe('<CollectionDetails />', () => {
 
   it('should render Collection stats for big collection', async () => {
     mockGetBlockTypes('moreBlocks');
-    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText('Collection Stats')).toBeInTheDocument();
diff --git a/src/library-authoring/collections/CollectionDetails.tsx b/src/library-authoring/collections/CollectionDetails.tsx
index 9936177902..fb0cb3b2fd 100644
--- a/src/library-authoring/collections/CollectionDetails.tsx
+++ b/src/library-authoring/collections/CollectionDetails.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { getItemIcon } from '../../generic/block-type-utils';
 import { ToastContext } from '../../generic/toast-context';
 import { BlockTypeLabel, useGetBlockTypes } from '../../search-manager';
-import type { ContentLibrary } from '../data/api';
+import { useLibraryContext } from '../common/context';
 import { useCollection, useUpdateCollection } from '../data/apiHooks';
 import HistoryWidget from '../generic/history-widget';
 import messages from './messages';
@@ -36,12 +36,9 @@ const BlockCount = ({
   );
 };
 
-interface CollectionStatsWidgetProps {
-  libraryId: string,
-  collectionId: string,
-}
+const CollectionStatsWidget = () => {
+  const { libraryId, currentCollectionId: collectionId } = useLibraryContext();
 
-const CollectionStatsWidget = ({ libraryId, collectionId }: CollectionStatsWidgetProps) => {
   const { data: blockTypes } = useGetBlockTypes([
     `context_key = "${libraryId}"`,
     `collections.key = "${collectionId}"`,
@@ -99,17 +96,22 @@ const CollectionStatsWidget = ({ libraryId, collectionId }: CollectionStatsWidge
   );
 };
 
-interface CollectionDetailsProps {
-  library: ContentLibrary,
-  collectionId: string,
-}
-
-const CollectionDetails = ({ library, collectionId }: CollectionDetailsProps) => {
+const CollectionDetails = () => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
+  const {
+    libraryId,
+    currentCollectionId: collectionId,
+    readOnly,
+  } = useLibraryContext();
+
+  // istanbul ignore next: This should never happen
+  if (!collectionId) {
+    throw new Error('collectionId is required');
+  }
 
-  const updateMutation = useUpdateCollection(library.id, collectionId);
-  const { data: collection } = useCollection(library.id, collectionId);
+  const updateMutation = useUpdateCollection(libraryId, collectionId);
+  const { data: collection } = useCollection(libraryId, collectionId);
 
   const [description, setDescription] = useState(collection?.description || '');
 
@@ -145,7 +147,7 @@ const CollectionDetails = ({ library, collectionId }: CollectionDetailsProps) =>
         <h3 className="h5">
           {intl.formatMessage(messages.detailsTabDescriptionTitle)}
         </h3>
-        {library.canEditLibrary ? (
+        {!readOnly ? (
           <textarea
             className="form-control"
             value={description}
@@ -158,7 +160,7 @@ const CollectionDetails = ({ library, collectionId }: CollectionDetailsProps) =>
         <h3 className="h5">
           {intl.formatMessage(messages.detailsTabStatsTitle)}
         </h3>
-        <CollectionStatsWidget libraryId={library.id} collectionId={collectionId} />
+        <CollectionStatsWidget />
       </div>
       <hr className="w-100" />
       <div>
diff --git a/src/library-authoring/collections/CollectionInfo.tsx b/src/library-authoring/collections/CollectionInfo.tsx
index b13d5c5d3d..a7f4f8df40 100644
--- a/src/library-authoring/collections/CollectionInfo.tsx
+++ b/src/library-authoring/collections/CollectionInfo.tsx
@@ -7,20 +7,22 @@ import {
 } from '@openedx/paragon';
 import { Link, useMatch } from 'react-router-dom';
 
-import type { ContentLibrary } from '../data/api';
+import { useLibraryContext } from '../common/context';
 import CollectionDetails from './CollectionDetails';
 import messages from './messages';
 
-interface CollectionInfoProps {
-  library: ContentLibrary,
-  collectionId: string,
-}
-
-const CollectionInfo = ({ library, collectionId }: CollectionInfoProps) => {
+const CollectionInfo = () => {
   const intl = useIntl();
-  const url = `/library/${library.id}/collection/${collectionId}/`;
+
+  const { libraryId, currentCollectionId: collectionId } = useLibraryContext();
+
+  const url = `/library/${libraryId}/collection/${collectionId}/`;
   const urlMatch = useMatch(url);
 
+  if (!collectionId) {
+    return null;
+  }
+
   return (
     <Stack>
       {!urlMatch && (
@@ -45,10 +47,7 @@ const CollectionInfo = ({ library, collectionId }: CollectionInfoProps) => {
           Manage tab placeholder
         </Tab>
         <Tab eventKey="details" title={intl.formatMessage(messages.detailsTabTitle)}>
-          <CollectionDetails
-            library={library}
-            collectionId={collectionId}
-          />
+          <CollectionDetails />
         </Tab>
       </Tabs>
     </Stack>
diff --git a/src/library-authoring/collections/CollectionInfoHeader.test.tsx b/src/library-authoring/collections/CollectionInfoHeader.test.tsx
index 47dfe07aa1..f783746fe1 100644
--- a/src/library-authoring/collections/CollectionInfoHeader.test.tsx
+++ b/src/library-authoring/collections/CollectionInfoHeader.test.tsx
@@ -4,10 +4,11 @@ import userEvent from '@testing-library/user-event';
 import {
   initializeMocks,
   fireEvent,
-  render,
+  render as baseRender,
   screen,
   waitFor,
 } from '../../testUtils';
+import { LibraryProvider } from '../common/context';
 import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
 import * as api from '../data/api';
 import CollectionInfoHeader from './CollectionInfoHeader';
@@ -16,9 +17,23 @@ let axiosMock: MockAdapter;
 let mockShowToast: (message: string) => void;
 
 mockGetCollectionMetadata.applyMock();
+mockContentLibrary.applyMock();
+
+const {
+  libraryId: mockLibraryId,
+  libraryIdReadOnly,
+} = mockContentLibrary;
 
 const { collectionId } = mockGetCollectionMetadata;
 
+const render = (libraryId: string = mockLibraryId) => baseRender(<CollectionInfoHeader />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={libraryId} collectionId={collectionId}>
+      { children }
+    </LibraryProvider>
+  ),
+});
+
 describe('<CollectionInfoHeader />', () => {
   beforeEach(() => {
     const mocks = initializeMocks();
@@ -32,27 +47,25 @@ describe('<CollectionInfoHeader />', () => {
   });
 
   it('should render Collection info Header', async () => {
-    const library = await mockContentLibrary(mockContentLibrary.libraryId);
-    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Test Collection')).toBeInTheDocument();
 
     expect(screen.getByRole('button', { name: /edit collection title/i })).toBeInTheDocument();
   });
 
   it('should not render edit title button without permission', async () => {
-    const readOnlyLibrary = await mockContentLibrary(mockContentLibrary.libraryIdReadOnly);
-    render(<CollectionInfoHeader library={readOnlyLibrary} collectionId={collectionId} />);
+    render(libraryIdReadOnly);
     expect(await screen.findByText('Test Collection')).toBeInTheDocument();
 
     expect(screen.queryByRole('button', { name: /edit collection title/i })).not.toBeInTheDocument();
   });
 
   it('should update collection title', async () => {
-    const library = await mockContentLibrary(mockContentLibrary.libraryId);
-    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    render();
+
     expect(await screen.findByText('Test Collection')).toBeInTheDocument();
 
-    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
+    const url = api.getLibraryCollectionApiUrl(mockLibraryId, collectionId);
     axiosMock.onPatch(url).reply(200);
 
     fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
@@ -72,11 +85,10 @@ describe('<CollectionInfoHeader />', () => {
   });
 
   it('should not update collection title if title is the same', async () => {
-    const library = await mockContentLibrary(mockContentLibrary.libraryId);
-    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Test Collection')).toBeInTheDocument();
 
-    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
+    const url = api.getLibraryCollectionApiUrl(mockLibraryId, collectionId);
     axiosMock.onPatch(url).reply(200);
 
     fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
@@ -92,11 +104,10 @@ describe('<CollectionInfoHeader />', () => {
   });
 
   it('should not update collection title if title is empty', async () => {
-    const library = await mockContentLibrary(mockContentLibrary.libraryId);
-    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Test Collection')).toBeInTheDocument();
 
-    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
+    const url = api.getLibraryCollectionApiUrl(mockLibraryId, collectionId);
     axiosMock.onPatch(url).reply(200);
 
     fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
@@ -112,11 +123,10 @@ describe('<CollectionInfoHeader />', () => {
   });
 
   it('should close edit collection title on press Escape', async () => {
-    const library = await mockContentLibrary(mockContentLibrary.libraryId);
-    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Test Collection')).toBeInTheDocument();
 
-    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
+    const url = api.getLibraryCollectionApiUrl(mockLibraryId, collectionId);
     axiosMock.onPatch(url).reply(200);
 
     fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
@@ -132,11 +142,10 @@ describe('<CollectionInfoHeader />', () => {
   });
 
   it('should show error on edit collection title', async () => {
-    const library = await mockContentLibrary(mockContentLibrary.libraryId);
-    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    render();
     expect(await screen.findByText('Test Collection')).toBeInTheDocument();
 
-    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
+    const url = api.getLibraryCollectionApiUrl(mockLibraryId, collectionId);
     axiosMock.onPatch(url).reply(500);
 
     fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
diff --git a/src/library-authoring/collections/CollectionInfoHeader.tsx b/src/library-authoring/collections/CollectionInfoHeader.tsx
index 1d6d9cfbe5..ed41556a85 100644
--- a/src/library-authoring/collections/CollectionInfoHeader.tsx
+++ b/src/library-authoring/collections/CollectionInfoHeader.tsx
@@ -9,22 +9,28 @@ import {
 import { Edit } from '@openedx/paragon/icons';
 
 import { ToastContext } from '../../generic/toast-context';
-import type { ContentLibrary } from '../data/api';
+import { useLibraryContext } from '../common/context';
 import { useCollection, useUpdateCollection } from '../data/apiHooks';
 import messages from './messages';
 
-interface CollectionInfoHeaderProps {
-  library: ContentLibrary;
-  collectionId: string;
-}
-
-const CollectionInfoHeader = ({ library, collectionId }: CollectionInfoHeaderProps) => {
+const CollectionInfoHeader = () => {
   const intl = useIntl();
   const [inputIsActive, setIsActive] = useState(false);
 
-  const { data: collection } = useCollection(library.id, collectionId);
+  const {
+    libraryId,
+    currentCollectionId: collectionId,
+    readOnly,
+  } = useLibraryContext();
+
+  // istanbul ignore if: this should never happen
+  if (!collectionId) {
+    throw new Error('collectionId is required');
+  }
+
+  const { data: collection } = useCollection(libraryId, collectionId);
 
-  const updateMutation = useUpdateCollection(library.id, collectionId);
+  const updateMutation = useUpdateCollection(libraryId, collectionId);
   const { showToast } = useContext(ToastContext);
 
   const handleSaveDisplayName = useCallback(
@@ -83,7 +89,7 @@ const CollectionInfoHeader = ({ library, collectionId }: CollectionInfoHeaderPro
             <span className="font-weight-bold m-1.5">
               {collection.title}
             </span>
-            {library.canEditLibrary && (
+            {!readOnly && (
               <IconButton
                 src={Edit}
                 iconAs={Icon}
diff --git a/src/library-authoring/collections/LibraryCollectionPage.tsx b/src/library-authoring/collections/LibraryCollectionPage.tsx
index a96ed49cb6..87e5f9beae 100644
--- a/src/library-authoring/collections/LibraryCollectionPage.tsx
+++ b/src/library-authoring/collections/LibraryCollectionPage.tsx
@@ -196,7 +196,7 @@ const LibraryCollectionPage = () => {
       </div>
       { !!sidebarBodyComponent && (
         <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">
-          <LibrarySidebar library={libraryData} />
+          <LibrarySidebar />
         </div>
       )}
     </div>
diff --git a/src/library-authoring/common/context.tsx b/src/library-authoring/common/context.tsx
index d92e07a85e..6f0f15ddda 100644
--- a/src/library-authoring/common/context.tsx
+++ b/src/library-authoring/common/context.tsx
@@ -1,6 +1,9 @@
 import { useToggle } from '@openedx/paragon';
 import React from 'react';
 
+import type { ContentLibrary } from '../data/api';
+import { useContentLibrary } from '../data/apiHooks';
+
 export enum SidebarBodyComponentId {
   AddContent = 'add-content',
   Info = 'info',
@@ -11,6 +14,9 @@ export enum SidebarBodyComponentId {
 export interface LibraryContextData {
   /** The ID of the current library */
   libraryId: string;
+  libraryData?: ContentLibrary;
+  readOnly: boolean;
+  isLoadingLibraryData: boolean;
   // Whether we're in "component picker" mode
   componentPickerMode: boolean;
   // Sidebar stuff - only one sidebar is active at any given time:
@@ -43,15 +49,23 @@ interface LibraryProviderProps {
   children?: React.ReactNode;
   libraryId: string;
   componentPickerMode?: boolean;
+  collectionId?: string;
+  componentUsageKey?: string;
 }
 
 /**
  * React component to provide `LibraryContext`
  */
-export const LibraryProvider = ({ children, libraryId, componentPickerMode = false }: LibraryProviderProps) => {
+export const LibraryProvider = ({
+  children,
+  libraryId,
+  componentPickerMode = false,
+  collectionId,
+  componentUsageKey,
+}: LibraryProviderProps) => {
   const [sidebarBodyComponent, setSidebarBodyComponent] = React.useState<SidebarBodyComponentId | null>(null);
-  const [currentComponentUsageKey, setCurrentComponentUsageKey] = React.useState<string>();
-  const [currentCollectionId, setcurrentCollectionId] = React.useState<string>();
+  const [currentComponentUsageKey, setCurrentComponentUsageKey] = React.useState<string | undefined>(componentUsageKey);
+  const [currentCollectionId, setcurrentCollectionId] = React.useState<string | undefined>(collectionId);
   const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false);
 
   const resetSidebar = React.useCallback(() => {
@@ -86,8 +100,15 @@ export const LibraryProvider = ({ children, libraryId, componentPickerMode = fal
     setSidebarBodyComponent(SidebarBodyComponentId.CollectionInfo);
   }, []);
 
+  const { data: libraryData, isLoading: isLoadingLibraryData } = useContentLibrary(libraryId);
+
+  const readOnly = componentPickerMode || !libraryData?.canEditLibrary;
+
   const context = React.useMemo<LibraryContextData>(() => ({
     libraryId,
+    libraryData,
+    readOnly,
+    isLoadingLibraryData,
     componentPickerMode,
     sidebarBodyComponent,
     closeLibrarySidebar,
@@ -102,6 +123,9 @@ export const LibraryProvider = ({ children, libraryId, componentPickerMode = fal
     currentCollectionId,
   }), [
     libraryId,
+    libraryData,
+    readOnly,
+    isLoadingLibraryData,
     componentPickerMode,
     sidebarBodyComponent,
     closeLibrarySidebar,
diff --git a/src/library-authoring/component-info/ComponentDetails.test.tsx b/src/library-authoring/component-info/ComponentDetails.test.tsx
index b885cf7ef2..78751281f0 100644
--- a/src/library-authoring/component-info/ComponentDetails.test.tsx
+++ b/src/library-authoring/component-info/ComponentDetails.test.tsx
@@ -1,39 +1,49 @@
 import {
   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 ComponentDetails from './ComponentDetails';
 
+mockContentLibrary.applyMock();
+mockLibraryBlockMetadata.applyMock();
+
+const { libraryId: mockLibraryId } = mockContentLibrary;
+
+const render = (usageKey: string) => baseRender(<ComponentDetails />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={mockLibraryId} componentUsageKey={usageKey}>
+      {children}
+    </LibraryProvider>
+  ),
+});
+
 describe('<ComponentDetails />', () => {
-  it('should render the component details loading', async () => {
+  beforeEach(() => {
     initializeMocks();
-    mockLibraryBlockMetadata.applyMock();
-    render(<ComponentDetails usageKey={mockLibraryBlockMetadata.usageKeyThatNeverLoads} />);
+  });
+
+  it('should render the component details loading', async () => {
+    render(mockLibraryBlockMetadata.usageKeyThatNeverLoads);
     expect(await screen.findByText('Loading...')).toBeInTheDocument();
   });
 
   it('should render the component details error', async () => {
-    initializeMocks();
-    mockLibraryBlockMetadata.applyMock();
-    render(<ComponentDetails usageKey={mockLibraryBlockMetadata.usageKeyError404} />);
+    render(mockLibraryBlockMetadata.usageKeyError404);
     expect(await screen.findByText(/Mocked request failed with status code 404/)).toBeInTheDocument();
   });
 
   it('should render the component usage', async () => {
-    initializeMocks();
-    mockLibraryBlockMetadata.applyMock();
-    render(<ComponentDetails usageKey={mockLibraryBlockMetadata.usageKeyNeverPublished} />);
+    render(mockLibraryBlockMetadata.usageKeyNeverPublished);
     expect(await screen.findByText('Component Usage')).toBeInTheDocument();
     // TODO: replace with actual data when implement tag list
     expect(screen.queryByText('This will show the courses that use this component.')).toBeInTheDocument();
   });
 
   it('should render the component history', async () => {
-    initializeMocks();
-    mockLibraryBlockMetadata.applyMock();
-    render(<ComponentDetails usageKey={mockLibraryBlockMetadata.usageKeyNeverPublished} />);
+    render(mockLibraryBlockMetadata.usageKeyNeverPublished);
     // Show created date
     expect(await screen.findByText('June 20, 2024')).toBeInTheDocument();
     // Show modified date
diff --git a/src/library-authoring/component-info/ComponentDetails.tsx b/src/library-authoring/component-info/ComponentDetails.tsx
index a5481eb22e..aa56ce516c 100644
--- a/src/library-authoring/component-info/ComponentDetails.tsx
+++ b/src/library-authoring/component-info/ComponentDetails.tsx
@@ -3,17 +3,22 @@ import { Stack } from '@openedx/paragon';
 
 import AlertError from '../../generic/alert-error';
 import Loading from '../../generic/Loading';
+import { useLibraryContext } from '../common/context';
 import { useLibraryBlockMetadata } from '../data/apiHooks';
 import HistoryWidget from '../generic/history-widget';
 import { ComponentDeveloperInfo } from './ComponentDeveloperInfo';
 import messages from './messages';
 
-interface ComponentDetailsProps {
-  usageKey: string;
-}
-
-const ComponentDetails = ({ usageKey }: ComponentDetailsProps) => {
+const ComponentDetails = () => {
   const intl = useIntl();
+
+  const { currentComponentUsageKey: usageKey } = useLibraryContext();
+
+  // istanbul ignore if: this should never happen
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+
   const {
     data: componentMetadata,
     isError,
diff --git a/src/library-authoring/component-info/ComponentInfo.tsx b/src/library-authoring/component-info/ComponentInfo.tsx
index f503e4df99..9637eeeffc 100644
--- a/src/library-authoring/component-info/ComponentInfo.tsx
+++ b/src/library-authoring/component-info/ComponentInfo.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button,
@@ -8,6 +7,7 @@ import {
 } from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 
+import { useLibraryContext } from '../common/context';
 import { getEditUrl } from '../components/utils';
 import { ComponentMenu } from '../components';
 import ComponentDetails from './ComponentDetails';
@@ -15,42 +15,47 @@ import ComponentManagement from './ComponentManagement';
 import ComponentPreview from './ComponentPreview';
 import messages from './messages';
 
-interface ComponentInfoProps {
-  usageKey: string;
-}
-
-const ComponentInfo = ({ usageKey }: ComponentInfoProps) => {
+const ComponentInfo = () => {
   const intl = useIntl();
+
+  const { currentComponentUsageKey: usageKey, readOnly } = useLibraryContext();
+
+  if (!usageKey) {
+    return null;
+  }
+
   const editUrl = getEditUrl(usageKey);
 
   return (
     <Stack>
-      <div className="d-flex flex-wrap">
-        <Button
-          {...(editUrl ? { as: Link, to: editUrl } : { disabled: true, to: '#' })}
-          variant="outline-primary"
-          className="m-1 text-nowrap flex-grow-1"
-        >
-          {intl.formatMessage(messages.editComponentButtonTitle)}
-        </Button>
-        <Button disabled variant="outline-primary" className="m-1 text-nowrap flex-grow-1">
-          {intl.formatMessage(messages.publishComponentButtonTitle)}
-        </Button>
-        <ComponentMenu usageKey={usageKey} />
-      </div>
+      {!readOnly && (
+        <div className="d-flex flex-wrap">
+          <Button
+            {...(editUrl ? { as: Link, to: editUrl } : { disabled: true, to: '#' })}
+            variant="outline-primary"
+            className="m-1 text-nowrap flex-grow-1"
+          >
+            {intl.formatMessage(messages.editComponentButtonTitle)}
+          </Button>
+          <Button disabled variant="outline-primary" className="m-1 text-nowrap flex-grow-1">
+            {intl.formatMessage(messages.publishComponentButtonTitle)}
+          </Button>
+          <ComponentMenu usageKey={usageKey} />
+        </div>
+      )}
       <Tabs
         variant="tabs"
         className="my-3 d-flex justify-content-around"
         defaultActiveKey="preview"
       >
         <Tab eventKey="preview" title={intl.formatMessage(messages.previewTabTitle)}>
-          <ComponentPreview usageKey={usageKey} />
+          <ComponentPreview />
         </Tab>
         <Tab eventKey="manage" title={intl.formatMessage(messages.manageTabTitle)}>
-          <ComponentManagement usageKey={usageKey} />
+          <ComponentManagement />
         </Tab>
         <Tab eventKey="details" title={intl.formatMessage(messages.detailsTabTitle)}>
-          <ComponentDetails usageKey={usageKey} />
+          <ComponentDetails />
         </Tab>
       </Tabs>
     </Stack>
diff --git a/src/library-authoring/component-info/ComponentInfoHeader.test.tsx b/src/library-authoring/component-info/ComponentInfoHeader.test.tsx
index 0d8e644000..e3dcba9b06 100644
--- a/src/library-authoring/component-info/ComponentInfoHeader.test.tsx
+++ b/src/library-authoring/component-info/ComponentInfoHeader.test.tsx
@@ -1,57 +1,18 @@
-import MockAdapter from 'axios-mock-adapter';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type MockAdapter from 'axios-mock-adapter';
+
 import {
-  render,
   fireEvent,
+  render as baseRender,
   screen,
   waitFor,
-} from '@testing-library/react';
-import { ContentLibrary, getXBlockFieldsApiUrl } from '../data/api';
-import initializeStore from '../../store';
-import { ToastProvider } from '../../generic/toast-context';
+  initializeMocks,
+} from '../../testUtils';
+import { mockContentLibrary } from '../data/api.mocks';
+import { getXBlockFieldsApiUrl } from '../data/api';
+import { LibraryProvider } from '../common/context';
 import ComponentInfoHeader from './ComponentInfoHeader';
 
-let store;
-let axiosMock;
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
-
-const libraryData: ContentLibrary = {
-  id: 'lib:org1:lib1',
-  type: 'complex',
-  org: 'org1',
-  slug: 'lib1',
-  title: 'lib1',
-  description: 'lib1',
-  numBlocks: 2,
-  version: 0,
-  lastPublished: null,
-  lastDraftCreated: '2024-07-22',
-  publishedBy: 'staff',
-  lastDraftCreatedBy: 'staff',
-  allowLti: false,
-  allowPublicLearning: false,
-  allowPublicRead: false,
-  hasUnpublishedChanges: true,
-  hasUnpublishedDeletes: false,
-  canEditLibrary: true,
-  license: '',
-  created: '2024-06-26',
-  updated: '2024-07-20',
-};
-
-interface WrapperProps {
-  library?: ContentLibrary,
-}
+const { libraryId: mockLibraryId, libraryIdReadOnly } = mockContentLibrary;
 
 const usageKey = 'lb:org1:library:html:a1fa8bdd-dc67-4976-9bf5-0ea75a9bca3d';
 const xBlockFields = {
@@ -61,31 +22,25 @@ const xBlockFields = {
   },
 };
 
-const RootWrapper = ({ library } : WrapperProps) => (
-  <AppProvider store={store}>
-    <IntlProvider locale="en" messages={{}}>
-      <QueryClientProvider client={queryClient}>
-        <ToastProvider>
-          <ComponentInfoHeader library={library || libraryData} usageKey={usageKey} />
-        </ToastProvider>
-      </QueryClientProvider>
-    </IntlProvider>
-  </AppProvider>
-);
+const render = (libraryId: string = mockLibraryId) => baseRender(<ComponentInfoHeader />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={libraryId} componentUsageKey={usageKey}>
+      {children}
+    </LibraryProvider>
+  ),
+});
+
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string) => void;
+
+mockContentLibrary.applyMock();
 
 describe('<ComponentInfoHeader />', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
     axiosMock.onGet(getXBlockFieldsApiUrl(usageKey)).reply(200, xBlockFields);
+    mockShowToast = mocks.mockShowToast;
   });
 
   afterEach(() => {
@@ -94,19 +49,17 @@ describe('<ComponentInfoHeader />', () => {
   });
 
   it('should render component info Header', async () => {
-    render(<RootWrapper />);
+    render();
 
     expect(await screen.findByText('Test HTML Block')).toBeInTheDocument();
+
     expect(screen.getByRole('button', { name: /edit component name/i })).toBeInTheDocument();
   });
 
-  it('should not render edit title button without permission', () => {
-    const library = {
-      ...libraryData,
-      canEditLibrary: false,
-    };
+  it('should not render edit title button without permission', async () => {
+    render(libraryIdReadOnly);
 
-    render(<RootWrapper library={library} />);
+    expect(await screen.findByText('Test HTML Block')).toBeInTheDocument();
 
     expect(screen.queryByRole('button', { name: /edit component name/i })).not.toBeInTheDocument();
   });
@@ -114,7 +67,9 @@ describe('<ComponentInfoHeader />', () => {
   it('should edit component title', async () => {
     const url = getXBlockFieldsApiUrl(usageKey);
     axiosMock.onPost(url).reply(200);
-    render(<RootWrapper />);
+    render();
+
+    expect(await screen.findByText('Test HTML Block')).toBeInTheDocument();
 
     fireEvent.click(screen.getByRole('button', { name: /edit component name/i }));
 
@@ -131,14 +86,16 @@ describe('<ComponentInfoHeader />', () => {
       expect(axiosMock.history.post[0].data).toStrictEqual(JSON.stringify({
         metadata: { display_name: 'New component name' },
       }));
-      expect(screen.getByText('Component updated successfully.')).toBeInTheDocument();
+      expect(mockShowToast).toHaveBeenCalledWith('Component updated successfully.');
     });
   });
 
   it('should close edit library title on press Escape', async () => {
     const url = getXBlockFieldsApiUrl(usageKey);
     axiosMock.onPost(url).reply(200);
-    render(<RootWrapper />);
+    render();
+
+    expect(await screen.findByText('Test HTML Block')).toBeInTheDocument();
 
     fireEvent.click(screen.getByRole('button', { name: /edit component name/i }));
 
@@ -155,8 +112,9 @@ describe('<ComponentInfoHeader />', () => {
   it('should show error on edit library tittle', async () => {
     const url = getXBlockFieldsApiUrl(usageKey);
     axiosMock.onPatch(url).reply(500);
+    render();
 
-    render(<RootWrapper />);
+    expect(await screen.findByText('Test HTML Block')).toBeInTheDocument();
 
     fireEvent.click(screen.getByRole('button', { name: /edit component name/i }));
 
@@ -172,7 +130,7 @@ describe('<ComponentInfoHeader />', () => {
         metadata: { display_name: 'New component name' },
       }));
 
-      expect(screen.getByText('There was an error updating the component.')).toBeInTheDocument();
+      expect(mockShowToast).toHaveBeenCalledWith('There was an error updating the component.');
     });
   });
 });
diff --git a/src/library-authoring/component-info/ComponentInfoHeader.tsx b/src/library-authoring/component-info/ComponentInfoHeader.tsx
index 12751166ab..1097719efc 100644
--- a/src/library-authoring/component-info/ComponentInfoHeader.tsx
+++ b/src/library-authoring/component-info/ComponentInfoHeader.tsx
@@ -9,19 +9,23 @@ import {
 import { Edit } from '@openedx/paragon/icons';
 
 import { ToastContext } from '../../generic/toast-context';
-import type { ContentLibrary } from '../data/api';
+import { useLibraryContext } from '../common/context';
 import { useUpdateXBlockFields, useXBlockFields } from '../data/apiHooks';
 import messages from './messages';
 
-interface ComponentInfoHeaderProps {
-  library: ContentLibrary;
-  usageKey: string;
-}
-
-const ComponentInfoHeader = ({ library, usageKey }: ComponentInfoHeaderProps) => {
+const ComponentInfoHeader = () => {
   const intl = useIntl();
   const [inputIsActive, setIsActive] = useState(false);
 
+  const {
+    currentComponentUsageKey: usageKey,
+    readOnly,
+  } = useLibraryContext();
+
+  // istanbul ignore next
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
   const {
     data: xblockFields,
   } = useXBlockFields(usageKey);
@@ -80,7 +84,7 @@ const ComponentInfoHeader = ({ library, usageKey }: ComponentInfoHeaderProps) =>
             <span className="font-weight-bold m-1.5">
               {xblockFields?.displayName}
             </span>
-            {library.canEditLibrary && (
+            {!readOnly && (
               <IconButton
                 src={Edit}
                 iconAs={Icon}
diff --git a/src/library-authoring/component-info/ComponentManagement.test.tsx b/src/library-authoring/component-info/ComponentManagement.test.tsx
index 96a12ec5dd..372ad1c7c0 100644
--- a/src/library-authoring/component-info/ComponentManagement.test.tsx
+++ b/src/library-authoring/component-info/ComponentManagement.test.tsx
@@ -1,18 +1,25 @@
 import { setConfig, getConfig } from '@edx/frontend-platform';
 
+import { mockContentTaxonomyTagsData } from '../../content-tags-drawer/data/api.mocks';
 import {
   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 ComponentManagement from './ComponentManagement';
-import { mockContentTaxonomyTagsData } from '../../content-tags-drawer/data/api.mocks';
 
 jest.mock('../../content-tags-drawer', () => ({
   ContentTagsDrawer: () => <div>Mocked ContentTagsDrawer</div>,
 }));
 
+mockContentLibrary.applyMock();
+mockLibraryBlockMetadata.applyMock();
+mockContentTaxonomyTagsData.applyMock();
+
+const { libraryId: mockLibraryId, libraryIdReadOnly } = mockContentLibrary;
+
 /*
  * This function is used to get the inner text of an element.
  * https://stackoverflow.com/questions/47902335/innertext-is-undefined-in-jest-test
@@ -27,20 +34,28 @@ const matchInnerText = (nodeName: string, textToMatch: string) => (_: string, el
   element.nodeName === nodeName && getInnerText(element) === textToMatch
 );
 
+const render = (usageKey: string) => baseRender(<ComponentManagement />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={mockLibraryId} componentUsageKey={usageKey}>
+      {children}
+    </LibraryProvider>
+  ),
+});
+
 describe('<ComponentManagement />', () => {
-  it('should render draft status', async () => {
+  beforeEach(() => {
     initializeMocks();
-    mockLibraryBlockMetadata.applyMock();
-    render(<ComponentManagement usageKey={mockLibraryBlockMetadata.usageKeyNeverPublished} />);
+  });
+
+  it('should render draft status', async () => {
+    render(mockLibraryBlockMetadata.usageKeyNeverPublished);
     expect(await screen.findByText('Draft')).toBeInTheDocument();
     expect(await screen.findByText('(Never Published)')).toBeInTheDocument();
     expect(screen.getByText(matchInnerText('SPAN', 'Draft saved on June 20, 2024 at 13:54.'))).toBeInTheDocument();
   });
 
   it('should render published status', async () => {
-    initializeMocks();
-    mockLibraryBlockMetadata.applyMock();
-    render(<ComponentManagement usageKey={mockLibraryBlockMetadata.usageKeyPublished} />);
+    render(mockLibraryBlockMetadata.usageKeyPublished);
     expect(await screen.findByText('Published')).toBeInTheDocument();
     expect(screen.getByText('Published')).toBeInTheDocument();
     expect(
@@ -53,9 +68,7 @@ describe('<ComponentManagement />', () => {
       ...getConfig(),
       ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
     });
-    initializeMocks();
-    mockLibraryBlockMetadata.applyMock();
-    render(<ComponentManagement usageKey={mockLibraryBlockMetadata.usageKeyNeverPublished} />);
+    render(mockLibraryBlockMetadata.usageKeyNeverPublished);
     expect(await screen.findByText('Tags (0)')).toBeInTheDocument();
     expect(screen.queryByText('Mocked ContentTagsDrawer')).toBeInTheDocument();
   });
@@ -65,9 +78,7 @@ describe('<ComponentManagement />', () => {
       ...getConfig(),
       ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
     });
-    initializeMocks();
-    mockLibraryBlockMetadata.applyMock();
-    render(<ComponentManagement usageKey={mockLibraryBlockMetadata.usageKeyNeverPublished} />);
+    render(mockLibraryBlockMetadata.usageKeyNeverPublished);
     expect(await screen.findByText('Draft')).toBeInTheDocument();
     expect(screen.queryByText('Tags')).not.toBeInTheDocument();
   });
@@ -77,10 +88,7 @@ describe('<ComponentManagement />', () => {
       ...getConfig(),
       ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
     });
-    initializeMocks();
-    mockLibraryBlockMetadata.applyMock();
-    mockContentTaxonomyTagsData.applyMock();
-    render(<ComponentManagement usageKey={mockLibraryBlockMetadata.usageKeyForTags} />);
+    render(mockLibraryBlockMetadata.usageKeyForTags);
     expect(await screen.findByText('Tags (6)')).toBeInTheDocument();
   });
 });
diff --git a/src/library-authoring/component-info/ComponentManagement.tsx b/src/library-authoring/component-info/ComponentManagement.tsx
index 92adb33107..0aac4d3910 100644
--- a/src/library-authoring/component-info/ComponentManagement.tsx
+++ b/src/library-authoring/component-info/ComponentManagement.tsx
@@ -4,17 +4,21 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Collapsible, Icon, Stack } from '@openedx/paragon';
 import { Tag } from '@openedx/paragon/icons';
 
+import { useLibraryContext } from '../common/context';
 import { useLibraryBlockMetadata } from '../data/apiHooks';
 import StatusWidget from '../generic/status-widget';
 import messages from './messages';
 import { ContentTagsDrawer } from '../../content-tags-drawer';
 import { useContentTaxonomyTagsData } from '../../content-tags-drawer/data/apiHooks';
 
-interface ComponentManagementProps {
-  usageKey: string;
-}
-const ComponentManagement = ({ usageKey }: ComponentManagementProps) => {
+const ComponentManagement = () => {
   const intl = useIntl();
+  const { currentComponentUsageKey: usageKey, readOnly } = useLibraryContext();
+
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+
   const { data: componentMetadata } = useLibraryBlockMetadata(usageKey);
   const { data: componentTags } = useContentTaxonomyTagsData(usageKey);
 
@@ -62,6 +66,7 @@ const ComponentManagement = ({ usageKey }: ComponentManagementProps) => {
           <ContentTagsDrawer
             id={usageKey}
             variant="component"
+            readOnly={readOnly}
           />
         </Collapsible>
         )}
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index fe71e94d67..a80498c47a 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, StandardModal, useToggle } from '@openedx/paragon';
 import { OpenInFull } from '@openedx/paragon/icons';
 
+import { useLibraryContext } from '../common/context';
 import { LibraryBlock } from '../LibraryBlock';
 import messages from './messages';
 
@@ -28,15 +28,18 @@ const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPrevie
   );
 };
 
-interface ComponentPreviewProps {
-  usageKey: string;
-}
-
-const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
+const ComponentPreview = () => {
   const intl = useIntl();
 
   const [isModalOpen, openModal, closeModal] = useToggle();
 
+  const { currentComponentUsageKey: usageKey } = useLibraryContext();
+
+  // istanbul ignore if: this should never happen
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+
   return (
     <>
       <div className="position-relative m-2">
diff --git a/src/library-authoring/component-picker/ComponentPicker.tsx b/src/library-authoring/component-picker/ComponentPicker.tsx
index 4c856897b5..dd7f5ab7fc 100644
--- a/src/library-authoring/component-picker/ComponentPicker.tsx
+++ b/src/library-authoring/component-picker/ComponentPicker.tsx
@@ -1,20 +1,18 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Stepper } from '@openedx/paragon';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { LibraryProvider } from '../common/context';
 import LibraryAuthoringPage from '../LibraryAuthoringPage';
 import SelectLibrary from './SelectLibrary';
+import messages from './messages';
 
 const ComponentPicker = () => {
+  const intl = useIntl();
+
   const [currentStep, setCurrentStep] = useState('select-library');
   const [selectedLibrary, setSelectedLibrary] = useState('');
 
-  useEffect(() => {
-    if (selectedLibrary) {
-      console.log('Selected library:', selectedLibrary);
-    }
-  });
-
   return (
     <Stepper
       activeKey={currentStep}
@@ -31,19 +29,16 @@ const ComponentPicker = () => {
 
       <div className="py-3">
         <Stepper.ActionRow eventKey="select-library">
-          <Button variant="outline-primary" onClick={() => alert('Cancel')}>
-            Cancel
-          </Button>
           <Stepper.ActionRow.Spacer />
-          <Button onClick={() => setCurrentStep('pick-components')}>Next</Button>
+          <Button onClick={() => setCurrentStep('pick-components')}>
+            {intl.formatMessage(messages.selectLibraryNextButton)}
+          </Button>
         </Stepper.ActionRow>
 
         <Stepper.ActionRow eventKey="pick-components">
           <Button variant="outline-primary" onClick={() => setCurrentStep('select-library')}>
-            Previous
+            {intl.formatMessage(messages.pickComponentPreviousButton)}
           </Button>
-          <Stepper.ActionRow.Spacer />
-          <Button onClick={() => alert('Completed')}>Close</Button>
         </Stepper.ActionRow>
       </div>
     </Stepper>
diff --git a/src/library-authoring/component-picker/SelectLibrary.tsx b/src/library-authoring/component-picker/SelectLibrary.tsx
index 73e2720b22..624b84580f 100644
--- a/src/library-authoring/component-picker/SelectLibrary.tsx
+++ b/src/library-authoring/component-picker/SelectLibrary.tsx
@@ -3,7 +3,8 @@ import {
   Alert,
   Card,
   Pagination,
-  RadioButton,
+  RadioControl,
+  Form,
   SearchField,
   Stack,
 } from '@openedx/paragon';
@@ -79,7 +80,7 @@ const SelectLibrary = ({ setSelectLibrary }: SelectLibraryProps) => {
               title={<span className="card-item-title">{library.title}</span>}
               subtitle={`${library.org} / ${library.slug}`}
               actions={(
-                <RadioButton
+                <RadioControl
                   name="select-library"
                   value={library.id}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSelectLibrary(e.target.value)}
diff --git a/src/library-authoring/component-picker/messages.ts b/src/library-authoring/component-picker/messages.ts
index 3135c67cc7..27a8b77386 100644
--- a/src/library-authoring/component-picker/messages.ts
+++ b/src/library-authoring/component-picker/messages.ts
@@ -26,6 +26,16 @@ const messages = defineMessages({
     defaultMessage: 'There are no libraries with the current filters.',
     description: 'The message for the empty state in the select library component',
   },
+  selectLibraryNextButton: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.next-button',
+    defaultMessage: 'Next',
+    description: 'The text for the next button in the select library component',
+  },
+  pickComponentPreviousButton: {
+    id: 'course-authoring.library-authoring.pick-components.previous-button',
+    defaultMessage: 'Previous',
+    description: 'The text for the previous button in the pick component component',
+  },
 });
 
 export default messages;
diff --git a/src/library-authoring/components/BaseComponentCard.tsx b/src/library-authoring/components/BaseComponentCard.tsx
index 1cd77ee7fb..4d98662bca 100644
--- a/src/library-authoring/components/BaseComponentCard.tsx
+++ b/src/library-authoring/components/BaseComponentCard.tsx
@@ -9,6 +9,7 @@ import {
 import { getItemIcon, getComponentStyleColor } from '../../generic/block-type-utils';
 import TagCount from '../../generic/tag-count';
 import { ContentHitTags, Highlight } from '../../search-manager';
+import { useLibraryContext } from '../common/context';
 
 type BaseComponentCardProps = {
   type: string,
@@ -38,6 +39,7 @@ const BaseComponentCard = ({
   }, [tags]);
 
   const componentIcon = getItemIcon(type);
+  const { componentPickerMode } = useLibraryContext();
 
   return (
     <Container className="library-component-card">
@@ -55,7 +57,7 @@ const BaseComponentCard = ({
           title={
             <Icon src={componentIcon} className="library-component-header-icon" />
           }
-          actions={actions}
+          actions={!componentPickerMode && actions}
         />
         <Card.Body>
           <Card.Section>
diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts
index 0a4b824119..ecc6785ff3 100644
--- a/src/library-authoring/data/api.mocks.ts
+++ b/src/library-authoring/data/api.mocks.ts
@@ -57,7 +57,7 @@ export async function mockContentLibrary(libraryId: string): Promise<api.Content
   switch (libraryId) {
     case mockContentLibrary.libraryIdThatNeverLoads:
       // Return a promise that never resolves, to simulate never loading:
-      return new Promise<any>(() => {});
+      return new Promise<any>(() => { });
     case mockContentLibrary.library404:
       throw createAxiosError({ code: 400, message: 'Not found.', path: api.getContentLibraryApiUrl(libraryId) });
     case mockContentLibrary.library500:
@@ -72,6 +72,61 @@ export async function mockContentLibrary(libraryId: string): Promise<api.Content
         allowPublicRead: true,
         canEditLibrary: false,
       };
+    case mockContentLibrary.libraryDraftWithoutUser:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryDraftWithoutUser,
+        slug: 'draftNoUser',
+        lastDraftCreatedBy: null,
+      };
+    case mockContentLibrary.libraryNoDraftDate:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryNoDraftDate,
+        slug: 'noDraftDate',
+        lastDraftCreated: null,
+      };
+    case mockContentLibrary.libraryNoDraftNoCrateDate:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryNoDraftNoCrateDate,
+        slug: 'noDraftNoCreateDate',
+        lastDraftCreated: null,
+        created: null,
+      };
+    case mockContentLibrary.libraryUnpublishedChanges:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryUnpublishedChanges,
+        slug: 'unpublishedChanges',
+        lastPublished: '2024-07-26T16:37:42Z',
+        hasUnpublishedChanges: true,
+      };
+    case mockContentLibrary.libraryPublished:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryPublished,
+        slug: 'published',
+        lastPublished: '2024-07-26T16:37:42Z',
+        hasUnpublishedChanges: false,
+        publishedBy: 'staff',
+      };
+    case mockContentLibrary.libraryPublishedWithoutUser:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryPublishedWithoutUser,
+        slug: 'publishedWithUser',
+        lastPublished: '2024-07-26T16:37:42Z',
+        hasUnpublishedChanges: false,
+        publishedBy: null,
+      };
+    case mockContentLibrary.libraryDraftWithoutChanges:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryDraftWithoutChanges,
+        slug: 'draftNoChanges',
+        numBlocks: 0,
+      };
     default:
       throw new Error(`mockContentLibrary: unknown library ID "${libraryId}"`);
   }
@@ -90,7 +145,7 @@ mockContentLibrary.libraryData = {
   lastPublished: null, // or e.g. '2024-08-30T16:37:42Z',
   publishedBy: null, // or e.g. 'test_author',
   lastDraftCreated: '2024-07-22T21:37:49Z',
-  lastDraftCreatedBy: null,
+  lastDraftCreatedBy: 'staff',
   allowLti: false,
   allowPublicLearning: false,
   allowPublicRead: false,
@@ -105,6 +160,13 @@ mockContentLibrary.libraryIdReadOnly = 'lib:Axim:readOnly';
 mockContentLibrary.libraryIdThatNeverLoads = 'lib:Axim:infiniteLoading';
 mockContentLibrary.library404 = 'lib:Axim:error404';
 mockContentLibrary.library500 = 'lib:Axim:error500';
+mockContentLibrary.libraryDraftWithoutUser = 'lib:Axim:draftNoUser';
+mockContentLibrary.libraryNoDraftDate = 'lib:Axim:noDraftDate';
+mockContentLibrary.libraryNoDraftNoCrateDate = 'lib:Axim:noDraftNoCreateDate';
+mockContentLibrary.libraryUnpublishedChanges = 'lib:Axim:unpublishedChanges';
+mockContentLibrary.libraryPublished = 'lib:Axim:published';
+mockContentLibrary.libraryPublishedWithoutUser = 'lib:Axim:publishedWithoutUser';
+mockContentLibrary.libraryDraftWithoutChanges = 'lib:Axim:draftNoChanges';
 mockContentLibrary.applyMock = () => jest.spyOn(api, 'getContentLibrary').mockImplementation(mockContentLibrary);
 
 /**
@@ -119,7 +181,7 @@ export async function mockCreateLibraryBlock(
       case 'problem': return mockCreateLibraryBlock.newProblemData;
       case 'video': return mockCreateLibraryBlock.newVideoData;
       default:
-        // Continue to error handling below.
+      // Continue to error handling below.
     }
   }
   throw new Error(`mockCreateLibraryBlock doesn't know how to mock ${JSON.stringify(args)}`);
@@ -230,7 +292,7 @@ export async function mockLibraryBlockMetadata(usageKey: string): Promise<api.Li
   switch (usageKey) {
     case thisMock.usageKeyThatNeverLoads:
       // Return a promise that never resolves, to simulate never loading:
-      return new Promise<any>(() => {});
+      return new Promise<any>(() => { });
     case thisMock.usageKeyError404:
       throw createAxiosError({ code: 404, message: 'Not found.', path: api.getLibraryBlockMetadataUrl(usageKey) });
     case thisMock.usageKeyNeverPublished: return thisMock.dataNeverPublished;
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index 5c96176763..c4a680b341 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -219,7 +219,8 @@ export async function createLibraryBlock({
  */
 export async function updateLibraryMetadata(libraryData: UpdateLibraryDataRequest): Promise<ContentLibrary> {
   const client = getAuthenticatedHttpClient();
-  const { data } = await client.patch(getContentLibraryApiUrl(libraryData.id), libraryData);
+  const { id: libraryId, ...updateData } = libraryData;
+  const { data } = await client.patch(getContentLibraryApiUrl(libraryId), updateData);
 
   return camelCaseObject(data);
 }
diff --git a/src/library-authoring/library-info/LibraryInfo.test.tsx b/src/library-authoring/library-info/LibraryInfo.test.tsx
index 09c8350e08..5fd699140a 100644
--- a/src/library-authoring/library-info/LibraryInfo.test.tsx
+++ b/src/library-authoring/library-info/LibraryInfo.test.tsx
@@ -1,109 +1,67 @@
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { initializeMockApp } from '@edx/frontend-platform';
-import MockAdapter from 'axios-mock-adapter';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import type MockAdapter from 'axios-mock-adapter';
+
 import {
-  render,
-  screen,
   fireEvent,
+  render as baseRender,
+  screen,
   waitFor,
-} from '@testing-library/react';
+  initializeMocks,
+} from '../../testUtils';
+import { mockContentLibrary } from '../data/api.mocks';
+import { getCommitLibraryChangesUrl } from '../data/api';
+import { LibraryProvider } from '../common/context';
 import LibraryInfo from './LibraryInfo';
-import { ToastProvider } from '../../generic/toast-context';
-import { ContentLibrary, getCommitLibraryChangesUrl } from '../data/api';
-import initializeStore from '../../store';
-
-let store;
-let axiosMock;
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
+
+const {
+  libraryId: mockLibraryId,
+  libraryIdReadOnly,
+  libraryDraftWithoutUser,
+  libraryNoDraftDate,
+  libraryNoDraftNoCrateDate,
+  libraryUnpublishedChanges,
+  libraryPublished,
+  libraryPublishedWithoutUser,
+  libraryDraftWithoutChanges,
+  libraryData,
+} = mockContentLibrary;
+
+const render = (libraryId: string = mockLibraryId) => baseRender(<LibraryInfo />, {
+  extraWrapper: ({ children }) => <LibraryProvider libraryId={libraryId}>{ children }</LibraryProvider>,
 });
 
-const libraryData: ContentLibrary = {
-  id: 'lib:org1:lib1',
-  type: 'complex',
-  org: 'org1',
-  slug: 'lib1',
-  title: 'lib1',
-  description: 'lib1',
-  numBlocks: 2,
-  version: 0,
-  lastPublished: null,
-  lastDraftCreated: '2024-07-22',
-  publishedBy: 'staff',
-  lastDraftCreatedBy: 'staff',
-  allowLti: false,
-  allowPublicLearning: false,
-  allowPublicRead: false,
-  hasUnpublishedChanges: true,
-  hasUnpublishedDeletes: false,
-  canEditLibrary: true,
-  license: '',
-  created: '2024-06-26',
-  updated: '2024-07-20',
-};
-
-interface WrapperProps {
-  data: ContentLibrary,
-}
-
-const RootWrapper = ({ data } : WrapperProps) => (
-  <AppProvider store={store}>
-    <IntlProvider locale="en" messages={{}}>
-      <QueryClientProvider client={queryClient}>
-        <ToastProvider>
-          <LibraryInfo library={data} />
-        </ToastProvider>
-      </QueryClientProvider>
-    </IntlProvider>
-  </AppProvider>
-);
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string) => void;
+
+mockContentLibrary.applyMock();
 
 describe('<LibraryInfo />', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
   });
 
   afterEach(() => {
     jest.clearAllMocks();
-    axiosMock.restore();
   });
 
-  it('should render Library info sidebar', () => {
-    render(<RootWrapper data={libraryData} />);
+  it('should render Library info sidebar', async () => {
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
     expect(screen.getByText('Draft')).toBeInTheDocument();
     expect(screen.getByText('(Never Published)')).toBeInTheDocument();
     expect(screen.getByText('July 22, 2024')).toBeInTheDocument();
     expect(screen.getByText('staff')).toBeInTheDocument();
-    expect(screen.getByText(libraryData.org)).toBeInTheDocument();
     expect(screen.getByText('July 20, 2024')).toBeInTheDocument();
     expect(screen.getByText('June 26, 2024')).toBeInTheDocument();
   });
 
-  it('should render Library info in draft state without user', () => {
-    const data = {
-      ...libraryData,
-      lastDraftCreatedBy: null,
-    };
+  it('should render Library info in draft state without user', async () => {
+    render(libraryDraftWithoutUser);
 
-    render(<RootWrapper data={data} />);
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
     expect(screen.getByText('Draft')).toBeInTheDocument();
     expect(screen.getByText('(Never Published)')).toBeInTheDocument();
@@ -111,13 +69,10 @@ describe('<LibraryInfo />', () => {
     expect(screen.queryByText('staff')).not.toBeInTheDocument();
   });
 
-  it('should render Library creation date if last draft created date is null', () => {
-    const data = {
-      ...libraryData,
-      lastDraftCreated: null,
-    };
+  it('should render Library creation date if last draft created date is null', async () => {
+    render(libraryNoDraftDate);
 
-    render(<RootWrapper data={data} />);
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
     expect(screen.getByText('Draft')).toBeInTheDocument();
     expect(screen.getByText('(Never Published)')).toBeInTheDocument();
@@ -125,26 +80,19 @@ describe('<LibraryInfo />', () => {
     expect(screen.getAllByText('June 26, 2024')[1]).toBeInTheDocument();
   });
 
-  it('should render library info in draft state without date', () => {
-    const data = {
-      ...libraryData,
-      lastDraftCreated: null,
-      created: null,
-    };
+  it('should render library info in draft state without date', async () => {
+    render(libraryNoDraftNoCrateDate);
 
-    render(<RootWrapper data={data} />);
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
     expect(screen.getByText('Draft')).toBeInTheDocument();
     expect(screen.getByText('(Never Published)')).toBeInTheDocument();
   });
 
-  it('should render draft library info sidebar', () => {
-    const data = {
-      ...libraryData,
-      lastPublished: '2024-07-26',
-    };
+  it('should render library info with unpublished changes', async () => {
+    render(libraryUnpublishedChanges);
 
-    render(<RootWrapper data={data} />);
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
     expect(screen.getByText('Draft')).toBeInTheDocument();
     expect(screen.queryByText('(Never Published)')).not.toBeInTheDocument();
@@ -152,28 +100,21 @@ describe('<LibraryInfo />', () => {
     expect(screen.getByText('staff')).toBeInTheDocument();
   });
 
-  it('should render published library info sidebar', () => {
-    const data = {
-      ...libraryData,
-      lastPublished: '2024-07-26',
-      hasUnpublishedChanges: false,
-    };
+  it('should render published library info sidebar', async () => {
+    render(libraryPublished);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
-    render(<RootWrapper data={data} />);
     expect(screen.getByText('Published')).toBeInTheDocument();
     expect(screen.getByText('July 26, 2024')).toBeInTheDocument();
     expect(screen.getByText('staff')).toBeInTheDocument();
   });
 
-  it('should render published library info without user', () => {
-    const data = {
-      ...libraryData,
-      lastPublished: '2024-07-26',
-      hasUnpublishedChanges: false,
-      publishedBy: null,
-    };
+  it('should render published library info without user', async () => {
+    render(libraryPublishedWithoutUser);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
-    render(<RootWrapper data={data} />);
     expect(screen.getByText('Published')).toBeInTheDocument();
     expect(screen.getByText('July 26, 2024')).toBeInTheDocument();
     expect(screen.queryByText('staff')).not.toBeInTheDocument();
@@ -182,66 +123,91 @@ describe('<LibraryInfo />', () => {
   it('should publish library', async () => {
     const url = getCommitLibraryChangesUrl(libraryData.id);
     axiosMock.onPost(url).reply(200);
-    render(<RootWrapper data={libraryData} />);
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
     const publishButton = screen.getByRole('button', { name: /publish/i });
     fireEvent.click(publishButton);
 
-    expect(await screen.findByText('Library published successfully')).toBeInTheDocument();
-
-    await waitFor(() => expect(axiosMock.history.post[0].url).toEqual(url));
+    await waitFor(() => {
+      expect(axiosMock.history.post[0].url).toEqual(url);
+      expect(mockShowToast).toHaveBeenCalledWith('Library published successfully');
+    });
   });
 
   it('should show error on publish library', async () => {
     const url = getCommitLibraryChangesUrl(libraryData.id);
     axiosMock.onPost(url).reply(500);
-    render(<RootWrapper data={libraryData} />);
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
     const publishButton = screen.getByRole('button', { name: /publish/i });
     fireEvent.click(publishButton);
 
-    expect(await screen.findByText('There was an error publishing the library.')).toBeInTheDocument();
-
-    await waitFor(() => expect(axiosMock.history.post[0].url).toEqual(url));
+    await waitFor(() => {
+      expect(axiosMock.history.post[0].url).toEqual(url);
+      expect(mockShowToast).toHaveBeenCalledWith('There was an error publishing the library.');
+    });
   });
 
   it('should discard changes', async () => {
     const url = getCommitLibraryChangesUrl(libraryData.id);
     axiosMock.onDelete(url).reply(200);
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
-    render(<RootWrapper data={libraryData} />);
     const discardButton = screen.getByRole('button', { name: /discard changes/i });
     fireEvent.click(discardButton);
 
-    expect(await screen.findByText('Library changes reverted successfully')).toBeInTheDocument();
-
-    await waitFor(() => expect(axiosMock.history.delete[0].url).toEqual(url));
+    await waitFor(() => {
+      expect(axiosMock.history.delete[0].url).toEqual(url);
+      expect(mockShowToast).toHaveBeenCalledWith('Library changes reverted successfully');
+    });
   });
 
   it('should show error on discard changes', async () => {
     const url = getCommitLibraryChangesUrl(libraryData.id);
     axiosMock.onDelete(url).reply(500);
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
-    render(<RootWrapper data={libraryData} />);
     const discardButton = screen.getByRole('button', { name: /discard changes/i });
     fireEvent.click(discardButton);
 
-    expect(await screen.findByText('There was an error reverting changes in the library.')).toBeInTheDocument();
-
-    await waitFor(() => expect(axiosMock.history.delete[0].url).toEqual(url));
+    await waitFor(() => {
+      expect(axiosMock.history.delete[0].url).toEqual(url);
+      expect(mockShowToast).toHaveBeenCalledWith('There was an error reverting changes in the library.');
+    });
   });
 
   it('discard changes btn should be disabled for new libraries', async () => {
-    render(<RootWrapper data={{ ...libraryData, lastPublished: null, numBlocks: 0 }} />);
-    const discardButton = screen.getByRole('button', { name: /discard changes/i });
+    render(libraryDraftWithoutChanges);
 
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    const discardButton = screen.getByRole('button', { name: /discard changes/i });
     expect(discardButton).toBeDisabled();
   });
 
   it('discard changes btn should be enabled for new libraries if components are added', async () => {
-    render(<RootWrapper data={{ ...libraryData, lastPublished: null, numBlocks: 2 }} />);
-    const discardButton = screen.getByRole('button', { name: /discard changes/i });
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
 
+    const discardButton = screen.getByRole('button', { name: /discard changes/i });
     expect(discardButton).not.toBeDisabled();
   });
+
+  it('should render library info in read-only mode', async () => {
+    render(libraryIdReadOnly);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    expect(screen.queryByRole('button', { name: /publish/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /discard changes/i })).not.toBeInTheDocument();
+  });
 });
diff --git a/src/library-authoring/library-info/LibraryInfo.tsx b/src/library-authoring/library-info/LibraryInfo.tsx
index e8e190a05d..ccb368d84a 100644
--- a/src/library-authoring/library-info/LibraryInfo.tsx
+++ b/src/library-authoring/library-info/LibraryInfo.tsx
@@ -1,26 +1,23 @@
-import React from 'react';
 import { Stack } from '@openedx/paragon';
 import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
+
+import { useLibraryContext } from '../common/context';
 import messages from './messages';
 import LibraryPublishStatus from './LibraryPublishStatus';
-import { ContentLibrary } from '../data/api';
-
-type LibraryInfoProps = {
-  library: ContentLibrary,
-};
 
-const LibraryInfo = ({ library } : LibraryInfoProps) => {
+const LibraryInfo = () => {
   const intl = useIntl();
+  const { libraryData } = useLibraryContext();
 
   return (
     <Stack direction="vertical" gap={2.5}>
-      <LibraryPublishStatus library={library} />
+      <LibraryPublishStatus />
       <Stack gap={3} direction="vertical">
         <span className="font-weight-bold">
           {intl.formatMessage(messages.organizationSectionTitle)}
         </span>
         <span>
-          {library.org}
+          {libraryData?.org}
         </span>
       </Stack>
       <Stack gap={3}>
@@ -33,7 +30,7 @@ const LibraryInfo = ({ library } : LibraryInfoProps) => {
           </span>
           <span className="small">
             <FormattedDate
-              value={library.updated ?? undefined}
+              value={libraryData?.updated ?? undefined}
               year="numeric"
               month="long"
               day="2-digit"
@@ -46,7 +43,7 @@ const LibraryInfo = ({ library } : LibraryInfoProps) => {
           </span>
           <span className="small">
             <FormattedDate
-              value={library.created ?? undefined}
+              value={libraryData?.created ?? undefined}
               year="numeric"
               month="long"
               day="2-digit"
diff --git a/src/library-authoring/library-info/LibraryInfoHeader.test.tsx b/src/library-authoring/library-info/LibraryInfoHeader.test.tsx
index c67e9ed0d3..00e743afd2 100644
--- a/src/library-authoring/library-info/LibraryInfoHeader.test.tsx
+++ b/src/library-authoring/library-info/LibraryInfoHeader.test.tsx
@@ -1,113 +1,59 @@
-import React from 'react';
-import MockAdapter from 'axios-mock-adapter';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type MockAdapter from 'axios-mock-adapter';
+
 import {
-  render,
-  screen,
   fireEvent,
+  render as baseRender,
+  screen,
   waitFor,
-} from '@testing-library/react';
-import { ContentLibrary, getContentLibraryApiUrl } from '../data/api';
-import initializeStore from '../../store';
-import { ToastProvider } from '../../generic/toast-context';
+  initializeMocks,
+} from '../../testUtils';
+import { mockContentLibrary } from '../data/api.mocks';
+import { getContentLibraryApiUrl } from '../data/api';
+import { LibraryProvider } from '../common/context';
 import LibraryInfoHeader from './LibraryInfoHeader';
 
-let store;
-let axiosMock;
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
+const { libraryId: mockLibraryId, libraryIdReadOnly, libraryData } = mockContentLibrary;
+
+const render = (libraryId: string = mockLibraryId) => baseRender(<LibraryInfoHeader />, {
+  extraWrapper: ({ children }) => <LibraryProvider libraryId={libraryId}>{ children }</LibraryProvider>,
 });
 
-const libraryData: ContentLibrary = {
-  id: 'lib:org1:lib1',
-  type: 'complex',
-  org: 'org1',
-  slug: 'lib1',
-  title: 'lib1',
-  description: 'lib1',
-  numBlocks: 2,
-  version: 0,
-  lastPublished: null,
-  lastDraftCreated: '2024-07-22',
-  publishedBy: 'staff',
-  lastDraftCreatedBy: 'staff',
-  allowLti: false,
-  allowPublicLearning: false,
-  allowPublicRead: false,
-  hasUnpublishedChanges: true,
-  hasUnpublishedDeletes: false,
-  canEditLibrary: true,
-  license: '',
-  created: '2024-06-26',
-  updated: '2024-07-20',
-};
-
-interface WrapperProps {
-  data: ContentLibrary,
-}
-
-const RootWrapper = ({ data } : WrapperProps) => (
-  <AppProvider store={store}>
-    <IntlProvider locale="en" messages={{}}>
-      <QueryClientProvider client={queryClient}>
-        <ToastProvider>
-          <LibraryInfoHeader library={data} />
-        </ToastProvider>
-      </QueryClientProvider>
-    </IntlProvider>
-  </AppProvider>
-);
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string) => void;
+
+mockContentLibrary.applyMock();
 
 describe('<LibraryInfoHeader />', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
   });
 
   afterEach(() => {
     jest.clearAllMocks();
-    axiosMock.restore();
   });
 
-  it('should render Library info Header', () => {
-    render(<RootWrapper data={libraryData} />);
+  it('should render Library info Header', async () => {
+    render();
 
-    expect(screen.getByText(libraryData.title)).toBeInTheDocument();
+    expect(await screen.findByText(libraryData.title)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /edit library name/i })).toBeInTheDocument();
   });
 
-  it('should not render edit title button without permission', () => {
-    const data = {
-      ...libraryData,
-      canEditLibrary: false,
-    };
-
-    render(<RootWrapper data={data} />);
+  it('should not render edit title button without permission', async () => {
+    render(libraryIdReadOnly);
 
+    expect(await screen.findByText(libraryData.title)).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /edit library name/i })).not.toBeInTheDocument();
   });
 
   it('should edit library title', async () => {
-    queryClient.getQueriesData = jest.fn().mockReturnValue([[null, { id: 1, title: 'Old Title' }]]);
     const url = getContentLibraryApiUrl(libraryData.id);
     axiosMock.onPatch(url).reply(200);
-    render(<RootWrapper data={libraryData} />);
+    render();
+
+    expect(await screen.findByText(libraryData.title)).toBeInTheDocument();
 
     const editTitleButton = screen.getByRole('button', { name: /edit library name/i });
     fireEvent.click(editTitleButton);
@@ -118,15 +64,20 @@ describe('<LibraryInfoHeader />', () => {
     fireEvent.keyDown(textBox, { key: 'Enter', code: 'Enter', charCode: 13 });
 
     expect(textBox).not.toBeInTheDocument();
-    expect(await screen.findByText('Library updated successfully')).toBeInTheDocument();
 
-    await waitFor(() => expect(axiosMock.history.patch[0].url).toEqual(url));
+    await waitFor(() => {
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ title: 'New Library Title' }));
+      expect(mockShowToast).toHaveBeenCalledWith('Library updated successfully');
+    });
   });
 
   it('should close edit library title on press Escape', async () => {
     const url = getContentLibraryApiUrl(libraryData.id);
     axiosMock.onPatch(url).reply(200);
-    render(<RootWrapper data={libraryData} />);
+    render();
+
+    expect(await screen.findByText(libraryData.title)).toBeInTheDocument();
 
     const editTitleButton = screen.getByRole('button', { name: /edit library name/i });
     fireEvent.click(editTitleButton);
@@ -136,13 +87,17 @@ describe('<LibraryInfoHeader />', () => {
 
     expect(textBox).not.toBeInTheDocument();
 
-    await waitFor(() => expect(axiosMock.history.patch.length).toEqual(0));
+    await waitFor(() => {
+      expect(axiosMock.history.patch.length).toEqual(0);
+    });
   });
 
   it('should show error on edit library tittle', async () => {
     const url = getContentLibraryApiUrl(libraryData.id);
     axiosMock.onPatch(url).reply(500);
-    render(<RootWrapper data={libraryData} />);
+    render();
+
+    expect(await screen.findByText(libraryData.title)).toBeInTheDocument();
 
     const editTitleButton = screen.getByRole('button', { name: /edit library name/i });
     fireEvent.click(editTitleButton);
@@ -152,8 +107,12 @@ describe('<LibraryInfoHeader />', () => {
     fireEvent.change(textBox, { target: { value: 'New Library Title' } });
     fireEvent.keyDown(textBox, { key: 'Enter', code: 'Enter', charCode: 13 });
 
-    expect(await screen.findByText('There was an error updating the library')).toBeInTheDocument();
+    expect(textBox).not.toBeInTheDocument();
 
-    await waitFor(() => expect(axiosMock.history.patch[0].url).toEqual(url));
+    await waitFor(() => {
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ title: 'New Library Title' }));
+      expect(mockShowToast).toHaveBeenCalledWith('There was an error updating the library');
+    });
   });
 });
diff --git a/src/library-authoring/library-info/LibraryInfoHeader.tsx b/src/library-authoring/library-info/LibraryInfoHeader.tsx
index dbb9a84871..9bbbad82a2 100644
--- a/src/library-authoring/library-info/LibraryInfoHeader.tsx
+++ b/src/library-authoring/library-info/LibraryInfoHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import { useState, useContext } from 'react';
 import {
   Icon,
   IconButton,
@@ -7,20 +7,22 @@ import {
 } from '@openedx/paragon';
 import { Edit } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import messages from './messages';
-import type { ContentLibrary } from '../data/api';
-import { useUpdateLibraryMetadata } from '../data/apiHooks';
-import { ToastContext } from '../../generic/toast-context';
 
-type LibraryInfoHeaderProps = {
-  library: ContentLibrary,
-};
+import { ToastContext } from '../../generic/toast-context';
+import { useLibraryContext } from '../common/context';
+import { useUpdateLibraryMetadata } from '../data/apiHooks';
+import messages from './messages';
 
-const LibraryInfoHeader = ({ library } : LibraryInfoHeaderProps) => {
+const LibraryInfoHeader = () => {
   const intl = useIntl();
   const [inputIsActive, setIsActive] = useState(false);
   const updateMutation = useUpdateLibraryMetadata();
   const { showToast } = useContext(ToastContext);
+  const { libraryData: library, readOnly } = useLibraryContext();
+
+  if (!library) {
+    return null;
+  }
 
   const handleSaveTitle = (event) => {
     const newTitle = event.target.value;
@@ -69,7 +71,7 @@ const LibraryInfoHeader = ({ library } : LibraryInfoHeaderProps) => {
             <span className="font-weight-bold mt-1.5 ml-1.5">
               {library.title}
             </span>
-            {library.canEditLibrary && (
+            {!readOnly && (
               <IconButton
                 src={Edit}
                 iconAs={Icon}
diff --git a/src/library-authoring/library-info/LibraryPublishStatus.tsx b/src/library-authoring/library-info/LibraryPublishStatus.tsx
index 0765b0e04f..6637c51796 100644
--- a/src/library-authoring/library-info/LibraryPublishStatus.tsx
+++ b/src/library-authoring/library-info/LibraryPublishStatus.tsx
@@ -1,45 +1,51 @@
-import React, { useCallback, useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { ToastContext } from '../../generic/toast-context';
-import StatusWidget from '../generic/status-widget';
+import { useLibraryContext } from '../common/context';
 import { useCommitLibraryChanges, useRevertLibraryChanges } from '../data/apiHooks';
-import { ContentLibrary } from '../data/api';
+import StatusWidget from '../generic/status-widget';
 import messages from './messages';
 
-type LibraryPublishStatusProps = {
-  library: ContentLibrary,
-};
-
-const LibraryPublishStatus = ({ library } : LibraryPublishStatusProps) => {
+const LibraryPublishStatus = () => {
   const intl = useIntl();
+  const { libraryData, readOnly } = useLibraryContext();
+
   const commitLibraryChanges = useCommitLibraryChanges();
   const revertLibraryChanges = useRevertLibraryChanges();
   const { showToast } = useContext(ToastContext);
 
   const commit = useCallback(() => {
-    commitLibraryChanges.mutateAsync(library.id)
-      .then(() => {
-        showToast(intl.formatMessage(messages.publishSuccessMsg));
-      }).catch(() => {
-        showToast(intl.formatMessage(messages.publishErrorMsg));
-      });
-  }, []);
+    if (libraryData) {
+      commitLibraryChanges.mutateAsync(libraryData.id)
+        .then(() => {
+          showToast(intl.formatMessage(messages.publishSuccessMsg));
+        }).catch(() => {
+          showToast(intl.formatMessage(messages.publishErrorMsg));
+        });
+    }
+  }, [libraryData]);
 
   const revert = useCallback(() => {
-    revertLibraryChanges.mutateAsync(library.id)
-      .then(() => {
-        showToast(intl.formatMessage(messages.revertSuccessMsg));
-      }).catch(() => {
-        showToast(intl.formatMessage(messages.revertErrorMsg));
-      });
-  }, []);
+    if (libraryData) {
+      revertLibraryChanges.mutateAsync(libraryData.id)
+        .then(() => {
+          showToast(intl.formatMessage(messages.revertSuccessMsg));
+        }).catch(() => {
+          showToast(intl.formatMessage(messages.revertErrorMsg));
+        });
+    }
+  }, [libraryData]);
+
+  if (!libraryData) {
+    return null;
+  }
 
   return (
     <StatusWidget
-      {...library}
-      onCommit={commit}
-      onRevert={revert}
+      {...libraryData}
+      onCommit={!readOnly ? commit : undefined}
+      onRevert={!readOnly ? revert : undefined}
     />
   );
 };
diff --git a/src/library-authoring/library-sidebar/LibrarySidebar.tsx b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
index 729484a071..c877c77c97 100644
--- a/src/library-authoring/library-sidebar/LibrarySidebar.tsx
+++ b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
@@ -9,16 +9,11 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { AddContentContainer, AddContentHeader } from '../add-content';
 import { CollectionInfo, CollectionInfoHeader } from '../collections';
-import { ContentLibrary } from '../data/api';
 import { SidebarBodyComponentId, useLibraryContext } from '../common/context';
 import { ComponentInfo, ComponentInfoHeader } from '../component-info';
 import { LibraryInfo, LibraryInfoHeader } from '../library-info';
 import messages from '../messages';
 
-type LibrarySidebarProps = {
-  library: ContentLibrary,
-};
-
 /**
  * Sidebar container for library pages.
  *
@@ -28,36 +23,26 @@ type LibrarySidebarProps = {
  * You can add more components in `bodyComponentMap`.
  * Use the returned actions to open and close this sidebar.
  */
-const LibrarySidebar = ({ library }: LibrarySidebarProps) => {
+const LibrarySidebar = () => {
   const intl = useIntl();
   const {
     sidebarBodyComponent,
     closeLibrarySidebar,
-    currentComponentUsageKey,
-    currentCollectionId,
   } = useLibraryContext();
 
   const bodyComponentMap = {
     [SidebarBodyComponentId.AddContent]: <AddContentContainer />,
-    [SidebarBodyComponentId.Info]: <LibraryInfo library={library} />,
-    [SidebarBodyComponentId.ComponentInfo]: (
-      currentComponentUsageKey && <ComponentInfo usageKey={currentComponentUsageKey} />
-    ),
-    [SidebarBodyComponentId.CollectionInfo]: (
-      currentCollectionId && <CollectionInfo library={library} collectionId={currentCollectionId} />
-    ),
+    [SidebarBodyComponentId.Info]: <LibraryInfo />,
+    [SidebarBodyComponentId.ComponentInfo]: <ComponentInfo />,
+    [SidebarBodyComponentId.CollectionInfo]: <CollectionInfo />,
     unknown: null,
   };
 
   const headerComponentMap = {
     [SidebarBodyComponentId.AddContent]: <AddContentHeader />,
-    [SidebarBodyComponentId.Info]: <LibraryInfoHeader library={library} />,
-    [SidebarBodyComponentId.ComponentInfo]: (
-      currentComponentUsageKey && <ComponentInfoHeader library={library} usageKey={currentComponentUsageKey} />
-    ),
-    [SidebarBodyComponentId.CollectionInfo]: (
-      currentCollectionId && <CollectionInfoHeader library={library} collectionId={currentCollectionId} />
-    ),
+    [SidebarBodyComponentId.Info]: <LibraryInfoHeader />,
+    [SidebarBodyComponentId.ComponentInfo]: <ComponentInfoHeader />,
+    [SidebarBodyComponentId.CollectionInfo]: <CollectionInfoHeader />,
     unknown: null,
   };