feat: add 'single' and 'multiple' componentPickerModes

openedx · Oct 21, 2024 · 0831ba7 · 0831ba7
1 parent 21423e3
commit 0831ba7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/src/library-authoring/common/context.tsx b/src/library-authoring/common/context.tsx
@@ -9,6 +9,8 @@ import React, {
 import type { ContentLibrary } from '../data/api';
 import { useContentLibrary } from '../data/apiHooks';
 
+export type ComponentPickerMode = 'single' | 'multiple';
+
 export enum SidebarBodyComponentId {
   AddContent = 'add-content',
   Info = 'info',
@@ -25,7 +27,7 @@ export interface LibraryContextData {
   collectionId: string | undefined;
   setCollectionId: (collectionId?: string) => void;
   // Whether we're in "component picker" mode
-  componentPickerMode: boolean;
+  componentPickerMode?: ComponentPickerMode;
   onComponentSelected?: (usageKey: string, category: string) => void;
   // Sidebar stuff - only one sidebar is active at any given time:
   sidebarBodyComponent: SidebarBodyComponentId | null;
@@ -69,7 +71,7 @@ interface LibraryProviderProps {
   collectionId?: string;
   /** The component picker mode is a special mode where the user is selecting a component to add to a Unit (or another
    *  XBlock) */
-  componentPickerMode?: boolean;
+  componentPickerMode?: ComponentPickerMode;
   /** Function to call when a component is selected */
   onComponentSelected?: (usageKey: string, category: string) => void;
   /** Only used for testing */
@@ -85,7 +87,7 @@ export const LibraryProvider = ({
   children,
   libraryId,
   collectionId: collectionIdProp,
-  componentPickerMode = false,
+  componentPickerMode,
   onComponentSelected,
   initialSidebarComponentUsageKey,
   initialSidebarCollectionId,
@@ -134,7 +136,7 @@ export const LibraryProvider = ({
 
   const { data: libraryData, isLoading: isLoadingLibraryData } = useContentLibrary(libraryId);
 
-  const readOnly = componentPickerMode || !libraryData?.canEditLibrary;
+  const readOnly = !!componentPickerMode || !libraryData?.canEditLibrary;
 
   const context = useMemo<LibraryContextData>(() => ({
     libraryId,

diff --git a/src/library-authoring/component-picker/ComponentPicker.tsx b/src/library-authoring/component-picker/ComponentPicker.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Stepper } from '@openedx/paragon';
 
-import { LibraryProvider, useLibraryContext } from '../common/context';
+import { type ComponentPickerMode, LibraryProvider, useLibraryContext } from '../common/context';
 import LibraryAuthoringPage from '../LibraryAuthoringPage';
 import LibraryCollectionPage from '../collections/LibraryCollectionPage';
 import SelectLibrary from './SelectLibrary';
@@ -29,10 +29,15 @@ const defaultComponentSelectedCallback = (usageKey: string, category: string) =>
 
 interface ComponentPickerProps {
   onComponentSelected?: (usageKey: string, category: string) => void;
+  componentPickerMode?: ComponentPickerMode;
 }
 
 // eslint-disable-next-line import/prefer-default-export
 export const ComponentPicker: React.FC<ComponentPickerProps> = ({
+  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.
+   */
   onComponentSelected = defaultComponentSelectedCallback,
 }) => {
   const [currentStep, setCurrentStep] = useState('select-library');
@@ -57,7 +62,11 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
       </Stepper.Step>
 
       <Stepper.Step eventKey="pick-components" title="Pick some components">
-        <LibraryProvider libraryId={selectedLibrary} componentPickerMode onComponentSelected={onComponentSelected}>
+        <LibraryProvider
+          libraryId={selectedLibrary}
+          componentPickerMode={componentPickerMode}
+          onComponentSelected={onComponentSelected}
+        >
           <InnerComponentPicker returnToLibrarySelection={returnToLibrarySelection} />
         </LibraryProvider>
       </Stepper.Step>