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/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>

src/library-authoring/components/AddComponentWidget.tsx

@@ -0,0 +1,82 @@
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import {
+  AddCircleOutline,
+  CheckBoxIcon,
+  CheckBoxOutlineBlank,
+} from '@openedx/paragon/icons';
+
+import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import messages from './messages';
+
+interface AddComponentWidgetProps {
+  usageKey: string;
+  blockType: string;
+}
+
+const AddComponentWidget = ({ usageKey, blockType }: AddComponentWidgetProps) => {
+  const intl = useIntl();
+
+  const {
+    componentPickerMode,
+    onComponentSelected,
+    addComponentToSelectedComponents,
+    removeComponentFromSelectedComponents,
+    selectedComponents,
+  } = useComponentPickerContext();
+
+  // istanbul ignore if: this should never happen
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+
+  // istanbul ignore if: this should never happen
+  if (!componentPickerMode) {
+    return null;
+  }
+
+  if (componentPickerMode === 'single') {
+    return (
+      <Button
+        variant="outline-primary"
+        iconBefore={AddCircleOutline}
+        onClick={() => {
+          onComponentSelected({ usageKey, blockType });
+        }}
+      >
+        <FormattedMessage {...messages.componentPickerSingleSelectTitle} />
+      </Button>
+    );
+  }
+
+  if (componentPickerMode === 'multiple') {
+    const isChecked = selectedComponents.some((component) => component.usageKey === usageKey);
+
+    const handleChange = () => {
+      const selectedComponent = {
+        usageKey,
+        blockType,
+      };
+      if (!isChecked) {
+        addComponentToSelectedComponents(selectedComponent);
+      } else {
+        removeComponentFromSelectedComponents(selectedComponent);
+      }
+    };
+
+    return (
+      <Button
+        variant="outline-primary"
+        iconBefore={isChecked ? CheckBoxIcon : CheckBoxOutlineBlank}
+        onClick={handleChange}
+      >
+        {intl.formatMessage(messages.componentPickerMultipleSelectTitle)}
+      </Button>
+    );
+  }
+
+  // istanbul ignore next: this should never happen
+  return null;
+};
+
+export default AddComponentWidget;