feat: add collections support for containers [FC-0083] (#1797)

Adds support to add Units to Collections.

Author: rpenido

src/course-unit/add-component/AddComponent.jsx

@@ -195,6 +195,7 @@ const AddComponent = ({
         >
           <ComponentPicker
             showOnlyPublished
+            extraFilter={['NOT block_type = "unit"']}
             componentPickerMode={isAddLibraryContentModalOpen ? 'single' : 'multiple'}
             onComponentSelected={handleLibraryV2Selection}
             onChangeComponentSelection={setSelectedComponents}

src/index.jsx

@@ -66,8 +66,14 @@ const App = () => {
         <Route path="/libraries-v1" element={<StudioHome />} />
         <Route path="/library/create" element={<CreateLibrary />} />
         <Route path="/library/:libraryId/*" element={<LibraryLayout />} />
-        <Route path="/component-picker" element={<ComponentPicker />} />
-        <Route path="/component-picker/multiple" element={<ComponentPicker componentPickerMode="multiple" />} />
+        <Route
+          path="/component-picker"
+          element={<ComponentPicker extraFilter={['NOT block_type = "unit"']} />}
+        />
+        <Route
+          path="/component-picker/multiple"
+          element={<ComponentPicker componentPickerMode="multiple" extraFilter={['NOT block_type = "unit"']} />}
+        />
         <Route path="/legacy/preview-changes/:usageKey" element={<PreviewChangesEmbed />} />
         <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
         <Route path="/course_rerun/:courseId" element={<CourseRerun />} />

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -392,7 +392,7 @@ describe('<LibraryAuthoringPage />', () => {
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
   });
 
-  it('should open component sidebar, showing manage tab on clicking add to collection menu item', async () => {
+  it('should open component sidebar, showing manage tab on clicking add to collection menu item (component)', async () => {
     const mockResult0 = { ...mockResult }.results[0].hits[0];
     const displayName = 'Introduction to Testing';
     expect(mockResult0.display_name).toStrictEqual(displayName);
@@ -417,6 +417,29 @@ describe('<LibraryAuthoringPage />', () => {
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
   });
 
+  it('should open component sidebar, showing manage tab on clicking add to collection menu item (unit)', async () => {
+    const displayName = 'Test Unit';
+    await renderLibraryPage();
+
+    waitFor(() => expect(screen.getAllByTestId('container-card-menu-toggle').length).toBeGreaterThan(0));
+
+    // Open menu
+    fireEvent.click((await screen.findAllByTestId('container-card-menu-toggle'))[0]);
+    // Click add to collection
+    fireEvent.click(screen.getByRole('button', { name: 'Add to collection' }));
+
+    const sidebar = screen.getByTestId('library-sidebar');
+
+    const { getByRole, queryByText } = within(sidebar);
+
+    await waitFor(() => expect(queryByText(displayName)).toBeInTheDocument());
+    expect(getByRole('tab', { selected: true })).toHaveTextContent('Organize');
+    const closeButton = getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
+  });
+
   it('should open and close the collection sidebar', async () => {
     await renderLibraryPage();
 
@@ -732,7 +755,7 @@ describe('<LibraryAuthoringPage />', () => {
     fireEvent.click(cancelButton);
     expect(unitModalHeading).not.toBeInTheDocument();
 
-    // Open new unit modal again and create a collection
+    // Open new unit modal again and create a unit
     fireEvent.click(newUnitButton);
     const createButton = screen.getByRole('button', { name: /create/i });
     const nameField = screen.getByRole('textbox', { name: /name your unit/i });
@@ -800,7 +823,7 @@ describe('<LibraryAuthoringPage />', () => {
     fireEvent.click(newButton);
     expect(screen.getByText(/add content/i)).toBeInTheDocument();
 
-    // Open New collection Modal
+    // Open New Unit Modal
     const sidebar = screen.getByTestId('library-sidebar');
     const newUnitButton = within(sidebar).getAllByRole('button', { name: /unit/i })[0];
     fireEvent.click(newUnitButton);

src/library-authoring/LibraryAuthoringPage.tsx

@@ -141,6 +141,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
     libraryData,
     isLoadingLibraryData,
     showOnlyPublished,
+    extraFilter: contextExtraFilter,
     componentId,
     collectionId,
     unitId,
@@ -223,6 +224,10 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
     extraFilter.push('last_published IS NOT NULL');
   }
 
+  if (contextExtraFilter) {
+    extraFilter.push(...contextExtraFilter);
+  }
+
   const activeTypeFilters = {
     components: 'type = "library_block"',
     collections: 'type = "collection"',

src/library-authoring/__mocks__/collection-search.json

@@ -218,8 +218,45 @@
           "org": "OpenedX",
           "access_id": 16,
           "num_children": 1
+        },
+        {
+          "display_name": "Test Unit",
+          "block_id": "test-unit-9284e2",
+          "id": "lctAximTESTunittest-unit-9284e2-a9a4386e",
+          "type": "library_container",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1742221203.895054,
+          "modified": 1742221203.895054,
+          "usage_key": "lct:Axim:TEST:unit:test-unit-9284e2",
+          "block_type": "unit",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "num_children": 0,
+          "_formatted": {
+            "display_name": "Test Unit",
+            "block_id": "test-unit-9284e2",
+            "id": "lctAximTESTunittest-unit-9284e2-a9a4386e",
+            "type": "library_container",
+            "breadcrumbs": [
+              {
+                "display_name": "Test Library"
+              }
+            ],
+            "created": "1742221203.895054",
+            "modified": "1742221203.895054",
+            "usage_key": "lct:Axim:TEST:unit:test-unit-9284e2",
+            "block_type": "unit",
+            "context_key": "lib:Axim:TEST",
+            "org": "Axim",
+            "access_id": "15",
+            "num_children": "0"
+          }
         }
-      
       ],
       "query": "",
       "processingTimeMs": 1,

src/library-authoring/add-content/AddContent.test.tsx

@@ -12,8 +12,12 @@ import {
   mockXBlockFields,
 } from '../data/api.mocks';
 import {
-  getContentLibraryApiUrl, getCreateLibraryBlockUrl, getLibraryCollectionComponentApiUrl, getLibraryPasteClipboardUrl,
-  getXBlockFieldsApiUrl, getLibraryContainerChildrenApiUrl,
+  getContentLibraryApiUrl,
+  getCreateLibraryBlockUrl,
+  getLibraryCollectionItemsApiUrl,
+  getLibraryContainerChildrenApiUrl,
+  getLibraryPasteClipboardUrl,
+  getXBlockFieldsApiUrl,
 } from '../data/api';
 import { mockClipboardEmpty, mockClipboardHtml } from '../../generic/data/api.mock';
 import { LibraryProvider } from '../common/context/LibraryContext';
@@ -151,7 +155,7 @@ describe('<AddContent />', () => {
     const url = getCreateLibraryBlockUrl(libraryId);
     const usageKey = mockXBlockFields.usageKeyNewHtml;
     const updateBlockUrl = getXBlockFieldsApiUrl(usageKey);
-    const collectionComponentUrl = getLibraryCollectionComponentApiUrl(
+    const collectionComponentUrl = getLibraryCollectionItemsApiUrl(
       libraryId,
       collectionId,
     );
@@ -209,7 +213,7 @@ describe('<AddContent />', () => {
 
     const pasteUrl = getLibraryPasteClipboardUrl(libraryId);
     const collectionId = 'some-collection-id';
-    const collectionComponentUrl = getLibraryCollectionComponentApiUrl(
+    const collectionComponentUrl = getLibraryCollectionItemsApiUrl(
       libraryId,
       collectionId,
     );
@@ -234,7 +238,7 @@ describe('<AddContent />', () => {
 
     const pasteUrl = getLibraryPasteClipboardUrl(libraryId);
     const collectionId = 'some-collection-id';
-    const collectionComponentUrl = getLibraryCollectionComponentApiUrl(
+    const collectionComponentUrl = getLibraryCollectionItemsApiUrl(
       libraryId,
       collectionId,
     );

src/library-authoring/add-content/AddContent.tsx

@@ -21,8 +21,8 @@ import { getCanEdit } from '../../course-unit/data/selectors';
 import {
   useCreateLibraryBlock,
   useLibraryPasteClipboard,
-  useAddComponentsToCollection,
   useBlockTypesMetadata,
+  useAddItemsToCollection,
   useAddComponentsToContainer,
 } from '../data/apiHooks';
 import { useLibraryContext } from '../common/context/LibraryContext';
@@ -207,8 +207,8 @@ const AddContent = () => {
     openComponentEditor,
     unitId,
   } = useLibraryContext();
-  const addComponentsToCollectionMutation = useAddComponentsToCollection(libraryId, collectionId);
-  const addComponentsToContainerMutation = useAddComponentsToContainer(libraryId, unitId);
+  const addComponentsToCollectionMutation = useAddItemsToCollection(libraryId, collectionId);
+  const addComponentsToContainerMutation = useAddComponentsToContainer(unitId);
   const createBlockMutation = useCreateLibraryBlock();
   const pasteClipboardMutation = useLibraryPasteClipboard();
   const { showToast } = useContext(ToastContext);
@@ -286,14 +286,14 @@ const AddContent = () => {
     contentTypes.push(pasteButton);
   }
 
-  const linkComponent = (usageKey: string) => {
+  const linkComponent = (opaqueKey: string) => {
     if (collectionId) {
-      addComponentsToCollectionMutation.mutateAsync([usageKey]).catch(() => {
+      addComponentsToCollectionMutation.mutateAsync([opaqueKey]).catch(() => {
         showToast(intl.formatMessage(messages.errorAssociateComponentToCollectionMessage));
       });
     }
     if (unitId) {
-      addComponentsToContainerMutation.mutateAsync([usageKey]).catch(() => {
+      addComponentsToContainerMutation.mutateAsync([opaqueKey]).catch(() => {
         showToast(intl.formatMessage(messages.errorAssociateComponentToContainerMessage));
       });
     }

src/library-authoring/add-content/PickLibraryContentModal.test.tsx

@@ -49,8 +49,8 @@ describe('<PickLibraryContentModal />', () => {
   });
 
   it('can pick components from the modal', async () => {
-    const mockAddComponentsToCollection = jest.fn();
-    jest.spyOn(api, 'addComponentsToCollection').mockImplementation(mockAddComponentsToCollection);
+    const mockAddItemsToCollection = jest.fn();
+    jest.spyOn(api, 'addItemsToCollection').mockImplementation(mockAddItemsToCollection);
 
     render();
 
@@ -67,7 +67,7 @@ describe('<PickLibraryContentModal />', () => {
     fireEvent.click(screen.queryAllByRole('button', { name: 'Add to Collection' })[0]);
 
     await waitFor(() => {
-      expect(mockAddComponentsToCollection).toHaveBeenCalledWith(
+      expect(mockAddItemsToCollection).toHaveBeenCalledWith(
         libraryId,
         'collectionId',
         ['lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd'],
@@ -78,8 +78,8 @@ describe('<PickLibraryContentModal />', () => {
   });
 
   it('show error when api call fails', async () => {
-    const mockAddComponentsToCollection = jest.fn().mockRejectedValue(new Error('Failed to add components'));
-    jest.spyOn(api, 'addComponentsToCollection').mockImplementation(mockAddComponentsToCollection);
+    const mockAddItemsToCollection = jest.fn().mockRejectedValue(new Error('Failed to add components'));
+    jest.spyOn(api, 'addItemsToCollection').mockImplementation(mockAddItemsToCollection);
     render();
 
     // Wait for the content library to load
@@ -95,7 +95,7 @@ describe('<PickLibraryContentModal />', () => {
     fireEvent.click(screen.queryAllByRole('button', { name: 'Add to Collection' })[0]);
 
     await waitFor(() => {
-      expect(mockAddComponentsToCollection).toHaveBeenCalledWith(
+      expect(mockAddItemsToCollection).toHaveBeenCalledWith(
         libraryId,
         'collectionId',
         ['lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd'],

src/library-authoring/add-content/PickLibraryContentModal.tsx

@@ -5,7 +5,7 @@ import { ActionRow, Button, StandardModal } from '@openedx/paragon';
 import { ToastContext } from '../../generic/toast-context';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import type { SelectedComponent } from '../common/context/ComponentPickerContext';
-import { useAddComponentsToCollection } from '../data/apiHooks';
+import { useAddItemsToCollection } from '../data/apiHooks';
 import messages from './messages';
 
 interface PickLibraryContentModalFooterProps {
@@ -51,7 +51,7 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
     throw new Error('libraryId and componentPicker are required');
   }
 
-  const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
+  const updateComponentsMutation = useAddItemsToCollection(libraryId, collectionId);
 
   const { showToast } = useContext(ToastContext);
 

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

@@ -15,12 +15,13 @@ import {
   mockContentLibrary,
   mockXBlockFields,
   mockGetCollectionMetadata,
+  mockGetContainerMetadata,
 } from '../data/api.mocks';
 import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager/data/api.mock';
 import { mockClipboardEmpty } from '../../generic/data/api.mock';
 import { LibraryLayout } from '..';
 import { ContentTagsDrawer } from '../../content-tags-drawer';
-import { getLibraryCollectionComponentApiUrl } from '../data/api';
+import { getLibraryCollectionItemsApiUrl } from '../data/api';
 
 let axiosMock: MockAdapter;
 let mockShowToast;
@@ -31,6 +32,7 @@ mockContentSearchConfig.applyMock();
 mockGetBlockTypes.applyMock();
 mockContentLibrary.applyMock();
 mockXBlockFields.applyMock();
+mockGetContainerMetadata.applyMock();
 
 const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
 const path = '/library/:libraryId/*';
@@ -350,7 +352,7 @@ describe('<LibraryCollectionPage />', () => {
   });
 
   it('should remove component from collection and hides sidebar', async () => {
-    const url = getLibraryCollectionComponentApiUrl(
+    const url = getLibraryCollectionItemsApiUrl(
       mockContentLibrary.libraryId,
       mockCollection.collectionId,
     );
@@ -369,8 +371,38 @@ describe('<LibraryCollectionPage />', () => {
     fireEvent.click(await screen.findByText('Remove from collection'));
     await waitFor(() => {
       expect(axiosMock.history.delete.length).toEqual(1);
-      expect(mockShowToast).toHaveBeenCalledWith('Component successfully removed');
     });
+    expect(mockShowToast).toHaveBeenCalledWith('Item successfully removed');
+    // Should close sidebar as component was removed
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
+  });
+
+  it('should remove unit from collection and hides sidebar', async () => {
+    const url = getLibraryCollectionItemsApiUrl(
+      mockContentLibrary.libraryId,
+      mockCollection.collectionId,
+    );
+    axiosMock.onDelete(url).reply(204);
+    const displayName = 'Test Unit';
+    await renderLibraryCollectionPage();
+
+    // Wait for the unit cards to load
+    waitFor(() => expect(screen.getAllByTestId('container-card-menu-toggle').length).toBeGreaterThan(0));
+
+    // open sidebar
+    fireEvent.click(await screen.findByText(displayName));
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).toBeInTheDocument());
+
+    // Open menu
+    fireEvent.click((await screen.findAllByTestId('container-card-menu-toggle'))[0]);
+
+    // Click remove to collection
+    fireEvent.click(screen.getByRole('button', { name: 'Remove from collection' }));
+
+    await waitFor(() => {
+      expect(axiosMock.history.delete.length).toEqual(1);
+    });
+    expect(mockShowToast).toHaveBeenCalledWith('Item successfully removed');
     // Should close sidebar as component was removed
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
   });