From 60e1e60f4a9666b9d0e6fc1b0a86e5545ab730a2 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Tue, 18 Nov 2025 19:41:31 -0500
Subject: [PATCH 01/15] feat: Basics for Success/Failed import details page

---
 src/data/api.mocks.ts                         |  12 +
 src/data/api.ts                               |   9 +-
 src/library-authoring/LibraryLayout.tsx       |   5 +
 src/library-authoring/data/api.mocks.ts       |   4 +
 src/library-authoring/data/api.ts             |   1 +
 .../import-course/ImportDetailsPage.tsx       | 207 ++++++++++++++++++
 .../import-course/ImportedCourseCard.tsx      |  16 +-
 .../import-course/messages.ts                 |  56 +++++
 .../stepper/ImportStepperPage.tsx             |   6 +-
 src/library-authoring/routes.ts               |   2 +
 10 files changed, 303 insertions(+), 15 deletions(-)
 create mode 100644 src/library-authoring/import-course/ImportDetailsPage.tsx

diff --git a/src/data/api.mocks.ts b/src/data/api.mocks.ts
index 964e6f524d..55029fac3d 100644
--- a/src/data/api.mocks.ts
+++ b/src/data/api.mocks.ts
@@ -29,6 +29,7 @@ mockGetMigrationStatus.migrationStatusData = {
   artifacts: [],
   parameters: [
     {
+      id: 1,
       source: 'legacy-lib-1',
       target: 'lib',
       compositionLevel: 'component',
@@ -37,6 +38,7 @@ mockGetMigrationStatus.migrationStatusData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: false,
+      targetCollection: null,
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -53,6 +55,7 @@ mockGetMigrationStatus.migrationStatusFailedData = {
   artifacts: [],
   parameters: [
     {
+      id: 1,
       source: 'legacy-lib-1',
       target: 'lib',
       compositionLevel: 'component',
@@ -61,6 +64,7 @@ mockGetMigrationStatus.migrationStatusFailedData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: true,
+      targetCollection: null,
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -77,6 +81,7 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
   artifacts: [],
   parameters: [
     {
+      id: 1,
       source: 'legacy-lib-1',
       target: 'lib',
       compositionLevel: 'component',
@@ -85,8 +90,10 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: true,
+      targetCollection: null,
     },
     {
+      id: 2,
       source: 'legacy-lib-2',
       target: 'lib',
       compositionLevel: 'component',
@@ -95,6 +102,7 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: true,
+      targetCollection: null,
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -111,6 +119,7 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
   artifacts: [],
   parameters: [
     {
+      id: 1,
       source: 'legacy-lib-1',
       target: 'lib',
       compositionLevel: 'component',
@@ -119,8 +128,10 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: true,
+      targetCollection: null,
     },
     {
+      id: 2,
       source: 'legacy-lib-2',
       target: 'lib',
       compositionLevel: 'component',
@@ -129,6 +140,7 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: false,
+      targetCollection: null,
     },
   ],
 } as api.MigrateTaskStatusData;
diff --git a/src/data/api.ts b/src/data/api.ts
index e9bbad7b0b..7f2502a922 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -83,7 +83,8 @@ export async function getWaffleFlags(courseId?: string): Promise<WaffleFlagsStat
   return normalizeCourseDetail(data);
 }
 
-export interface MigrateArtifacts {
+export interface MigrateParameters {
+  id: number;
   source: string;
   target: string;
   compositionLevel: string;
@@ -92,6 +93,10 @@ export interface MigrateArtifacts {
   targetCollectionSlug: string;
   forwardSourceToTarget: boolean;
   isFailed: boolean;
+  targetCollection: {
+    key: string;
+    title: string;
+  } | null;
 }
 
 export interface MigrateTaskStatusData {
@@ -104,7 +109,7 @@ export interface MigrateTaskStatusData {
   modified: string;
   artifacts: string[];
   uuid: string;
-  parameters: MigrateArtifacts[];
+  parameters: MigrateParameters[];
 }
 
 export interface BulkMigrateRequestData {
diff --git a/src/library-authoring/LibraryLayout.tsx b/src/library-authoring/LibraryLayout.tsx
index 3d4f19683b..047269e429 100644
--- a/src/library-authoring/LibraryLayout.tsx
+++ b/src/library-authoring/LibraryLayout.tsx
@@ -21,6 +21,7 @@ import { LibrarySectionPage, LibrarySubsectionPage } from './section-subsections
 import { LibraryUnitPage } from './units';
 import { LibraryTeamModal } from './library-team';
 import { ImportStepperPage } from './import-course/stepper/ImportStepperPage';
+import { ImportDetailsPage } from './import-course/ImportDetailsPage';
 
 const LibraryLayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
   const {
@@ -102,6 +103,10 @@ const LibraryLayout = () => (
         path={ROUTES.IMPORT_COURSE}
         Component={ImportStepperPage}
       />
+      <Route
+        path={ROUTES.IMPORT_COURSE_DETAILS}
+        Component={ImportDetailsPage}
+      />
     </Route>
   </Routes>
 );
diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts
index 35410e53ed..b94ae68774 100644
--- a/src/library-authoring/data/api.mocks.ts
+++ b/src/library-authoring/data/api.mocks.ts
@@ -1091,6 +1091,7 @@ export async function mockGetCourseImports(libraryId: string): ReturnType<typeof
 mockGetCourseImports.libraryId = mockContentLibrary.libraryId;
 mockGetCourseImports.emptyLibraryId = mockContentLibrary.libraryId2;
 mockGetCourseImports.succeedImport = {
+  taskUuid: '1',
   source: {
     key: 'course-v1:edX+DemoX+2025_T1',
     displayName: 'DemoX 2025 T1',
@@ -1100,6 +1101,7 @@ mockGetCourseImports.succeedImport = {
   progress: 1,
 } satisfies api.CourseImport;
 mockGetCourseImports.succeedImportWithCollection = {
+  taskUuid: '2',
   source: {
     key: 'course-v1:edX+DemoX+2025_T2',
     displayName: 'DemoX 2025 T2',
@@ -1112,6 +1114,7 @@ mockGetCourseImports.succeedImportWithCollection = {
   progress: 1,
 } satisfies api.CourseImport;
 mockGetCourseImports.failImport = {
+  taskUuid: '3',
   source: {
     key: 'course-v1:edX+DemoX+2025_T3',
     displayName: 'DemoX 2025 T3',
@@ -1121,6 +1124,7 @@ mockGetCourseImports.failImport = {
   progress: 0.30,
 } satisfies api.CourseImport;
 mockGetCourseImports.inProgressImport = {
+  taskUuid: '4',
   source: {
     key: 'course-v1:edX+DemoX+2025_T4',
     displayName: 'DemoX 2025 T4',
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index 0945bac2fa..19817dbbb4 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -790,6 +790,7 @@ export async function publishContainer(containerId: string) {
 }
 
 export interface CourseImport {
+  taskUuid: string;
   source: {
     key: string;
     displayName: string;
diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
new file mode 100644
index 0000000000..a4de6d459e
--- /dev/null
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -0,0 +1,207 @@
+import { useContext } from 'react';
+import { Helmet } from 'react-helmet';
+import { useNavigate, useParams } from 'react-router';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Stack, Container, Alert, Layout, Button,
+} from '@openedx/paragon';
+
+import Header from '@src/header';
+import { useCourseDetails } from '@src/course-outline/data/apiHooks';
+import SubHeader from '@src/generic/sub-header/SubHeader';
+import { ArrowForward, CheckCircle, Info } from '@openedx/paragon/icons';
+import Loading from '@src/generic/Loading';
+import { ToastContext } from '@src/generic/toast-context';
+
+import { useBulkModulestoreMigrate, useModulestoreMigrationStatus } from '@src/data/apiHooks';
+import messages from './messages';
+import { SummaryCard } from './stepper/SummaryCard';
+import { HelpSidebar } from './HelpSidebar';
+import { useLibraryContext } from '../common/context/LibraryContext';
+
+export const ImportDetailsPage = () => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+  const { libraryId, libraryData, readOnly } = useLibraryContext();
+  const { courseId, migrationTaskId } = useParams();
+  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();
+
+  if (libraryId === undefined) {
+    // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
+    throw new Error('Error: route is missing libraryId.');
+  }
+  if (migrationTaskId === undefined) {
+    // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
+    throw new Error('Error: route is missing migrationId.');
+  }
+
+  const {
+    data: courseDetails,
+    isPending: isPendingCourseDetails,
+  } = useCourseDetails(courseId);
+  const {
+    data: migrationStatusData,
+    isPaused: isPendingMigrationStatusData,
+  } = useModulestoreMigrationStatus(migrationTaskId);
+  // Get the first migration, because the courses are imported one by one
+  const courseImportDetails = migrationStatusData?.parameters?.[0];
+
+  const isPending = isPendingCourseDetails || isPendingMigrationStatusData;
+
+  const collectionLink = () => {
+    let libUrl = `/library/${libraryId}`;
+    if (courseImportDetails?.targetCollection?.key) {
+      libUrl += `/collection/${courseImportDetails.targetCollection.key}`;
+    }
+    return libUrl;
+  };
+
+  const handleImportCourse = async () => {
+    if (!courseId || !courseImportDetails || !courseDetails || !migrationStatusData) {
+      return;
+    }
+
+    try {
+      await migrate.mutateAsync({
+        sources: [courseId!],
+        target: libraryId,
+        createCollections: true,
+        repeatHandlingStrategy: 'fork',
+        compositionLevel: 'section',
+      });
+      showToast(intl.formatMessage(messages.importCourseCompleteToastMessage, {
+        courseName: courseDetails.title,
+      }));
+      navigate(`${courseImportDetails.source}/${migrationStatusData.uuid}`);
+    } catch (error) {
+      showToast(intl.formatMessage(messages.importCourseCompleteFailedToastMessage, {
+        courseName: courseDetails.title,
+      }));
+    }
+  };
+
+  const renderBody = () => {
+    if (isPending) {
+      return <Loading />;
+    }
+
+    if (migrationStatusData?.state === 'Succeeded') {
+      return (
+        <Stack gap={3}>
+          <Alert variant="success" icon={CheckCircle}>
+            <Alert.Heading>
+              <FormattedMessage {...messages.importSuccessfulAlertTitle} />
+            </Alert.Heading>
+            <p>
+              <FormattedMessage
+                {...messages.importSuccessfulAlertBody}
+                values={{
+                  courseName: courseDetails?.title,
+                  collectionName: courseImportDetails?.targetCollection?.title,
+                }}
+              />
+            </p>
+          </Alert>
+          <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
+          <SummaryCard isPending />
+          <p>
+            <FormattedMessage
+              {...messages.importSuccessfulBody}
+              values={{
+                courseName: courseDetails?.title,
+              }}
+            />
+          </p>
+          <div className="w-100 d-flex justify-content-end">
+            <Button
+              variant="outline-primary"
+              iconAfter={ArrowForward}
+              onClick={() => navigate(collectionLink())}
+            >
+              <FormattedMessage {...messages.viewImportedContentButton} />
+            </Button>
+          </div>
+        </Stack>
+      );
+    } if (migrationStatusData?.state === 'Failed') {
+      return (
+        <Stack gap={3}>
+          <Alert variant="danger" icon={Info}>
+            <Alert.Heading>
+              <FormattedMessage {...messages.importFailedAlertTitle} />
+            </Alert.Heading>
+            <p>
+              <FormattedMessage
+                {...messages.importFailedAlertBody}
+                values={{
+                  courseName: courseDetails?.title,
+                }}
+              />
+            </p>
+          </Alert>
+          <h4><FormattedMessage {...messages.importFailedDetailsSectionTitle} /></h4>
+          <p>
+            <FormattedMessage {...messages.importFailedDetailsSectionBody} />
+          </p>
+          <div className="w-100 d-flex justify-content-end">
+            <Button
+              variant="outline-primary"
+              iconAfter={ArrowForward}
+              onClick={handleImportCourse}
+            >
+              <FormattedMessage {...messages.importFailedRetryImportButton} />
+            </Button>
+          </div>
+        </Stack>
+      );
+    }
+    return (
+    // In Progress
+      <Stack gap={2}>
+        In progress
+      </Stack>
+    );
+  };
+
+  return (
+    <div className="d-flex">
+      <div className="flex-grow-1">
+        <Helmet>
+          <title>{courseDetails?.title ?? ''} | {process.env.SITE_NAME}</title>
+        </Helmet>
+        <Header
+          number={libraryData?.slug}
+          title={libraryData?.title}
+          org={libraryData?.org}
+          contextId={libraryId}
+          isLibrary
+          readOnly={readOnly}
+          containerProps={{
+            size: undefined,
+          }}
+        />
+        <Container className="mt-4 mb-5">
+          <div className="px-4 bg-light-200 border-bottom">
+            <SubHeader
+              title={intl.formatMessage(messages.importDetailsTitle)}
+              hideBorder
+            />
+          </div>
+          <Layout xs={[{ span: 9 }, { span: 3 }]}>
+            <Layout.Element>
+              <div className="mt-4 px-4">
+                {renderBody()}
+              </div>
+            </Layout.Element>
+            <Layout.Element>
+              <HelpSidebar />
+            </Layout.Element>
+          </Layout>
+        </Container>
+      </div>
+    </div>
+  );
+};
diff --git a/src/library-authoring/import-course/ImportedCourseCard.tsx b/src/library-authoring/import-course/ImportedCourseCard.tsx
index 651395a3e4..719733425f 100644
--- a/src/library-authoring/import-course/ImportedCourseCard.tsx
+++ b/src/library-authoring/import-course/ImportedCourseCard.tsx
@@ -1,8 +1,10 @@
+import { Link, useNavigate } from 'react-router-dom';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button,
   Card,
   Icon,
+  IconButton,
 } from '@openedx/paragon';
 import {
   ArrowForwardIos,
@@ -13,7 +15,6 @@ import {
   Warning,
 } from '@openedx/paragon/icons';
 import classNames from 'classnames';
-import { Link } from 'react-router-dom';
 
 import { type CourseImport } from '../data/api';
 import { useLibraryRoutes } from '../routes';
@@ -54,6 +55,7 @@ const StateIcon = ({ state }: { state: CourseImport['state'] }) => (
 
 export const ImportedCourseCard = ({ courseImport }: ImportedCourseCardProps) => {
   const intl = useIntl();
+  const navigate = useNavigate();
   const { navigateTo } = useLibraryRoutes();
 
   return (
@@ -86,13 +88,11 @@ export const ImportedCourseCard = ({ courseImport }: ImportedCourseCardProps) =>
           </div>
         </div>
         <div className="d-flex align-items-center ml-auto">
-          <Link
-            to={`/course/${courseImport.source.key}`}
-            aria-label={intl.formatMessage(messages.courseImportNavigateAlt)}
-            className="text-primary-500"
-          >
-            <Icon src={ArrowForwardIos} />
-          </Link>
+          <IconButton
+            src={ArrowForwardIos}
+            alt={intl.formatMessage(messages.courseImportNavigateAlt)}
+            onClick={() => navigate(`${courseImport.source.key}/${courseImport.taskUuid}`)}
+          />
         </div>
       </Card.Section>
     </Card>
diff --git a/src/library-authoring/import-course/messages.ts b/src/library-authoring/import-course/messages.ts
index f93ad713bb..71dcb8f535 100644
--- a/src/library-authoring/import-course/messages.ts
+++ b/src/library-authoring/import-course/messages.ts
@@ -219,6 +219,62 @@ const messages = defineMessages({
     defaultMessage: '{courseName} migration failed.',
     description: 'Toast message that indicates course migration failed.',
   },
+  importDetailsTitle: {
+    id: 'library-authoring.import-course.import-details.title',
+    defaultMessage: 'Import Details',
+    description: 'Title of the Import Details page, in the import course',
+  },
+  importSuccessfulAlertTitle: {
+    id: 'library-authoring.import-course.import-details.import-successful.alert.title',
+    defaultMessage: 'Import Successful',
+    description: 'Title of the import successful alert in the import details page',
+  },
+  importSuccessfulAlertBody: {
+    id: 'library-authoring.import-course.import-details.import-successful.alert.body',
+    defaultMessage: '{courseName} has been imported to your library in a collection called {collectionName}',
+    description: 'Body of the import successful alert in the import details page',
+  },
+  importSuccessfulBody: {
+    id: 'library-authoring.import-course.import-details.import-successful.body',
+    defaultMessage: 'Course {courseName} has been imported successfully.'
+                + ' Imported Course content can be edited and remixed in your Library, and reused in Courses',
+    description: 'Body of the import successful card in the import details page',
+  },
+  importSummaryTitle: {
+    id: 'library-authoring.import-course.import-details.import-summary.title',
+    defaultMessage: 'Import Summary',
+    description: 'Title of the import summary card in the import details page',
+  },
+  viewImportedContentButton: {
+    id: 'library-authoring.import-course.import-details.view-imported-content.button',
+    defaultMessage: 'View Imported Content',
+    description: 'Label of the button to view imported conten of a imported course',
+  },
+  importFailedAlertTitle: {
+    id: 'library-authoring.import-course.import-details.import-failed.title',
+    defaultMessage: 'Import Failed',
+    description: 'Title of the import failed card in the import details page.',
+  },
+  importFailedAlertBody: {
+    id: 'library-authoring.import-course.import-details.import-failed.body',
+    defaultMessage: '{courseName} was not imported into your Library. See details bellow',
+    description: 'Body of the import failed card in the import details page.',
+  },
+  importFailedDetailsSectionTitle: {
+    id: 'library-authoring.import-course.import-details.import-failed.details.title',
+    defaultMessage: 'Details',
+    description: 'Title of the details section in the import details for a failed import',
+  },
+  importFailedDetailsSectionBody: {
+    id: 'library-authoring.import-course.import-details.import-failed.details.body',
+    defaultMessage: 'Import failed for the following reasons:',
+    description: 'Body of the details section in the import details for a failed import',
+  },
+  importFailedRetryImportButton: {
+    id: 'library-authoring.import-course.import-details.import-failed.re-try-import',
+    defaultMessage: 'Re-try Import',
+    description: 'Label of the button to re-try a failed import.',
+  },
 });
 
 export default messages;
diff --git a/src/library-authoring/import-course/stepper/ImportStepperPage.tsx b/src/library-authoring/import-course/stepper/ImportStepperPage.tsx
index 8b182531ff..c38d641ca8 100644
--- a/src/library-authoring/import-course/stepper/ImportStepperPage.tsx
+++ b/src/library-authoring/import-course/stepper/ImportStepperPage.tsx
@@ -95,11 +95,7 @@ export const ImportStepperPage = () => {
         repeatHandlingStrategy: 'fork',
         compositionLevel: 'section',
       });
-      showToast(intl.formatMessage(messages.importCourseCompleteToastMessage, {
-        courseName: courseData?.title,
-      }));
-      // TODO: Update this URL to redirect user to import details page.
-      navigate(`/library/${libraryId}?migration_task=${migrationTask.uuid}`);
+      navigate(`../import/${selectedCourseId}/${migrationTask.uuid}`);
     } catch (error) {
       showToast(intl.formatMessage(messages.importCourseCompleteFailedToastMessage, {
         courseName: courseData?.title,
diff --git a/src/library-authoring/routes.ts b/src/library-authoring/routes.ts
index 99a8c72c34..cca3c9b262 100644
--- a/src/library-authoring/routes.ts
+++ b/src/library-authoring/routes.ts
@@ -51,6 +51,8 @@ export const ROUTES = {
   IMPORT: '/import',
   // ImportStepperPage route:
   IMPORT_COURSE: '/import/courses',
+  // ImportDetailsPage route:
+  IMPORT_COURSE_DETAILS: '/import/:courseId/:migrationTaskId',
 };
 
 export enum ContentType {

From 566774456e471afa51a92da254f8d1b6c7a193c5 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Wed, 19 Nov 2025 14:33:07 -0500
Subject: [PATCH 02/15] feat: In-progress status for Import details

---
 .../import-course/ImportDetailsPage.tsx       | 55 +++++++++++++++----
 .../import-course/messages.ts                 | 15 +++--
 2 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index a4de6d459e..b431f54fd6 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useNavigate, useParams } from 'react-router';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
@@ -25,6 +25,8 @@ export const ImportDetailsPage = () => {
   const { libraryId, libraryData, readOnly } = useLibraryContext();
   const { courseId, migrationTaskId } = useParams();
   const { showToast } = useContext(ToastContext);
+  const [disableReimport, setDisableReimport] = useState(false);
+
   // Using bulk migrate as it allows us to create collection automatically
   // TODO: Modify single migration API to allow create collection
   const migrate = useBulkModulestoreMigrate();
@@ -51,6 +53,24 @@ export const ImportDetailsPage = () => {
 
   const isPending = isPendingCourseDetails || isPendingMigrationStatusData;
 
+  // Calculate current migration status
+  let migrationStatus = 'In Progress';
+  if (migrationStatusData?.state === 'Failed') {
+    // The entire task has failed
+    migrationStatus = 'Failed';
+  } else if (migrationStatusData?.state === 'Succeeded') {
+    // Currently, bulk migrate is being used to migrate courses because
+    // it has the ability to create collections.
+    // In bulk migration, the task may succeed, but each migration may fail.
+    // This checks whether the course migration has failed.
+    // TODO: Update this code when using simple migration
+    if (courseImportDetails?.isFailed) {
+      migrationStatus = 'Failed';
+    } else {
+      migrationStatus = 'Succeeded';
+    }
+  }
+
   const collectionLink = () => {
     let libUrl = `/library/${libraryId}`;
     if (courseImportDetails?.targetCollection?.key) {
@@ -64,22 +84,23 @@ export const ImportDetailsPage = () => {
       return;
     }
 
+    setDisableReimport(true);
+
     try {
-      await migrate.mutateAsync({
+      const newMigrationTask = await migrate.mutateAsync({
         sources: [courseId!],
         target: libraryId,
         createCollections: true,
         repeatHandlingStrategy: 'fork',
         compositionLevel: 'section',
       });
-      showToast(intl.formatMessage(messages.importCourseCompleteToastMessage, {
-        courseName: courseDetails.title,
-      }));
-      navigate(`${courseImportDetails.source}/${migrationStatusData.uuid}`);
+      navigate(`../import/${courseImportDetails.source}/${newMigrationTask.uuid}`);
+      setDisableReimport(false);
     } catch (error) {
       showToast(intl.formatMessage(messages.importCourseCompleteFailedToastMessage, {
         courseName: courseDetails.title,
       }));
+      setDisableReimport(false);
     }
   };
 
@@ -88,7 +109,7 @@ export const ImportDetailsPage = () => {
       return <Loading />;
     }
 
-    if (migrationStatusData?.state === 'Succeeded') {
+    if (migrationStatus === 'Succeeded') {
       return (
         <Stack gap={3}>
           <Alert variant="success" icon={CheckCircle}>
@@ -126,7 +147,7 @@ export const ImportDetailsPage = () => {
           </div>
         </Stack>
       );
-    } if (migrationStatusData?.state === 'Failed') {
+    } if (migrationStatus === 'Failed') {
       return (
         <Stack gap={3}>
           <Alert variant="danger" icon={Info}>
@@ -151,6 +172,7 @@ export const ImportDetailsPage = () => {
               variant="outline-primary"
               iconAfter={ArrowForward}
               onClick={handleImportCourse}
+              disabled={disableReimport}
             >
               <FormattedMessage {...messages.importFailedRetryImportButton} />
             </Button>
@@ -160,8 +182,21 @@ export const ImportDetailsPage = () => {
     }
     return (
     // In Progress
-      <Stack gap={2}>
-        In progress
+      <Stack gap={3}>
+        <h4><FormattedMessage {...messages.importInProgressTitle} /></h4>
+        <p>
+          <FormattedMessage {...messages.importInProgressBody} />
+        </p>
+        <SummaryCard isPending />
+        <div className="w-100 d-flex justify-content-end">
+          <Button
+            variant="outline-primary"
+            iconAfter={ArrowForward}
+            disabled
+          >
+            <FormattedMessage {...messages.viewImportedContentButton} />
+          </Button>
+        </div>
       </Stack>
     );
   };
diff --git a/src/library-authoring/import-course/messages.ts b/src/library-authoring/import-course/messages.ts
index 71dcb8f535..88ad24f5af 100644
--- a/src/library-authoring/import-course/messages.ts
+++ b/src/library-authoring/import-course/messages.ts
@@ -209,11 +209,6 @@ const messages = defineMessages({
     defaultMessage: '{courseName} has already been imported into the Library "{libraryName}". If this course is re-imported, all Sections, Subsections, Units and Content Blocks will be reimported again.',
     description: 'Body of the info card when course import analysis is complete and it was already imported before.',
   },
-  importCourseCompleteToastMessage: {
-    id: 'library-authoring.import-course.complete-import.in-progress.toast.message',
-    defaultMessage: '{courseName} is being migrated.',
-    description: 'Toast message that indicates a course is being migrated',
-  },
   importCourseCompleteFailedToastMessage: {
     id: 'library-authoring.import-course.complete-import.failed.toast.message',
     defaultMessage: '{courseName} migration failed.',
@@ -275,6 +270,16 @@ const messages = defineMessages({
     defaultMessage: 'Re-try Import',
     description: 'Label of the button to re-try a failed import.',
   },
+  importInProgressTitle: {
+    id: 'library-authoring.import-course.import-details.import-in-progress.title',
+    defaultMessage: 'Import in Progress',
+    description: 'Title of the import details when the migration is in progress',
+  },
+  importInProgressBody: {
+    id: 'library-authoring.import-course.import-details.import-in-progress.body',
+    defaultMessage: 'Course {courseName} is being imported. This page will update when import is complete',
+    description: 'Body of the import details when the migration is in progress',
+  },
 });
 
 export default messages;

From 63ab799c7cc8222021eaa07021d8afdc93f7abca Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Wed, 19 Nov 2025 21:07:42 -0500
Subject: [PATCH 03/15] feat: Add counts to summary in success

---
 src/data/api.mocks.ts                         | 48 +++++++++++++++++++
 src/data/api.ts                               |  8 ++++
 .../import-course/ImportDetailsPage.tsx       | 15 ++++--
 3 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/src/data/api.mocks.ts b/src/data/api.mocks.ts
index 55029fac3d..4c6c4d7afb 100644
--- a/src/data/api.mocks.ts
+++ b/src/data/api.mocks.ts
@@ -39,6 +39,14 @@ mockGetMigrationStatus.migrationStatusData = {
       forwardSourceToTarget: true,
       isFailed: false,
       targetCollection: null,
+      migrationSummary: {
+        totalBlocks: 0,
+        sections: 0,
+        subsections: 0,
+        units: 0,
+        components: 0,
+        unsupported: 0,
+      },
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -65,6 +73,14 @@ mockGetMigrationStatus.migrationStatusFailedData = {
       forwardSourceToTarget: true,
       isFailed: true,
       targetCollection: null,
+      migrationSummary: {
+        totalBlocks: 0,
+        sections: 0,
+        subsections: 0,
+        units: 0,
+        components: 0,
+        unsupported: 0,
+      },
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -91,6 +107,14 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
       forwardSourceToTarget: true,
       isFailed: true,
       targetCollection: null,
+      migrationSummary: {
+        totalBlocks: 0,
+        sections: 0,
+        subsections: 0,
+        units: 0,
+        components: 0,
+        unsupported: 0,
+      },
     },
     {
       id: 2,
@@ -103,6 +127,14 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
       forwardSourceToTarget: true,
       isFailed: true,
       targetCollection: null,
+      migrationSummary: {
+        totalBlocks: 0,
+        sections: 0,
+        subsections: 0,
+        units: 0,
+        components: 0,
+        unsupported: 0,
+      },
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -129,6 +161,14 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
       forwardSourceToTarget: true,
       isFailed: true,
       targetCollection: null,
+      migrationSummary: {
+        totalBlocks: 0,
+        sections: 0,
+        subsections: 0,
+        units: 0,
+        components: 0,
+        unsupported: 0,
+      },
     },
     {
       id: 2,
@@ -141,6 +181,14 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
       forwardSourceToTarget: true,
       isFailed: false,
       targetCollection: null,
+      migrationSummary: {
+        totalBlocks: 0,
+        sections: 0,
+        subsections: 0,
+        units: 0,
+        components: 0,
+        unsupported: 0,
+      },
     },
   ],
 } as api.MigrateTaskStatusData;
diff --git a/src/data/api.ts b/src/data/api.ts
index 7f2502a922..357b55d272 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -97,6 +97,14 @@ export interface MigrateParameters {
     key: string;
     title: string;
   } | null;
+  migrationSummary: {
+    totalBlocks: number;
+    sections: number;
+    subsections: number;
+    units: number;
+    components: number;
+    unsupported: number;
+  }
 }
 
 export interface MigrateTaskStatusData {
diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index b431f54fd6..ffea29037d 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -105,7 +105,7 @@ export const ImportDetailsPage = () => {
   };
 
   const renderBody = () => {
-    if (isPending) {
+    if (isPending || !courseImportDetails) {
       return <Loading />;
     }
 
@@ -121,13 +121,22 @@ export const ImportDetailsPage = () => {
                 {...messages.importSuccessfulAlertBody}
                 values={{
                   courseName: courseDetails?.title,
-                  collectionName: courseImportDetails?.targetCollection?.title,
+                  collectionName: courseImportDetails.targetCollection?.title,
                 }}
               />
             </p>
           </Alert>
           <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
-          <SummaryCard isPending />
+          <SummaryCard
+            totalBlocks={courseImportDetails.migrationSummary.totalBlocks}
+            totalComponents={
+              courseImportDetails.migrationSummary.components + courseImportDetails.migrationSummary.unsupported
+            }
+            sections={courseImportDetails.migrationSummary.sections}
+            subsections={courseImportDetails.migrationSummary.subsections}
+            units={courseImportDetails.migrationSummary.units}
+            unsupportedBlocks={courseImportDetails.migrationSummary.unsupported}
+          />
           <p>
             <FormattedMessage
               {...messages.importSuccessfulBody}

From b027438bde4b963ac4626143902c0f8bae37ed8e Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Thu, 20 Nov 2025 17:47:57 -0500
Subject: [PATCH 04/15] feat: Partial import for Import details page

---
 .env                                          |  2 +-
 .env.development                              |  2 +-
 .env.test                                     |  2 +-
 src/data/api.mocks.ts                         |  6 ++
 src/data/api.ts                               |  5 +
 .../import-course/ImportDetailsPage.tsx       | 92 ++++++++++++++++++-
 .../import-course/messages.ts                 | 33 +++++++
 7 files changed, 134 insertions(+), 8 deletions(-)

diff --git a/.env b/.env
index 23fa3de594..3237da4c31 100644
--- a/.env
+++ b/.env
@@ -45,7 +45,7 @@ INVITE_STUDENTS_EMAIL_TO=''
 ENABLE_CHECKLIST_QUALITY=''
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
-LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content,itembank"
 # Fallback in local style files
 PARAGON_THEME_URLS={}
 COURSE_TEAM_SUPPORT_EMAIL=''
diff --git a/.env.development b/.env.development
index c243685943..970902cff7 100644
--- a/.env.development
+++ b/.env.development
@@ -48,7 +48,7 @@ INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
-LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content"
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content,itembank"
 # Fallback in local style files
 PARAGON_THEME_URLS={}
 COURSE_TEAM_SUPPORT_EMAIL=''
diff --git a/.env.test b/.env.test
index e78d32b327..0e1e83d0cd 100644
--- a/.env.test
+++ b/.env.test
@@ -40,6 +40,6 @@ INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
-LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content,itembank"
 PARAGON_THEME_URLS=
 COURSE_TEAM_SUPPORT_EMAIL='support@example.com'
diff --git a/src/data/api.mocks.ts b/src/data/api.mocks.ts
index 4c6c4d7afb..a5a102aecf 100644
--- a/src/data/api.mocks.ts
+++ b/src/data/api.mocks.ts
@@ -47,6 +47,7 @@ mockGetMigrationStatus.migrationStatusData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -81,6 +82,7 @@ mockGetMigrationStatus.migrationStatusFailedData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -115,6 +117,7 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
     {
       id: 2,
@@ -135,6 +138,7 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -169,6 +173,7 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
     {
       id: 2,
@@ -189,6 +194,7 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
diff --git a/src/data/api.ts b/src/data/api.ts
index 357b55d272..c0d9ce7d4a 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -105,6 +105,11 @@ export interface MigrateParameters {
     components: number;
     unsupported: number;
   }
+  unsupportedReasons: {
+    block_name: string;
+    block_type: string;
+    reason: string;
+  }[];
 }
 
 export interface MigrateTaskStatusData {
diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index ffea29037d..161f10316f 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -4,14 +4,18 @@ import { useNavigate, useParams } from 'react-router';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   Stack, Container, Alert, Layout, Button,
+  DataTable,
 } from '@openedx/paragon';
 
 import Header from '@src/header';
 import { useCourseDetails } from '@src/course-outline/data/apiHooks';
 import SubHeader from '@src/generic/sub-header/SubHeader';
-import { ArrowForward, CheckCircle, Info } from '@openedx/paragon/icons';
+import {
+  ArrowForward, CheckCircle, Info, WarningFilled,
+} from '@openedx/paragon/icons';
 import Loading from '@src/generic/Loading';
 import { ToastContext } from '@src/generic/toast-context';
+import { Paragraph } from '@src/utils';
 
 import { useBulkModulestoreMigrate, useModulestoreMigrationStatus } from '@src/data/apiHooks';
 import messages from './messages';
@@ -66,6 +70,8 @@ export const ImportDetailsPage = () => {
     // TODO: Update this code when using simple migration
     if (courseImportDetails?.isFailed) {
       migrationStatus = 'Failed';
+    } else if (courseImportDetails?.migrationSummary.unsupported !== 0) {
+      migrationStatus = 'Partial Succeeded';
     } else {
       migrationStatus = 'Succeeded';
     }
@@ -128,10 +134,10 @@ export const ImportDetailsPage = () => {
           </Alert>
           <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
           <SummaryCard
-            totalBlocks={courseImportDetails.migrationSummary.totalBlocks}
-            totalComponents={
-              courseImportDetails.migrationSummary.components + courseImportDetails.migrationSummary.unsupported
+            totalBlocks={
+              courseImportDetails.migrationSummary.totalBlocks - courseImportDetails.migrationSummary.unsupported
             }
+            totalComponents={courseImportDetails.migrationSummary.components}
             sections={courseImportDetails.migrationSummary.sections}
             subsections={courseImportDetails.migrationSummary.subsections}
             units={courseImportDetails.migrationSummary.units}
@@ -188,14 +194,90 @@ export const ImportDetailsPage = () => {
           </div>
         </Stack>
       );
+    } if (migrationStatus === 'Partial Succeeded') {
+      const importedSuccessfullyCount = courseImportDetails.migrationSummary.totalBlocks
+        - courseImportDetails.migrationSummary.unsupported;
+
+      return (
+        <Stack gap={3}>
+          <Alert variant="warning" icon={WarningFilled}>
+            <Alert.Heading>
+              <FormattedMessage {...messages.importPartialAlertTitle} />
+            </Alert.Heading>
+            <p>
+              <FormattedMessage
+                {...messages.importPartialAlertBody}
+                values={{
+                  courseName: courseDetails?.title,
+                  collectionName: courseImportDetails.targetCollection?.title,
+                }}
+              />
+            </p>
+          </Alert>
+          <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
+          <SummaryCard
+            totalBlocks={
+              courseImportDetails.migrationSummary.totalBlocks - courseImportDetails.migrationSummary.unsupported
+            }
+            totalComponents={courseImportDetails.migrationSummary.components}
+            sections={courseImportDetails.migrationSummary.sections}
+            subsections={courseImportDetails.migrationSummary.subsections}
+            units={courseImportDetails.migrationSummary.units}
+            unsupportedBlocks={courseImportDetails.migrationSummary.unsupported}
+          />
+          <div>
+            <FormattedMessage
+              {...messages.importPartialBody}
+              values={{
+                percentage: Math.floor(
+                  (importedSuccessfullyCount * 100) / courseImportDetails.migrationSummary.totalBlocks,
+                ),
+                courseName: courseDetails?.title,
+                p: Paragraph,
+              }}
+            />
+          </div>
+          <DataTable
+            columns={[
+              {
+                Header: intl.formatMessage(messages.importPartialReasonTableBlockName),
+                accessor: 'blockName',
+
+              },
+              {
+                Header: intl.formatMessage(messages.importPartialReasonTableBlockType),
+                accessor: 'blockType',
+              },
+              {
+                Header: intl.formatMessage(messages.importPartialReasonTableReason),
+                accessor: 'reason',
+              },
+            ]}
+            data={courseImportDetails.unsupportedReasons}
+          >
+            <DataTable.Table />
+          </DataTable>
+          <div className="w-100 d-flex justify-content-end">
+            <Button
+              variant="outline-primary"
+              iconAfter={ArrowForward}
+              onClick={() => navigate(collectionLink())}
+            >
+              <FormattedMessage {...messages.viewImportedContentButton} />
+            </Button>
+          </div>
+        </Stack>
+      );
     }
+
     return (
-    // In Progress
+      // In Progress
       <Stack gap={3}>
         <h4><FormattedMessage {...messages.importInProgressTitle} /></h4>
         <p>
           <FormattedMessage {...messages.importInProgressBody} />
         </p>
+        <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
         <SummaryCard isPending />
         <div className="w-100 d-flex justify-content-end">
           <Button
diff --git a/src/library-authoring/import-course/messages.ts b/src/library-authoring/import-course/messages.ts
index 88ad24f5af..72c5a5881c 100644
--- a/src/library-authoring/import-course/messages.ts
+++ b/src/library-authoring/import-course/messages.ts
@@ -280,6 +280,39 @@ const messages = defineMessages({
     defaultMessage: 'Course {courseName} is being imported. This page will update when import is complete',
     description: 'Body of the import details when the migration is in progress',
   },
+  importPartialAlertTitle: {
+    id: 'library-authoring.import-course.import-details.import-partial.alert.title',
+    defaultMessage: 'Partial Import Successful',
+    description: 'Title of the alert in the import details page when the migration is in partial import.',
+  },
+  importPartialAlertBody: {
+    id: 'library-authoring.import-course.import-details.import-partial.alert.title',
+    defaultMessage: '{courseName} has been imported to your library in a collection called {collectionName}.'
+    + ' Some content was not added to your course. See details bellow.',
+    description: 'Body of the alert in the import details page when the migration is in partial import.',
+  },
+  importPartialBody: {
+    id: 'library-authoring.import-course.import-details.import-partial.alert.title',
+    defaultMessage: '<p>{percentage}% of Course {courseName} has been imported successfully.'
+    + ' Imported Course content can be edited and remixed in your Library, and reused in Courses.</p>'
+    + '<p>Details of the import, including reasons some content was not abled to be imported are described below</p>',
+    description: 'Body of the import details page when the migration is in partial import.',
+  },
+  importPartialReasonTableBlockName: {
+    id: 'library-authoring.import-course.import-details.reasons-table.block-name',
+    defaultMessage: 'Block Name',
+    description: 'Label for the Block Name field in the Reasons table in the import details',
+  },
+  importPartialReasonTableBlockType: {
+    id: 'library-authoring.import-course.import-details.reasons-table.block-type',
+    defaultMessage: 'Block Type',
+    description: 'Label for the Block Type field in the Reasons table in the import details',
+  },
+  importPartialReasonTableReason: {
+    id: 'library-authoring.import-course.import-details.reasons-table.reason',
+    defaultMessage: 'Reason For Failed import',
+    description: 'Label for the Reason For Failed import field in the Reasons table in the import details',
+  },
 });
 
 export default messages;

From 451d9c1755cbc426d87f35e4da07f90496fe601d Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Thu, 20 Nov 2025 20:50:50 -0500
Subject: [PATCH 05/15] fix: Nits on the code

---
 .../import-course/ImportDetailsPage.tsx                  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index 161f10316f..a79046327e 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -77,6 +77,8 @@ export const ImportDetailsPage = () => {
     }
   }
 
+  migrationStatus = 'In Progress';
+
   const collectionLink = () => {
     let libUrl = `/library/${libraryId}`;
     if (courseImportDetails?.targetCollection?.key) {
@@ -275,7 +277,12 @@ export const ImportDetailsPage = () => {
       <Stack gap={3}>
         <h4><FormattedMessage {...messages.importInProgressTitle} /></h4>
         <p>
-          <FormattedMessage {...messages.importInProgressBody} />
+          <FormattedMessage
+            {...messages.importInProgressBody}
+            values={{
+              courseName: courseDetails?.title,
+            }}
+          />
         </p>
         <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
         <SummaryCard isPending />

From e5a3ce425af0afed158caef7bcb20b08fcfe66f9 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Fri, 21 Nov 2025 17:45:23 -0500
Subject: [PATCH 06/15] fix: In Progress in all states

---
 src/library-authoring/import-course/ImportDetailsPage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index a79046327e..0e1281e780 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -77,8 +77,6 @@ export const ImportDetailsPage = () => {
     }
   }
 
-  migrationStatus = 'In Progress';
-
   const collectionLink = () => {
     let libUrl = `/library/${libraryId}`;
     if (courseImportDetails?.targetCollection?.key) {

From f241165dc65e1d2e8fb8fb2820b408b48182a814 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Fri, 21 Nov 2025 18:19:48 -0500
Subject: [PATCH 07/15] feat: Disable refech on not in progress

---
 src/data/apiHooks.ts                              |  4 ++--
 .../import-course/ImportDetailsPage.tsx           | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/data/apiHooks.ts b/src/data/apiHooks.ts
index 49a7b8992a..51fc1c2483 100644
--- a/src/data/apiHooks.ts
+++ b/src/data/apiHooks.ts
@@ -65,10 +65,10 @@ export const useBulkModulestoreMigrate = () => {
 /**
  * Get the migration status
  */
-export const useModulestoreMigrationStatus = (migrationId: string | null) => (
+export const useModulestoreMigrationStatus = (migrationId: string | null, refetchInterval: number | false = 1000) => (
   useQuery({
     queryKey: migrationQueryKeys.migrationTask(migrationId),
     queryFn: migrationId ? () => getModulestoreMigrationStatus(migrationId!) : skipToken,
-    refetchInterval: 1000, // Refresh every second
+    refetchInterval,
   })
 );
diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index 0e1281e780..821f9b439d 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useNavigate, useParams } from 'react-router';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
@@ -27,6 +27,7 @@ export const ImportDetailsPage = () => {
   const intl = useIntl();
   const navigate = useNavigate();
   const { libraryId, libraryData, readOnly } = useLibraryContext();
+  const [ enableRefeshState, setEnableRefreshState] = useState(true);
   const { courseId, migrationTaskId } = useParams();
   const { showToast } = useContext(ToastContext);
   const [disableReimport, setDisableReimport] = useState(false);
@@ -51,7 +52,7 @@ export const ImportDetailsPage = () => {
   const {
     data: migrationStatusData,
     isPaused: isPendingMigrationStatusData,
-  } = useModulestoreMigrationStatus(migrationTaskId);
+  } = useModulestoreMigrationStatus(migrationTaskId, enableRefeshState ? 1000 : false);
   // Get the first migration, because the courses are imported one by one
   const courseImportDetails = migrationStatusData?.parameters?.[0];
 
@@ -77,6 +78,10 @@ export const ImportDetailsPage = () => {
     }
   }
 
+  if (enableRefeshState && migrationStatus !== 'In Progress') {
+    setEnableRefreshState(false);
+  }
+
   const collectionLink = () => {
     let libUrl = `/library/${libraryId}`;
     if (courseImportDetails?.targetCollection?.key) {
@@ -238,6 +243,11 @@ export const ImportDetailsPage = () => {
             />
           </div>
           <DataTable
+            isPaginated
+            initialState={{
+              pageSize: 10,
+            }}
+            itemCount={courseImportDetails.unsupportedReasons.length}
             columns={[
               {
                 Header: intl.formatMessage(messages.importPartialReasonTableBlockName),
@@ -256,6 +266,7 @@ export const ImportDetailsPage = () => {
             data={courseImportDetails.unsupportedReasons}
           >
             <DataTable.Table />
+            <DataTable.TableFooter />
           </DataTable>
           <div className="w-100 d-flex justify-content-end">
             <Button

From 655d775c64b0c67db7d69458bbf4edd2ee3bff55 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Fri, 21 Nov 2025 18:23:33 -0500
Subject: [PATCH 08/15] style: Fix broken lint

---
 src/library-authoring/import-course/ImportDetailsPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index 821f9b439d..dcbd77a83e 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useNavigate, useParams } from 'react-router';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
@@ -27,7 +27,7 @@ export const ImportDetailsPage = () => {
   const intl = useIntl();
   const navigate = useNavigate();
   const { libraryId, libraryData, readOnly } = useLibraryContext();
-  const [ enableRefeshState, setEnableRefreshState] = useState(true);
+  const [enableRefeshState, setEnableRefreshState] = useState(true);
   const { courseId, migrationTaskId } = useParams();
   const { showToast } = useContext(ToastContext);
   const [disableReimport, setDisableReimport] = useState(false);

From 372943105e9fa8e4afc59500094881d3b3754b0c Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Fri, 21 Nov 2025 20:18:48 -0500
Subject: [PATCH 09/15] test: Adding test for ImportDetailsPage

---
 src/data/api.mocks.ts                         |  99 +++++++++++++-
 src/data/api.ts                               |   4 +-
 .../import-course/ImportDetailsPage.test.tsx  | 123 ++++++++++++++++++
 .../import-course/ImportDetailsPage.tsx       |   2 +-
 4 files changed, 219 insertions(+), 9 deletions(-)
 create mode 100644 src/library-authoring/import-course/ImportDetailsPage.test.tsx

diff --git a/src/data/api.mocks.ts b/src/data/api.mocks.ts
index a5a102aecf..5687d26ccc 100644
--- a/src/data/api.mocks.ts
+++ b/src/data/api.mocks.ts
@@ -10,6 +10,12 @@ export async function mockGetMigrationStatus(migrationId: string): Promise<api.M
       return mockGetMigrationStatus.migrationStatusFailedMultipleData;
     case mockGetMigrationStatus.migrationIdOneLibrary:
       return mockGetMigrationStatus.migrationStatusFailedOneLibraryData;
+    case mockGetMigrationStatus.migrationIdLoading:
+      return new Promise(() => {});
+    case mockGetMigrationStatus.migrationIdInProgress:
+      return mockGetMigrationStatus.migrationStatusInProgressData;
+    case mockGetMigrationStatus.migrationIdPartial:
+      return mockGetMigrationStatus.migrationStatusPartialData;
     default:
       /* istanbul ignore next */
       throw new Error(`mockGetMigrationStatus: unknown migration ID "${migrationId}"`);
@@ -38,13 +44,16 @@ mockGetMigrationStatus.migrationStatusData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: false,
-      targetCollection: null,
+      targetCollection: {
+        key: 'coll',
+        title: 'Test Collection',
+      },
       migrationSummary: {
-        totalBlocks: 0,
-        sections: 0,
-        subsections: 0,
-        units: 0,
-        components: 0,
+        totalBlocks: 6,
+        sections: 1,
+        subsections: 1,
+        units: 1,
+        components: 3,
         unsupported: 0,
       },
       unsupportedReasons: [],
@@ -198,4 +207,82 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
     },
   ],
 } as api.MigrateTaskStatusData;
+mockGetMigrationStatus.migrationIdLoading = '5';
+mockGetMigrationStatus.migrationIdInProgress = '6';
+mockGetMigrationStatus.migrationStatusInProgressData = {
+  uuid: mockGetMigrationStatus.migrationIdInProgress,
+  state: 'In Progress',
+  stateText: 'In Progress',
+  completedSteps: 3,
+  totalSteps: 9,
+  attempts: 1,
+  created: '',
+  modified: '',
+  artifacts: [],
+  parameters: [
+    {
+      id: 1,
+      source: 'legacy-lib-1',
+      target: 'lib',
+      compositionLevel: 'component',
+      repeatHandlingStrategy: 'update',
+      preserveUrlSlugs: false,
+      targetCollectionSlug: 'coll-1',
+      forwardSourceToTarget: true,
+      isFailed: false,
+      targetCollection: null,
+      migrationSummary: {
+        totalBlocks: 0,
+        sections: 0,
+        subsections: 0,
+        units: 0,
+        components: 0,
+        unsupported: 0,
+      },
+      unsupportedReasons: [],
+    },
+  ],
+} as api.MigrateTaskStatusData;
+mockGetMigrationStatus.migrationIdPartial = '7';
+mockGetMigrationStatus.migrationStatusPartialData = {
+  uuid: mockGetMigrationStatus.migrationIdPartial,
+  state: 'Succeeded',
+  stateText: 'Succeeded',
+  completedSteps: 9,
+  totalSteps: 9,
+  attempts: 1,
+  created: '',
+  modified: '',
+  artifacts: [],
+  parameters: [
+    {
+      id: 1,
+      source: 'legacy-lib-1',
+      target: 'lib',
+      compositionLevel: 'component',
+      repeatHandlingStrategy: 'update',
+      preserveUrlSlugs: false,
+      targetCollectionSlug: 'coll-1',
+      forwardSourceToTarget: true,
+      isFailed: false,
+      targetCollection: {
+        key: 'coll',
+        title: 'Test Collection',
+      },
+      migrationSummary: {
+        totalBlocks: 7,
+        sections: 1,
+        subsections: 1,
+        units: 1,
+        components: 3,
+        unsupported: 1,
+      },
+      unsupportedReasons: [{
+        blockName: 'Legacy library content',
+        blockType: 'library_content',
+        reason: 'The block has children, so it is not supported in content libraries',
+      }],
+    },
+  ],
+} as api.MigrateTaskStatusData;
 mockGetMigrationStatus.applyMock = () => jest.spyOn(api, 'getModulestoreMigrationStatus').mockImplementation(mockGetMigrationStatus);
diff --git a/src/data/api.ts b/src/data/api.ts
index c0d9ce7d4a..add974297b 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -106,8 +106,8 @@ export interface MigrateParameters {
     unsupported: number;
   }
   unsupportedReasons: {
-    block_name: string;
-    block_type: string;
+    blockName: string;
+    blockType: string;
     reason: string;
   }[];
 }
diff --git a/src/library-authoring/import-course/ImportDetailsPage.test.tsx b/src/library-authoring/import-course/ImportDetailsPage.test.tsx
new file mode 100644
index 0000000000..0fc9c525a0
--- /dev/null
+++ b/src/library-authoring/import-course/ImportDetailsPage.test.tsx
@@ -0,0 +1,123 @@
+import userEvent from '@testing-library/user-event';
+import {
+  initializeMocks,
+  render as testRender,
+  screen,
+  waitFor,
+} from '@src/testUtils';
+import { mockGetMigrationStatus } from '@src/data/api.mocks';
+import { bulkModulestoreMigrateUrl } from '@src/data/api';
+import { ImportDetailsPage } from './ImportDetailsPage';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { mockContentLibrary } from '../data/api.mocks';
+
+mockContentLibrary.applyMock();
+mockGetMigrationStatus.applyMock();
+const { libraryId } = mockContentLibrary;
+const mockNavigate = jest.fn();
+let axiosMock;
+
+// Mock the useCourseDetails hook
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  useCourseDetails: jest.fn().mockReturnValue({ isPending: false, data: { title: 'Test Course' } }),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+const render = (migrationTaskId: string) => (
+  testRender(
+    <ImportDetailsPage />,
+    {
+      extraWrapper: ({ children }: { children: React.ReactNode }) => (
+        <LibraryProvider libraryId={libraryId}>
+          {children}
+        </LibraryProvider>
+      ),
+      path: '/libraries/:libraryId/import/:courseId/:migrationTaskId',
+      params: {
+        libraryId,
+        migrationTaskId,
+        courseId: '1',
+      },
+    },
+  )
+);
+
+describe('', () => {
+  beforeEach(() => {
+    const newMocks = initializeMocks();
+    axiosMock = newMocks.axiosMock;
+  });
+
+  it('should render loading state', () => {
+    render(mockGetMigrationStatus.migrationIdLoading);
+    expect(screen.getByText(/loading\.\.\./i)).toBeInTheDocument();
+    expect(screen.getByText(/help & support/i)).toBeInTheDocument();
+  });
+
+  it('should render In Progress state', async () => {
+    render(mockGetMigrationStatus.migrationIdInProgress);
+    expect(await screen.findByText(/test course is being imported/i));
+    expect(screen.getByRole('button', {
+      name: /view imported content/i,
+    })).toBeDisabled();
+  });
+
+  it('should render Failed state', async () => {
+    const user = userEvent.setup();
+    const url = bulkModulestoreMigrateUrl();
+    axiosMock.onPost(url).reply(200);
+    render(mockGetMigrationStatus.migrationIdFailed);
+    expect(await screen.findByText(/test course was not imported into your Library/i));
+    expect(screen.getByText(/import failed for the following reasons:/i));
+    const retryImport = screen.getByRole('button', {
+      name: /re-try import/i,
+    });
+
+    await user.click(retryImport);
+    await waitFor(() => expect(axiosMock.history.post.length).toBe(1));
+  });
+
+  it('should render Succeeded state', async () => {
+    render(mockGetMigrationStatus.migrationId);
+    expect(await screen.findByText(
+      /test course has been imported to your library in a collection called test collection/i,
+    ));
+
+    const viewImportedContentBtn = screen.getByRole('button', {
+      name: /view imported content/i,
+    });
+
+    await viewImportedContentBtn.click();
+    await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/library/lib:Axim:TEST/collection/coll'));
+  });
+
+  it('should render Partial Succeeded state', async () => {
+    render(mockGetMigrationStatus.migrationIdPartial);
+    expect(await screen.findByText(/partial import successful/i)).toBeInTheDocument();
+
+    expect(screen.getByText(
+      /85% of course test course has been imported successfully/i,
+    )).toBeInTheDocument();
+
+    expect(screen.getByRole('cell', {
+      name: /legacy library content/i,
+    })).toBeInTheDocument();
+    expect(screen.getByRole('cell', {
+      name: /library_content/i,
+    })).toBeInTheDocument();
+    expect(screen.getByRole('cell', {
+      name: /the block has children, so it is not supported in content libraries/i,
+    }));
+
+    const viewImportedContentBtn = screen.getByRole('button', {
+      name: /view imported content/i,
+    });
+
+    await viewImportedContentBtn.click();
+    await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/library/lib:Axim:TEST/collection/coll'));
+  });
+});
diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index dcbd77a83e..e040cc5a14 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { useNavigate, useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router-dom';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   Stack, Container, Alert, Layout, Button,

From a9292ccaf9c7f2d5a2c8f36700699006d53085c7 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Thu, 27 Nov 2025 16:49:23 -0500
Subject: [PATCH 10/15] refactor: Use useMigrationBlocksInfo to get reasons in
 partial import

---
 src/data/api.mocks.ts                         | 12 ---
 src/data/api.ts                               |  5 -
 src/library-authoring/LibraryContent.tsx      |  1 +
 src/library-authoring/data/api.ts             |  4 +
 src/library-authoring/data/apiHooks.ts        |  8 +-
 .../import-course/ImportDetailsPage.test.tsx  | 61 ++++++++++--
 .../import-course/ImportDetailsPage.tsx       | 94 ++++++++++++++-----
 7 files changed, 134 insertions(+), 51 deletions(-)

diff --git a/src/data/api.mocks.ts b/src/data/api.mocks.ts
index 5687d26ccc..24117d9d7c 100644
--- a/src/data/api.mocks.ts
+++ b/src/data/api.mocks.ts
@@ -56,7 +56,6 @@ mockGetMigrationStatus.migrationStatusData = {
         components: 3,
         unsupported: 0,
       },
-      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -91,7 +90,6 @@ mockGetMigrationStatus.migrationStatusFailedData = {
         components: 0,
         unsupported: 0,
       },
-      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -126,7 +124,6 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
         components: 0,
         unsupported: 0,
       },
-      unsupportedReasons: [],
     },
     {
       id: 2,
@@ -147,7 +144,6 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
         components: 0,
         unsupported: 0,
       },
-      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -182,7 +178,6 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
         components: 0,
         unsupported: 0,
       },
-      unsupportedReasons: [],
     },
     {
       id: 2,
@@ -203,7 +198,6 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
         components: 0,
         unsupported: 0,
       },
-      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -239,7 +233,6 @@ mockGetMigrationStatus.migrationStatusInProgressData = {
         components: 0,
         unsupported: 0,
       },
-      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -277,11 +270,6 @@ mockGetMigrationStatus.migrationStatusPartialData = {
         components: 3,
         unsupported: 1,
       },
-      unsupportedReasons: [{
-        blockName: 'Legacy library content',
-        blockType: 'library_content',
-        reason: 'The block has children, so it is not supported in content libraries',
-      }],
     },
   ],
 } as api.MigrateTaskStatusData;
diff --git a/src/data/api.ts b/src/data/api.ts
index add974297b..357b55d272 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -105,11 +105,6 @@ export interface MigrateParameters {
     components: number;
     unsupported: number;
   }
-  unsupportedReasons: {
-    blockName: string;
-    blockType: string;
-    reason: string;
-  }[];
 }
 
 export interface MigrateTaskStatusData {
diff --git a/src/library-authoring/LibraryContent.tsx b/src/library-authoring/LibraryContent.tsx
index 74fe31f3cf..c1f419e15b 100644
--- a/src/library-authoring/LibraryContent.tsx
+++ b/src/library-authoring/LibraryContent.tsx
@@ -56,6 +56,7 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
     libraryId,
     collectionId,
     true,
+    undefined,
     showPlaceholderBlocks,
   );
   // Fetch unsupported blocks usage_key information from meilisearch index.
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index df4b367d86..0a87edbe5c 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -853,6 +853,7 @@ export async function getModulestoreMigrationBlocksInfo(
   libraryId: string,
   collectionId?: string,
   isFailed?: boolean,
+  taskUuid?: string,
 ): Promise<BlockMigrationInfo[]> {
   const client = getAuthenticatedHttpClient();
 
@@ -861,6 +862,9 @@ export async function getModulestoreMigrationBlocksInfo(
   if (collectionId) {
     params.append('target_collection_key', collectionId);
   }
+  if (taskUuid) {
+    params.append('task_uuid', taskUuid);
+  }
   if (isFailed !== undefined) {
     params.append('is_failed', JSON.stringify(isFailed));
   }
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
index 9d4f5e711d..9f516f82a4 100644
--- a/src/library-authoring/data/apiHooks.ts
+++ b/src/library-authoring/data/apiHooks.ts
@@ -995,10 +995,16 @@ export const useMigrationBlocksInfo = (
   libraryId: string,
   collectionId?: string,
   isFailed?: boolean,
+  taskUuid?: string,
   enabled = true,
 ) => (
   useQuery({
     queryKey: libraryAuthoringQueryKeys.migrationBlocksInfo(libraryId, collectionId, isFailed),
-    queryFn: enabled ? () => api.getModulestoreMigrationBlocksInfo(libraryId, collectionId, isFailed) : skipToken,
+    queryFn: enabled ? () => api.getModulestoreMigrationBlocksInfo(
+      libraryId,
+      collectionId,
+      isFailed,
+      taskUuid,
+    ) : skipToken,
   })
 );
diff --git a/src/library-authoring/import-course/ImportDetailsPage.test.tsx b/src/library-authoring/import-course/ImportDetailsPage.test.tsx
index 0fc9c525a0..a5debd92cd 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.test.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.test.tsx
@@ -7,14 +7,19 @@ import {
 } from '@src/testUtils';
 import { mockGetMigrationStatus } from '@src/data/api.mocks';
 import { bulkModulestoreMigrateUrl } from '@src/data/api';
+import { useGetContentHits } from '@src/search-manager';
 import { ImportDetailsPage } from './ImportDetailsPage';
 import { LibraryProvider } from '../common/context/LibraryContext';
 import { mockContentLibrary } from '../data/api.mocks';
+import { getModulestoreMigratedBlocksInfoUrl } from '../data/api';
+import { libraryComponentsMock } from '../__mocks__';
 
 mockContentLibrary.applyMock();
 mockGetMigrationStatus.applyMock();
 const { libraryId } = mockContentLibrary;
 const mockNavigate = jest.fn();
+const mockUseSearchContext = jest.fn();
+const mockFetchNextPage = jest.fn();
 let axiosMock;
 
 // Mock the useCourseDetails hook
@@ -27,6 +32,12 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockNavigate,
 }));
 
+jest.mock('@src/search-manager', () => ({
+  ...jest.requireActual('@src/search-manager'),
+  useSearchContext: () => mockUseSearchContext(),
+  useGetContentHits: jest.fn().mockReturnValue({ isPending: true, data: null }),
+}));
+
 const render = (migrationTaskId: string) => (
   testRender(
     <ImportDetailsPage />,
@@ -96,6 +107,42 @@ describe('', () => {
   });
 
   it('should render Partial Succeeded state', async () => {
+    axiosMock.onGet(getModulestoreMigratedBlocksInfoUrl()).reply(200, [
+      {
+        sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@library_content+block@test_lib_content',
+        targetKey: null,
+        unsupportedReason: 'The "library_content" XBlock (ID: "test_lib_content") has children, so it not supported in content libraries. It has 2 children blocks.',
+      },
+    ]);
+    (useGetContentHits as jest.Mock).mockReturnValue({
+      isPending: false,
+      data: {
+        hits: [
+          {
+            display_name: 'Randomized Content Block',
+            usage_key: 'block-v1:UNIX+UX2+2025_T2+type@library_content+block@test_lib_content',
+            block_type: 'library_content',
+          },
+        ],
+        query: '',
+        processingTimeMs: 0,
+        limit: 1,
+        offset: 0,
+        estimatedTotalHits: 1,
+      },
+    });
+    mockUseSearchContext.mockReturnValue({
+      totalContentAndCollectionHits: 0,
+      contentAndCollectionHits: [],
+      isFetchingNextPage: false,
+      hasNextPage: false,
+      fetchNextPage: mockFetchNextPage,
+      searchKeywords: '',
+      isFiltered: false,
+      isPending: false,
+      hits: libraryComponentsMock,
+    });
+
     render(mockGetMigrationStatus.migrationIdPartial);
     expect(await screen.findByText(/partial import successful/i)).toBeInTheDocument();
 
@@ -103,15 +150,15 @@ describe('', () => {
       /85% of course test course has been imported successfully/i,
     )).toBeInTheDocument();
 
-    expect(screen.getByRole('cell', {
-      name: /legacy library content/i,
+    expect(await screen.findByRole('cell', {
+      name: /randomized content block/i,
+    })).toBeInTheDocument();
+    expect(await screen.findByRole('cell', {
+      name: 'library_content',
     })).toBeInTheDocument();
-    expect(screen.getByRole('cell', {
-      name: /library_content/i,
+    expect(await screen.findByRole('cell', {
+      name: /has children, so it not supported in content libraries/i,
     })).toBeInTheDocument();
-    expect(screen.getByRole('cell', {
-      name: /the block has children, so it is not supported in content libraries/i,
-    }));
 
     const viewImportedContentBtn = screen.getByRole('button', {
       name: /view imported content/i,
diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index e040cc5a14..40c6af8f58 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useNavigate, useParams } from 'react-router-dom';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
@@ -18,10 +18,12 @@ import { ToastContext } from '@src/generic/toast-context';
 import { Paragraph } from '@src/utils';
 
 import { useBulkModulestoreMigrate, useModulestoreMigrationStatus } from '@src/data/apiHooks';
+import { useGetContentHits } from '@src/search-manager';
 import messages from './messages';
 import { SummaryCard } from './stepper/SummaryCard';
 import { HelpSidebar } from './HelpSidebar';
 import { useLibraryContext } from '../common/context/LibraryContext';
+import { useMigrationBlocksInfo } from '../data/apiHooks';
 
 export const ImportDetailsPage = () => {
   const intl = useIntl();
@@ -78,6 +80,43 @@ export const ImportDetailsPage = () => {
     }
   }
 
+  const {
+    data: migrationBlockInfo,
+    isPending: isPendingMigrationBlockInfo,
+  } = useMigrationBlocksInfo(
+    libraryId,
+    undefined,
+    true,
+    migrationTaskId,
+    migrationStatus === 'Partial Succeeded',
+  );
+  // Fetch unsupported blocks usage_key information from meilisearch index.
+  const { data: unssupportedBlocksData } = useGetContentHits(
+    [
+      `usage_key IN [${migrationBlockInfo?.map((block) => `"${block.sourceKey}"`).join(',')}]`,
+    ],
+    (migrationBlockInfo?.length || 0) > 0,
+    ['usage_key', 'block_type', 'display_name'],
+    migrationBlockInfo?.length,
+    true,
+  );
+  const unsupportedTableData = useMemo(() => {
+    if (!migrationBlockInfo || !unssupportedBlocksData) {
+      return [];
+    }
+
+    const reasons = migrationBlockInfo.reduce((result, block) => ({
+      ...result,
+      [block.sourceKey]: block.unsupportedReason || '',
+    }), {} as Record<string, string>);
+
+    return unssupportedBlocksData.hits.map(block => ({
+      blockName: block.display_name,
+      blockType: block.block_type,
+      reason: reasons[block.usage_key],
+    }));
+  }, [migrationBlockInfo, unssupportedBlocksData]);
+
   if (enableRefeshState && migrationStatus !== 'In Progress') {
     setEnableRefreshState(false);
   }
@@ -242,32 +281,35 @@ export const ImportDetailsPage = () => {
               }}
             />
           </div>
-          <DataTable
-            isPaginated
-            initialState={{
-              pageSize: 10,
-            }}
-            itemCount={courseImportDetails.unsupportedReasons.length}
-            columns={[
-              {
-                Header: intl.formatMessage(messages.importPartialReasonTableBlockName),
-                accessor: 'blockName',
+          {!isPendingMigrationBlockInfo && unsupportedTableData && (
+            <DataTable
+              isPaginated
+              initialState={{
+                pageSize: 10,
+              }}
+              itemCount={unsupportedTableData.length}
+              columns={[
+                {
+                  Header: intl.formatMessage(messages.importPartialReasonTableBlockName),
+                  accessor: 'blockName',
+
+                },
+                {
+                  Header: intl.formatMessage(messages.importPartialReasonTableBlockType),
+                  accessor: 'blockType',
+                },
+                {
+                  Header: intl.formatMessage(messages.importPartialReasonTableReason),
+                  accessor: 'reason',
+                },
+              ]}
+              data={unsupportedTableData}
+            >
+              <DataTable.Table />
+              <DataTable.TableFooter />
+            </DataTable>
+          )}
 
-              },
-              {
-                Header: intl.formatMessage(messages.importPartialReasonTableBlockType),
-                accessor: 'blockType',
-              },
-              {
-                Header: intl.formatMessage(messages.importPartialReasonTableReason),
-                accessor: 'reason',
-              },
-            ]}
-            data={courseImportDetails.unsupportedReasons}
-          >
-            <DataTable.Table />
-            <DataTable.TableFooter />
-          </DataTable>
           <div className="w-100 d-flex justify-content-end">
             <Button
               variant="outline-primary"

From 1b5c85c8c441a82e4b3886259bd3a4226dd96a0c Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Fri, 28 Nov 2025 18:02:43 -0500
Subject: [PATCH 11/15] refactor: Generate the migration summary in the front
 using migration blocks data

---
 src/data/api.mocks.ts                         |  64 --------
 src/data/api.ts                               |   8 -
 src/generic/key-utils.ts                      |  15 ++
 src/library-authoring/data/api.mocks.ts       |  46 ++++++
 .../import-course/ImportDetailsPage.test.tsx  |  23 +--
 .../import-course/ImportDetailsPage.tsx       | 140 +++++++++++++-----
 6 files changed, 177 insertions(+), 119 deletions(-)

diff --git a/src/data/api.mocks.ts b/src/data/api.mocks.ts
index 24117d9d7c..fa63373de9 100644
--- a/src/data/api.mocks.ts
+++ b/src/data/api.mocks.ts
@@ -48,14 +48,6 @@ mockGetMigrationStatus.migrationStatusData = {
         key: 'coll',
         title: 'Test Collection',
       },
-      migrationSummary: {
-        totalBlocks: 6,
-        sections: 1,
-        subsections: 1,
-        units: 1,
-        components: 3,
-        unsupported: 0,
-      },
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -82,14 +74,6 @@ mockGetMigrationStatus.migrationStatusFailedData = {
       forwardSourceToTarget: true,
       isFailed: true,
       targetCollection: null,
-      migrationSummary: {
-        totalBlocks: 0,
-        sections: 0,
-        subsections: 0,
-        units: 0,
-        components: 0,
-        unsupported: 0,
-      },
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -116,14 +100,6 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
       forwardSourceToTarget: true,
       isFailed: true,
       targetCollection: null,
-      migrationSummary: {
-        totalBlocks: 0,
-        sections: 0,
-        subsections: 0,
-        units: 0,
-        components: 0,
-        unsupported: 0,
-      },
     },
     {
       id: 2,
@@ -136,14 +112,6 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
       forwardSourceToTarget: true,
       isFailed: true,
       targetCollection: null,
-      migrationSummary: {
-        totalBlocks: 0,
-        sections: 0,
-        subsections: 0,
-        units: 0,
-        components: 0,
-        unsupported: 0,
-      },
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -170,14 +138,6 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
       forwardSourceToTarget: true,
       isFailed: true,
       targetCollection: null,
-      migrationSummary: {
-        totalBlocks: 0,
-        sections: 0,
-        subsections: 0,
-        units: 0,
-        components: 0,
-        unsupported: 0,
-      },
     },
     {
       id: 2,
@@ -190,14 +150,6 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
       forwardSourceToTarget: true,
       isFailed: false,
       targetCollection: null,
-      migrationSummary: {
-        totalBlocks: 0,
-        sections: 0,
-        subsections: 0,
-        units: 0,
-        components: 0,
-        unsupported: 0,
-      },
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -225,14 +177,6 @@ mockGetMigrationStatus.migrationStatusInProgressData = {
       forwardSourceToTarget: true,
       isFailed: false,
       targetCollection: null,
-      migrationSummary: {
-        totalBlocks: 0,
-        sections: 0,
-        subsections: 0,
-        units: 0,
-        components: 0,
-        unsupported: 0,
-      },
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -262,14 +206,6 @@ mockGetMigrationStatus.migrationStatusPartialData = {
         key: 'coll',
         title: 'Test Collection',
       },
-      migrationSummary: {
-        totalBlocks: 7,
-        sections: 1,
-        subsections: 1,
-        units: 1,
-        components: 3,
-        unsupported: 1,
-      },
     },
   ],
 } as api.MigrateTaskStatusData;
diff --git a/src/data/api.ts b/src/data/api.ts
index 357b55d272..7f2502a922 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -97,14 +97,6 @@ export interface MigrateParameters {
     key: string;
     title: string;
   } | null;
-  migrationSummary: {
-    totalBlocks: number;
-    sections: number;
-    subsections: number;
-    units: number;
-    components: number;
-    unsupported: number;
-  }
 }
 
 export interface MigrateTaskStatusData {
diff --git a/src/generic/key-utils.ts b/src/generic/key-utils.ts
index 86f84752b9..5842dc170b 100644
--- a/src/generic/key-utils.ts
+++ b/src/generic/key-utils.ts
@@ -126,3 +126,18 @@ export function normalizeContainerType(containerType: ContainerType | string) {
       return containerType;
   }
 }
+
+/**
+ * Given a usage key of V1 block like `block-v1:org+type@html+block@1`, get the type (e.g. `html`)
+ * @param usageKey e.g. `block-v1:org+type@html+block@1`
+ * @returns The block type as a string
+ */
+export function getBlockTypeBlockV1(usageKey: string): string {
+  if (usageKey && usageKey.startsWith('block-v1:')) {
+    const blockType = usageKey.match(/type@([^+]+)/);
+    if (blockType) {
+      return blockType[1];
+    }
+  }
+  throw new Error(`Invalid usageKey: ${usageKey}`);
+}
diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts
index b94ae68774..6337462cbe 100644
--- a/src/library-authoring/data/api.mocks.ts
+++ b/src/library-authoring/data/api.mocks.ts
@@ -34,6 +34,52 @@ export const mockGetContentLibraryV2List = {
   }),
 };
 
+export const mockGetModulestoreMigratedBlocksInfo = {
+  applyMockSuccess: () => jest.spyOn(api, 'getModulestoreMigrationBlocksInfo').mockResolvedValue(
+    [
+      {
+        sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@chapter+block@1',
+        targetKey: '1',
+        unsupportedReason: undefined,
+      },
+      {
+        sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@sequential+block@2',
+        targetKey: '2',
+        unsupportedReason: undefined,
+      },
+      {
+        sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@vertical+block@2',
+        targetKey: '3',
+        unsupportedReason: undefined,
+      },
+      {
+        sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@html+block@3',
+        targetKey: '4',
+        unsupportedReason: undefined,
+      },
+    ],
+  ),
+  applyMockPartial: () => jest.spyOn(api, 'getModulestoreMigrationBlocksInfo').mockResolvedValue(
+    [
+      {
+        sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@library_content+block@test_lib_content',
+        targetKey: null,
+        unsupportedReason: 'The "library_content" XBlock (ID: "test_lib_content") has children, so it not supported in content libraries. It has 2 children blocks.',
+      },
+      {
+        sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@html+block@1',
+        targetKey: '1',
+        unsupportedReason: undefined,
+      },
+      {
+        sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@chapter+block@1',
+        targetKey: '2',
+        unsupportedReason: undefined,
+      },
+    ],
+  ),
+};
+
 /**
  * Mock for `getContentLibrary()`
  *
diff --git a/src/library-authoring/import-course/ImportDetailsPage.test.tsx b/src/library-authoring/import-course/ImportDetailsPage.test.tsx
index a5debd92cd..0ed75243df 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.test.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.test.tsx
@@ -10,8 +10,7 @@ import { bulkModulestoreMigrateUrl } from '@src/data/api';
 import { useGetContentHits } from '@src/search-manager';
 import { ImportDetailsPage } from './ImportDetailsPage';
 import { LibraryProvider } from '../common/context/LibraryContext';
-import { mockContentLibrary } from '../data/api.mocks';
-import { getModulestoreMigratedBlocksInfoUrl } from '../data/api';
+import { mockContentLibrary, mockGetModulestoreMigratedBlocksInfo } from '../data/api.mocks';
 import { libraryComponentsMock } from '../__mocks__';
 
 mockContentLibrary.applyMock();
@@ -93,10 +92,13 @@ describe('', () => {
   });
 
   it('should render Succeeded state', async () => {
+    mockGetModulestoreMigratedBlocksInfo.applyMockSuccess();
     render(mockGetMigrationStatus.migrationId);
     expect(await screen.findByText(
       /test course has been imported to your library in a collection called test collection/i,
     ));
+    expect(await screen.findByText(/Total Blocks/i)).toBeInTheDocument();
+    expect(await screen.findByText('4')).toBeInTheDocument();
 
     const viewImportedContentBtn = screen.getByRole('button', {
       name: /view imported content/i,
@@ -107,13 +109,7 @@ describe('', () => {
   });
 
   it('should render Partial Succeeded state', async () => {
-    axiosMock.onGet(getModulestoreMigratedBlocksInfoUrl()).reply(200, [
-      {
-        sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@library_content+block@test_lib_content',
-        targetKey: null,
-        unsupportedReason: 'The "library_content" XBlock (ID: "test_lib_content") has children, so it not supported in content libraries. It has 2 children blocks.',
-      },
-    ]);
+    mockGetModulestoreMigratedBlocksInfo.applyMockPartial();
     (useGetContentHits as jest.Mock).mockReturnValue({
       isPending: false,
       data: {
@@ -146,8 +142,13 @@ describe('', () => {
     render(mockGetMigrationStatus.migrationIdPartial);
     expect(await screen.findByText(/partial import successful/i)).toBeInTheDocument();
 
-    expect(screen.getByText(
-      /85% of course test course has been imported successfully/i,
+    expect(await screen.findByText(/Total Blocks/i)).toBeInTheDocument();
+    expect(await screen.findByText('2/5')).toBeInTheDocument();
+    expect(await screen.findByText(/Components/i)).toBeInTheDocument();
+    expect(await screen.findByText('1/4')).toBeInTheDocument();
+
+    expect(await screen.findByText(
+      /40% of course test course has been imported successfully/i,
     )).toBeInTheDocument();
 
     expect(await screen.findByRole('cell', {
diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index 40c6af8f58..41f4ab14db 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -16,15 +16,25 @@ import {
 import Loading from '@src/generic/Loading';
 import { ToastContext } from '@src/generic/toast-context';
 import { Paragraph } from '@src/utils';
-
 import { useBulkModulestoreMigrate, useModulestoreMigrationStatus } from '@src/data/apiHooks';
 import { useGetContentHits } from '@src/search-manager';
+import { ContainerType, getBlockTypeBlockV1 } from '@src/generic/key-utils';
+
 import messages from './messages';
 import { SummaryCard } from './stepper/SummaryCard';
 import { HelpSidebar } from './HelpSidebar';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { useMigrationBlocksInfo } from '../data/apiHooks';
 
+export interface MigrationSummary {
+  totalBlocks: number;
+  sections: number;
+  subsections: number;
+  units: number;
+  components: number;
+  unsupported: number;
+}
+
 export const ImportDetailsPage = () => {
   const intl = useIntl();
   const navigate = useNavigate();
@@ -58,7 +68,76 @@ export const ImportDetailsPage = () => {
   // Get the first migration, because the courses are imported one by one
   const courseImportDetails = migrationStatusData?.parameters?.[0];
 
-  const isPending = isPendingCourseDetails || isPendingMigrationStatusData;
+  const {
+    data: migrationBlockInfo,
+    isPending: isPendingMigrationBlockInfo,
+  } = useMigrationBlocksInfo(
+    libraryId,
+    undefined,
+    undefined,
+    migrationTaskId,
+    migrationStatusData?.state !== 'Failed',
+  );
+
+  const isPending = isPendingCourseDetails || isPendingMigrationStatusData || isPendingMigrationBlockInfo;
+
+  // Build migration summary using the mibration blocks info
+  const {
+    migrationSummary,
+    unsupportedBlockIds,
+  } = useMemo(() => {
+    const counts: MigrationSummary = {
+      totalBlocks: 0,
+      sections: 0,
+      subsections: 0,
+      units: 0,
+      components: 0,
+      unsupported: 0,
+    };
+    const resultUnsupportedIds: string[] = [];
+
+    if (!migrationBlockInfo) {
+      return {
+        migrationSummary: counts,
+        unsupportedBlockIds: resultUnsupportedIds,
+      };
+    }
+
+    for (const block of migrationBlockInfo) {
+      if (!block.targetKey) {
+        // The migrations of this block is failed
+        counts.unsupported += 1;
+        resultUnsupportedIds.push(`"${block.sourceKey}"`);
+
+        if (block.unsupportedReason) {
+          // Verify if the unsupported block has children
+          const match = block.unsupportedReason.match(/It has (\d+) children/);
+          counts.unsupported += match ? Number(match[1]) : 0;
+        }
+      } else {
+        counts.totalBlocks += 1;
+        const blockType = getBlockTypeBlockV1(block.sourceKey);
+        switch (blockType) {
+          case ContainerType.Chapter:
+            counts.sections += 1;
+            break;
+          case ContainerType.Sequential:
+            counts.subsections += 1;
+            break;
+          case ContainerType.Vertical:
+            counts.units += 1;
+            break;
+          default:
+            counts.components += 1;
+        }
+      }
+    }
+
+    return {
+      migrationSummary: counts,
+      unsupportedBlockIds: resultUnsupportedIds,
+    };
+  }, [migrationBlockInfo]);
 
   // Calculate current migration status
   let migrationStatus = 'In Progress';
@@ -73,33 +152,25 @@ export const ImportDetailsPage = () => {
     // TODO: Update this code when using simple migration
     if (courseImportDetails?.isFailed) {
       migrationStatus = 'Failed';
-    } else if (courseImportDetails?.migrationSummary.unsupported !== 0) {
+    } else if (migrationSummary.unsupported !== 0) {
       migrationStatus = 'Partial Succeeded';
     } else {
       migrationStatus = 'Succeeded';
     }
   }
 
-  const {
-    data: migrationBlockInfo,
-    isPending: isPendingMigrationBlockInfo,
-  } = useMigrationBlocksInfo(
-    libraryId,
-    undefined,
-    true,
-    migrationTaskId,
-    migrationStatus === 'Partial Succeeded',
-  );
   // Fetch unsupported blocks usage_key information from meilisearch index.
   const { data: unssupportedBlocksData } = useGetContentHits(
     [
-      `usage_key IN [${migrationBlockInfo?.map((block) => `"${block.sourceKey}"`).join(',')}]`,
+      `usage_key IN [${unsupportedBlockIds.join(',')}]`,
     ],
-    (migrationBlockInfo?.length || 0) > 0,
+    (unsupportedBlockIds.length || 0) > 0,
     ['usage_key', 'block_type', 'display_name'],
-    migrationBlockInfo?.length,
+    unsupportedBlockIds.length,
     true,
   );
+
+  // Build the data for the reasons for failed imports
   const unsupportedTableData = useMemo(() => {
     if (!migrationBlockInfo || !unssupportedBlocksData) {
       return [];
@@ -117,6 +188,8 @@ export const ImportDetailsPage = () => {
     }));
   }, [migrationBlockInfo, unssupportedBlocksData]);
 
+  // In any state other than "in progress", it is no longer necessary
+  // to keep refreshing the task status.
   if (enableRefeshState && migrationStatus !== 'In Progress') {
     setEnableRefreshState(false);
   }
@@ -178,14 +251,13 @@ export const ImportDetailsPage = () => {
           </Alert>
           <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
           <SummaryCard
-            totalBlocks={
-              courseImportDetails.migrationSummary.totalBlocks - courseImportDetails.migrationSummary.unsupported
-            }
-            totalComponents={courseImportDetails.migrationSummary.components}
-            sections={courseImportDetails.migrationSummary.sections}
-            subsections={courseImportDetails.migrationSummary.subsections}
-            units={courseImportDetails.migrationSummary.units}
-            unsupportedBlocks={courseImportDetails.migrationSummary.unsupported}
+            totalBlocks={migrationSummary.totalBlocks}
+            totalComponents={migrationSummary.components}
+            sections={migrationSummary.sections}
+            subsections={migrationSummary.subsections}
+            units={migrationSummary.units}
+            unsupportedBlocks={migrationSummary.unsupported}
+            isPending={isPendingMigrationBlockInfo}
           />
           <p>
             <FormattedMessage
@@ -239,9 +311,6 @@ export const ImportDetailsPage = () => {
         </Stack>
       );
     } if (migrationStatus === 'Partial Succeeded') {
-      const importedSuccessfullyCount = courseImportDetails.migrationSummary.totalBlocks
-        - courseImportDetails.migrationSummary.unsupported;
-
       return (
         <Stack gap={3}>
           <Alert variant="warning" icon={WarningFilled}>
@@ -260,21 +329,20 @@ export const ImportDetailsPage = () => {
           </Alert>
           <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
           <SummaryCard
-            totalBlocks={
-              courseImportDetails.migrationSummary.totalBlocks - courseImportDetails.migrationSummary.unsupported
-            }
-            totalComponents={courseImportDetails.migrationSummary.components}
-            sections={courseImportDetails.migrationSummary.sections}
-            subsections={courseImportDetails.migrationSummary.subsections}
-            units={courseImportDetails.migrationSummary.units}
-            unsupportedBlocks={courseImportDetails.migrationSummary.unsupported}
+            totalBlocks={migrationSummary.totalBlocks}
+            totalComponents={migrationSummary.components}
+            sections={migrationSummary.sections}
+            subsections={migrationSummary.subsections}
+            units={migrationSummary.units}
+            unsupportedBlocks={migrationSummary.unsupported}
+            isPending={isPendingMigrationBlockInfo}
           />
           <div>
             <FormattedMessage
               {...messages.importPartialBody}
               values={{
                 percentage: Math.floor(
-                  (importedSuccessfullyCount * 100) / courseImportDetails.migrationSummary.totalBlocks,
+                  (migrationSummary.totalBlocks * 100) / (migrationSummary.totalBlocks + migrationSummary.unsupported),
                 ),
                 courseName: courseDetails?.title,
                 p: Paragraph,

From 6111ded54c9010b7978b2d23d7dd3e9c27eefcee Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Fri, 28 Nov 2025 18:12:57 -0500
Subject: [PATCH 12/15] test: Tests added for getBlockTypeBlockV1

---
 src/data/api.mocks.ts                         | 31 -------------------
 src/generic/key-utils.test.ts                 | 22 +++++++++++++
 .../import-course/ImportDetailsPage.test.tsx  |  2 +-
 3 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/src/data/api.mocks.ts b/src/data/api.mocks.ts
index fa63373de9..2f51de41c5 100644
--- a/src/data/api.mocks.ts
+++ b/src/data/api.mocks.ts
@@ -14,8 +14,6 @@ export async function mockGetMigrationStatus(migrationId: string): Promise<api.M
       return new Promise(() => {});
     case mockGetMigrationStatus.migrationIdInProgress:
       return mockGetMigrationStatus.migrationStatusInProgressData;
-    case mockGetMigrationStatus.migrationIdPartial:
-      return mockGetMigrationStatus.migrationStatusPartialData;
     default:
       /* istanbul ignore next */
       throw new Error(`mockGetMigrationStatus: unknown migration ID "${migrationId}"`);
@@ -180,33 +178,4 @@ mockGetMigrationStatus.migrationStatusInProgressData = {
     },
   ],
 } as api.MigrateTaskStatusData;
-mockGetMigrationStatus.migrationIdPartial = '7';
-mockGetMigrationStatus.migrationStatusPartialData = {
-  uuid: mockGetMigrationStatus.migrationIdPartial,
-  state: 'Succeeded',
-  stateText: 'Succeeded',
-  completedSteps: 9,
-  totalSteps: 9,
-  attempts: 1,
-  created: '',
-  modified: '',
-  artifacts: [],
-  parameters: [
-    {
-      id: 1,
-      source: 'legacy-lib-1',
-      target: 'lib',
-      compositionLevel: 'component',
-      repeatHandlingStrategy: 'update',
-      preserveUrlSlugs: false,
-      targetCollectionSlug: 'coll-1',
-      forwardSourceToTarget: true,
-      isFailed: false,
-      targetCollection: {
-        key: 'coll',
-        title: 'Test Collection',
-      },
-    },
-  ],
-} as api.MigrateTaskStatusData;
 mockGetMigrationStatus.applyMock = () => jest.spyOn(api, 'getModulestoreMigrationStatus').mockImplementation(mockGetMigrationStatus);
diff --git a/src/generic/key-utils.test.ts b/src/generic/key-utils.test.ts
index cd97c26688..cba9192c69 100644
--- a/src/generic/key-utils.test.ts
+++ b/src/generic/key-utils.test.ts
@@ -2,6 +2,7 @@ import {
   buildCollectionUsageKey,
   ContainerType,
   getBlockType,
+  getBlockTypeBlockV1,
   getLibraryId,
   isLibraryKey,
   isLibraryV1Key,
@@ -142,4 +143,25 @@ describe('component utils', () => {
       });
     }
   });
+
+  describe('getBlockTypeBlockV1', () => {
+    for (const [input, expected] of [
+      ['block-v1:org+type@html+block@1', 'html'],
+      ['block-v1:OpenCraftX+type@html+block@1571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'html'],
+      ['block-v1:Axim+type@problem+block@571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'problem'],
+      ['block-v1:org+type@unit+block@1', 'unit'],
+      ['block-v1:org+type@section+block@1', 'section'],
+      ['block-v1:org+type@subsection+block@1', 'subsection'],
+    ]) {
+      it(`returns '${expected}' for usage key '${input}'`, () => {
+        expect(getBlockTypeBlockV1(input)).toStrictEqual(expected);
+      });
+    }
+
+    for (const input of ['', undefined, null, 'not a key', 'block-v1:foo']) {
+      it(`throws an exception for usage key '${input}'`, () => {
+        expect(() => getBlockTypeBlockV1(input as any)).toThrow(`Invalid usageKey: ${input}`);
+      });
+    }
+  });
 });
diff --git a/src/library-authoring/import-course/ImportDetailsPage.test.tsx b/src/library-authoring/import-course/ImportDetailsPage.test.tsx
index 0ed75243df..89cdb4b3c2 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.test.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.test.tsx
@@ -139,7 +139,7 @@ describe('', () => {
       hits: libraryComponentsMock,
     });
 
-    render(mockGetMigrationStatus.migrationIdPartial);
+    render(mockGetMigrationStatus.migrationId);
     expect(await screen.findByText(/partial import successful/i)).toBeInTheDocument();
 
     expect(await screen.findByText(/Total Blocks/i)).toBeInTheDocument();

From e973b596041b46a4def9bcd01f20a98903e7574e Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 3 Dec 2025 15:38:12 +0530
Subject: [PATCH 13/15] refactor: replace navigation button with link in course
 import page

---
 .../import-course/ImportedCourseCard.tsx       | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/library-authoring/import-course/ImportedCourseCard.tsx b/src/library-authoring/import-course/ImportedCourseCard.tsx
index 719733425f..d2670c5a10 100644
--- a/src/library-authoring/import-course/ImportedCourseCard.tsx
+++ b/src/library-authoring/import-course/ImportedCourseCard.tsx
@@ -1,10 +1,9 @@
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button,
   Card,
   Icon,
-  IconButton,
 } from '@openedx/paragon';
 import {
   ArrowForwardIos,
@@ -55,7 +54,6 @@ const StateIcon = ({ state }: { state: CourseImport['state'] }) => (
 
 export const ImportedCourseCard = ({ courseImport }: ImportedCourseCardProps) => {
   const intl = useIntl();
-  const navigate = useNavigate();
   const { navigateTo } = useLibraryRoutes();
 
   return (
@@ -88,11 +86,15 @@ export const ImportedCourseCard = ({ courseImport }: ImportedCourseCardProps) =>
           </div>
         </div>
         <div className="d-flex align-items-center ml-auto">
-          <IconButton
-            src={ArrowForwardIos}
-            alt={intl.formatMessage(messages.courseImportNavigateAlt)}
-            onClick={() => navigate(`${courseImport.source.key}/${courseImport.taskUuid}`)}
-          />
+          <Link
+            // window.location.href is required due to browser mistaking course id and taskUuid
+            // combination as an external link to be opened with an external application.
+            to={`${window.location.href}/${courseImport.source.key}/${courseImport.taskUuid}`}
+            aria-label={intl.formatMessage(messages.courseImportNavigateAlt)}
+            className="text-primary-500"
+          >
+            <Icon src={ArrowForwardIos} />
+          </Link>
         </div>
       </Card.Section>
     </Card>

From 58acdb2a105fc7ed6ac0f1095e2a8e0ad5a1329f Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 3 Dec 2025 15:39:01 +0530
Subject: [PATCH 14/15] fix: refetch migration block info when the import is
 completed

After the import process is completed, it is required to refetch
migration block info else the page shows 0 components.
---
 src/library-authoring/import-course/ImportDetailsPage.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index 41f4ab14db..181adfface 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -71,6 +71,7 @@ export const ImportDetailsPage = () => {
   const {
     data: migrationBlockInfo,
     isPending: isPendingMigrationBlockInfo,
+    refetch: refetchMigrationBlockInfo,
   } = useMigrationBlocksInfo(
     libraryId,
     undefined,
@@ -81,7 +82,7 @@ export const ImportDetailsPage = () => {
 
   const isPending = isPendingCourseDetails || isPendingMigrationStatusData || isPendingMigrationBlockInfo;
 
-  // Build migration summary using the mibration blocks info
+  // Build migration summary using the migration blocks info
   const {
     migrationSummary,
     unsupportedBlockIds,
@@ -145,6 +146,8 @@ export const ImportDetailsPage = () => {
     // The entire task has failed
     migrationStatus = 'Failed';
   } else if (migrationStatusData?.state === 'Succeeded') {
+    // refetch migrationBlockInfo data once the import is complete
+    refetchMigrationBlockInfo();
     // Currently, bulk migrate is being used to migrate courses because
     // it has the ability to create collections.
     // In bulk migration, the task may succeed, but each migration may fail.

From 0804a8439057fcd94b83acc7b8cedf45d2eeed07 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Thu, 4 Dec 2025 17:04:29 -0500
Subject: [PATCH 15/15] style: Nits in the code

---
 src/generic/key-utils.test.ts                 |  30 +-
 src/generic/key-utils.ts                      |  34 +-
 src/library-authoring/data/api.mocks.ts       |   2 +-
 .../import-course/ImportDetailsPage.test.tsx  |   2 +-
 .../import-course/ImportDetailsPage.tsx       | 365 +++++++++---------
 5 files changed, 208 insertions(+), 225 deletions(-)

diff --git a/src/generic/key-utils.test.ts b/src/generic/key-utils.test.ts
index cba9192c69..aa14604faf 100644
--- a/src/generic/key-utils.test.ts
+++ b/src/generic/key-utils.test.ts
@@ -2,7 +2,6 @@ import {
   buildCollectionUsageKey,
   ContainerType,
   getBlockType,
-  getBlockTypeBlockV1,
   getLibraryId,
   isLibraryKey,
   isLibraryV1Key,
@@ -19,13 +18,19 @@ describe('component utils', () => {
       ['lct:org:lib:unit:my-unit-9284e2', 'unit'],
       ['lct:org:lib:section:my-section-9284e2', 'section'],
       ['lct:org:lib:subsection:my-section-9284e2', 'subsection'],
+      ['block-v1:org+type@html+block@1', 'html'],
+      ['block-v1:OpenCraftX+type@html+block@1571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'html'],
+      ['block-v1:Axim+type@problem+block@571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'problem'],
+      ['block-v1:org+type@unit+block@1', 'unit'],
+      ['block-v1:org+type@section+block@1', 'section'],
+      ['block-v1:org+type@subsection+block@1', 'subsection'],
     ]) {
       it(`returns '${expected}' for usage key '${input}'`, () => {
         expect(getBlockType(input)).toStrictEqual(expected);
       });
     }
 
-    for (const input of ['', undefined, null, 'not a key', 'lb:foo']) {
+    for (const input of ['', undefined, null, 'not a key', 'lb:foo', 'block-v1:foo']) {
       it(`throws an exception for usage key '${input}'`, () => {
         expect(() => getBlockType(input as any)).toThrow(`Invalid usageKey: ${input}`);
       });
@@ -143,25 +148,4 @@ describe('component utils', () => {
       });
     }
   });
-
-  describe('getBlockTypeBlockV1', () => {
-    for (const [input, expected] of [
-      ['block-v1:org+type@html+block@1', 'html'],
-      ['block-v1:OpenCraftX+type@html+block@1571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'html'],
-      ['block-v1:Axim+type@problem+block@571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'problem'],
-      ['block-v1:org+type@unit+block@1', 'unit'],
-      ['block-v1:org+type@section+block@1', 'section'],
-      ['block-v1:org+type@subsection+block@1', 'subsection'],
-    ]) {
-      it(`returns '${expected}' for usage key '${input}'`, () => {
-        expect(getBlockTypeBlockV1(input)).toStrictEqual(expected);
-      });
-    }
-
-    for (const input of ['', undefined, null, 'not a key', 'block-v1:foo']) {
-      it(`throws an exception for usage key '${input}'`, () => {
-        expect(() => getBlockTypeBlockV1(input as any)).toThrow(`Invalid usageKey: ${input}`);
-      });
-    }
-  });
 });
diff --git a/src/generic/key-utils.ts b/src/generic/key-utils.ts
index 5842dc170b..f943e7c82b 100644
--- a/src/generic/key-utils.ts
+++ b/src/generic/key-utils.ts
@@ -1,13 +1,20 @@
 /**
- * Given a usage key like `lb:org:lib:html:id`, get the type (e.g. `html`)
- * @param usageKey e.g. `lb:org:lib:html:id`
+ * Given a usage key like `lb:org:lib:html:id` or `block-v1:org+type@html+block@1`, get the type (e.g. `html`)
+ * @param usageKey e.g. `lb:org:lib:html:id`, `block-v1:org+type@html+block@1`
  * @returns The block type as a string
  */
 export function getBlockType(usageKey: string): string {
-  if (usageKey && (usageKey.startsWith('lb:') || usageKey.startsWith('lct:'))) {
-    const blockType = usageKey.split(':')[3];
-    if (blockType) {
-      return blockType;
+  if (usageKey) {
+    if (usageKey.startsWith('lb:') || usageKey.startsWith('lct:')) {
+      const blockType = usageKey.split(':')[3];
+      if (blockType) {
+        return blockType;
+      }
+    } else if (usageKey.startsWith('block-v1:')) {
+      const blockType = usageKey.match(/type@([^+]+)/);
+      if (blockType) {
+        return blockType[1];
+      }
     }
   }
   throw new Error(`Invalid usageKey: ${usageKey}`);
@@ -126,18 +133,3 @@ export function normalizeContainerType(containerType: ContainerType | string) {
       return containerType;
   }
 }
-
-/**
- * Given a usage key of V1 block like `block-v1:org+type@html+block@1`, get the type (e.g. `html`)
- * @param usageKey e.g. `block-v1:org+type@html+block@1`
- * @returns The block type as a string
- */
-export function getBlockTypeBlockV1(usageKey: string): string {
-  if (usageKey && usageKey.startsWith('block-v1:')) {
-    const blockType = usageKey.match(/type@([^+]+)/);
-    if (blockType) {
-      return blockType[1];
-    }
-  }
-  throw new Error(`Invalid usageKey: ${usageKey}`);
-}
diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts
index 6337462cbe..9dc3c929e4 100644
--- a/src/library-authoring/data/api.mocks.ts
+++ b/src/library-authoring/data/api.mocks.ts
@@ -1137,7 +1137,7 @@ export async function mockGetCourseImports(libraryId: string): ReturnType<typeof
 mockGetCourseImports.libraryId = mockContentLibrary.libraryId;
 mockGetCourseImports.emptyLibraryId = mockContentLibrary.libraryId2;
 mockGetCourseImports.succeedImport = {
-  taskUuid: '1',
+  taskUuid: '2d35e36b-1234-1234-1234-123456789000',
   source: {
     key: 'course-v1:edX+DemoX+2025_T1',
     displayName: 'DemoX 2025 T1',
diff --git a/src/library-authoring/import-course/ImportDetailsPage.test.tsx b/src/library-authoring/import-course/ImportDetailsPage.test.tsx
index 89cdb4b3c2..2795cf09b6 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.test.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.test.tsx
@@ -56,7 +56,7 @@ const render = (migrationTaskId: string) => (
   )
 );
 
-describe('', () => {
+describe('<ImportDetailsPage />', () => {
   beforeEach(() => {
     const newMocks = initializeMocks();
     axiosMock = newMocks.axiosMock;
diff --git a/src/library-authoring/import-course/ImportDetailsPage.tsx b/src/library-authoring/import-course/ImportDetailsPage.tsx
index 181adfface..460371d5dd 100644
--- a/src/library-authoring/import-course/ImportDetailsPage.tsx
+++ b/src/library-authoring/import-course/ImportDetailsPage.tsx
@@ -18,7 +18,7 @@ import { ToastContext } from '@src/generic/toast-context';
 import { Paragraph } from '@src/utils';
 import { useBulkModulestoreMigrate, useModulestoreMigrationStatus } from '@src/data/apiHooks';
 import { useGetContentHits } from '@src/search-manager';
-import { ContainerType, getBlockTypeBlockV1 } from '@src/generic/key-utils';
+import { ContainerType, getBlockType } from '@src/generic/key-utils';
 
 import messages from './messages';
 import { SummaryCard } from './stepper/SummaryCard';
@@ -26,20 +26,11 @@ import { HelpSidebar } from './HelpSidebar';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { useMigrationBlocksInfo } from '../data/apiHooks';
 
-export interface MigrationSummary {
-  totalBlocks: number;
-  sections: number;
-  subsections: number;
-  units: number;
-  components: number;
-  unsupported: number;
-}
-
-export const ImportDetailsPage = () => {
+const ImportDetailsContent = () => {
   const intl = useIntl();
   const navigate = useNavigate();
-  const { libraryId, libraryData, readOnly } = useLibraryContext();
   const [enableRefeshState, setEnableRefreshState] = useState(true);
+  const { libraryId } = useLibraryContext();
   const { courseId, migrationTaskId } = useParams();
   const { showToast } = useContext(ToastContext);
   const [disableReimport, setDisableReimport] = useState(false);
@@ -108,7 +99,7 @@ export const ImportDetailsPage = () => {
       if (!block.targetKey) {
         // The migrations of this block is failed
         counts.unsupported += 1;
-        resultUnsupportedIds.push(`"${block.sourceKey}"`);
+        resultUnsupportedIds.push(block.sourceKey);
 
         if (block.unsupportedReason) {
           // Verify if the unsupported block has children
@@ -117,7 +108,7 @@ export const ImportDetailsPage = () => {
         }
       } else {
         counts.totalBlocks += 1;
-        const blockType = getBlockTypeBlockV1(block.sourceKey);
+        const blockType = getBlockType(block.sourceKey);
         switch (blockType) {
           case ContainerType.Chapter:
             counts.sections += 1;
@@ -163,9 +154,9 @@ export const ImportDetailsPage = () => {
   }
 
   // Fetch unsupported blocks usage_key information from meilisearch index.
-  const { data: unssupportedBlocksData } = useGetContentHits(
+  const { data: unsupportedBlocksData } = useGetContentHits(
     [
-      `usage_key IN [${unsupportedBlockIds.join(',')}]`,
+      `usage_key IN [${unsupportedBlockIds.map(k => `"${k}"`).join(',')}]`,
     ],
     (unsupportedBlockIds.length || 0) > 0,
     ['usage_key', 'block_type', 'display_name'],
@@ -175,7 +166,7 @@ export const ImportDetailsPage = () => {
 
   // Build the data for the reasons for failed imports
   const unsupportedTableData = useMemo(() => {
-    if (!migrationBlockInfo || !unssupportedBlocksData) {
+    if (!migrationBlockInfo || !unsupportedBlocksData) {
       return [];
     }
 
@@ -184,12 +175,12 @@ export const ImportDetailsPage = () => {
       [block.sourceKey]: block.unsupportedReason || '',
     }), {} as Record<string, string>);
 
-    return unssupportedBlocksData.hits.map(block => ({
+    return unsupportedBlocksData.hits.map(block => ({
       blockName: block.display_name,
       blockType: block.block_type,
       reason: reasons[block.usage_key],
     }));
-  }, [migrationBlockInfo, unssupportedBlocksData]);
+  }, [migrationBlockInfo, unsupportedBlocksData]);
 
   // In any state other than "in progress", it is no longer necessary
   // to keep refreshing the task status.
@@ -230,196 +221,212 @@ export const ImportDetailsPage = () => {
     }
   };
 
-  const renderBody = () => {
-    if (isPending || !courseImportDetails) {
-      return <Loading />;
-    }
+  if (isPending || !courseImportDetails) {
+    return <Loading />;
+  }
 
-    if (migrationStatus === 'Succeeded') {
-      return (
-        <Stack gap={3}>
-          <Alert variant="success" icon={CheckCircle}>
-            <Alert.Heading>
-              <FormattedMessage {...messages.importSuccessfulAlertTitle} />
-            </Alert.Heading>
-            <p>
-              <FormattedMessage
-                {...messages.importSuccessfulAlertBody}
-                values={{
-                  courseName: courseDetails?.title,
-                  collectionName: courseImportDetails.targetCollection?.title,
-                }}
-              />
-            </p>
-          </Alert>
-          <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
-          <SummaryCard
-            totalBlocks={migrationSummary.totalBlocks}
-            totalComponents={migrationSummary.components}
-            sections={migrationSummary.sections}
-            subsections={migrationSummary.subsections}
-            units={migrationSummary.units}
-            unsupportedBlocks={migrationSummary.unsupported}
-            isPending={isPendingMigrationBlockInfo}
-          />
+  if (migrationStatus === 'Succeeded') {
+    return (
+      <Stack gap={3}>
+        <Alert variant="success" icon={CheckCircle}>
+          <Alert.Heading>
+            <FormattedMessage {...messages.importSuccessfulAlertTitle} />
+          </Alert.Heading>
           <p>
             <FormattedMessage
-              {...messages.importSuccessfulBody}
+              {...messages.importSuccessfulAlertBody}
               values={{
                 courseName: courseDetails?.title,
+                collectionName: courseImportDetails.targetCollection?.title,
               }}
             />
           </p>
-          <div className="w-100 d-flex justify-content-end">
-            <Button
-              variant="outline-primary"
-              iconAfter={ArrowForward}
-              onClick={() => navigate(collectionLink())}
-            >
-              <FormattedMessage {...messages.viewImportedContentButton} />
-            </Button>
-          </div>
-        </Stack>
-      );
-    } if (migrationStatus === 'Failed') {
-      return (
-        <Stack gap={3}>
-          <Alert variant="danger" icon={Info}>
-            <Alert.Heading>
-              <FormattedMessage {...messages.importFailedAlertTitle} />
-            </Alert.Heading>
-            <p>
-              <FormattedMessage
-                {...messages.importFailedAlertBody}
-                values={{
-                  courseName: courseDetails?.title,
-                }}
-              />
-            </p>
-          </Alert>
-          <h4><FormattedMessage {...messages.importFailedDetailsSectionTitle} /></h4>
-          <p>
-            <FormattedMessage {...messages.importFailedDetailsSectionBody} />
-          </p>
-          <div className="w-100 d-flex justify-content-end">
-            <Button
-              variant="outline-primary"
-              iconAfter={ArrowForward}
-              onClick={handleImportCourse}
-              disabled={disableReimport}
-            >
-              <FormattedMessage {...messages.importFailedRetryImportButton} />
-            </Button>
-          </div>
-        </Stack>
-      );
-    } if (migrationStatus === 'Partial Succeeded') {
-      return (
-        <Stack gap={3}>
-          <Alert variant="warning" icon={WarningFilled}>
-            <Alert.Heading>
-              <FormattedMessage {...messages.importPartialAlertTitle} />
-            </Alert.Heading>
-            <p>
-              <FormattedMessage
-                {...messages.importPartialAlertBody}
-                values={{
-                  courseName: courseDetails?.title,
-                  collectionName: courseImportDetails.targetCollection?.title,
-                }}
-              />
-            </p>
-          </Alert>
-          <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
-          <SummaryCard
-            totalBlocks={migrationSummary.totalBlocks}
-            totalComponents={migrationSummary.components}
-            sections={migrationSummary.sections}
-            subsections={migrationSummary.subsections}
-            units={migrationSummary.units}
-            unsupportedBlocks={migrationSummary.unsupported}
-            isPending={isPendingMigrationBlockInfo}
+        </Alert>
+        <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
+        <SummaryCard
+          totalBlocks={migrationSummary.totalBlocks}
+          totalComponents={migrationSummary.components}
+          sections={migrationSummary.sections}
+          subsections={migrationSummary.subsections}
+          units={migrationSummary.units}
+          unsupportedBlocks={migrationSummary.unsupported}
+          isPending={isPendingMigrationBlockInfo}
+        />
+        <p>
+          <FormattedMessage
+            {...messages.importSuccessfulBody}
+            values={{
+              courseName: courseDetails?.title,
+            }}
           />
-          <div>
+        </p>
+        <div className="w-100 d-flex justify-content-end">
+          <Button
+            variant="outline-primary"
+            iconAfter={ArrowForward}
+            onClick={() => navigate(collectionLink())}
+          >
+            <FormattedMessage {...messages.viewImportedContentButton} />
+          </Button>
+        </div>
+      </Stack>
+    );
+  } if (migrationStatus === 'Failed') {
+    return (
+      <Stack gap={3}>
+        <Alert variant="danger" icon={Info}>
+          <Alert.Heading>
+            <FormattedMessage {...messages.importFailedAlertTitle} />
+          </Alert.Heading>
+          <p>
             <FormattedMessage
-              {...messages.importPartialBody}
+              {...messages.importFailedAlertBody}
               values={{
-                percentage: Math.floor(
-                  (migrationSummary.totalBlocks * 100) / (migrationSummary.totalBlocks + migrationSummary.unsupported),
-                ),
                 courseName: courseDetails?.title,
-                p: Paragraph,
               }}
             />
-          </div>
-          {!isPendingMigrationBlockInfo && unsupportedTableData && (
-            <DataTable
-              isPaginated
-              initialState={{
-                pageSize: 10,
-              }}
-              itemCount={unsupportedTableData.length}
-              columns={[
-                {
-                  Header: intl.formatMessage(messages.importPartialReasonTableBlockName),
-                  accessor: 'blockName',
-
-                },
-                {
-                  Header: intl.formatMessage(messages.importPartialReasonTableBlockType),
-                  accessor: 'blockType',
-                },
-                {
-                  Header: intl.formatMessage(messages.importPartialReasonTableReason),
-                  accessor: 'reason',
-                },
-              ]}
-              data={unsupportedTableData}
-            >
-              <DataTable.Table />
-              <DataTable.TableFooter />
-            </DataTable>
-          )}
-
-          <div className="w-100 d-flex justify-content-end">
-            <Button
-              variant="outline-primary"
-              iconAfter={ArrowForward}
-              onClick={() => navigate(collectionLink())}
-            >
-              <FormattedMessage {...messages.viewImportedContentButton} />
-            </Button>
-          </div>
-        </Stack>
-      );
-    }
-
+          </p>
+        </Alert>
+        <h4><FormattedMessage {...messages.importFailedDetailsSectionTitle} /></h4>
+        <p>
+          <FormattedMessage {...messages.importFailedDetailsSectionBody} />
+        </p>
+        <div className="w-100 d-flex justify-content-end">
+          <Button
+            variant="outline-primary"
+            iconAfter={ArrowForward}
+            onClick={handleImportCourse}
+            disabled={disableReimport}
+          >
+            <FormattedMessage {...messages.importFailedRetryImportButton} />
+          </Button>
+        </div>
+      </Stack>
+    );
+  } if (migrationStatus === 'Partial Succeeded') {
     return (
-      // In Progress
       <Stack gap={3}>
-        <h4><FormattedMessage {...messages.importInProgressTitle} /></h4>
-        <p>
+        <Alert variant="warning" icon={WarningFilled}>
+          <Alert.Heading>
+            <FormattedMessage {...messages.importPartialAlertTitle} />
+          </Alert.Heading>
+          <p>
+            <FormattedMessage
+              {...messages.importPartialAlertBody}
+              values={{
+                courseName: courseDetails?.title,
+                collectionName: courseImportDetails.targetCollection?.title,
+              }}
+            />
+          </p>
+        </Alert>
+        <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
+        <SummaryCard
+          totalBlocks={migrationSummary.totalBlocks}
+          totalComponents={migrationSummary.components}
+          sections={migrationSummary.sections}
+          subsections={migrationSummary.subsections}
+          units={migrationSummary.units}
+          unsupportedBlocks={migrationSummary.unsupported}
+          isPending={isPendingMigrationBlockInfo}
+        />
+        <div>
           <FormattedMessage
-            {...messages.importInProgressBody}
+            {...messages.importPartialBody}
             values={{
+              percentage: Math.floor(
+                (migrationSummary.totalBlocks * 100) / (migrationSummary.totalBlocks + migrationSummary.unsupported),
+              ),
               courseName: courseDetails?.title,
+              p: Paragraph,
             }}
           />
-        </p>
-        <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
-        <SummaryCard isPending />
+        </div>
+        {!isPendingMigrationBlockInfo && unsupportedTableData && (
+          <DataTable
+            isPaginated
+            initialState={{
+              pageSize: 10,
+            }}
+            itemCount={unsupportedTableData.length}
+            columns={[
+              {
+                Header: intl.formatMessage(messages.importPartialReasonTableBlockName),
+                accessor: 'blockName',
+
+              },
+              {
+                Header: intl.formatMessage(messages.importPartialReasonTableBlockType),
+                accessor: 'blockType',
+              },
+              {
+                Header: intl.formatMessage(messages.importPartialReasonTableReason),
+                accessor: 'reason',
+              },
+            ]}
+            data={unsupportedTableData}
+          >
+            <DataTable.Table />
+            <DataTable.TableFooter />
+          </DataTable>
+        )}
+
         <div className="w-100 d-flex justify-content-end">
           <Button
             variant="outline-primary"
             iconAfter={ArrowForward}
-            disabled
+            onClick={() => navigate(collectionLink())}
           >
             <FormattedMessage {...messages.viewImportedContentButton} />
           </Button>
         </div>
       </Stack>
     );
-  };
+  }
+
+  return (
+    // In Progress
+    <Stack gap={3}>
+      <h4><FormattedMessage {...messages.importInProgressTitle} /></h4>
+      <p>
+        <FormattedMessage
+          {...messages.importInProgressBody}
+          values={{
+            courseName: courseDetails?.title,
+          }}
+        />
+      </p>
+      <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
+      <SummaryCard isPending />
+      <div className="w-100 d-flex justify-content-end">
+        <Button
+          variant="outline-primary"
+          iconAfter={ArrowForward}
+          disabled
+        >
+          <FormattedMessage {...messages.viewImportedContentButton} />
+        </Button>
+      </div>
+    </Stack>
+  );
+};
+
+export interface MigrationSummary {
+  totalBlocks: number;
+  sections: number;
+  subsections: number;
+  units: number;
+  components: number;
+  unsupported: number;
+}
+
+export const ImportDetailsPage = () => {
+  const intl = useIntl();
+  const { libraryId, libraryData, readOnly } = useLibraryContext();
+  const { courseId } = useParams();
+  const {
+    data: courseDetails,
+  } = useCourseDetails(courseId);
 
   return (
     <div className="d-flex">
@@ -448,7 +455,7 @@ export const ImportDetailsPage = () => {
           <Layout xs={[{ span: 9 }, { span: 3 }]}>
             <Layout.Element>
               <div className="mt-4 px-4">
-                {renderBody()}
+                <ImportDetailsContent />
               </div>
             </Layout.Element>
             <Layout.Element>