From d3e4d3d6fe79d4d52eda7d8b29ce7ba74a20eb23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Thu, 26 Sep 2024 17:11:25 -0300
Subject: [PATCH] refactor: stop using meilisearch to get a single collection

---
 .../LibraryAuthoringPage.test.tsx             | 14 ++++--
 .../__mocks__/library-search.json             |  1 +
 .../collections/CollectionDetails.test.tsx    | 47 ++++++++-----------
 .../collections/CollectionDetails.tsx         | 39 ++++++++-------
 .../collections/CollectionInfo.tsx            | 11 ++---
 .../collections/CollectionInfoHeader.test.tsx | 41 ++++++++++------
 .../collections/CollectionInfoHeader.tsx      | 21 +++++----
 .../LibraryCollectionPage.test.tsx            | 29 +++++++-----
 .../collections/LibraryCollectionPage.tsx     | 22 +++++----
 src/library-authoring/common/context.tsx      | 19 ++++----
 .../components/CollectionCard.tsx             |  2 +-
 src/library-authoring/data/api.mocks.ts       | 29 ++++++++++++
 src/library-authoring/data/api.ts             |  8 ++++
 src/library-authoring/data/apiHooks.ts        | 17 ++++++-
 .../library-sidebar/LibrarySidebar.tsx        |  6 +--
 src/search-manager/data/api.mock.ts           | 23 ---------
 16 files changed, 194 insertions(+), 135 deletions(-)

diff --git a/src/library-authoring/LibraryAuthoringPage.test.tsx b/src/library-authoring/LibraryAuthoringPage.test.tsx
index 78cfdbfda1..b2b044429a 100644
--- a/src/library-authoring/LibraryAuthoringPage.test.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.test.tsx
@@ -11,12 +11,18 @@ import {
 } from '../testUtils';
 import mockResult from './__mocks__/library-search.json';
 import mockEmptyResult from '../search-modal/__mocks__/empty-search-result.json';
-import { mockContentLibrary, mockLibraryBlockTypes, mockXBlockFields } from './data/api.mocks';
+import {
+  mockContentLibrary,
+  mockGetCollectionMetadata,
+  mockLibraryBlockTypes,
+  mockXBlockFields,
+} from './data/api.mocks';
 import { mockContentSearchConfig } from '../search-manager/data/api.mock';
 import { mockBroadcastChannel } from '../generic/data/api.mock';
 import { LibraryLayout } from '.';
 import { getLibraryCollectionsApiUrl } from './data/api';
 
+mockGetCollectionMetadata.applyMock();
 mockContentSearchConfig.applyMock();
 mockContentLibrary.applyMock();
 mockLibraryBlockTypes.applyMock();
@@ -459,17 +465,17 @@ describe('<LibraryAuthoringPage />', () => {
   });
 
   it('should open and close the collection sidebar', async () => {
-    const displayName = 'Collection 1';
     await renderLibraryPage();
 
     // Click on the first component. It could appear twice, in both "Recently Modified" and "Collections"
-    fireEvent.click((await screen.findAllByText(displayName))[0]);
+    fireEvent.click((await screen.findAllByText('Collection 1'))[0]);
 
     const sidebar = screen.getByTestId('library-sidebar');
 
     const { getByRole, getByText } = within(sidebar);
 
-    await waitFor(() => expect(getByText(displayName)).toBeInTheDocument());
+    // The mock data for the sidebar has a title of "Test Collection"
+    await waitFor(() => expect(getByText('Test Collection')).toBeInTheDocument());
 
     const closeButton = getByRole('button', { name: /close/i });
     fireEvent.click(closeButton);
diff --git a/src/library-authoring/__mocks__/library-search.json b/src/library-authoring/__mocks__/library-search.json
index f84d16c611..72ea474fdd 100644
--- a/src/library-authoring/__mocks__/library-search.json
+++ b/src/library-authoring/__mocks__/library-search.json
@@ -284,6 +284,7 @@
       "hits": [
         {
           "display_name": "Collection 1",
+          "block_id": "col1",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer.",
           "id": 1,
           "type": "collection",
diff --git a/src/library-authoring/collections/CollectionDetails.test.tsx b/src/library-authoring/collections/CollectionDetails.test.tsx
index 21af576981..5c4e69064e 100644
--- a/src/library-authoring/collections/CollectionDetails.test.tsx
+++ b/src/library-authoring/collections/CollectionDetails.test.tsx
@@ -2,7 +2,6 @@ import type MockAdapter from 'axios-mock-adapter';
 import fetchMock from 'fetch-mock-jest';
 
 import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager/data/api.mock';
-import { type CollectionHit, formatSearchHit } from '../../search-manager/data/api';
 import {
   initializeMocks,
   fireEvent,
@@ -11,19 +10,21 @@ import {
   waitFor,
   within,
 } from '../../testUtils';
-import mockResult from '../__mocks__/collection-search.json';
 import * as api from '../data/api';
-import { mockContentLibrary } from '../data/api.mocks';
+import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
 import CollectionDetails from './CollectionDetails';
 
 let axiosMock: MockAdapter;
 let mockShowToast: (message: string) => void;
 
+mockGetCollectionMetadata.applyMock();
 mockContentSearchConfig.applyMock();
 mockGetBlockTypes.applyMock();
 
+const { collectionId } = mockGetCollectionMetadata;
+const { description: originalDescription } = mockGetCollectionMetadata.collectionData;
+
 const library = mockContentLibrary.libraryData;
-const collectionHit = formatSearchHit(mockResult.results[2].hits[0]) as CollectionHit;
 
 describe('<CollectionDetails />', () => {
   beforeEach(() => {
@@ -39,12 +40,11 @@ describe('<CollectionDetails />', () => {
   });
 
   it('should render Collection Details', async () => {
-    render(<CollectionDetails library={library} collection={collectionHit} />);
+    render(<CollectionDetails library={library} collectionId={collectionId} />);
 
     // Collection Description
-    expect(screen.getByText('Description / Card Preview Text')).toBeInTheDocument();
-    const { description } = collectionHit;
-    expect(screen.getByText(description)).toBeInTheDocument();
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
+    expect(screen.getByText(originalDescription)).toBeInTheDocument();
 
     // Collection History
     expect(screen.getByText('Collection History')).toBeInTheDocument();
@@ -55,17 +55,12 @@ describe('<CollectionDetails />', () => {
   });
 
   it('should allow modifying the description', async () => {
-    render(<CollectionDetails library={library} collection={collectionHit} />);
-
-    const {
-      description: originalDescription,
-      blockId,
-      contextKey,
-    } = collectionHit;
+    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText(originalDescription)).toBeInTheDocument();
 
-    const url = api.getLibraryCollectionApiUrl(contextKey, blockId);
+    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
     axiosMock.onPatch(url).reply(200);
 
     const textArea = screen.getByRole('textbox');
@@ -94,17 +89,12 @@ describe('<CollectionDetails />', () => {
   });
 
   it('should show error while modifing the description', async () => {
-    render(<CollectionDetails library={library} collection={collectionHit} />);
-
-    const {
-      description: originalDescription,
-      blockId,
-      contextKey,
-    } = collectionHit;
+    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText(originalDescription)).toBeInTheDocument();
 
-    const url = api.getLibraryCollectionApiUrl(contextKey, blockId);
+    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
     axiosMock.onPatch(url).reply(500);
 
     const textArea = screen.getByRole('textbox');
@@ -124,7 +114,8 @@ describe('<CollectionDetails />', () => {
 
   it('should render Collection stats', async () => {
     mockGetBlockTypes('someBlocks');
-    render(<CollectionDetails library={library} collection={collectionHit} />);
+    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText('Collection Stats')).toBeInTheDocument();
     expect(await screen.findByText('Total')).toBeInTheDocument();
@@ -141,7 +132,8 @@ describe('<CollectionDetails />', () => {
 
   it('should render Collection stats for empty collection', async () => {
     mockGetBlockTypes('noBlocks');
-    render(<CollectionDetails library={library} collection={collectionHit} />);
+    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText('Collection Stats')).toBeInTheDocument();
     expect(await screen.findByText('This collection is currently empty.')).toBeInTheDocument();
@@ -149,7 +141,8 @@ describe('<CollectionDetails />', () => {
 
   it('should render Collection stats for big collection', async () => {
     mockGetBlockTypes('moreBlocks');
-    render(<CollectionDetails library={library} collection={collectionHit} />);
+    render(<CollectionDetails library={library} collectionId={collectionId} />);
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
 
     expect(screen.getByText('Collection Stats')).toBeInTheDocument();
     expect(await screen.findByText('36')).toBeInTheDocument();
diff --git a/src/library-authoring/collections/CollectionDetails.tsx b/src/library-authoring/collections/CollectionDetails.tsx
index b7ecab76a3..9936177902 100644
--- a/src/library-authoring/collections/CollectionDetails.tsx
+++ b/src/library-authoring/collections/CollectionDetails.tsx
@@ -1,13 +1,13 @@
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, Stack } from '@openedx/paragon';
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import classNames from 'classnames';
 
 import { getItemIcon } from '../../generic/block-type-utils';
 import { ToastContext } from '../../generic/toast-context';
-import { BlockTypeLabel, type CollectionHit, useGetBlockTypes } from '../../search-manager';
+import { BlockTypeLabel, useGetBlockTypes } from '../../search-manager';
 import type { ContentLibrary } from '../data/api';
-import { useUpdateCollection } from '../data/apiHooks';
+import { useCollection, useUpdateCollection } from '../data/apiHooks';
 import HistoryWidget from '../generic/history-widget';
 import messages from './messages';
 
@@ -37,13 +37,14 @@ const BlockCount = ({
 };
 
 interface CollectionStatsWidgetProps {
-  collection: CollectionHit,
+  libraryId: string,
+  collectionId: string,
 }
 
-const CollectionStatsWidget = ({ collection }: CollectionStatsWidgetProps) => {
+const CollectionStatsWidget = ({ libraryId, collectionId }: CollectionStatsWidgetProps) => {
   const { data: blockTypes } = useGetBlockTypes([
-    `context_key = "${collection.contextKey}"`,
-    `collections.key = "${collection.blockId}"`,
+    `context_key = "${libraryId}"`,
+    `collections.key = "${collectionId}"`,
   ]);
 
   if (!blockTypes) {
@@ -100,20 +101,26 @@ const CollectionStatsWidget = ({ collection }: CollectionStatsWidgetProps) => {
 
 interface CollectionDetailsProps {
   library: ContentLibrary,
-  collection: CollectionHit,
+  collectionId: string,
 }
 
-const CollectionDetails = ({ library, collection }: CollectionDetailsProps) => {
+const CollectionDetails = ({ library, collectionId }: CollectionDetailsProps) => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
 
-  const [description, setDescription] = useState(collection.description);
+  const updateMutation = useUpdateCollection(library.id, collectionId);
+  const { data: collection } = useCollection(library.id, collectionId);
 
-  const updateMutation = useUpdateCollection(collection.contextKey, collection.blockId);
+  const [description, setDescription] = useState(collection?.description || '');
+
+  useEffect(() => {
+    if (collection) {
+      setDescription(collection.description);
+    }
+  }, [collection]);
 
-  // istanbul ignore if: this should never happen
   if (!collection) {
-    throw new Error('A collection must be provided to CollectionDetails');
+    return null;
   }
 
   const onSubmit = (e: React.FocusEvent<HTMLTextAreaElement>) => {
@@ -151,7 +158,7 @@ const CollectionDetails = ({ library, collection }: CollectionDetailsProps) => {
         <h3 className="h5">
           {intl.formatMessage(messages.detailsTabStatsTitle)}
         </h3>
-        <CollectionStatsWidget collection={collection} />
+        <CollectionStatsWidget libraryId={library.id} collectionId={collectionId} />
       </div>
       <hr className="w-100" />
       <div>
@@ -159,8 +166,8 @@ const CollectionDetails = ({ library, collection }: CollectionDetailsProps) => {
           {intl.formatMessage(messages.detailsTabHistoryTitle)}
         </h3>
         <HistoryWidget
-          created={collection.created ? new Date(collection.created * 1000) : null}
-          modified={collection.modified ? new Date(collection.modified * 1000) : null}
+          created={collection.created ? new Date(collection.created) : null}
+          modified={collection.modified ? new Date(collection.modified) : null}
         />
       </div>
     </Stack>
diff --git a/src/library-authoring/collections/CollectionInfo.tsx b/src/library-authoring/collections/CollectionInfo.tsx
index 0ab2c7fe62..a02cc48406 100644
--- a/src/library-authoring/collections/CollectionInfo.tsx
+++ b/src/library-authoring/collections/CollectionInfo.tsx
@@ -14,12 +14,12 @@ import messages from './messages';
 
 interface CollectionInfoProps {
   library: ContentLibrary,
-  collection: CollectionHit,
+  collectionId: string,
 }
 
-const CollectionInfo = ({ library, collection }: CollectionInfoProps) => {
+const CollectionInfo = ({ library, collectionId }: CollectionInfoProps) => {
   const intl = useIntl();
-  const url = `/library/${library.id}/collection/${collection.blockId}/`;
+  const url = `/library/${library.id}/collection/${collectionId}/`;
   const urlMatch = useMatch(url);
 
   return (
@@ -28,7 +28,7 @@ const CollectionInfo = ({ library, collection }: CollectionInfoProps) => {
         <div className="d-flex flex-wrap">
           <Button
             as={Link}
-            to={`/library/${library.id}/collection/${collection.blockId}/`}
+            to={url}
             variant="outline-primary"
             className="m-1 text-nowrap flex-grow-1"
             disabled={!!urlMatch}
@@ -47,9 +47,8 @@ const CollectionInfo = ({ library, collection }: CollectionInfoProps) => {
         </Tab>
         <Tab eventKey="details" title={intl.formatMessage(messages.detailsTabTitle)}>
           <CollectionDetails
-            key={collection.id} // This is necessary to force a re-render when the collection changes
             library={library}
-            collection={collection}
+            collectionId={collectionId}
           />
         </Tab>
       </Tabs>
diff --git a/src/library-authoring/collections/CollectionInfoHeader.test.tsx b/src/library-authoring/collections/CollectionInfoHeader.test.tsx
index 1b18c053b7..ca8bfc1c2d 100644
--- a/src/library-authoring/collections/CollectionInfoHeader.test.tsx
+++ b/src/library-authoring/collections/CollectionInfoHeader.test.tsx
@@ -1,7 +1,6 @@
 import type MockAdapter from 'axios-mock-adapter';
 import userEvent from '@testing-library/user-event';
 
-import { mockCollectionHit } from '../../search-manager/data/api.mock';
 import {
   initializeMocks,
   fireEvent,
@@ -9,13 +8,17 @@ import {
   screen,
   waitFor,
 } from '../../testUtils';
-import { mockContentLibrary } from '../data/api.mocks';
+import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
 import * as api from '../data/api';
 import CollectionInfoHeader from './CollectionInfoHeader';
 
 let axiosMock: MockAdapter;
 let mockShowToast: (message: string) => void;
 
+mockGetCollectionMetadata.applyMock();
+
+const { collectionId } = mockGetCollectionMetadata;
+
 describe('<CollectionInfoHeader />', () => {
   beforeEach(() => {
     const mocks = initializeMocks();
@@ -30,22 +33,26 @@ describe('<CollectionInfoHeader />', () => {
 
   it('should render Collection info Header', async () => {
     const library = await mockContentLibrary(mockContentLibrary.libraryId);
-    render(<CollectionInfoHeader library={library} collection={mockCollectionHit} />);
+    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
 
-    expect(screen.getByText(mockCollectionHit.displayName)).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} collection={mockCollectionHit} />);
+    render(<CollectionInfoHeader library={readOnlyLibrary} collectionId={collectionId} />);
+    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} collection={mockCollectionHit} />);
-    const url = api.getLibraryCollectionApiUrl(library.id, mockCollectionHit.blockId);
+    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
     axiosMock.onPatch(url).reply(200);
 
     fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
@@ -66,8 +73,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} collection={mockCollectionHit} />);
-    const url = api.getLibraryCollectionApiUrl(library.id, mockCollectionHit.blockId);
+    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
     axiosMock.onPatch(url).reply(200);
 
     fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
@@ -75,7 +84,7 @@ describe('<CollectionInfoHeader />', () => {
     const textBox = screen.getByRole('textbox', { name: /title input/i });
 
     userEvent.clear(textBox);
-    userEvent.type(textBox, mockCollectionHit.displayName);
+    userEvent.type(textBox, mockGetCollectionMetadata.collectionData.description);
     userEvent.type(textBox, '{enter}');
 
     await waitFor(() => expect(axiosMock.history.patch.length).toEqual(0));
@@ -85,8 +94,10 @@ describe('<CollectionInfoHeader />', () => {
 
   it('should close edit collection title on press Escape', async () => {
     const library = await mockContentLibrary(mockContentLibrary.libraryId);
-    render(<CollectionInfoHeader library={library} collection={mockCollectionHit} />);
-    const url = api.getLibraryCollectionApiUrl(library.id, mockCollectionHit.blockId);
+    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
     axiosMock.onPatch(url).reply(200);
 
     fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
@@ -103,8 +114,10 @@ describe('<CollectionInfoHeader />', () => {
 
   it('should show error on edit collection title', async () => {
     const library = await mockContentLibrary(mockContentLibrary.libraryId);
-    render(<CollectionInfoHeader library={library} collection={mockCollectionHit} />);
-    const url = api.getLibraryCollectionApiUrl(library.id, mockCollectionHit.blockId);
+    render(<CollectionInfoHeader library={library} collectionId={collectionId} />);
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(library.id, 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 2309ab6b64..1d6d9cfbe5 100644
--- a/src/library-authoring/collections/CollectionInfoHeader.tsx
+++ b/src/library-authoring/collections/CollectionInfoHeader.tsx
@@ -10,26 +10,27 @@ import { Edit } from '@openedx/paragon/icons';
 
 import { ToastContext } from '../../generic/toast-context';
 import type { ContentLibrary } from '../data/api';
-import type { CollectionHit } from '../../search-manager/data/api';
-import { useUpdateCollection } from '../data/apiHooks';
+import { useCollection, useUpdateCollection } from '../data/apiHooks';
 import messages from './messages';
 
 interface CollectionInfoHeaderProps {
   library: ContentLibrary;
-  collection: CollectionHit;
+  collectionId: string;
 }
 
-const CollectionInfoHeader = ({ library, collection }: CollectionInfoHeaderProps) => {
+const CollectionInfoHeader = ({ library, collectionId }: CollectionInfoHeaderProps) => {
   const intl = useIntl();
   const [inputIsActive, setIsActive] = useState(false);
 
-  const updateMutation = useUpdateCollection(library.id, collection.blockId);
+  const { data: collection } = useCollection(library.id, collectionId);
+
+  const updateMutation = useUpdateCollection(library.id, collectionId);
   const { showToast } = useContext(ToastContext);
 
   const handleSaveDisplayName = useCallback(
     (event) => {
       const newTitle = event.target.value;
-      if (newTitle && newTitle !== collection.displayName) {
+      if (newTitle && newTitle !== collection?.title) {
         updateMutation.mutateAsync({
           title: newTitle,
         }).then(() => {
@@ -46,6 +47,10 @@ const CollectionInfoHeader = ({ library, collection }: CollectionInfoHeaderProps
     [collection, showToast, intl],
   );
 
+  if (!collection) {
+    return null;
+  }
+
   const handleClick = () => {
     setIsActive(true);
   };
@@ -68,7 +73,7 @@ const CollectionInfoHeader = ({ library, collection }: CollectionInfoHeaderProps
             id="title"
             type="text"
             aria-label="Title input"
-            defaultValue={collection.displayName}
+            defaultValue={collection.title}
             onBlur={handleSaveDisplayName}
             onKeyDown={handleOnKeyDown}
           />
@@ -76,7 +81,7 @@ const CollectionInfoHeader = ({ library, collection }: CollectionInfoHeaderProps
         : (
           <>
             <span className="font-weight-bold m-1.5">
-              {collection.displayName}
+              {collection.title}
             </span>
             {library.canEditLibrary && (
               <IconButton
diff --git a/src/library-authoring/collections/LibraryCollectionPage.test.tsx b/src/library-authoring/collections/LibraryCollectionPage.test.tsx
index 1aab9907cb..ed3f3aaa67 100644
--- a/src/library-authoring/collections/LibraryCollectionPage.test.tsx
+++ b/src/library-authoring/collections/LibraryCollectionPage.test.tsx
@@ -10,12 +10,17 @@ import {
 } from '../../testUtils';
 import mockResult from '../__mocks__/collection-search.json';
 import {
-  mockContentLibrary, mockLibraryBlockTypes, mockXBlockFields,
+  mockContentLibrary,
+  mockLibraryBlockTypes,
+  mockXBlockFields,
+  mockGetCollectionMetadata,
 } from '../data/api.mocks';
 import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager/data/api.mock';
-import { mockBroadcastChannel } from '../../generic/data/api.mock';
+import { mockBroadcastChannel, mockClipboardEmpty } from '../../generic/data/api.mock';
 import { LibraryLayout } from '..';
 
+mockClipboardEmpty.applyMock();
+mockGetCollectionMetadata.applyMock();
 mockContentSearchConfig.applyMock();
 mockGetBlockTypes.applyMock();
 mockContentLibrary.applyMock();
@@ -29,11 +34,12 @@ const libraryTitle = mockContentLibrary.libraryData.title;
 const mockCollection = {
   collectionId: mockResult.results[2].hits[0].block_id,
   collectionNeverLoads: 'collection-always-loading',
-  collectionEmpty: 'collection-no-data',
   collectionNoComponents: 'collection-no-components',
-  title: mockResult.results[2].hits[0].display_name,
+  collectionEmpty: mockGetCollectionMetadata.collectionIdError,
 };
 
+const { title } = mockGetCollectionMetadata.collectionData;
+
 describe('<LibraryCollectionPage />', () => {
   beforeEach(() => {
     initializeMocks();
@@ -102,7 +108,6 @@ describe('<LibraryCollectionPage />', () => {
   it('shows an error component if no collection returned', async () => {
     // This mock will simulate incorrect collection id
     await renderLibraryCollectionPage(mockCollection.collectionEmpty);
-    screen.debug();
     expect(await screen.findByTestId('notFoundAlert')).toBeInTheDocument();
   });
 
@@ -110,7 +115,7 @@ describe('<LibraryCollectionPage />', () => {
     await renderLibraryCollectionPage();
     expect(await screen.findByText('All Collections')).toBeInTheDocument();
     expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
-    expect((await screen.findAllByText(mockCollection.title))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[0]).toBeInTheDocument();
 
     // "Recently Modified" sort shown
     expect(screen.getAllByText('Recently Modified').length).toEqual(1);
@@ -124,7 +129,7 @@ describe('<LibraryCollectionPage />', () => {
 
     expect(await screen.findByText('All Collections')).toBeInTheDocument();
     expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
-    expect((await screen.findAllByText(mockCollection.title))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[0]).toBeInTheDocument();
 
     // In the collection page and in the sidebar
     expect(screen.getAllByText('This collection is currently empty.').length).toEqual(2);
@@ -162,7 +167,7 @@ describe('<LibraryCollectionPage />', () => {
 
     expect(await screen.findByText('All Collections')).toBeInTheDocument();
     expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
-    expect((await screen.findAllByText(mockCollection.title))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[0]).toBeInTheDocument();
 
     fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'noresults' } });
 
@@ -195,8 +200,8 @@ describe('<LibraryCollectionPage />', () => {
 
     expect(await screen.findByText('All Collections')).toBeInTheDocument();
     expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
-    expect((await screen.findAllByText(mockCollection.title))[0]).toBeInTheDocument();
-    expect((await screen.findAllByText(mockCollection.title))[1]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[1]).toBeInTheDocument();
 
     expect(screen.getByText('Manage')).toBeInTheDocument();
     expect(screen.getByText('Details')).toBeInTheDocument();
@@ -207,8 +212,8 @@ describe('<LibraryCollectionPage />', () => {
 
     expect(await screen.findByText('All Collections')).toBeInTheDocument();
     expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
-    expect((await screen.findAllByText(mockCollection.title))[0]).toBeInTheDocument();
-    expect((await screen.findAllByText(mockCollection.title))[1]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[1]).toBeInTheDocument();
 
     // Open by default; close the library info sidebar
     const closeButton = screen.getByRole('button', { name: /close/i });
diff --git a/src/library-authoring/collections/LibraryCollectionPage.tsx b/src/library-authoring/collections/LibraryCollectionPage.tsx
index e790f3810e..51590607b4 100644
--- a/src/library-authoring/collections/LibraryCollectionPage.tsx
+++ b/src/library-authoring/collections/LibraryCollectionPage.tsx
@@ -25,9 +25,8 @@ import {
   SearchContextProvider,
   SearchKeywordsField,
   SearchSortWidget,
-  useSearchContext,
 } from '../../search-manager';
-import { useContentLibrary } from '../data/apiHooks';
+import { useCollection, useContentLibrary } from '../data/apiHooks';
 import { LibraryContext } from '../common/context';
 import messages from './messages';
 import { LibrarySidebar } from '../library-sidebar';
@@ -92,24 +91,29 @@ const SubHeaderTitle = ({
   );
 };
 
-const LibraryCollectionPageInner = ({ libraryId }: { libraryId: string }) => {
+interface LibraryCollectionPageInnerProps {
+  libraryId: string;
+  collectionId: string;
+}
+
+const LibraryCollectionPageInner = ({ libraryId, collectionId }: LibraryCollectionPageInnerProps) => {
   const intl = useIntl();
 
   const {
     sidebarBodyComponent,
     openCollectionInfoSidebar,
   } = useContext(LibraryContext);
-  const { collectionHits: [collectionData], isFetching } = useSearchContext();
+  const { data: collectionData, isLoading } = useCollection(libraryId, collectionId);
 
   useEffect(() => {
-    openCollectionInfoSidebar(collectionData);
+    openCollectionInfoSidebar(collectionId);
   }, [collectionData]);
 
   const { data: libraryData, isLoading: isLibLoading } = useContentLibrary(libraryId);
 
   // Only show loading if collection data is not fetched from index yet
   // Loading info for search results will be handled by LibraryCollectionComponents component.
-  if (isLibLoading || (!collectionData && isFetching)) {
+  if (isLibLoading || (!collectionData && isLoading)) {
     return <Loading />;
   }
 
@@ -147,9 +151,9 @@ const LibraryCollectionPageInner = ({ libraryId }: { libraryId: string }) => {
           <SubHeader
             title={(
               <SubHeaderTitle
-                title={collectionData.displayName}
+                title={collectionData.title}
                 canEditLibrary={libraryData.canEditLibrary}
-                infoClickHandler={() => openCollectionInfoSidebar(collectionData)}
+                infoClickHandler={() => openCollectionInfoSidebar(collectionId)}
               />
             )}
             breadcrumbs={(
@@ -200,7 +204,7 @@ const LibraryCollectionPage = () => {
       extraFilter={[`context_key = "${libraryId}"`, `collections.key = "${collectionId}"`]}
       overrideQueries={{ collections: collectionQuery }}
     >
-      <LibraryCollectionPageInner libraryId={libraryId} />
+      <LibraryCollectionPageInner libraryId={libraryId} collectionId={collectionId} />
     </SearchContextProvider>
   );
 };
diff --git a/src/library-authoring/common/context.tsx b/src/library-authoring/common/context.tsx
index cc26471e48..609254f959 100644
--- a/src/library-authoring/common/context.tsx
+++ b/src/library-authoring/common/context.tsx
@@ -1,6 +1,5 @@
 import { useToggle } from '@openedx/paragon';
 import React from 'react';
-import type { CollectionHit } from '../../search-manager';
 
 export enum SidebarBodyComponentId {
   AddContent = 'add-content',
@@ -19,8 +18,8 @@ export interface LibraryContextData {
   isCreateCollectionModalOpen: boolean;
   openCreateCollectionModal: () => void;
   closeCreateCollectionModal: () => void;
-  openCollectionInfoSidebar: (collectionHit: CollectionHit) => void
-  currentCollectionHit?: CollectionHit;
+  openCollectionInfoSidebar: (collectionId: string) => void
+  currentCollectionId?: string;
 }
 
 export const LibraryContext = React.createContext({
@@ -33,7 +32,7 @@ export const LibraryContext = React.createContext({
   openCreateCollectionModal: () => {},
   closeCreateCollectionModal: () => {},
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  openCollectionInfoSidebar: (_collectionHit: CollectionHit) => {},
+  openCollectionInfoSidebar: (_collectionId: string) => {},
 } as LibraryContextData);
 
 /**
@@ -42,12 +41,12 @@ export const LibraryContext = React.createContext({
 export const LibraryProvider = (props: { children?: React.ReactNode }) => {
   const [sidebarBodyComponent, setSidebarBodyComponent] = React.useState<SidebarBodyComponentId | null>(null);
   const [currentComponentUsageKey, setCurrentComponentUsageKey] = React.useState<string>();
-  const [currentCollectionHit, setcurrentCollectionHit] = React.useState<CollectionHit>();
+  const [currentCollectionId, setcurrentCollectionId] = React.useState<string>();
   const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false);
 
   const resetSidebar = React.useCallback(() => {
     setCurrentComponentUsageKey(undefined);
-    setcurrentCollectionHit(undefined);
+    setcurrentCollectionId(undefined);
     setSidebarBodyComponent(null);
   }, []);
 
@@ -71,9 +70,9 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
     },
     [],
   );
-  const openCollectionInfoSidebar = React.useCallback((collectionHit: CollectionHit) => {
+  const openCollectionInfoSidebar = React.useCallback((collectionId: string) => {
     resetSidebar();
-    setcurrentCollectionHit(collectionHit);
+    setcurrentCollectionId(collectionId);
     setSidebarBodyComponent(SidebarBodyComponentId.CollectionInfo);
   }, []);
 
@@ -88,7 +87,7 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
     openCreateCollectionModal,
     closeCreateCollectionModal,
     openCollectionInfoSidebar,
-    currentCollectionHit,
+    currentCollectionId,
   }), [
     sidebarBodyComponent,
     closeLibrarySidebar,
@@ -100,7 +99,7 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
     openCreateCollectionModal,
     closeCreateCollectionModal,
     openCollectionInfoSidebar,
-    currentCollectionHit,
+    currentCollectionId,
   ]);
 
   return (
diff --git a/src/library-authoring/components/CollectionCard.tsx b/src/library-authoring/components/CollectionCard.tsx
index 2cc0b23127..c8114ec7e7 100644
--- a/src/library-authoring/components/CollectionCard.tsx
+++ b/src/library-authoring/components/CollectionCard.tsx
@@ -74,7 +74,7 @@ const CollectionCard = ({ collectionHit }: CollectionCardProps) => {
         </ActionRow>
       )}
       blockTypeDisplayName={blockTypeDisplayName}
-      openInfoSidebar={() => openCollectionInfoSidebar(collectionHit)}
+      openInfoSidebar={() => openCollectionInfoSidebar(collectionHit.blockId)}
     />
   );
 };
diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts
index 505a9d1d16..177464d06e 100644
--- a/src/library-authoring/data/api.mocks.ts
+++ b/src/library-authoring/data/api.mocks.ts
@@ -271,3 +271,32 @@ mockLibraryBlockMetadata.dataPublished = {
 } satisfies api.LibraryBlockMetadata;
 /** Apply this mock. Returns a spy object that can tell you if it's been called. */
 mockLibraryBlockMetadata.applyMock = () => jest.spyOn(api, 'getLibraryBlockMetadata').mockImplementation(mockLibraryBlockMetadata);
+
+/**
+ * Mock for `getCollectionMetadata()`
+ *
+ * This mock returns a fixed response for the collection ID *collection_1*.
+ */
+export async function mockGetCollectionMetadata(libraryId: string, collectionId: string): Promise<api.Collection> {
+  if (collectionId === mockGetCollectionMetadata.collectionIdError) {
+    throw createAxiosError({ code: 400, message: 'Not found.', path: api.getLibraryCollectionApiUrl(libraryId, collectionId) });
+  }
+  return Promise.resolve(mockGetCollectionMetadata.collectionData);
+}
+mockGetCollectionMetadata.collectionId = 'collection_1';
+mockGetCollectionMetadata.collectionIdError = 'collection_error';
+mockGetCollectionMetadata.collectionData = {
+  id: 1,
+  key: 'collection_1',
+  title: 'Test Collection',
+  description: 'A collection for testing',
+  created: '2024-09-19T10:00:00Z',
+  createdBy: 'test_author',
+  modified: '2024-09-20T11:00:00Z',
+  learningPackage: 11,
+  enabled: true,
+} satisfies api.Collection;
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockGetCollectionMetadata.applyMock = () => {
+  jest.spyOn(api, 'getCollectionMetadata').mockImplementation(mockGetCollectionMetadata);
+};
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index a3d2095956..5c96176763 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -318,6 +318,14 @@ export async function getXBlockOLX(usageKey: string): Promise<string> {
   return data.olx;
 }
 
+/**
+ * Get the collection metadata.
+ */
+export async function getCollectionMetadata(libraryId: string, collectionId: string): Promise<Collection> {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryCollectionApiUrl(libraryId, collectionId));
+  return camelCaseObject(data);
+}
+
 /**
  * Update collection metadata.
  */
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
index b515e8edfb..13ece775bc 100644
--- a/src/library-authoring/data/apiHooks.ts
+++ b/src/library-authoring/data/apiHooks.ts
@@ -30,6 +30,7 @@ import {
   type UpdateCollectionComponentsRequest,
   updateCollectionComponents,
   type CreateLibraryCollectionDataRequest,
+  getCollectionMetadata,
 } from './api';
 
 const libraryQueryPredicate = (query: Query, libraryId: string): boolean => {
@@ -280,6 +281,17 @@ export const useXBlockOLX = (usageKey: string) => (
   })
 );
 
+/**
+ * Get the metadata for a collection in a library
+ */
+export const useCollection = (libraryId: string, collectionId: string) => (
+  useQuery({
+    enabled: !!libraryId && !!collectionId,
+    queryKey: libraryAuthoringQueryKeys.collection(libraryId, collectionId),
+    queryFn: () => getCollectionMetadata(libraryId!, collectionId!),
+  })
+);
+
 /**
  * Use this mutation to update the fields of a collection in a library
  */
@@ -288,9 +300,10 @@ export const useUpdateCollection = (libraryId: string, collectionId: string) =>
   return useMutation({
     mutationFn: (data: UpdateCollectionComponentsRequest) => updateCollectionMetadata(libraryId, collectionId, data),
     onSettled: () => {
-      // NOTE: We invalidate the library query here because the collection metadata
-      // is retrieved as part of a library search query.
+      // NOTE: We invalidate the library query here because we need to update the library's
+      // collection list.
       queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.collection(libraryId, collectionId) });
     },
   });
 };
diff --git a/src/library-authoring/library-sidebar/LibrarySidebar.tsx b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
index d4466ef408..a7ce2b5b5b 100644
--- a/src/library-authoring/library-sidebar/LibrarySidebar.tsx
+++ b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
@@ -34,7 +34,7 @@ const LibrarySidebar = ({ library }: LibrarySidebarProps) => {
     sidebarBodyComponent,
     closeLibrarySidebar,
     currentComponentUsageKey,
-    currentCollectionHit,
+    currentCollectionId,
   } = useContext(LibraryContext);
 
   const bodyComponentMap = {
@@ -44,7 +44,7 @@ const LibrarySidebar = ({ library }: LibrarySidebarProps) => {
       currentComponentUsageKey && <ComponentInfo usageKey={currentComponentUsageKey} />
     ),
     [SidebarBodyComponentId.CollectionInfo]: (
-      currentCollectionHit && <CollectionInfo library={library} collection={currentCollectionHit} />
+      currentCollectionId && <CollectionInfo library={library} collectionId={currentCollectionId} />
     ),
     unknown: null,
   };
@@ -56,7 +56,7 @@ const LibrarySidebar = ({ library }: LibrarySidebarProps) => {
       currentComponentUsageKey && <ComponentInfoHeader library={library} usageKey={currentComponentUsageKey} />
     ),
     [SidebarBodyComponentId.CollectionInfo]: (
-      currentCollectionHit && <CollectionInfoHeader library={library} collection={currentCollectionHit} />
+      currentCollectionId && <CollectionInfoHeader library={library} collectionId={currentCollectionId} />
     ),
     unknown: null,
   };
diff --git a/src/search-manager/data/api.mock.ts b/src/search-manager/data/api.mock.ts
index 01182fd552..5349397937 100644
--- a/src/search-manager/data/api.mock.ts
+++ b/src/search-manager/data/api.mock.ts
@@ -61,26 +61,3 @@ export async function mockGetBlockTypes(
   jest.spyOn(api, 'fetchBlockTypes').mockResolvedValue(mockResponseMap[mockResponse]);
 }
 mockGetBlockTypes.applyMock = () => jest.spyOn(api, 'fetchBlockTypes').mockResolvedValue({});
-
-export const mockCollectionHit = {
-  displayName: 'Collection 1',
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer.',
-  id: '1',
-  type: 'collection',
-  usageKey: 'lib:OpenedX:CSPROB2:collection:coll1',
-  blockId: 'coll1',
-  tags: {},
-  breadcrumbs: [
-    {
-      displayName: 'CS problems 2',
-    },
-  ],
-  created: 1725534795.628254,
-  modified: 1725878053.420395,
-  contextKey: 'lib:OpenedX:CSPROB2',
-  org: 'OpenedX',
-  formatted: {
-    displayName: 'Collection 1',
-    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…',
-  },
-} satisfies api.CollectionHit;