refactor: add onComponentSelected callback function

src/library-authoring/common/context.tsx

@@ -26,6 +26,7 @@ export interface LibraryContextData {
   setCollectionId: (collectionId?: string) => void;
   // Whether we're in "component picker" mode
   componentPickerMode: boolean;
+  onComponentSelected?: (usageKey: string, category: string) => void;
   // Sidebar stuff - only one sidebar is active at any given time:
   sidebarBodyComponent: SidebarBodyComponentId | null;
   closeLibrarySidebar: () => void;
@@ -69,6 +70,8 @@ interface LibraryProviderProps {
   /** 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;
+  /** Function to call when a component is selected */
+  onComponentSelected?: (usageKey: string, category: string) => void;
   /** Only used for testing */
   initialSidebarComponentUsageKey?: string;
   /** Only used for testing */
@@ -83,6 +86,7 @@ export const LibraryProvider = ({
   libraryId,
   collectionId: collectionIdProp,
   componentPickerMode = false,
+  onComponentSelected,
   initialSidebarComponentUsageKey,
   initialSidebarCollectionId,
 }: LibraryProviderProps) => {
@@ -140,6 +144,7 @@ export const LibraryProvider = ({
     readOnly,
     isLoadingLibraryData,
     componentPickerMode,
+    onComponentSelected,
     sidebarBodyComponent,
     closeLibrarySidebar,
     openAddContentSidebar,
@@ -165,6 +170,7 @@ export const LibraryProvider = ({
     readOnly,
     isLoadingLibraryData,
     componentPickerMode,
+    onComponentSelected,
     sidebarBodyComponent,
     closeLibrarySidebar,
     openAddContentSidebar,

src/library-authoring/component-info/ComponentInfo.tsx

@@ -5,6 +5,7 @@ import {
   Tabs,
   Stack,
 } from '@openedx/paragon';
+import { useCallback } from 'react';
 
 import { useLibraryContext } from '../common/context';
 import { ComponentMenu } from '../components';
@@ -23,6 +24,7 @@ const ComponentInfo = () => {
     readOnly,
     openComponentEditor,
     componentPickerMode,
+    onComponentSelected,
   } = useLibraryContext();
 
   // istanbul ignore if: this should never happen
@@ -32,13 +34,9 @@ const ComponentInfo = () => {
 
   const canEdit = canEditComponent(usageKey);
 
-  const handleAddComponentToCourse = () => {
-    window.parent.postMessage({
-      usageKey,
-      type: 'pickerComponentSelected',
-      category: getBlockType(usageKey),
-    }, '*');
-  };
+  const handleAddComponentToCourse = useCallback(() => {
+    onComponentSelected?.(usageKey, getBlockType(usageKey));
+  }, [usageKey]);
 
   return (
     <Stack>

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

@@ -19,8 +19,22 @@ const InnerComponentPicker: React.FC<LibraryComponentPickerProps> = ({ returnToL
   return <LibraryAuthoringPage returnToLibrarySelection={returnToLibrarySelection} />;
 };
 
+const defaultComponentSelectedCallback = (usageKey: string, category: string) => {
+  window.parent.postMessage({
+    usageKey,
+    type: 'pickerComponentSelected',
+    category,
+  }, '*');
+};
+
+interface ComponentPickerProps {
+  onComponentSelected?: (usageKey: string, category: string) => void;
+}
+
 // eslint-disable-next-line import/prefer-default-export
-export const ComponentPicker = () => {
+export const ComponentPicker: React.FC<ComponentPickerProps> = ({
+  onComponentSelected = defaultComponentSelectedCallback,
+}) => {
   const [currentStep, setCurrentStep] = useState('select-library');
   const [selectedLibrary, setSelectedLibrary] = useState('');
 
@@ -43,7 +57,7 @@ export const ComponentPicker = () => {
       </Stepper.Step>
 
       <Stepper.Step eventKey="pick-components" title="Pick some components">
-        <LibraryProvider libraryId={selectedLibrary} componentPickerMode>
+        <LibraryProvider libraryId={selectedLibrary} componentPickerMode onComponentSelected={onComponentSelected}>
           <InnerComponentPicker returnToLibrarySelection={returnToLibrarySelection} />
         </LibraryProvider>
       </Stepper.Step>

src/library-authoring/components/ComponentCard.tsx

@@ -93,6 +93,7 @@ const ComponentCard = ({ contentHit }: ComponentCardProps) => {
   const {
     openComponentInfoSidebar,
     componentPickerMode,
+    onComponentSelected,
   } = useLibraryContext();
 
   const {
@@ -109,11 +110,7 @@ const ComponentCard = ({ contentHit }: ComponentCardProps) => {
   const displayName = formatted?.displayName ?? '';
 
   const handleAddComponentToCourse = () => {
-    window.parent.postMessage({
-      usageKey,
-      type: 'pickerComponentSelected',
-      category: blockType,
-    }, '*');
+    onComponentSelected?.(usageKey, blockType);
   };
 
   return (