refactor: remove ComponentPickerModal component

Replace with standard modal and component picker components.
open-craft · Nov 13, 2024 · 6c489d1 · 6c489d1
1 parent 68361f6
commit 6c489d1
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 75 deletions.
diff --git a/src/library-authoring/LibraryLayout.tsx b/src/library-authoring/LibraryLayout.tsx
@@ -10,7 +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 { ComponentPicker} from './component-picker';
 import { ComponentEditorModal } from './components/ComponentEditorModal';
 
 const LibraryLayout = () => {
@@ -32,9 +32,9 @@ const LibraryLayout = () => {
       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}
+       * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+       * Sidebar > AddContentContainer > ComponentPicker */
+      componentPicker={ComponentPicker}
     >
       <Routes>
         <Route

diff --git a/src/library-authoring/add-content/AddContentContainer.tsx b/src/library-authoring/add-content/AddContentContainer.tsx
@@ -70,7 +70,7 @@ const AddContentContainer = () => {
     collectionId,
     openCreateCollectionModal,
     openComponentEditor,
-    componentPickerModal,
+    componentPicker,
   } = useLibraryContext();
   const createBlockMutation = useCreateLibraryBlock();
   const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
@@ -239,7 +239,7 @@ const AddContentContainer = () => {
   return (
     <Stack direction="vertical">
       {collectionId ? (
-        componentPickerModal && (
+        componentPicker && (
           <>
             <AddContentButton contentType={libraryContentButtonData} onCreateContent={onCreateContent} />
             <PickLibraryContentModal

diff --git a/src/library-authoring/add-content/PickLibraryContentModal.test.tsx b/src/library-authoring/add-content/PickLibraryContentModal.test.tsx
@@ -12,7 +12,7 @@ import { studioHomeMock } from '../../studio-home/__mocks__';
 import { getStudioHomeApiUrl } from '../../studio-home/data/api';
 import mockResult from '../__mocks__/library-search.json';
 import { LibraryProvider } from '../common/context';
-import { ComponentPickerModal } from '../component-picker';
+import { ComponentPicker } from '../component-picker';
 import * as api from '../data/api';
 import {
   mockContentLibrary,
@@ -40,7 +40,7 @@ const render = () => baseRender(<PickLibraryContentModal isOpen onClose={onClose
     <LibraryProvider
       libraryId={libraryId}
       collectionId="collectionId"
-      componentPickerModal={ComponentPickerModal}
+      componentPicker={ComponentPicker}
     >
       {children}
     </LibraryProvider>

diff --git a/src/library-authoring/add-content/PickLibraryContentModal.tsx b/src/library-authoring/add-content/PickLibraryContentModal.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useState } from 'react';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { ActionRow, Button } from '@openedx/paragon';
+import { ActionRow, Button, StandardModal } from '@openedx/paragon';
 
 import { ToastContext } from '../../generic/toast-context';
 import { type SelectedComponent, useLibraryContext } from '../common/context';
@@ -41,14 +41,14 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
     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,
+     * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+     * Sidebar > AddContentContainer > ComponentPicker */
+    componentPicker: ComponentPicker,
   } = useLibraryContext();
 
   // istanbul ignore if: this should never happen
-  if (!collectionId || !ComponentPickerModal) {
-    throw new Error('libraryId and componentPickerModal are required');
+  if (!collectionId || !ComponentPicker) {
+    throw new Error('libraryId and componentPicker are required');
   }
 
   const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
@@ -70,12 +70,19 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
   }, [selectedComponents]);
 
   return (
-    <ComponentPickerModal
-      libraryId={libraryId}
+    <StandardModal
+      title="Select components"
+      isOverflowVisible={false}
+      size="xl"
       isOpen={isOpen}
       onClose={onClose}
-      onChangeComponentSelection={setSelectedComponents}
       footerNode={<PickLibraryContentModalFooter onSubmit={onSubmit} selectedComponents={selectedComponents} />}
-    />
+    >
+      <ComponentPicker
+        libraryId={libraryId}
+        componentPickerMode="multiple"
+        onChangeComponentSelection={setSelectedComponents}
+      />
+    </StandardModal>
   );
 };
diff --git a/src/library-authoring/common/context.tsx b/src/library-authoring/common/context.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 
-import type { ComponentPickerModal } from '../component-picker';
+import type { ComponentPicker } from '../component-picker';
 import type { ContentLibrary } from '../data/api';
 import { useContentLibrary } from '../data/apiHooks';
 
@@ -27,9 +27,9 @@ type NoComponentPickerType = {
   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;
+   * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+   * Sidebar > AddContentContainer > ComponentPicker */
+  componentPicker?: typeof ComponentPicker;
 };
 
 type ComponentPickerSingleType = {
@@ -39,7 +39,7 @@ type ComponentPickerSingleType = {
   addComponentToSelectedComponents?: never;
   removeComponentFromSelectedComponents?: never;
   restrictToLibrary: boolean;
-  componentPickerModal?: never;
+  componentPicker?: never;
 };
 
 type ComponentPickerMultipleType = {
@@ -49,7 +49,7 @@ type ComponentPickerMultipleType = {
   addComponentToSelectedComponents: ComponentSelectedEvent;
   removeComponentFromSelectedComponents: ComponentSelectedEvent;
   restrictToLibrary: boolean;
-  componentPickerModal?: never;
+  componentPicker?: never;
 };
 
 type ComponentPickerType = NoComponentPickerType | ComponentPickerSingleType | ComponentPickerMultipleType;
@@ -121,23 +121,23 @@ type NoComponentPickerProps = {
   onComponentSelected?: never;
   onChangeComponentSelection?: never;
   restrictToLibrary?: never;
-  componentPickerModal?: typeof ComponentPickerModal;
+  componentPicker?: typeof ComponentPicker;
 };
 
 export type ComponentPickerSingleProps = {
   componentPickerMode: 'single';
   onComponentSelected: ComponentSelectedEvent;
   onChangeComponentSelection?: never;
   restrictToLibrary?: boolean;
-  componentPickerModal?: never;
+  componentPicker?: never;
 };
 
 export type ComponentPickerMultipleProps = {
   componentPickerMode: 'multiple';
   onComponentSelected?: never;
   onChangeComponentSelection?: ComponentSelectionChangedEvent;
   restrictToLibrary?: boolean;
-  componentPickerModal?: never;
+  componentPicker?: never;
 };
 
 type ComponentPickerProps = NoComponentPickerProps | ComponentPickerSingleProps | ComponentPickerMultipleProps;
@@ -150,7 +150,7 @@ type LibraryProviderProps = {
   showOnlyPublished?: boolean;
   /** Only used for testing */
   initialSidebarComponentInfo?: SidebarComponentInfo;
-  componentPickerModal?: typeof ComponentPickerModal;
+  componentPicker?: typeof ComponentPicker;
 } & ComponentPickerProps;
 
 /**
@@ -166,7 +166,7 @@ export const LibraryProvider = ({
   onChangeComponentSelection,
   showOnlyPublished = false,
   initialSidebarComponentInfo,
-  componentPickerModal,
+  componentPicker,
 }: LibraryProviderProps) => {
   const [collectionId, setCollectionId] = useState(collectionIdProp);
   const [sidebarComponentInfo, setSidebarComponentInfo] = useState<SidebarComponentInfo | undefined>(
@@ -276,7 +276,7 @@ export const LibraryProvider = ({
     if (!componentPickerMode) {
       return {
         ...contextValue,
-        componentPickerModal,
+        componentPicker,
       };
     }
     if (componentPickerMode === 'single') {
@@ -329,7 +329,7 @@ export const LibraryProvider = ({
     openComponentEditor,
     closeComponentEditor,
     resetSidebarAdditionalActions,
-    componentPickerModal,
+    componentPicker,
   ]);
 
   return (

diff --git a/src/library-authoring/component-picker/ComponentPickerModal.tsx b/src/library-authoring/component-picker/ComponentPickerModal.tsx
diff --git a/src/library-authoring/component-picker/index.ts b/src/library-authoring/component-picker/index.ts
@@ -1,2 +1 @@
 export { ComponentPicker } from './ComponentPicker';
-export { ComponentPickerModal } from './ComponentPickerModal';
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { ComponentPicker } from './ComponentPicker';
Check failure on line 1 in src/library-authoring/component-picker/index.ts View workflow job for this annotation GitHub Actions / tests `Prefer default export on a file with single export`
		export { ComponentPickerModal } from './ComponentPickerModal';