feat: Import Course Details Page [FC-0112] (#2664)

Implements all the states for the Import Course Details

Author: ChrisChV

src/data/api.mocks.ts

@@ -10,6 +10,10 @@ 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;
     default:
       /* istanbul ignore next */
       throw new Error(`mockGetMigrationStatus: unknown migration ID "${migrationId}"`);
@@ -29,6 +33,7 @@ mockGetMigrationStatus.migrationStatusData = {
   artifacts: [],
   parameters: [
     {
+      id: 1,
       source: 'legacy-lib-1',
       target: 'lib',
       compositionLevel: 'component',
@@ -37,6 +42,10 @@ mockGetMigrationStatus.migrationStatusData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: false,
+      targetCollection: {
+        key: 'coll',
+        title: 'Test Collection',
+      },
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -53,6 +62,7 @@ mockGetMigrationStatus.migrationStatusFailedData = {
   artifacts: [],
   parameters: [
     {
+      id: 1,
       source: 'legacy-lib-1',
       target: 'lib',
       compositionLevel: 'component',
@@ -61,6 +71,7 @@ mockGetMigrationStatus.migrationStatusFailedData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: true,
+      targetCollection: null,
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -77,6 +88,7 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
   artifacts: [],
   parameters: [
     {
+      id: 1,
       source: 'legacy-lib-1',
       target: 'lib',
       compositionLevel: 'component',
@@ -85,8 +97,10 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: true,
+      targetCollection: null,
     },
     {
+      id: 2,
       source: 'legacy-lib-2',
       target: 'lib',
       compositionLevel: 'component',
@@ -95,6 +109,7 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: true,
+      targetCollection: null,
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -111,6 +126,7 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
   artifacts: [],
   parameters: [
     {
+      id: 1,
       source: 'legacy-lib-1',
       target: 'lib',
       compositionLevel: 'component',
@@ -119,8 +135,10 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: true,
+      targetCollection: null,
     },
     {
+      id: 2,
       source: 'legacy-lib-2',
       target: 'lib',
       compositionLevel: 'component',
@@ -129,6 +147,34 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
       targetCollectionSlug: 'coll-1',
       forwardSourceToTarget: true,
       isFailed: false,
+      targetCollection: null,
+    },
+  ],
+} 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,
     },
   ],
 } as api.MigrateTaskStatusData;

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 {

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,
   })
 );

src/generic/key-utils.test.ts

@@ -18,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}`);
       });

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}`);

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.

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>
 );

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()`
  *
@@ -1091,6 +1137,7 @@ export async function mockGetCourseImports(libraryId: string): ReturnType<typeof
 mockGetCourseImports.libraryId = mockContentLibrary.libraryId;
 mockGetCourseImports.emptyLibraryId = mockContentLibrary.libraryId2;
 mockGetCourseImports.succeedImport = {
+  taskUuid: '2d35e36b-1234-1234-1234-123456789000',
   source: {
     key: 'course-v1:edX+DemoX+2025_T1',
     displayName: 'DemoX 2025 T1',
@@ -1100,6 +1147,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 +1160,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 +1170,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',

src/library-authoring/data/api.ts

@@ -798,6 +798,7 @@ export async function publishContainer(containerId: string) {
 }
 
 export interface CourseImport {
+  taskUuid: string;
   source: {
     key: string;
     displayName: string;
@@ -852,6 +853,7 @@ export async function getModulestoreMigrationBlocksInfo(
   libraryId: string,
   collectionId?: string,
   isFailed?: boolean,
+  taskUuid?: string,
 ): Promise<BlockMigrationInfo[]> {
   const client = getAuthenticatedHttpClient();
 
@@ -860,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));
   }

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,
   })
 );