feat: add library v2 component in course

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

@@ -2,13 +2,14 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { useToggle } from '@openedx/paragon';
+import { StandardModal, useToggle } from '@openedx/paragon';
 
 import { getCourseSectionVertical } from '../data/selectors';
 import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import ComponentModalView from './add-component-modals/ComponentModalView';
 import AddComponentButton from './add-component-btn';
 import messages from './messages';
+import { ComponentPicker } from '../../library-authoring/component-picker';
 
 const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
   const navigate = useNavigate();
@@ -17,6 +18,17 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
   const [isOpenHtml, openHtml, closeHtml] = useToggle(false);
   const [isOpenOpenAssessment, openOpenAssessment, closeOpenAssessment] = useToggle(false);
   const { componentTemplates } = useSelector(getCourseSectionVertical);
+  const [isAddLibraryContentModalOpen, showAddLibraryContentModal, closeAddLibraryContentModal] = useToggle();
+
+  const handleLibraryV2Selection = (selection) => {
+    handleCreateNewCourseXBlock({
+      type: COMPONENT_TYPES.libraryV2,
+      category: selection.blockType,
+      parentLocator: blockId,
+      libraryContentKey: selection.usageKey,
+    });
+    closeAddLibraryContentModal();
+  }
 
   const handleCreateNewXBlock = (type, moduleName) => {
     switch (type) {
@@ -38,6 +50,9 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
       case COMPONENT_TYPES.itembank:
         handleCreateNewCourseXBlock({ type, category: 'itembank', parentLocator: blockId });
         break;
+      case COMPONENT_TYPES.libraryV2:
+        showAddLibraryContentModal();
+        break;
       case COMPONENT_TYPES.advanced:
         handleCreateNewCourseXBlock({
           type: moduleName, category: moduleName, parentLocator: blockId,
@@ -122,6 +137,18 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
           );
         })}
       </ul>
+      <StandardModal
+        title="Select component"
+        isOpen={isAddLibraryContentModalOpen}
+        onClose={closeAddLibraryContentModal}
+        isOverflowVisible={false}
+        size="xl"
+      >
+        <ComponentPicker
+          showOnlyPublished
+          onComponentSelected={handleLibraryV2Selection}
+        />
+      </StandardModal>
     </div>
   );
 };

src/course-unit/data/api.js

@@ -63,9 +63,16 @@ export async function getCourseSectionVerticalData(unitId) {
  * @param {string} [options.displayName] - The display name.
  * @param {string} [options.boilerplate] - The boilerplate.
  * @param {string} [options.stagedContent] - The staged content.
+ * @param {string} [options.libraryContentKey] - component key from library if being imported.
  */
 export async function createCourseXblock({
-  type, category, parentLocator, displayName, boilerplate, stagedContent,
+  type,
+  category,
+  parentLocator,
+  displayName,
+  boilerplate,
+  stagedContent,
+  libraryContentKey,
 }) {
   const body = {
     type,
@@ -74,6 +81,7 @@ export async function createCourseXblock({
     parent_locator: parentLocator,
     display_name: displayName,
     staged_content: stagedContent,
+    library_content_key: libraryContentKey,
   };
 
   const { data } = await getAuthenticatedHttpClient()

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

@@ -35,7 +35,7 @@ const defaultSelectionChangedCallback: ComponentSelectionChangedEvent = (selecti
   window.parent.postMessage({ type: 'pickerSelectionChanged', selections }, '*');
 };
 
-type ComponentPickerProps = { libraryId?: string } & (
+type ComponentPickerProps = { libraryId?: string, showOnlyPublished?: boolean } & (
   {
     componentPickerMode?: 'single',
     onComponentSelected?: ComponentSelectedEvent,
@@ -51,6 +51,7 @@ type ComponentPickerProps = { libraryId?: string } & (
 export const ComponentPicker: React.FC<ComponentPickerProps> = ({
   /** Restrict the component picker to a specific library */
   libraryId,
+  showOnlyPublished,
   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.
@@ -99,7 +100,7 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
       <Stepper.Step eventKey="pick-components" title="Pick some components">
         <LibraryProvider
           libraryId={selectedLibrary}
-          showOnlyPublished={variant === 'published'}
+          showOnlyPublished={variant === 'published' || showOnlyPublished}
           {...libraryProviderProps}
         >
           <InnerComponentPicker returnToLibrarySelection={returnToLibrarySelection} />