refactor: Extract MigrationStatus Chip from CardList

Author: ChrisChV

src/library-authoring/data/api.mocks.ts

@@ -1133,3 +1133,17 @@ mockGetCourseImports.applyMock = () => jest.spyOn(
   api,
   'getCourseImports',
 ).mockImplementation(mockGetCourseImports);
+
+export const mockGetMigrationInfo = {
+  applyMock: () => jest.spyOn(api, 'getMigrationInfo').mockResolvedValue(
+    camelCaseObject({
+      'course-v1:HarvardX+123+2023': [{
+        sourceKey: 'course-v1:HarvardX+123+2023',
+        targetCollectionKey: 'ltc:org:coll-1',
+        targetCollectionTitle: 'Collection 1',
+        targetKey: mockContentLibrary.libraryId,
+        targetTitle: 'Library 1',
+      }],
+    }),
+  ),
+};

src/library-authoring/data/api.ts

@@ -809,3 +809,24 @@ export async function getCourseImports(libraryId: string): Promise<CourseImport[
   const { data } = await getAuthenticatedHttpClient().get(getCourseImportsApiUrl(libraryId));
   return camelCaseObject(data);
 }
+
+export interface MigrationInfo {
+  sourceKey: string;
+  targetCollectionKey: string;
+  targetCollectionTitle: string;
+  targetKey: string;
+  targetTitle: string;
+}
+
+/**
+ * Get the migration info data for a list of source keys
+ */
+export async function getMigrationInfo(sourceKeys: string[]): Promise<Record<string, MigrationInfo[]>> {
+  const client = getAuthenticatedHttpClient();
+
+  const params = new URLSearchParams();
+  sourceKeys.forEach(key => params.append('source_keys', key));
+
+  const { data } = await client.get(`${getApiBaseUrl()}/api/modulestore_migrator/v1/migration_info/`, { params });
+  return camelCaseObject(data);
+}

src/library-authoring/data/apiHooks.ts

@@ -93,6 +93,11 @@ export const libraryAuthoringQueryKeys = {
     ...libraryAuthoringQueryKeys.contentLibrary(libraryId),
     'courseImports',
   ],
+  migrationInfo: (sourceKeys: string[]) => [
+    ...libraryAuthoringQueryKeys.all,
+    'migrationInfo',
+    ...sourceKeys,
+  ],
 };
 
 export const xblockQueryKeys = {
@@ -965,3 +970,13 @@ export const useCourseImports = (libraryId: string) => (
     queryFn: () => api.getCourseImports(libraryId),
   })
 );
+
+/**
+ * Returns the migration info of a given source list
+ */
+export const useMigrationInfo = (sourcesKeys: string[]) => (
+  useQuery({
+    queryKey: libraryAuthoringQueryKeys.migrationInfo(sourcesKeys),
+    queryFn: () => api.getMigrationInfo(sourcesKeys),
+  })
+);

src/library-authoring/import-course/messages.ts

@@ -159,6 +159,11 @@ const messages = defineMessages({
     defaultMessage: 'The selected course is being analyzed for import and review',
     description: 'Body of the card in loading state for the import details of a imported course.',
   },
+  previouslyImported: {
+    id: 'course-authoring.library-authoring.import-course.course-list.card.previously-imported.text',
+    defaultMessage: 'Previously Imported',
+    description: 'Chip that indicates that the course has been previously imported.',
+  },
 });
 
 export default messages;

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

@@ -10,10 +10,9 @@ import { initialState } from '@src/studio-home/factories/mockApiResponses';
 import { RequestStatus } from '@src/data/constants';
 import { type DeprecatedReduxState } from '@src/store';
 import studioHomeMock from '@src/studio-home/__mocks__/studioHomeMock';
-import { mockGetMigrationInfo } from '@src/studio-home/data/api.mocks';
 import { getCourseDetailsApiUrl } from '@src/course-outline/data/api';
 import { LibraryProvider } from '@src/library-authoring/common/context/LibraryContext';
-import { mockContentLibrary } from '@src/library-authoring/data/api.mocks';
+import { mockContentLibrary, mockGetMigrationInfo } from '@src/library-authoring/data/api.mocks';
 import { ImportStepperPage } from './ImportStepperPage';
 
 let axiosMock;

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

@@ -1,24 +1,67 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useNavigate } from 'react-router-dom';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
-  ActionRow, Button, Container, Layout, Stepper,
+  ActionRow, Button, Chip, Container, Layout, Stepper,
 } from '@openedx/paragon';
 
-import { CoursesList } from '@src/studio-home/tabs-section/courses-tab';
+import { CoursesList, MigrationStatusProps } from '@src/studio-home/tabs-section/courses-tab';
 import { useStudioHome } from '@src/studio-home/hooks';
 import { useLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
 import Loading from '@src/generic/Loading';
 
 import Header from '@src/header';
 import SubHeader from '@src/generic/sub-header/SubHeader';
+import { useMigrationInfo } from '@src/library-authoring/data/apiHooks';
 import { ReviewImportDetails } from './ReviewImportDetails';
 import messages from '../messages';
 import { HelpSidebar } from '../HelpSidebar';
 
 type MigrationStep = 'select-course' | 'review-details';
 
+export const MigrationStatus = ({
+  courseId,
+  allVisibleCourseIds,
+}: MigrationStatusProps) => {
+  const { libraryId } = useLibraryContext();
+
+  const {
+    data: migrationInfoData,
+  } = useMigrationInfo(allVisibleCourseIds);
+
+  const processedMigrationInfo = useMemo(() => {
+    const result = {};
+    if (migrationInfoData) {
+      for (const libraries of Object.values(migrationInfoData)) {
+        // The map key in `migrationInfoData` is in camelCase.
+        // In the processed map, we use the key in its original form.
+        result[libraries[0].sourceKey] = libraries.map(item => item.targetKey);
+      }
+    }
+    return result;
+  }, [migrationInfoData]);
+
+  const isPreviouslyMigrated = (
+    courseId in processedMigrationInfo && processedMigrationInfo[courseId].includes(libraryId)
+  );
+
+  if (!isPreviouslyMigrated) {
+    return null;
+  }
+
+  return (
+    <div
+      key={`${courseId}-${processedMigrationInfo[courseId].join('-')}`}
+      className="previously-migrated-chip"
+    >
+      <Chip>
+        <FormattedMessage {...messages.previouslyImported} />
+      </Chip>
+    </div>
+  );
+};
+
 export const ImportStepperPage = () => {
   const intl = useIntl();
   const navigate = useNavigate();
@@ -69,7 +112,7 @@ export const ImportStepperPage = () => {
                   <CoursesList
                     selectedCourseId={selectedCourseId}
                     handleSelect={setSelectedCourseId}
-                    currentLibraryId={libraryId}
+                    cardMigrationStatusWidget={MigrationStatus}
                   />
                 </Stepper.Step>
                 <Stepper.Step

src/studio-home/data/api.mocks.ts

@@ -2,7 +2,7 @@ import { camelCaseObject } from '@edx/frontend-platform';
 
 import { createAxiosError } from '@src/testUtils';
 import * as api from './api';
-import { generateGetStudioHomeLibrariesApiResponse, generateGetMigrationInfo } from '../factories/mockApiResponses';
+import { generateGetStudioHomeLibrariesApiResponse } from '../factories/mockApiResponses';
 
 /**
  * Mock for `getContentLibraryV2List()`
@@ -21,9 +21,3 @@ export const mockGetStudioHomeLibraries = {
     libraries: [],
   }),
 };
-
-export const mockGetMigrationInfo = {
-  applyMock: () => jest.spyOn(api, 'getMigrationInfo').mockResolvedValue(
-    camelCaseObject(generateGetMigrationInfo()),
-  ),
-};

src/studio-home/data/api.ts

@@ -49,14 +49,6 @@ export interface LibrariesV1ListData {
   libraries: LibraryV1Data[];
 }
 
-export interface MigrationInfo {
-  sourceKey: string;
-  targetCollectionKey: string;
-  targetCollectionTitle: string;
-  targetKey: string;
-  targetTitle: string;
-}
-
 export async function getStudioHomeLibraries(): Promise<LibrariesV1ListData> {
   const { data } = await getAuthenticatedHttpClient().get(`${getStudioHomeApiUrl()}/libraries`);
   return camelCaseObject(data);
@@ -77,16 +69,3 @@ export async function sendRequestForCourseCreator(): Promise<object> {
   const { data } = await getAuthenticatedHttpClient().post(getRequestCourseCreatorUrl());
   return camelCaseObject(data);
 }
-
-/**
- * Get the migration info data for a list of source keys
- */
-export async function getMigrationInfo(sourceKeys: string[]): Promise<Record<string, MigrationInfo[]>> {
-  const client = getAuthenticatedHttpClient();
-
-  const params = new URLSearchParams();
-  sourceKeys.forEach(key => params.append('source_keys', key));
-
-  const { data } = await client.get(`${getApiBaseUrl()}/api/modulestore_migrator/v1/migration_info/`, { params });
-  return camelCaseObject(data);
-}

src/studio-home/data/apiHooks.ts

@@ -1,13 +1,12 @@
-import { skipToken, useQuery } from '@tanstack/react-query';
-import { getStudioHomeLibraries, getMigrationInfo } from './api';
+import { useQuery } from '@tanstack/react-query';
+import { getStudioHomeLibraries } from './api';
 
 export const studioHomeQueryKeys = {
   all: ['studioHome'],
   /**
    * Base key for list of v1/legacy libraries
    */
   librariesV1: () => [...studioHomeQueryKeys.all, 'librariesV1'],
-  migrationInfo: (sourceKeys: string[]) => [...studioHomeQueryKeys.all, 'migrationInfo', ...sourceKeys],
 };
 
 export const useLibrariesV1Data = (enabled: boolean = true) => (
@@ -17,10 +16,3 @@ export const useLibrariesV1Data = (enabled: boolean = true) => (
     enabled,
   })
 );
-
-export const useMigrationInfo = (sourcesKeys: string[], enabled: boolean = true) => (
-  useQuery({
-    queryKey: studioHomeQueryKeys.migrationInfo(sourcesKeys),
-    queryFn: enabled ? () => getMigrationInfo(sourcesKeys) : skipToken,
-  })
-);

src/studio-home/factories/mockApiResponses.tsx

@@ -1,6 +1,5 @@
 import { type DeprecatedReduxState } from '@src/store';
 import { RequestStatus } from '@src/data/constants';
-import { mockContentLibrary } from '@src/library-authoring/data/api.mocks';
 
 export const courseId = 'course';
 
@@ -167,13 +166,3 @@ export const generateNewVideoApiResponse = () => ({
     upload_url: 'http://testing.org',
   }],
 });
-
-export const generateGetMigrationInfo = () => ({
-  'course-v1:HarvardX+123+2023': [{
-    sourceKey: 'course-v1:HarvardX+123+2023',
-    targetCollectionKey: 'ltc:org:coll-1',
-    targetCollectionTitle: 'Collection 1',
-    targetKey: mockContentLibrary.libraryId,
-    targetTitle: 'Library 1',
-  }],
-});