fix: more fixes

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -207,7 +207,6 @@ describe('<LibraryAuthoringPage />', () => {
     await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
 
     expect(await screen.findByText('Content library')).toBeInTheDocument();
-    screen.logTestingPlaygroundURL();
     expect(screen.getByText('You have not added any content to this library yet.')).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /add component/i })).not.toBeInTheDocument();
     expect(screen.getByText('Read Only')).toBeInTheDocument();

src/library-authoring/LibraryAuthoringPage.tsx

@@ -110,9 +110,13 @@ const HeaderActions = () => {
   );
 };
 
-const SubHeaderTitle = ({ title, showReadOnlyBadge }: { title: string, showReadOnlyBadge: boolean }) => {
+const SubHeaderTitle = ({ title }: { title: string }) => {
   const intl = useIntl();
 
+  const { readOnly, componentPickerMode } = useLibraryContext();
+
+  const showReadOnlyBadge = readOnly && !componentPickerMode;
+
   return (
     <Stack direction="vertical">
       {title}
@@ -202,16 +206,9 @@ const LibraryAuthoringPage = () => {
             extraFilter={`context_key = "${libraryId}"`}
           >
             <SubHeader
-              title={(
-                <SubHeaderTitle
-                  title={libraryData.title}
-                  showReadOnlyBadge={!componentPickerMode && !libraryData.canEditLibrary}
-                />
-              )}
+              title={<SubHeaderTitle title={libraryData.title} />}
               subtitle={intl.formatMessage(messages.headingSubtitle)}
-              headerActions={(
-                <HeaderActions />
-              )}
+              headerActions={<HeaderActions />}
             />
             <SearchKeywordsField className="w-50" />
             <div className="d-flex mt-3 align-items-center">

src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx

@@ -1,7 +1,7 @@
 import {
   fireEvent,
   initializeMocks,
-  render,
+  render as baseRender,
   screen,
   waitFor,
 } from '../../testUtils';
@@ -21,32 +21,39 @@ mockXBlockAssets.applyMock();
 mockXBlockOLX.applyMock();
 const setOLXspy = mockSetXBlockOLX.applyMock();
 
-const withLibraryId = (libraryId: string = mockContentLibrary.libraryId) => ({
-  extraWrapper: ({ children }: { children: React.ReactNode }) => (
-    <LibraryProvider libraryId={libraryId}>{children}</LibraryProvider>
-  ),
-});
+const render = (
+  usageKey: string = mockLibraryBlockMetadata.usageKeyPublished,
+  libraryId: string = mockContentLibrary.libraryId,
+) => baseRender(
+  <ComponentAdvancedInfo />,
+  {
+    extraWrapper: ({ children }: { children: React.ReactNode }) => (
+      <LibraryProvider libraryId={libraryId} sidebarComponentUsageKey={usageKey}>{children}</LibraryProvider>
+    ),
+  },
+);
 
 describe('<ComponentAdvancedInfo />', () => {
-  it('should display nothing when collapsed', async () => {
+  beforeEach(() => {
     initializeMocks();
-    render(<ComponentAdvancedInfo usageKey={mockLibraryBlockMetadata.usageKeyPublished} />, withLibraryId());
+  });
+
+  it('should display nothing when collapsed', async () => {
+    render();
     const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
     expect(expandButton).toBeInTheDocument();
     expect(screen.queryByText(mockLibraryBlockMetadata.usageKeyPublished)).not.toBeInTheDocument();
   });
 
   it('should display the usage key of the block (when expanded)', async () => {
-    initializeMocks();
-    render(<ComponentAdvancedInfo usageKey={mockLibraryBlockMetadata.usageKeyPublished} />, withLibraryId());
+    render();
     const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
     fireEvent.click(expandButton);
     expect(await screen.findByText(mockLibraryBlockMetadata.usageKeyPublished)).toBeInTheDocument();
   });
 
   it('should display the static assets of the block (when expanded)', async () => {
-    initializeMocks();
-    render(<ComponentAdvancedInfo usageKey={mockLibraryBlockMetadata.usageKeyPublished} />, withLibraryId());
+    render();
     const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
     fireEvent.click(expandButton);
     expect(await screen.findByText(/static\/image1\.png/)).toBeInTheDocument();
@@ -56,30 +63,24 @@ describe('<ComponentAdvancedInfo />', () => {
   });
 
   it('should display the OLX source of the block (when expanded)', async () => {
-    initializeMocks();
-    render(<ComponentAdvancedInfo usageKey={mockXBlockOLX.usageKeyHtml} />, withLibraryId());
+    render(mockXBlockOLX.usageKeyHtml);
     const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
     fireEvent.click(expandButton);
     // Because of syntax highlighting, the OLX will be borken up by many different tags so we need to search for
     // just a substring:
     const olxPart = /This is a text component which uses/;
-    expect(await screen.findByText(olxPart)).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByText(olxPart)).toBeInTheDocument());
   });
 
   it('does not display "Edit OLX" button when the library is read-only', async () => {
-    initializeMocks();
-    render(
-      <ComponentAdvancedInfo usageKey={mockXBlockOLX.usageKeyHtml} />,
-      withLibraryId(mockContentLibrary.libraryIdReadOnly),
-    );
+    render(mockXBlockOLX.usageKeyHtml, mockContentLibrary.libraryIdReadOnly);
     const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
     fireEvent.click(expandButton);
     expect(screen.queryByRole('button', { name: /Edit OLX/ })).not.toBeInTheDocument();
   });
 
   it('can edit the OLX', async () => {
-    initializeMocks();
-    render(<ComponentAdvancedInfo usageKey={mockLibraryBlockMetadata.usageKeyPublished} />, withLibraryId());
+    render();
     const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
     fireEvent.click(expandButton);
     const editButton = await screen.findByRole('button', { name: /Edit OLX/ });
@@ -94,13 +95,11 @@ describe('<ComponentAdvancedInfo />', () => {
   });
 
   it('displays an error if editing the OLX failed', async () => {
-    initializeMocks();
-
     setOLXspy.mockImplementation(async () => {
       throw new Error('Example error - setting OLX failed');
     });
 
-    render(<ComponentAdvancedInfo usageKey={mockLibraryBlockMetadata.usageKeyPublished} />, withLibraryId());
+    render(mockLibraryBlockMetadata.usageKeyPublished);
     const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
     fireEvent.click(expandButton);
     const editButton = await screen.findByRole('button', { name: /Edit OLX/ });

src/library-authoring/component-info/ComponentAdvancedInfo.tsx

@@ -20,13 +20,15 @@ import {
 } from '../data/apiHooks';
 import messages from './messages';
 
-interface Props {
-  usageKey: string;
-}
-
-export const ComponentAdvancedInfo: React.FC<Props> = ({ usageKey }) => {
+export const ComponentAdvancedInfo: React.FC<Record<never, never>> = () => {
   const intl = useIntl();
-  const { readOnly } = useLibraryContext();
+  const { readOnly, sidebarComponentUsageKey: usageKey } = useLibraryContext();
+
+  // istanbul ignore if: this should never happen in production
+  if (!usageKey) {
+    throw new Error('sidebarComponentUsageKey is required to render ComponentAdvancedInfo');
+  }
+
   const { data: olx, isLoading: isOLXLoading } = useXBlockOLX(usageKey);
   const { data: assets, isLoading: areAssetsLoading } = useXBlockAssets(usageKey);
   const editorRef = React.useRef<EditorAccessor | undefined>(undefined);
@@ -45,6 +47,7 @@ export const ComponentAdvancedInfo: React.FC<Props> = ({ usageKey }) => {
       // On error, an <Alert> is shown below. We catch here to avoid the error propagating up.
     });
   }, [editorRef, olxUpdater, intl]);
+
   return (
     <Collapsible
       styling="basic"

src/library-authoring/component-info/ComponentDetails.tsx

@@ -51,7 +51,7 @@ const ComponentDetails = () => {
           {...componentMetadata}
         />
       </div>
-      <ComponentAdvancedInfo usageKey={usageKey} />
+      <ComponentAdvancedInfo />
     </Stack>
   );
 };