feat: Add previously migration chip

Author: ChrisChV

src/library-authoring/LibraryAuthoringPage.tsx

@@ -406,7 +406,11 @@ const LibraryAuthoringPage = ({
           <LibrarySidebar />
         </div>
       )}
-      <ImportStepperModal isOpen={importModalIsOpen} onClose={closeImportModal} />
+      <ImportStepperModal
+        isOpen={importModalIsOpen}
+        onClose={closeImportModal}
+        libraryKey={libraryId}
+      />
     </div>
   );
 };

src/library-authoring/course-import/ImportStepperModal.tsx

@@ -11,9 +11,11 @@ import messages from './messages';
 type MigrationStep = 'select-course' | 'review-details';
 
 export const ImportStepperModal = ({
+  libraryKey,
   isOpen,
   onClose,
 }: {
+  libraryKey: string,
   isOpen: boolean,
   onClose: () => void,
 }) => {
@@ -46,6 +48,7 @@ export const ImportStepperModal = ({
             <CoursesList
               selectedCourseId={selectedCourseId}
               handleSelect={setSelectedCourseId}
+              currentLibraryId={libraryKey}
             />
           </Stepper.Step>
           <Stepper.Step

src/studio-home/card-item/index.tsx

@@ -1,4 +1,6 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, {
+  ReactElement, useCallback, useEffect, useRef,
+} from 'react';
 import { useSelector } from 'react-redux';
 import {
   Card,
@@ -208,6 +210,7 @@ interface BaseProps {
   migratedToKey?: string;
   migratedToTitle?: string;
   migratedToCollectionKey?: string | null;
+  subtitleBeforeComponent?: ReactElement | null;
   selectMode?: 'single' | 'multiple';
   selectPosition?: 'card' | 'title';
   isSelected?: boolean;
@@ -248,6 +251,7 @@ const CardItem: React.FC<Props> = ({
   migratedToKey,
   migratedToTitle,
   migratedToCollectionKey,
+  subtitleBeforeComponent,
   scrollIntoView = false,
 }) => {
   const intl = useIntl();
@@ -282,6 +286,14 @@ const CardItem: React.FC<Props> = ({
         />
       );
     }
+    if (subtitleBeforeComponent) {
+      subtitle = (
+        <Stack direction="horizontal" gap={2}>
+          {subtitleBeforeComponent}
+          {subtitle}
+        </Stack>
+      );
+    }
     return subtitle;
   }, [isLibraries, org, number, run, migratedToKey, isMigrated]);
 

src/studio-home/data/api.ts

@@ -1,4 +1,3 @@
-// @ts-check
 import { camelCaseObject, snakeCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
@@ -50,6 +49,14 @@ 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);
@@ -70,3 +77,16 @@ 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,12 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
-import { getStudioHomeLibraries } from './api';
+import { getStudioHomeLibraries, getMigrationInfo } 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) => (
@@ -16,3 +17,11 @@ export const useLibrariesV1Data = (enabled: boolean = true) => (
     enabled,
   })
 );
+
+export const useMigrationInfo = (sourcesKeys: string[], enabled: boolean = true) => (
+  useQuery({
+    queryKey: studioHomeQueryKeys.migrationInfo(sourcesKeys),
+    queryFn: () => getMigrationInfo(sourcesKeys),
+    enabled,
+  })
+);

src/studio-home/tabs-section/courses-tab/index.scss

@@ -1,3 +1,10 @@
 .courses-tab-container {
   min-height: 80vh;
+
+  .previously-migrated-chip {
+    .pgn__chip {
+      border: 0;
+      background-color: var(--pgn-color-warning-500);
+    }
+  }
 }

src/studio-home/tabs-section/courses-tab/index.test.tsx

@@ -109,7 +109,7 @@ describe('<CoursesTab />', () => {
     expect(alertCoursesNotFound).toBeInTheDocument();
   });
 
-  it('should render processing courses component when isEnabledPagination is false and isShowProcessing is true', () => {
+  it('should render processing courses component when isEnabledPagination is false and isShowProcessing is true', async () => {
     const props = { isShowProcessing: true, isEnabledPagination: false };
     const customStoreData = {
       studioHomeData: {
@@ -121,7 +121,7 @@ describe('<CoursesTab />', () => {
       },
     };
     renderComponent(props, customStoreData);
-    const alertCoursesNotFound = screen.queryByTestId('processing-courses-title');
+    const alertCoursesNotFound = await screen.findByTestId('processing-courses-title');
     expect(alertCoursesNotFound).toBeInTheDocument();
   });
 

src/studio-home/tabs-section/courses-tab/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
@@ -9,6 +9,7 @@ import {
   Alert,
   Button,
   Form,
+  Chip,
 } from '@openedx/paragon';
 import { Error } from '@openedx/paragon/icons';
 
@@ -22,6 +23,7 @@ import ProcessingCourses from '@src/studio-home/processing-courses';
 import { LoadingSpinner } from '@src/generic/Loading';
 import AlertMessage from '@src/generic/alert-message';
 import { RequestStatus } from '@src/data/constants';
+import { useMigrationInfo } from '@src/studio-home/data/apiHooks';
 import messages from '../messages';
 import CoursesFilters from './courses-filters';
 import ContactAdministrator from './contact-administrator';
@@ -39,6 +41,7 @@ interface CardListProps {
   onClickNewCourse?: () => void;
   inSelectMode?: boolean;
   selectedCourseId?: string;
+  currentLibraryId?: string;
 }
 
 const CardList = ({
@@ -53,16 +56,37 @@ const CardList = ({
   onClickNewCourse = () => {},
   inSelectMode = false,
   selectedCourseId,
+  currentLibraryId,
 }: CardListProps) => {
   const {
     courses,
     numPages,
     optimizationEnabled,
   } = useSelector(getStudioHomeData);
 
+  const {
+    data: migrationInfoData,
+  } = useMigrationInfo(courses?.map(item => item.courseKey) || [], true);
+
+  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 isNotFilteringCourses = !isFiltered && !isLoading;
   const hasCourses = courses?.length > 0;
 
+  const isPreviouslyMigrated = useCallback((courseKey: string) => (
+    courseKey in processedMigrationInfo && processedMigrationInfo[courseKey].includes(currentLibraryId)
+  ), [processedMigrationInfo]);
+
   return (
     <>
       {hasCourses ? (
@@ -79,7 +103,8 @@ const CardList = ({
               url,
             }) => (
               <CardItem
-                key={courseKey}
+                // Add `-migrated` to force re-render of the Chip
+                key={`${courseKey}${isPreviouslyMigrated(courseKey) ? '-migrated' : ''}`}
                 courseKey={courseKey}
                 onClick={() => onClickCard?.(courseKey)}
                 itemId={courseKey}
@@ -93,6 +118,16 @@ const CardList = ({
                 selectMode={inSelectMode ? 'single' : undefined}
                 selectPosition={inSelectMode ? 'card' : undefined}
                 isSelected={inSelectMode && selectedCourseId === courseKey}
+                subtitleBeforeComponent={isPreviouslyMigrated(courseKey) && (
+                  <div
+                    key={`${courseKey}-${processedMigrationInfo[courseKey].join('-')}`}
+                    className="previously-migrated-chip"
+                  >
+                    <Chip>
+                      <FormattedMessage {...messages.previouslyImported} />
+                    </Chip>
+                  </div>
+                )}
               />
             ),
           )}
@@ -139,6 +174,7 @@ interface Props {
   isShowProcessing?: boolean;
   selectedCourseId?: string;
   handleSelect?: (courseId: string) => void;
+  currentLibraryId?: string;
 }
 
 export const CoursesList: React.FC<Props> = ({
@@ -147,6 +183,7 @@ export const CoursesList: React.FC<Props> = ({
   isShowProcessing = false,
   selectedCourseId,
   handleSelect,
+  currentLibraryId,
 }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
@@ -243,6 +280,7 @@ export const CoursesList: React.FC<Props> = ({
               isFiltered={isFiltered || false}
               inSelectMode
               selectedCourseId={selectedCourseId}
+              currentLibraryId={currentLibraryId}
             />
           </Form.RadioSet>
         ) : (

src/studio-home/tabs-section/messages.ts

@@ -136,6 +136,11 @@ const messages = defineMessages({
     defaultMessage: 'Select All',
     description: 'Button to select all libraries when migrate legacy libraries.',
   },
+  previouslyImported: {
+    id: 'studio-home.course-list.card.previously-imported.text',
+    defaultMessage: 'Previously Imported',
+    description: 'Chip that indicates that the course has been previously imported.',
+  },
 });
 
 export default messages;