feat: add container collections support

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.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/add-content/AddContentContainer.test.tsx

@@ -12,7 +12,7 @@ import {
   mockXBlockFields,
 } from '../data/api.mocks';
 import {
-  getContentLibraryApiUrl, getCreateLibraryBlockUrl, getLibraryCollectionComponentApiUrl, getLibraryPasteClipboardUrl,
+  getContentLibraryApiUrl, getCreateLibraryBlockUrl, getLibraryCollectionItemsApiUrl, getLibraryPasteClipboardUrl,
   getXBlockFieldsApiUrl,
 } from '../data/api';
 import { mockBroadcastChannel, mockClipboardEmpty, mockClipboardHtml } from '../../generic/data/api.mock';
@@ -137,7 +137,7 @@ describe('<AddContentContainer />', () => {
     const url = getCreateLibraryBlockUrl(libraryId);
     const usageKey = mockXBlockFields.usageKeyNewHtml;
     const updateBlockUrl = getXBlockFieldsApiUrl(usageKey);
-    const collectionComponentUrl = getLibraryCollectionComponentApiUrl(
+    const collectionComponentUrl = getLibraryCollectionItemsApiUrl(
       libraryId,
       collectionId,
     );
@@ -195,7 +195,7 @@ describe('<AddContentContainer />', () => {
 
     const pasteUrl = getLibraryPasteClipboardUrl(libraryId);
     const collectionId = 'some-collection-id';
-    const collectionComponentUrl = getLibraryCollectionComponentApiUrl(
+    const collectionComponentUrl = getLibraryCollectionItemsApiUrl(
       libraryId,
       collectionId,
     );
@@ -220,7 +220,7 @@ describe('<AddContentContainer />', () => {
 
     const pasteUrl = getLibraryPasteClipboardUrl(libraryId);
     const collectionId = 'some-collection-id';
-    const collectionComponentUrl = getLibraryCollectionComponentApiUrl(
+    const collectionComponentUrl = getLibraryCollectionItemsApiUrl(
       libraryId,
       collectionId,
     );

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

@@ -21,7 +21,7 @@ import { getCanEdit } from '../../course-unit/data/selectors';
 import {
   useCreateLibraryBlock,
   useLibraryPasteClipboard,
-  useAddComponentsToCollection,
+  useAddItemsToCollection,
   useBlockTypesMetadata,
 } from '../data/apiHooks';
 import { useLibraryContext } from '../common/context/LibraryContext';
@@ -195,7 +195,7 @@ const AddContentContainer = () => {
     openCreateUnitModal,
     openComponentEditor,
   } = useLibraryContext();
-  const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
+  const updateItemsMutation = useAddItemsToCollection(libraryId, collectionId);
   const createBlockMutation = useCreateLibraryBlock();
   const pasteClipboardMutation = useLibraryPasteClipboard();
   const { showToast } = useContext(ToastContext);
@@ -273,8 +273,8 @@ const AddContentContainer = () => {
     contentTypes.push(pasteButton);
   }
 
-  const linkComponent = (usageKey: string) => {
-    updateComponentsMutation.mutateAsync([usageKey]).catch(() => {
+  const linkComponent = (opaque_key: string) => {
+    updateItemsMutation.mutateAsync([opaque_key]).catch(() => {
       showToast(intl.formatMessage(messages.errorAssociateComponentMessage));
     });
   };

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

@@ -20,7 +20,7 @@ import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager
 import { mockBroadcastChannel, 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;
@@ -351,7 +351,7 @@ describe('<LibraryCollectionPage />', () => {
   });
 
   it('should remove component from collection and hides sidebar', async () => {
-    const url = getLibraryCollectionComponentApiUrl(
+    const url = getLibraryCollectionItemsApiUrl(
       mockContentLibrary.libraryId,
       mockCollection.collectionId,
     );

src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -109,7 +109,9 @@ const LibraryCollectionPage = () => {
   }
 
   const { componentPickerMode } = useComponentPickerContext();
-  const { showOnlyPublished, setCollectionId, componentId } = useLibraryContext();
+  const {
+    showOnlyPublished, extraFilter: contextExtraFilter, setCollectionId, componentId,
+  } = useLibraryContext();
   const { sidebarComponentInfo, openInfoSidebar } = useSidebarContext();
 
   const {
@@ -182,6 +184,10 @@ const LibraryCollectionPage = () => {
     extraFilter.push('last_published IS NOT NULL');
   }
 
+  if (contextExtraFilter) {
+    extraFilter.push(...contextExtraFilter);
+  }
+
   return (
     <div className="d-flex">
       <div className="flex-grow-1">

src/library-authoring/common/context/ComponentPickerContext.tsx

@@ -8,7 +8,7 @@ import {
 
 export interface SelectedComponent {
   usageKey: string;
-  blockType: string;
+  blockType?: string;
 }
 
 export type ComponentSelectedEvent = (selectedComponent: SelectedComponent) => void;