refactor: Use summary query in ImportStepperPage

Author: ChrisChV

src/data/api.mocks.ts

@@ -181,8 +181,7 @@ mockGetMigrationStatus.migrationStatusInProgressData = {
 mockGetMigrationStatus.applyMock = () => jest.spyOn(api, 'getModulestoreMigrationStatus').mockImplementation(mockGetMigrationStatus);
 
 export async function mockGetPreviewModulestoreMigration(
-  // @ts-ignore-next-line
-  libraryKey: string,
+  _: string,
   sourceKey: string,
 ): Promise<api.PreviewMigrationInfo> {
   switch (sourceKey) {

src/library-authoring/import-course/stepper/ImportStepperPage.tsx

@@ -13,7 +13,7 @@ import Loading from '@src/generic/Loading';
 
 import Header from '@src/header';
 import SubHeader from '@src/generic/sub-header/SubHeader';
-import { useBulkModulestoreMigrate } from '@src/data/apiHooks';
+import { useBulkModulestoreMigrate, usePreviewMigration } from '@src/data/apiHooks';
 import { ToastContext } from '@src/generic/toast-context';
 import LoadingButton from '@src/generic/loading-button';
 import { useCourseDetails } from '@src/course-outline/data/apiHooks';
@@ -56,15 +56,21 @@ export const ImportStepperPage = () => {
   const navigate = useNavigate();
   const [currentStep, setCurrentStep] = useState<MigrationStep>('select-course');
   const [selectedCourseId, setSelectedCourseId] = useState<string>('');
-  const [analysisCompleted, setAnalysisCompleted] = useState<boolean>(false);
-  const [importIsBlocked, setImportIsBlocked] = useState<boolean>(false);
   const { data: courseData } = useCourseDetails(selectedCourseId);
   const { libraryId, libraryData, readOnly } = useLibraryContext();
   const { showToast } = useContext(ToastContext);
   // Using bulk migrate as it allows us to create collection automatically
   // TODO: Modify single migration API to allow create collection
   const migrate = useBulkModulestoreMigrate();
 
+  const {
+    data: previewMigrationData,
+    isPending: isPreviewMigrationPending,
+  } = usePreviewMigration(libraryId, selectedCourseId);
+
+  const analysisCompleted = !isPreviewMigrationPending;
+  const importIsBlocked = previewMigrationData?.state === 'block_limit_reached';
+
   const handleImportCourse = async () => {
     // istanbul ignore if: this can never happen, just for satisfying type checker.
     if (!selectedCourseId) {
@@ -138,11 +144,7 @@ export const ImportStepperPage = () => {
                     eventKey="review-details"
                     title={intl.formatMessage(messages.importCourseReviewDetailsStep)}
                   >
-                    <ReviewImportDetails
-                      markAnalysisComplete={setAnalysisCompleted}
-                      setImportIsBlocked={setImportIsBlocked}
-                      courseId={selectedCourseId}
-                    />
+                    <ReviewImportDetails courseId={selectedCourseId} />
                   </Stepper.Step>
                 </Stepper>
               </div>

src/library-authoring/import-course/stepper/ReviewImportDetails.test.tsx

@@ -10,8 +10,6 @@ import messages from '../messages';
 mockContentLibrary.applyMock();
 mockGetPreviewModulestoreMigration.applyMock();
 const { libraryId } = mockContentLibrary;
-const markAnalysisComplete = jest.fn();
-const setImportIsBlocked = jest.fn();
 
 // Mock the useCourseDetails hook
 jest.mock('@src/course-outline/data/apiHooks', () => ({
@@ -45,15 +43,10 @@ describe('ReviewImportDetails', () => {
   });
 
   it('renders loading spinner when isPending is true', async () => {
-    render(<ReviewImportDetails
-      markAnalysisComplete={markAnalysisComplete}
-      courseId="test-course-id"
-      setImportIsBlocked={setImportIsBlocked}
-    />);
+    render(<ReviewImportDetails courseId="test-course-id" />);
 
     const spinners = await screen.findAllByRole('status');
     spinners.every((spinner) => expect(spinner.textContent).toEqual('Loading...'));
-    expect(markAnalysisComplete).toHaveBeenCalledWith(false);
   });
 
   it('renders import progress status when isBlockDataPending or migrationInfoIsPending is true', async () => {
@@ -63,15 +56,10 @@ describe('ReviewImportDetails', () => {
       data: null,
     });
 
-    render(<ReviewImportDetails
-      markAnalysisComplete={markAnalysisComplete}
-      courseId="test-course-id"
-      setImportIsBlocked={setImportIsBlocked}
-    />);
+    render(<ReviewImportDetails courseId="test-course-id" />);
 
     expect(await screen.findByRole('alert')).toBeInTheDocument();
     expect(await screen.findByText(/Import Analysis in Progress/i)).toBeInTheDocument();
-    expect(markAnalysisComplete).toHaveBeenCalledWith(false);
   });
 
   it('renders warning when reimport', async () => {
@@ -87,11 +75,7 @@ describe('ReviewImportDetails', () => {
       },
     });
 
-    render(<ReviewImportDetails
-      markAnalysisComplete={markAnalysisComplete}
-      courseId={courseKey}
-      setImportIsBlocked={setImportIsBlocked}
-    />);
+    render(<ReviewImportDetails courseId={courseKey} />);
 
     expect(await screen.findByRole('alert')).toBeInTheDocument();
     expect(await screen.findByText(/Import Analysis Completed: Reimport/i)).toBeInTheDocument();
@@ -100,7 +84,6 @@ describe('ReviewImportDetails', () => {
         .replace('{courseName}', 'Test Course')
         .replace('{libraryName}', 'Library title'),
     )).toBeInTheDocument();
-    expect(markAnalysisComplete).toHaveBeenCalledWith(true);
   });
 
   it('renders warning when unsupportedBlockPercentage > 0', async () => {
@@ -111,9 +94,7 @@ describe('ReviewImportDetails', () => {
     });
 
     render(<ReviewImportDetails
-      markAnalysisComplete={markAnalysisComplete}
       courseId={mockGetPreviewModulestoreMigration.sourceKeyUnsupported}
-      setImportIsBlocked={setImportIsBlocked}
     />);
 
     expect(await screen.findByRole('alert')).toBeInTheDocument();
@@ -131,7 +112,6 @@ describe('ReviewImportDetails', () => {
     expect(await screen.findByText('5')).toBeInTheDocument();
     expect(await screen.findByText('Components')).toBeInTheDocument();
     expect(await screen.findByText('5/10')).toBeInTheDocument();
-    expect(markAnalysisComplete).toHaveBeenCalledWith(true);
   });
 
   it('renders warning when components exceed the limit', async () => {
@@ -142,18 +122,14 @@ describe('ReviewImportDetails', () => {
     });
 
     render(<ReviewImportDetails
-      markAnalysisComplete={markAnalysisComplete}
       courseId={mockGetPreviewModulestoreMigration.sourceKeyBlockLimit}
-      setImportIsBlocked={setImportIsBlocked}
     />);
 
     expect(await screen.findByRole('alert')).toBeInTheDocument();
     expect(await screen.findByText(/Import Blocked/i)).toBeInTheDocument();
     expect(await screen.findByText(
       /This import would exceed the Content Library limit of 1000 items/i,
     )).toBeInTheDocument();
-    expect(markAnalysisComplete).toHaveBeenCalledWith(true);
-    expect(setImportIsBlocked).toHaveBeenCalledWith(true);
   });
 
   it('renders success alert when no unsupported blocks', async () => {
@@ -164,9 +140,7 @@ describe('ReviewImportDetails', () => {
     });
 
     render(<ReviewImportDetails
-      markAnalysisComplete={markAnalysisComplete}
       courseId={mockGetPreviewModulestoreMigration.sourceKeyGood}
-      setImportIsBlocked={setImportIsBlocked}
     />);
 
     expect(await screen.findByRole('alert')).toBeInTheDocument();
@@ -184,6 +158,5 @@ describe('ReviewImportDetails', () => {
     expect(await screen.findByText('3')).toBeInTheDocument();
     expect(await screen.findByText('Components')).toBeInTheDocument();
     expect(await screen.findByText('5')).toBeInTheDocument();
-    expect(markAnalysisComplete).toHaveBeenCalledWith(true);
   });
 });

src/library-authoring/import-course/stepper/ReviewImportDetails.tsx

@@ -3,20 +3,14 @@ import { Alert, Stack } from '@openedx/paragon';
 import { LoadingSpinner } from '@src/generic/Loading';
 import { useCourseDetails } from '@src/course-outline/data/apiHooks';
 
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { CheckCircle, Info, Warning } from '@openedx/paragon/icons';
 import { useLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
 import { useMigrationInfo } from '@src/library-authoring/data/apiHooks';
 import { usePreviewMigration } from '@src/data/apiHooks';
 import { SummaryCard } from './SummaryCard';
 import messages from '../messages';
 
-interface Props {
-  courseId?: string;
-  markAnalysisComplete: (analysisCompleted: boolean) => void;
-  setImportIsBlocked: (importIsBlocked: boolean) => void;
-}
-
 interface BannerProps {
   courseId?: string;
   isBlockDataPending?: boolean;
@@ -139,11 +133,7 @@ const Banner = ({
   );
 };
 
-export const ReviewImportDetails = ({
-  courseId,
-  markAnalysisComplete,
-  setImportIsBlocked,
-}: Props) => {
+export const ReviewImportDetails = ({ courseId }: { courseId: string }) => {
   const { libraryId } = useLibraryContext();
 
   const {
@@ -156,12 +146,6 @@ export const ReviewImportDetails = ({
   const totalBlocks = (previewMigrationData?.totalBlocks || 0) - unssuportedBlocks;
   const totalComponents = (previewMigrationData?.totalComponents || 0) - unssuportedBlocks;
 
-  useEffect(() => {
-    // Mark complete to inform parent component of analysis completion.
-    markAnalysisComplete(!isPreviewMigrationPending);
-    setImportIsBlocked(limitIsExceeded);
-  }, [isPreviewMigrationPending, limitIsExceeded]);
-
   return (
     <Stack gap={4}>
       <Banner