refactor: Use useMigrationBlocksInfo to get reasons in partial import

Author: ChrisChV

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;

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 {

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

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

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,22 +107,58 @@ 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();
 
     expect(screen.getByText(
       /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,

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"