feat: import analysis step (#2657)

Shows course analysis information in review import details step in course import stepper page. Also handles alerts based on the import status, like, reimport or unsupported number of blocks.

Author: navinkarkera

.env.development

@@ -48,7 +48,7 @@ INVITE_STUDENTS_EMAIL_TO="[email protected]"
 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"
 # Fallback in local style files
 PARAGON_THEME_URLS={}
 COURSE_TEAM_SUPPORT_EMAIL=''

src/course-outline/data/apiHooks.ts

@@ -29,14 +29,13 @@ export const useCreateCourseBlock = (
 export const useCourseItemData = (itemId?: string, enabled: boolean = true) => (
   useQuery({
     queryKey: courseOutlineQueryKeys.courseItemId(itemId),
-    queryFn: () => getCourseItem(itemId!),
-    enabled: enabled && itemId !== undefined,
+    queryFn: enabled && itemId !== undefined ? () => getCourseItem(itemId!) : skipToken,
   })
 );
 
-export const useCourseDetails = (courseId?: string) => (
+export const useCourseDetails = (courseId?: string, enabled: boolean = true) => (
   useQuery({
     queryKey: courseOutlineQueryKeys.courseDetails(courseId),
-    queryFn: courseId ? () => getCourseDetails(courseId) : skipToken,
+    queryFn: enabled && courseId ? () => getCourseDetails(courseId) : skipToken,
   })
 );

src/legacy-libraries-migration/data/api.mocks.ts renamed to src/data/api.mocks.ts

@@ -132,4 +132,4 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
     },
   ],
 } as api.MigrateTaskStatusData;
-mockGetMigrationStatus.applyMock = () => jest.spyOn(api, 'getMigrationStatus').mockImplementation(mockGetMigrationStatus);
+mockGetMigrationStatus.applyMock = () => jest.spyOn(api, 'getModulestoreMigrationStatus').mockImplementation(mockGetMigrationStatus);

src/legacy-libraries-migration/data/api.test.ts renamed to src/data/api.test.ts

@@ -1,4 +1,4 @@
-import { initializeMocks } from '../../testUtils';
+import { initializeMocks } from '../testUtils';
 import * as api from './api';
 
 let axiosMock;
@@ -8,22 +8,22 @@ describe('legacy libraries migration API', () => {
     ({ axiosMock } = initializeMocks());
   });
 
-  describe('getMigrationStatus', () => {
+  describe('getModulestoreMigrationStatus', () => {
     it('should get migration status', async () => {
       const migrationId = '1';
-      const url = api.getMigrationStatusUrl(migrationId);
+      const url = api.getModulestoreMigrationStatusUrl(migrationId);
       axiosMock.onGet(url).reply(200);
-      await api.getMigrationStatus(migrationId);
+      await api.getModulestoreMigrationStatus(migrationId);
 
       expect(axiosMock.history.get[0].url).toEqual(url);
     });
   });
 
   describe('bulkMigrateLegacyLibraries', () => {
     it('should call bulk migrate legacy libraries', async () => {
-      const url = api.bulkMigrateLegacyLibrariesUrl();
+      const url = api.bulkModulestoreMigrateUrl();
       axiosMock.onPost(url).reply(200);
-      await api.bulkMigrateLegacyLibraries({
+      await api.bulkModulestoreMigrate({
         sources: [],
         target: '1',
       });

src/data/api.ts

@@ -1,8 +1,18 @@
-import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { camelCaseObject, getConfig, snakeCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 const getStudioBaseUrl = () => getConfig().STUDIO_BASE_URL as string;
 
+/**
+ * Get the URL to check the migration task status
+ */
+export const getModulestoreMigrationStatusUrl = (migrationId: string) => `${getStudioBaseUrl()}/api/modulestore_migrator/v1/migrations/${migrationId}/`;
+
+/**
+ * Get the URL for bulk migrate content to libraries
+ */
+export const bulkModulestoreMigrateUrl = () => `${getStudioBaseUrl()}/api/modulestore_migrator/v1/bulk_migration/`;
+
 export const getApiWaffleFlagsUrl = (courseId?: string): string => {
   const baseUrl = getStudioBaseUrl();
   const apiPath = '/api/contentstore/v1/course_waffle_flags';
@@ -72,3 +82,60 @@ export async function getWaffleFlags(courseId?: string): Promise<WaffleFlagsStat
     .get(getApiWaffleFlagsUrl(courseId));
   return normalizeCourseDetail(data);
 }
+
+export interface MigrateArtifacts {
+  source: string;
+  target: string;
+  compositionLevel: string;
+  repeatHandlingStrategy: 'update' | 'skip' | 'fork';
+  preserveUrlSlugs: boolean;
+  targetCollectionSlug: string;
+  forwardSourceToTarget: boolean;
+  isFailed: boolean;
+}
+
+export interface MigrateTaskStatusData {
+  state: string;
+  stateText: string;
+  completedSteps: number;
+  totalSteps: number;
+  attempts: number;
+  created: string;
+  modified: string;
+  artifacts: string[];
+  uuid: string;
+  parameters: MigrateArtifacts[];
+}
+
+export interface BulkMigrateRequestData {
+  sources: string[];
+  target: string;
+  targetCollectionSlugList?: string[];
+  createCollections?: boolean;
+  compositionLevel?: string;
+  repeatHandlingStrategy?: string;
+  preserveUrlSlugs?: boolean;
+  forwardSourceToTarget?: boolean;
+}
+
+/**
+ * Get migration task status
+ */
+export async function getModulestoreMigrationStatus(
+  migrationId: string,
+): Promise<MigrateTaskStatusData> {
+  const client = getAuthenticatedHttpClient();
+  const { data } = await client.get(getModulestoreMigrationStatusUrl(migrationId));
+  return camelCaseObject(data);
+}
+
+/**
+ * Bulk migrate content to libraries
+ */
+export async function bulkModulestoreMigrate(
+  requestData: BulkMigrateRequestData,
+): Promise<MigrateTaskStatusData> {
+  const client = getAuthenticatedHttpClient();
+  const { data } = await client.post(bulkModulestoreMigrateUrl(), snakeCaseObject(requestData));
+  return camelCaseObject(data);
+}

src/data/apiHooks.ts

@@ -1,5 +1,22 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { getWaffleFlags, waffleFlagDefaults } from './api';
+import {
+  skipToken, useMutation, useQuery, useQueryClient,
+} from '@tanstack/react-query';
+import { libraryAuthoringQueryKeys } from '@src/library-authoring/data/apiHooks';
+import {
+  getWaffleFlags,
+  waffleFlagDefaults,
+  bulkModulestoreMigrate,
+  getModulestoreMigrationStatus,
+  BulkMigrateRequestData,
+} from './api';
+
+export const migrationQueryKeys = {
+  all: ['contentLibrary'],
+  /**
+   * Base key for data specific to a migration task
+   */
+  migrationTask: (migrationId?: string | null) => [...migrationQueryKeys.all, migrationId],
+};
 
 /**
  * Get the waffle flags (which enable/disable specific features). They may
@@ -30,3 +47,28 @@ export const useWaffleFlags = (courseId?: string) => {
     isError,
   };
 };
+
+/**
+ * Use this mutation to migrate multiple sources to a library
+ */
+export const useBulkModulestoreMigrate = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (requestData: BulkMigrateRequestData) => bulkModulestoreMigrate(requestData),
+    onSettled: (_data, _err, variables) => {
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.courseImports(variables.target) });
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.allMigrationInfo() });
+    },
+  });
+};
+
+/**
+ * Get the migration status
+ */
+export const useModulestoreMigrationStatus = (migrationId: string | null) => (
+  useQuery({
+    queryKey: migrationQueryKeys.migrationTask(migrationId),
+    queryFn: migrationId ? () => getModulestoreMigrationStatus(migrationId!) : skipToken,
+    refetchInterval: 1000, // Refresh every second
+  })
+);

src/legacy-libraries-migration/LegacyLibMigrationPage.test.tsx

@@ -14,8 +14,8 @@ import { mockGetStudioHomeLibraries } from '@src/studio-home/data/api.mocks';
 import { getContentLibraryV2CreateApiUrl } from '@src/library-authoring/create-library/data/api';
 import { getStudioHomeApiUrl } from '@src/studio-home/data/api';
 
+import { bulkModulestoreMigrateUrl } from '@src/data/api';
 import { LegacyLibMigrationPage } from './LegacyLibMigrationPage';
-import { bulkMigrateLegacyLibrariesUrl } from './data/api';
 
 const path = '/libraries-v1/migrate/*';
 let axiosMock: MockAdapter;
@@ -320,7 +320,7 @@ describe('<LegacyLibMigrationPage />', () => {
 
   it('should confirm migration', async () => {
     const user = userEvent.setup();
-    axiosMock.onPost(bulkMigrateLegacyLibrariesUrl()).reply(200);
+    axiosMock.onPost(bulkModulestoreMigrateUrl()).reply(200);
     renderPage();
     expect(await screen.findByText('Migrate Legacy Libraries')).toBeInTheDocument();
     expect(await screen.findByText('MBA')).toBeInTheDocument();
@@ -377,7 +377,7 @@ describe('<LegacyLibMigrationPage />', () => {
 
   it('should show error when confirm migration', async () => {
     const user = userEvent.setup();
-    axiosMock.onPost(bulkMigrateLegacyLibrariesUrl()).reply(400);
+    axiosMock.onPost(bulkModulestoreMigrateUrl()).reply(400);
     renderPage();
     expect(await screen.findByText('Migrate Legacy Libraries')).toBeInTheDocument();
     expect(await screen.findByText('MBA')).toBeInTheDocument();

src/legacy-libraries-migration/LegacyLibMigrationPage.tsx

@@ -25,11 +25,11 @@ import type { LibraryV1Data } from '@src/studio-home/data/api';
 import { ToastContext } from '@src/generic/toast-context';
 import { Filter, LibrariesList } from '@src/studio-home/tabs-section/libraries-tab';
 
+import { useBulkModulestoreMigrate } from '@src/data/apiHooks';
 import messages from './messages';
 import { SelectDestinationView } from './SelectDestinationView';
 import { ConfirmationView } from './ConfirmationView';
 import { LegacyMigrationHelpSidebar } from './LegacyMigrationHelpSidebar';
-import { useUpdateContainerCollections } from './data/apiHooks';
 
 export type MigrationStep = 'select-libraries' | 'select-destination' | 'confirmation-view';
 
@@ -83,7 +83,7 @@ export const LegacyLibMigrationPage = () => {
   const [migrationFilter, setMigrationFilter] = useState<Filter[]>([Filter.unmigrated]);
   const [destinationLibrary, setDestination] = useState<ContentLibrary>();
   const [confirmationButtonState, setConfirmationButtonState] = useState('default');
-  const migrate = useUpdateContainerCollections();
+  const migrate = useBulkModulestoreMigrate();
 
   const handleMigrate = useCallback(async () => {
     if (destinationLibrary) {