feat: add existing components to unit

Author: rpenido

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

@@ -116,25 +116,25 @@ const AddContentView = ({
 
   return (
     <>
-      {upstreamContainerType !== ContainerType.Unit && (
+      {(collectionId || unitId) && componentPicker && (
+        /// Show the "Add Library Content" button for units and collections
         <>
-          {collectionId ? (
-            componentPicker && (
-              <>
-                <AddContentButton contentType={libraryContentButtonData} onCreateContent={onCreateContent} />
-                <PickLibraryContentModal
-                  isOpen={isAddLibraryContentModalOpen}
-                  onClose={closeAddLibraryContentModal}
-                />
-              </>
-            )
-          ) : (
-            <AddContentButton contentType={collectionButtonData} onCreateContent={onCreateContent} />
-          )}
-          <AddContentButton contentType={unitButtonData} onCreateContent={onCreateContent} />
-          <hr className="w-100 bg-gray-500" />
+          <AddContentButton contentType={libraryContentButtonData} onCreateContent={onCreateContent} />
+          <PickLibraryContentModal
+            isOpen={isAddLibraryContentModalOpen}
+            onClose={closeAddLibraryContentModal}
+          />
         </>
       )}
+      {!collectionId && !unitId && (
+        // Doesn't show the "Collection" button if we are in a unit or collection
+        <AddContentButton contentType={collectionButtonData} onCreateContent={onCreateContent} />
+      )}
+      {upstreamContainerType !== ContainerType.Unit && (
+        // Doesn't show the "Unit" button if we are in a unit
+        <AddContentButton contentType={unitButtonData} onCreateContent={onCreateContent} />
+      )}
+      <hr className="w-100 bg-gray-500" />
       {/* Note: for MVP we are hiding the unuspported types, not just disabling them. */}
       {contentTypes.filter(ct => !ct.disabled).map((contentType) => (
         <AddContentButton

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

@@ -5,23 +5,25 @@ 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 { useAddComponentsToCollection, useAddComponentsToContainer } from '../data/apiHooks';
 import messages from './messages';
 
 interface PickLibraryContentModalFooterProps {
   onSubmit: () => void;
   selectedComponents: SelectedComponent[];
+  buttonText: React.ReactNode;
 }
 
 const PickLibraryContentModalFooter: React.FC<PickLibraryContentModalFooterProps> = ({
   onSubmit,
   selectedComponents,
+  buttonText,
 }) => (
   <ActionRow>
     <FormattedMessage {...messages.selectedComponents} values={{ count: selectedComponents.length }} />
     <ActionRow.Spacer />
     <Button variant="primary" onClick={onSubmit}>
-      <FormattedMessage {...messages.addToCollectionButton} />
+      {buttonText}
     </Button>
   </ActionRow>
 );
@@ -40,18 +42,20 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
   const {
     libraryId,
     collectionId,
+    unitId,
     /** We need to get it as a reference instead of directly importing it to avoid the import cycle:
      * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
      * Sidebar > AddContent > ComponentPicker */
     componentPicker: ComponentPicker,
   } = useLibraryContext();
 
   // istanbul ignore if: this should never happen
-  if (!collectionId || !ComponentPicker) {
-    throw new Error('libraryId and componentPicker are required');
+  if (!(collectionId || unitId) || !ComponentPicker) {
+    throw new Error('collectionId/unitId and componentPicker are required');
   }
 
-  const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
+  const updateCollectionItemsMutation = useAddComponentsToCollection(libraryId, collectionId);
+  const updateUnitComponentsMutation = useAddComponentsToContainer(unitId);
 
   const { showToast } = useContext(ToastContext);
 
@@ -60,13 +64,23 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
   const onSubmit = useCallback(() => {
     const usageKeys = selectedComponents.map(({ usageKey }) => usageKey);
     onClose();
-    updateComponentsMutation.mutateAsync(usageKeys)
-      .then(() => {
-        showToast(intl.formatMessage(messages.successAssociateComponentMessage));
-      })
-      .catch(() => {
-        showToast(intl.formatMessage(messages.errorAssociateComponentToCollectionMessage));
-      });
+    if (collectionId) {
+      updateCollectionItemsMutation.mutateAsync(usageKeys)
+        .then(() => {
+          showToast(intl.formatMessage(messages.successAssociateComponentMessage));
+        })
+        .catch(() => {
+          showToast(intl.formatMessage(messages.errorAssociateComponentToCollectionMessage));
+        });
+    } else if (unitId) {
+      updateUnitComponentsMutation.mutateAsync(usageKeys)
+        .then(() => {
+          showToast(intl.formatMessage(messages.successAssociateComponentMessage));
+        })
+        .catch(() => {
+          showToast(intl.formatMessage(messages.errorAssociateComponentToContainerMessage));
+        });
+    }
   }, [selectedComponents]);
 
   return (
@@ -76,7 +90,16 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
       size="xl"
       isOpen={isOpen}
       onClose={onClose}
-      footerNode={<PickLibraryContentModalFooter onSubmit={onSubmit} selectedComponents={selectedComponents} />}
+      footerNode={(
+        <PickLibraryContentModalFooter
+          onSubmit={onSubmit}
+          selectedComponents={selectedComponents}
+          buttonText={(collectionId
+            ? intl.formatMessage(messages.addToCollectionButton)
+            : intl.formatMessage(messages.addToUnitButton)
+          )}
+        />
+      )}
     >
       <ComponentPicker
         libraryId={libraryId}

src/library-authoring/add-content/messages.ts

@@ -21,6 +21,11 @@ const messages = defineMessages({
     defaultMessage: 'Add to Collection',
     description: 'Button to add library content to a collection.',
   },
+  addToUnitButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.library-content.add-to-unit',
+    defaultMessage: 'Add to Unit',
+    description: 'Button to add library content to a unit.',
+  },
   selectedComponents: {
     id: 'course-authoring.library-authoring.add-content.selected-components',
     defaultMessage: '{count, plural, one {# Selected Component} other {# Selected Components}}',

src/library-authoring/data/apiHooks.test.tsx

@@ -261,13 +261,14 @@ describe('library api hooks', () => {
   });
 
   it('should add components to container', async () => {
+    const libraryId = 'lib:org:1';
     const componentId = 'lb:org:lib:html:1';
     const containerId = 'ltc:org:lib:unit:1';
 
     const url = getLibraryContainerChildrenApiUrl(containerId);
 
     axiosMock.onPost(url).reply(200);
-    const { result } = renderHook(() => useAddComponentsToContainer(containerId), { wrapper });
+    const { result } = renderHook(() => useAddComponentsToContainer(libraryId, containerId), { wrapper });
     await result.current.mutateAsync([componentId]);
 
     expect(axiosMock.history.post[0].url).toEqual(url);