feat: add course import page [FC-0112]

src/legacy-libraries-migration/LegacyMigrationHelpSidebar.tsx

@@ -1,12 +1,10 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Icon, Stack } from '@openedx/paragon';
 import { Question } from '@openedx/paragon/icons';
+import { Div, Paragraph } from '@src/utils';
 
 import messages from './messages';
 
-export const SingleLineBreak = (chunk: string[]) => <div>{chunk}</div>;
-export const Paragraph = (chunk: string[]) => <p>{chunk}</p>;
-
 export const LegacyMigrationHelpSidebar = () => (
   <div className="legacy-libraries-migration-help bg-white pt-3 mt-1">
     <Stack gap={1} direction="horizontal" className="pl-4 h4 text-primary-700">
@@ -42,7 +40,7 @@ export const LegacyMigrationHelpSidebar = () => (
         <span className="x-small">
           <FormattedMessage
             {...messages.helpAndSupportThirdQuestionBody}
-            values={{ div: SingleLineBreak, p: Paragraph }}
+            values={{ div: Div, p: Paragraph }}
           />
         </span>
       </Stack>

src/library-authoring/LibraryLayout.tsx

@@ -6,15 +6,16 @@ import {
   useParams,
 } from 'react-router-dom';
 
-import { LibraryBackupPage } from '@src/library-authoring/backup-restore';
 import LibraryAuthoringPage from './LibraryAuthoringPage';
+import { LibraryBackupPage } from './backup-restore';
 import LibraryCollectionPage from './collections/LibraryCollectionPage';
 import { LibraryProvider } from './common/context/LibraryContext';
 import { SidebarProvider } from './common/context/SidebarContext';
 import { ComponentPicker } from './component-picker';
 import { ComponentEditorModal } from './components/ComponentEditorModal';
 import { CreateCollectionModal } from './create-collection';
 import { CreateContainerModal } from './create-container';
+import { CourseImportHomePage } from './import-course';
 import { ROUTES } from './routes';
 import { LibrarySectionPage, LibrarySubsectionPage } from './section-subsections';
 import { LibraryUnitPage } from './units';
@@ -92,6 +93,10 @@ const LibraryLayout = () => (
         path={ROUTES.BACKUP}
         Component={LibraryBackupPage}
       />
+      <Route
+        path={ROUTES.IMPORT}
+        Component={CourseImportHomePage}
+      />
     </Route>
   </Routes>
 );

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

@@ -1072,3 +1072,64 @@ mockGetEntityLinks.applyMock = () => jest.spyOn(
   courseLibApi,
   'getEntityLinks',
 ).mockImplementation(mockGetEntityLinks);
+
+export async function mockGetCourseImports(libraryId: string): ReturnType<typeof api.getCourseImports> {
+  switch (libraryId) {
+    case mockContentLibrary.libraryId:
+      return [
+        mockGetCourseImports.succeedImport,
+        mockGetCourseImports.succeedImportWithCollection,
+        mockGetCourseImports.failImport,
+        mockGetCourseImports.inProgressImport,
+      ];
+    case mockGetCourseImports.emptyLibraryId:
+      return [];
+    default:
+      throw new Error(`mockGetCourseImports doesn't know how to mock ${JSON.stringify(libraryId)}`);
+  }
+}
+mockGetCourseImports.libraryId = mockContentLibrary.libraryId;
+mockGetCourseImports.emptyLibraryId = mockContentLibrary.libraryId2;
+mockGetCourseImports.succeedImport = {
+  source: {
+    key: 'course-v1:edX+DemoX+2025_T1',
+    displayName: 'DemoX 2025 T1',
+  },
+  targetCollection: null,
+  state: 'Succeeded',
+  progress: 1,
+} satisfies api.CourseImport;
+mockGetCourseImports.succeedImportWithCollection = {
+  source: {
+    key: 'course-v1:edX+DemoX+2025_T2',
+    displayName: 'DemoX 2025 T2',
+  },
+  targetCollection: {
+    key: 'sample-collection',
+    title: 'DemoX 2025 T1 (2)',
+  },
+  state: 'Succeeded',
+  progress: 1,
+} satisfies api.CourseImport;
+mockGetCourseImports.failImport = {
+  source: {
+    key: 'course-v1:edX+DemoX+2025_T3',
+    displayName: 'DemoX 2025 T3',
+  },
+  targetCollection: null,
+  state: 'Failed',
+  progress: 0.30,
+} satisfies api.CourseImport;
+mockGetCourseImports.inProgressImport = {
+  source: {
+    key: 'course-v1:edX+DemoX+2025_T4',
+    displayName: 'DemoX 2025 T4',
+  },
+  targetCollection: null,
+  state: 'In Progress',
+  progress: 0.5012,
+} satisfies api.CourseImport;
+mockGetCourseImports.applyMock = () => jest.spyOn(
+  api,
+  'getCourseImports',
+).mockImplementation(mockGetCourseImports);

src/library-authoring/data/api.ts

@@ -157,6 +157,10 @@ export const getLibraryRestoreStatusApiUrl = (taskId: string) => `${getApiBaseUr
  * Get the URL for the API endpoint to copy a single container.
  */
 export const getLibraryContainerCopyApiUrl = (containerId: string) => `${getLibraryContainerApiUrl(containerId)}copy/`;
+/**
+ * Get the url for the API endpoint to list library course imports.
+ */
+export const getCourseImportsApiUrl = (libraryId: string) => `${getApiBaseUrl()}/api/modulestore_migrator/v1/library/${libraryId}/migrations/courses/`;
 
 export interface ContentLibrary {
   id: string;
@@ -784,3 +788,24 @@ export async function getLibraryContainerHierarchy(
 export async function publishContainer(containerId: string) {
   await getAuthenticatedHttpClient().post(getLibraryContainerPublishApiUrl(containerId));
 }
+
+export interface CourseImport {
+  source: {
+    key: string;
+    displayName: string;
+  };
+  targetCollection: {
+    key: string;
+    title: string;
+  } | null;
+  state: 'Succeeded' | 'Failed' | 'In Progress';
+  progress: number;
+}
+
+/**
+ * Returns the course imports which had this library as destination.
+ */
+export async function getCourseImports(libraryId: string): Promise<CourseImport[]> {
+  const { data } = await getAuthenticatedHttpClient().get(getCourseImportsApiUrl(libraryId));
+  return camelCaseObject(data);
+}

src/library-authoring/data/apiHooks.ts

@@ -89,6 +89,10 @@ export const libraryAuthoringQueryKeys = {
     }
     return ['hierarchy'];
   },
+  courseImports: (libraryId: string) => [
+    ...libraryAuthoringQueryKeys.contentLibrary(libraryId),
+    'courseImports',
+  ],
 };
 
 export const xblockQueryKeys = {
@@ -951,3 +955,13 @@ export const useContentFromSearchIndex = (contentIds: string[]) => {
     skipBlockTypeFetch: true,
   });
 };
+
+/**
+ * Returns the course imports which had this library as destination.
+ */
+export const useCourseImports = (libraryId: string) => (
+  useQuery({
+    queryKey: libraryAuthoringQueryKeys.courseImports(libraryId),
+    queryFn: () => api.getCourseImports(libraryId),
+  })
+);

src/library-authoring/import-course/CourseImportHomePage.test.tsx

@@ -0,0 +1,56 @@
+import {
+  initializeMocks,
+  render as testRender,
+  screen,
+} from '@src/testUtils';
+
+import { LibraryProvider } from '../common/context/LibraryContext';
+import {
+  mockContentLibrary,
+  mockGetCourseImports,
+} from '../data/api.mocks';
+import { CourseImportHomePage } from './CourseImportHomePage';
+
+mockContentLibrary.applyMock();
+mockGetCourseImports.applyMock();
+
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+const render = (libraryId: string) => (
+  testRender(
+    <CourseImportHomePage />,
+    {
+      extraWrapper: ({ children }: { children: React.ReactNode }) => (
+        <LibraryProvider libraryId={libraryId}>
+          {children}
+        </LibraryProvider>
+      ),
+      path: '/libraries/:libraryId/import-course',
+      params: { libraryId },
+    },
+  )
+);
+
+describe('<CourseImportHomePage>', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('should render the library course import home page', async () => {
+    render(mockGetCourseImports.libraryId);
+    expect(await screen.findByRole('heading', { name: /Tools.*Import/ })).toBeInTheDocument(); // Header
+    expect(screen.getByRole('heading', { name: 'Previous Imports' })).toBeInTheDocument();
+    expect(screen.getAllByRole('link', { name: /DemoX 2025 T[0-5]/ })).toHaveLength(4);
+  });
+
+  it('should render the empty state', async () => {
+    render(mockGetCourseImports.emptyLibraryId);
+    expect(await screen.findByRole('heading', { name: /Tools.*Import/ })).toBeInTheDocument(); // Header
+    expect(screen.queryByRole('heading', { name: 'Previous Imports' })).not.toBeInTheDocument();
+    expect(screen.getByText('You have not imported any courses into this library.')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,93 @@
+import {
+  Button,
+  Card,
+  Container,
+  Layout,
+  Stack,
+} from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+import { Helmet } from 'react-helmet';
+
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import Loading from '@src/generic/Loading';
+import SubHeader from '@src/generic/sub-header/SubHeader';
+import Header from '@src/header';
+
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useCourseImports } from '../data/apiHooks';
+import { HelpSidebar } from './HelpSidebar';
+import { ImportedCourseCard } from './ImportedCourseCard';
+import messages from './messages';
+
+const EmptyState = () => (
+  <Container size="md" className="py-6">
+    <Card>
+      <Stack direction="horizontal" gap={3} className="my-6 justify-content-center">
+        <FormattedMessage {...messages.emptyStateText} />
+        <Button iconBefore={Add} disabled>
+          <FormattedMessage {...messages.emptyStateButtonText} />
+        </Button>
+      </Stack>
+    </Card>
+  </Container>
+);
+
+export const CourseImportHomePage = () => {
+  const intl = useIntl();
+  const { libraryId, libraryData, readOnly } = useLibraryContext();
+  const { data: courseImports } = useCourseImports(libraryId);
+
+  if (!courseImports || !libraryData) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="d-flex">
+      <div className="flex-grow-1">
+        <Helmet>
+          <title>{libraryData.title} | {process.env.SITE_NAME}</title>
+        </Helmet>
+        <Header
+          number={libraryData.slug}
+          title={libraryData.title}
+          org={libraryData.org}
+          contextId={libraryId}
+          isLibrary
+          readOnly={readOnly}
+          containerProps={{
+            size: undefined,
+          }}
+        />
+        <Container className="mt-4 mb-5">
+          <div className="px-4 bg-light-200 border-bottom">
+            <SubHeader
+              title={intl.formatMessage(messages.pageTitle)}
+              subtitle={intl.formatMessage(messages.pageSubtitle)}
+              hideBorder
+            />
+          </div>
+          <Layout xs={[{ span: 9 }, { span: 3 }]}>
+            <Layout.Element>
+              {courseImports.length ? (
+                <Stack gap={3} className="pl-4 mt-4">
+                  <h3>
+                    <FormattedMessage {...messages.courseImportPreviousImports} />
+                  </h3>
+                  {courseImports.map((courseImport) => (
+                    <ImportedCourseCard
+                      key={courseImport.source.key}
+                      courseImport={courseImport}
+                    />
+                  ))}
+                </Stack>
+              ) : (<EmptyState />)}
+            </Layout.Element>
+            <Layout.Element>
+              <HelpSidebar />
+            </Layout.Element>
+          </Layout>
+        </Container>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,44 @@
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Icon, Stack } from '@openedx/paragon';
+import { Question } from '@openedx/paragon/icons';
+import { Paragraph } from '@src/utils';
+
+import messages from './messages';
+
+export const HelpSidebar = () => (
+  <div className="pt-3 border-left h-100">
+    <Stack gap={1} direction="horizontal" className="pl-4 h4 text-primary-700">
+      <Icon src={Question} />
+      <span>
+        <FormattedMessage {...messages.helpAndSupportTitle} />
+      </span>
+    </Stack>
+    <hr />
+    <Stack className="pl-4 pr-4">
+      <Stack>
+        <span className="h5">
+          <FormattedMessage {...messages.helpAndSupportFirstQuestionTitle} />
+        </span>
+        <span className="x-small">
+          <FormattedMessage
+            {...messages.helpAndSupportFirstQuestionBody}
+            values={{ p: Paragraph }}
+          />
+        </span>
+      </Stack>
+      <hr />
+      <Stack>
+        <span className="h5">
+          <FormattedMessage {...messages.helpAndSupportSecondQuestionTitle} />
+        </span>
+        <span className="x-small">
+          <FormattedMessage
+            {...messages.helpAndSupportSecondQuestionBody}
+            values={{ p: Paragraph }}
+          />
+        </span>
+      </Stack>
+    </Stack>
+    <hr className="w-100" />
+  </div>
+);