feat: add collections support for containers [FC-0083]

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,
     );
@@ -370,8 +370,8 @@ 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());
   });

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;

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

@@ -34,6 +34,8 @@ export type LibraryContextData = {
   setUnitId: (unitId?: string) => void;
   // Only show published components
   showOnlyPublished: boolean;
+  // Additional filtering
+  extraFilter?: string[];
   // "Create New Collection" modal
   isCreateCollectionModalOpen: boolean;
   openCreateCollectionModal: () => void;
@@ -66,6 +68,7 @@ type LibraryProviderProps = {
   children?: React.ReactNode;
   libraryId: string;
   showOnlyPublished?: boolean;
+  extraFilter?: string[]
   // If set, will initialize the current collection and/or component from the current URL
   skipUrlUpdate?: boolean;
 
@@ -83,6 +86,7 @@ export const LibraryProvider = ({
   children,
   libraryId,
   showOnlyPublished = false,
+  extraFilter = [],
   skipUrlUpdate = false,
   componentPicker,
 }: LibraryProviderProps) => {
@@ -139,6 +143,7 @@ export const LibraryProvider = ({
       readOnly,
       isLoadingLibraryData,
       showOnlyPublished,
+      extraFilter,
       isCreateCollectionModalOpen,
       openCreateCollectionModal,
       closeCreateCollectionModal,
@@ -164,6 +169,7 @@ export const LibraryProvider = ({
     readOnly,
     isLoadingLibraryData,
     showOnlyPublished,
+    extraFilter,
     isCreateCollectionModalOpen,
     openCreateCollectionModal,
     closeCreateCollectionModal,

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

@@ -8,11 +8,11 @@ import {
 
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
-import { useLibraryBlockMetadata } from '../data/apiHooks';
+import { ContentTagsDrawer, useContentTaxonomyTagsData } from '../../content-tags-drawer';
+import { useLibraryBlockMetadata, useUpdateComponentCollections } from '../data/apiHooks';
 import StatusWidget from '../generic/status-widget';
+import { ManageCollections } from '../generic/manage-collections';
 import messages from './messages';
-import { ContentTagsDrawer, useContentTaxonomyTagsData } from '../../content-tags-drawer';
-import ManageCollections from './ManageCollections';
 
 const ComponentManagement = () => {
   const intl = useIntl();
@@ -130,7 +130,11 @@ const ComponentManagement = () => {
           </Collapsible.Visible>
         </Collapsible.Trigger>
         <Collapsible.Body className="collapsible-body">
-          <ManageCollections usageKey={usageKey} collections={componentMetadata.collections} />
+          <ManageCollections
+            opaqueKey={usageKey}
+            collections={componentMetadata.collections}
+            useUpdateCollectionsHook={useUpdateComponentCollections}
+          />
         </Collapsible.Body>
       </Collapsible.Advanced>
     </Stack>

src/library-authoring/component-info/messages.ts

@@ -136,51 +136,6 @@ const messages = defineMessages({
     defaultMessage: 'Component Preview',
     description: 'Title for preview modal',
   },
-  manageCollectionsText: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.text',
-    defaultMessage: 'Manage Collections',
-    description: 'Header and button text for collection section in manage tab',
-  },
-  manageCollectionsAddBtnText: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.btn-text',
-    defaultMessage: 'Add to Collection',
-    description: 'Button text for collection section in manage tab',
-  },
-  manageCollectionsSearchPlaceholder: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.search-placeholder',
-    defaultMessage: 'Search',
-    description: 'Placeholder text for collection search in manage tab',
-  },
-  manageCollectionsSelectionLabel: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.selection-aria-label',
-    defaultMessage: 'Collection selection',
-    description: 'Aria label text for collection selection box',
-  },
-  manageCollectionsToComponentSuccess: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-success',
-    defaultMessage: 'Component collections updated',
-    description: 'Message to display on updating component collections',
-  },
-  manageCollectionsToComponentFailed: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-failed',
-    defaultMessage: 'Failed to update Component collections',
-    description: 'Message to display on failure of updating component collections',
-  },
-  manageCollectionsToComponentConfirmBtn: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-confirm-btn',
-    defaultMessage: 'Confirm',
-    description: 'Button text to confirm collections for a component',
-  },
-  manageCollectionsToComponentCancelBtn: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-cancel-btn',
-    defaultMessage: 'Cancel',
-    description: 'Button text to cancel collections selection for a component',
-  },
-  componentNotOrganizedIntoCollection: {
-    id: 'course-authoring.library-authoring.component.manage-tab.collections.no-collections',
-    defaultMessage: 'This component is not organized into any collection.',
-    description: 'Message to display in manage collections section when component is not part of any collection.',
-  },
   componentPickerSingleSelect: {
     id: 'course-authoring.library-authoring.component-picker.single-select',
     defaultMessage: 'Add to Course', // TODO: Change this message to a generic one?

src/library-authoring/component-picker/ComponentPicker.tsx

@@ -38,7 +38,7 @@ const defaultSelectionChangedCallback: ComponentSelectionChangedEvent = (selecti
   window.parent.postMessage({ type: 'pickerSelectionChanged', selections }, '*');
 };
 
-type ComponentPickerProps = { libraryId?: string, showOnlyPublished?: boolean } & (
+type ComponentPickerProps = { libraryId?: string, showOnlyPublished?: boolean, extraFilter?: string[] } & (
   {
     componentPickerMode?: 'single',
     onComponentSelected?: ComponentSelectedEvent,
@@ -54,6 +54,7 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
   /** Restrict the component picker to a specific library */
   libraryId,
   showOnlyPublished,
+  extraFilter,
   componentPickerMode = 'single',
   /** This default callback is used to send the selected component back to the parent window,
    * when the component picker is used in an iframe.
@@ -105,6 +106,7 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
           <LibraryProvider
             libraryId={selectedLibrary}
             showOnlyPublished={calcShowOnlyPublished}
+            extraFilter={extraFilter}
             skipUrlUpdate
           >
             <SidebarProvider>