fix: merge errors in previous commit

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

@@ -21,7 +21,10 @@ import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager
 import { mockClipboardEmpty } from '../../generic/data/api.mock';
 import { LibraryLayout } from '..';
 import { ContentTagsDrawer } from '../../content-tags-drawer';
-import { getLibraryCollectionItemsApiUrl } from '../data/api';
+import {
+  getLibraryCollectionItemsApiUrl,
+  getLibraryContainersApiUrl,
+} from '../data/api';
 
 let axiosMock: MockAdapter;
 let mockShowToast;
@@ -406,4 +409,56 @@ describe('<LibraryCollectionPage />', () => {
     // Should close sidebar as component was removed
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
   });
+
+  it('should create a unit inside a collection', async () => {
+    await renderLibraryCollectionPage();
+    const unitTitle = 'This is a Test';
+    const containerUrl = getLibraryContainersApiUrl(mockContentLibrary.libraryId);
+    axiosMock.onPost(containerUrl).reply(200, {
+      id: 'unit-1',
+      slug: 'this-is-a-test',
+      title: unitTitle,
+    });
+    const collectionUrl = getLibraryCollectionItemsApiUrl(
+      mockContentLibrary.libraryId,
+      mockCollection.collectionId,
+    );
+    axiosMock.onPatch(collectionUrl).reply(200);
+
+    expect(await screen.findByRole('heading')).toBeInTheDocument();
+    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();
+
+    // Open Add content sidebar
+    const newButton = screen.getByRole('button', { name: /new/i });
+    fireEvent.click(newButton);
+    expect(screen.getByText(/add content/i)).toBeInTheDocument();
+
+    // Open New unit Modal
+    const sidebar = screen.getByTestId('library-sidebar');
+    const newUnitButton = within(sidebar).getAllByRole('button', { name: /unit/i })[0];
+    fireEvent.click(newUnitButton);
+    const unitModalHeading = await screen.findByRole('heading', { name: /new unit/i });
+    expect(unitModalHeading).toBeInTheDocument();
+
+    // Fill the form
+    const createButton = screen.getByRole('button', { name: /create/i });
+    const nameField = screen.getByRole('textbox', { name: /name your unit/i });
+
+    fireEvent.change(nameField, { target: { value: unitTitle } });
+    fireEvent.click(createButton);
+
+    // Check success
+    await waitFor(() => expect(axiosMock.history.post.length).toBe(1));
+
+    // Check that the unit was created
+    expect(axiosMock.history.post[0].url).toBe(containerUrl);
+    expect(axiosMock.history.post[0].data).toContain(`"display_name":"${unitTitle}"`);
+    expect(axiosMock.history.post[0].data).toContain('"container_type":"unit"');
+    expect(mockShowToast).toHaveBeenCalledWith('Unit created successfully');
+
+    // Check that the unit was added to the collection
+    expect(axiosMock.history.patch.length).toBe(1);
+    expect(axiosMock.history.patch[0].url).toBe(collectionUrl);
+    expect(axiosMock.history.patch[0].data).toContain('"usage_keys":["unit-1"]');
+  });
 });

src/library-authoring/create-unit/CreateUnitModal.tsx

@@ -36,10 +36,10 @@ const CreateUnitModal = () => {
         ...values,
       });
       if (collectionId) {
-        await updateItemsMutation.mutateAsync([container.containerKey]);
+        await updateItemsMutation.mutateAsync([container.id]);
       }
       // Navigate to the new unit
-      navigate(`/library/${libraryId}/unit/${container.containerKey}`);
+      navigate(`/library/${libraryId}/unit/${container.id}`);
       showToast(intl.formatMessage(messages.createUnitSuccess));
     } catch (error) {
       showToast(intl.formatMessage(messages.createUnitError));

src/library-authoring/data/api.mocks.ts

@@ -500,7 +500,7 @@ mockGetContainerMetadata.containerData = {
 } satisfies api.Container;
 mockGetContainerMetadata.containerDataWithCollections = {
   ...mockGetContainerMetadata.containerData,
-  containerKey: mockGetContainerMetadata.containerIdWithCollections,
+  id: mockGetContainerMetadata.containerIdWithCollections,
   collections: [{ title: 'My first collection', key: 'my-first-collection' }],
 } satisfies api.Container;
 /** Apply this mock. Returns a spy object that can tell you if it's been called. */

src/library-authoring/units/LibraryUnitPage.tsx

@@ -34,9 +34,9 @@ interface EditableTitleProps {
 const EditableTitle = ({ unitId }: EditableTitleProps) => {
   const intl = useIntl();
 
-  const { libraryId, readOnly } = useLibraryContext();
+  const { readOnly } = useLibraryContext();
 
-  const { data: container } = useContainer(libraryId, unitId);
+  const { data: container } = useContainer(unitId);
 
   const updateMutation = useUpdateContainer(unitId);
   const { showToast } = useContext(ToastContext);