fix: import cyle

src/library-authoring/LibraryAuthoringPage.tsx

@@ -36,7 +36,6 @@ import {
 import LibraryComponents from './components/LibraryComponents';
 import LibraryCollections from './collections/LibraryCollections';
 import LibraryHome from './LibraryHome';
-// eslint-disable-next-line import/no-cycle
 import { LibrarySidebar } from './library-sidebar';
 import { SidebarBodyComponentId, useLibraryContext } from './common/context';
 import messages from './messages';

src/library-authoring/LibraryLayout.tsx

@@ -10,6 +10,7 @@ import { LibraryProvider } from './common/context';
 import { CreateCollectionModal } from './create-collection';
 import { LibraryTeamModal } from './library-team';
 import LibraryCollectionPage from './collections/LibraryCollectionPage';
+import { ComponentPickerModal } from './component-picker';
 import { ComponentEditorModal } from './components/ComponentEditorModal';
 
 const LibraryLayout = () => {
@@ -25,7 +26,16 @@ const LibraryLayout = () => {
   }
 
   return (
-    <LibraryProvider key={collectionId} libraryId={libraryId} collectionId={collectionId}>
+    <LibraryProvider
+      key={collectionId}
+      libraryId={libraryId}
+      collectionId={collectionId}
+      /** The component picker modal to use. We need to pass it as a reference instead of
+       * directly importing it to avoid the import cycle:
+       * ComponentPickerModal > ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+       * Sidebar > AddContentContainer > ComponentPickerModal */
+      componentPickerModal={ComponentPickerModal}
+    >
       <Routes>
         <Route
           path="collection/:collectionId"

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

@@ -19,15 +19,13 @@ import {
   ContentPaste,
 } from '@openedx/paragon/icons';
 import { v4 as uuid4 } from 'uuid';
-import { useParams } from 'react-router-dom';
 
 import { ToastContext } from '../../generic/toast-context';
 import { useCopyToClipboard } from '../../generic/clipboard';
 import { getCanEdit } from '../../course-unit/data/selectors';
 import { useCreateLibraryBlock, useLibraryPasteClipboard, useAddComponentsToCollection } from '../data/apiHooks';
 import { useLibraryContext } from '../common/context';
 import { canEditComponent } from '../components/ComponentEditorModal';
-// eslint-disable-next-line import/no-cycle
 import { PickLibraryContentModal } from './PickLibraryContentModal';
 
 import messages from './messages';
@@ -66,11 +64,12 @@ const AddContentButton = ({ contentType, onCreateContent } : AddContentButtonPro
 
 const AddContentContainer = () => {
   const intl = useIntl();
-  const { collectionId } = useParams();
   const {
     libraryId,
+    collectionId,
     openCreateCollectionModal,
     openComponentEditor,
+    componentPickerModal,
   } = useLibraryContext();
   const createBlockMutation = useCreateLibraryBlock();
   const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
@@ -214,13 +213,15 @@ const AddContentContainer = () => {
   return (
     <Stack direction="vertical">
       {collectionId ? (
-        <>
-          <AddContentButton contentType={libraryContentButtonData} onCreateContent={onCreateContent} />
-          <PickLibraryContentModal
-            isOpen={isAddLibraryContentModalOpen}
-            onClose={closeAddLibraryContentModal}
-          />
-        </>
+        componentPickerModal && (
+          <>
+            <AddContentButton contentType={libraryContentButtonData} onCreateContent={onCreateContent} />
+            <PickLibraryContentModal
+              isOpen={isAddLibraryContentModalOpen}
+              onClose={closeAddLibraryContentModal}
+            />
+          </>
+        )
       ) : (
         <AddContentButton contentType={collectionButtonData} onCreateContent={onCreateContent} />
       )}

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

@@ -8,6 +8,7 @@ import {
 } from '../../testUtils';
 import mockResult from '../__mocks__/library-search.json';
 import { LibraryProvider } from '../common/context';
+import { ComponentPickerModal } from '../component-picker';
 import * as api from '../data/api';
 import {
   mockContentLibrary,
@@ -35,6 +36,7 @@ const render = () => baseRender(<PickLibraryContentModal isOpen onClose={onClose
     <LibraryProvider
       libraryId={libraryId}
       collectionId="collectionId"
+      componentPickerModal={ComponentPickerModal}
     >
       {children}
     </LibraryProvider>

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

@@ -1,12 +1,9 @@
 import React, { useCallback, useContext, useState } from 'react';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { ActionRow, Button } from '@openedx/paragon';
-import { useParams } from 'react-router-dom';
 
 import { ToastContext } from '../../generic/toast-context';
 import { type SelectedComponent, useLibraryContext } from '../common/context';
-// eslint-disable-next-line import/no-cycle
-import { ComponentPickerModal } from '../component-picker';
 import { useAddComponentsToCollection } from '../data/apiHooks';
 import messages from './messages';
 
@@ -40,11 +37,19 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
 }) => {
   const intl = useIntl();
 
-  const { collectionId } = useParams();
   const {
     libraryId,
+    collectionId,
+    /** We need to get it as a reference instead of directly importing it to avoid the import cycle:
+     * ComponentPickerModal > ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+     * Sidebar > AddContentContainer > ComponentPickerModal */
+    componentPickerModal: ComponentPickerModal,
   } = useLibraryContext();
 
+  if (!collectionId || !ComponentPickerModal) {
+    throw new Error('libraryId and componentPickerModal are required');
+  }
+
   const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
 
   const { showToast } = useContext(ToastContext);

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

@@ -1,3 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export, import/no-cycle
+// eslint-disable-next-line import/prefer-default-export
 export { default as AddContentContainer } from './AddContentContainer';
 export { default as AddContentHeader } from './AddContentHeader';

src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -29,7 +29,6 @@ import {
 import { useCollection, useContentLibrary } from '../data/apiHooks';
 import { useLibraryContext } from '../common/context';
 import messages from './messages';
-// eslint-disable-next-line import/no-cycle
 import { LibrarySidebar } from '../library-sidebar';
 import LibraryCollectionComponents from './LibraryCollectionComponents';
 

src/library-authoring/common/context.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from 'react';
 
+import type { ComponentPickerModal } from '../component-picker';
 import type { ContentLibrary } from '../data/api';
 import { useContentLibrary } from '../data/apiHooks';
 
@@ -24,6 +25,11 @@ type NoComponentPickerType = {
   addComponentToSelectedComponents?: never;
   removeComponentFromSelectedComponents?: never;
   restrictToLibrary?: never;
+  /** The component picker modal to use. We need to pass it as a reference instead of
+   * directly importing it to avoid the import cycle:
+   * ComponentPickerModal > ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+   * Sidebar > AddContentContainer > ComponentPickerModal */
+  componentPickerModal?: typeof ComponentPickerModal;
 };
 
 type ComponentPickerSingleType = {
@@ -33,6 +39,7 @@ type ComponentPickerSingleType = {
   addComponentToSelectedComponents?: never;
   removeComponentFromSelectedComponents?: never;
   restrictToLibrary: boolean;
+  componentPickerModal?: never;
 };
 
 type ComponentPickerMultipleType = {
@@ -42,6 +49,7 @@ type ComponentPickerMultipleType = {
   addComponentToSelectedComponents: ComponentSelectedEvent;
   removeComponentFromSelectedComponents: ComponentSelectedEvent;
   restrictToLibrary: boolean;
+  componentPickerModal?: never;
 };
 
 type ComponentPickerType = NoComponentPickerType | ComponentPickerSingleType | ComponentPickerMultipleType;
@@ -113,20 +121,23 @@ type NoComponentPickerProps = {
   onComponentSelected?: never;
   onChangeComponentSelection?: never;
   restrictToLibrary?: never;
+  componentPickerModal?: typeof ComponentPickerModal;
 };
 
 export type ComponentPickerSingleProps = {
   componentPickerMode: 'single';
   onComponentSelected: ComponentSelectedEvent;
   onChangeComponentSelection?: never;
   restrictToLibrary?: boolean;
+  componentPickerModal?: never;
 };
 
 export type ComponentPickerMultipleProps = {
   componentPickerMode: 'multiple';
   onComponentSelected?: never;
   onChangeComponentSelection?: ComponentSelectionChangedEvent;
   restrictToLibrary?: boolean;
+  componentPickerModal?: never;
 };
 
 type ComponentPickerProps = NoComponentPickerProps | ComponentPickerSingleProps | ComponentPickerMultipleProps;
@@ -139,6 +150,7 @@ type LibraryProviderProps = {
   showOnlyPublished?: boolean;
   /** Only used for testing */
   initialSidebarComponentInfo?: SidebarComponentInfo;
+  componentPickerModal?: typeof ComponentPickerModal;
 } & ComponentPickerProps;
 
 /**
@@ -154,6 +166,7 @@ export const LibraryProvider = ({
   onChangeComponentSelection,
   showOnlyPublished = false,
   initialSidebarComponentInfo,
+  componentPickerModal,
 }: LibraryProviderProps) => {
   const [collectionId, setCollectionId] = useState(collectionIdProp);
   const [sidebarComponentInfo, setSidebarComponentInfo] = useState<SidebarComponentInfo | undefined>(
@@ -260,6 +273,12 @@ export const LibraryProvider = ({
       closeComponentEditor,
       resetSidebarAdditionalActions,
     };
+    if (!componentPickerMode) {
+      return {
+        ...contextValue,
+        componentPickerModal,
+      };
+    }
     if (componentPickerMode === 'single') {
       return {
         ...contextValue,
@@ -310,6 +329,7 @@ export const LibraryProvider = ({
     openComponentEditor,
     closeComponentEditor,
     resetSidebarAdditionalActions,
+    componentPickerModal,
   ]);
 
   return (

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

@@ -1,20 +1,17 @@
-import React, { Suspense, useState } from 'react';
+import React, { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Stepper } from '@openedx/paragon';
 
-import Loading from '../../generic/Loading';
 import {
   type ComponentSelectedEvent,
   type ComponentSelectionChangedEvent,
   LibraryProvider,
   useLibraryContext,
 } from '../common/context';
+import LibraryAuthoringPage from '../LibraryAuthoringPage';
+import LibraryCollectionPage from '../collections/LibraryCollectionPage';
 import SelectLibrary from './SelectLibrary';
 
-// eslint-disable-next-line import/no-cycle
-const LibraryAuthoringPage = React.lazy(() => import('../LibraryAuthoringPage'));
-const LibraryCollectionPage = React.lazy(() => import('../collections/LibraryCollectionPage'));
-
 interface LibraryComponentPickerProps {
   returnToLibrarySelection: () => void;
 }
@@ -23,17 +20,9 @@ const InnerComponentPicker: React.FC<LibraryComponentPickerProps> = ({ returnToL
   const { collectionId } = useLibraryContext();
 
   if (collectionId) {
-    return (
-      <Suspense fallback={<Loading />}>
-        <LibraryCollectionPage />;
-      </Suspense>
-    );
+    <LibraryCollectionPage />;
   }
-  return (
-    <Suspense fallback={<Loading />}>
-      <LibraryAuthoringPage returnToLibrarySelection={returnToLibrarySelection} />;
-    </Suspense>
-  );
+  return <LibraryAuthoringPage returnToLibrarySelection={returnToLibrarySelection} />;
 };
 
 /** Default handler in single-select mode. Used by the legacy UI for adding a single selected component to a course. */

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { StandardModal } from '@openedx/paragon';
 
 import type { ComponentSelectionChangedEvent } from '../common/context';
-// eslint-disable-next-line import/no-cycle
 import { ComponentPicker } from './ComponentPicker';
 
 interface ComponentPickerModalProps {

src/library-authoring/component-picker/index.ts

@@ -1,3 +1,2 @@
-// eslint-disable-next-line import/no-cycle
 export { ComponentPicker } from './ComponentPicker';
 export { ComponentPickerModal } from './ComponentPickerModal';

src/library-authoring/library-sidebar/LibrarySidebar.tsx

@@ -7,7 +7,6 @@ import {
 import { Close } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-// eslint-disable-next-line import/no-cycle
 import { AddContentContainer, AddContentHeader } from '../add-content';
 import { CollectionInfo, CollectionInfoHeader } from '../collections';
 import { SidebarBodyComponentId, useLibraryContext } from '../common/context';

src/library-authoring/library-sidebar/index.ts

@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export, import/no-cycle
+// eslint-disable-next-line import/prefer-default-export
 export { default as LibrarySidebar } from './LibrarySidebar';