feat: Partial import for Import details page

Author: ChrisChV

.env

@@ -45,7 +45,7 @@ INVITE_STUDENTS_EMAIL_TO=''
 ENABLE_CHECKLIST_QUALITY=''
 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,itembank"
 # Fallback in local style files
 PARAGON_THEME_URLS={}
 COURSE_TEAM_SUPPORT_EMAIL=''

.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_content"
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content,itembank"
 # Fallback in local style files
 PARAGON_THEME_URLS={}
 COURSE_TEAM_SUPPORT_EMAIL=''

.env.test

@@ -40,6 +40,6 @@ 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,itembank"
 PARAGON_THEME_URLS=
 COURSE_TEAM_SUPPORT_EMAIL='[email protected]'

src/data/api.mocks.ts

@@ -47,6 +47,7 @@ mockGetMigrationStatus.migrationStatusData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -81,6 +82,7 @@ mockGetMigrationStatus.migrationStatusFailedData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -115,6 +117,7 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
     {
       id: 2,
@@ -135,6 +138,7 @@ mockGetMigrationStatus.migrationStatusFailedMultipleData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;
@@ -169,6 +173,7 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
     {
       id: 2,
@@ -189,6 +194,7 @@ mockGetMigrationStatus.migrationStatusFailedOneLibraryData = {
         components: 0,
         unsupported: 0,
       },
+      unsupportedReasons: [],
     },
   ],
 } as api.MigrateTaskStatusData;

src/data/api.ts

@@ -105,6 +105,11 @@ export interface MigrateParameters {
     components: number;
     unsupported: number;
   }
+  unsupportedReasons: {
+    block_name: string;
+    block_type: string;
+    reason: string;
+  }[];
 }
 
 export interface MigrateTaskStatusData {

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

@@ -4,14 +4,18 @@ import { useNavigate, useParams } from 'react-router';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   Stack, Container, Alert, Layout, Button,
+  DataTable,
 } from '@openedx/paragon';
 
 import Header from '@src/header';
 import { useCourseDetails } from '@src/course-outline/data/apiHooks';
 import SubHeader from '@src/generic/sub-header/SubHeader';
-import { ArrowForward, CheckCircle, Info } from '@openedx/paragon/icons';
+import {
+  ArrowForward, CheckCircle, Info, WarningFilled,
+} from '@openedx/paragon/icons';
 import Loading from '@src/generic/Loading';
 import { ToastContext } from '@src/generic/toast-context';
+import { Paragraph } from '@src/utils';
 
 import { useBulkModulestoreMigrate, useModulestoreMigrationStatus } from '@src/data/apiHooks';
 import messages from './messages';
@@ -66,6 +70,8 @@ export const ImportDetailsPage = () => {
     // TODO: Update this code when using simple migration
     if (courseImportDetails?.isFailed) {
       migrationStatus = 'Failed';
+    } else if (courseImportDetails?.migrationSummary.unsupported !== 0) {
+      migrationStatus = 'Partial Succeeded';
     } else {
       migrationStatus = 'Succeeded';
     }
@@ -128,10 +134,10 @@ export const ImportDetailsPage = () => {
           </Alert>
           <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
           <SummaryCard
-            totalBlocks={courseImportDetails.migrationSummary.totalBlocks}
-            totalComponents={
-              courseImportDetails.migrationSummary.components + courseImportDetails.migrationSummary.unsupported
+            totalBlocks={
+              courseImportDetails.migrationSummary.totalBlocks - courseImportDetails.migrationSummary.unsupported
             }
+            totalComponents={courseImportDetails.migrationSummary.components}
             sections={courseImportDetails.migrationSummary.sections}
             subsections={courseImportDetails.migrationSummary.subsections}
             units={courseImportDetails.migrationSummary.units}
@@ -188,14 +194,90 @@ export const ImportDetailsPage = () => {
           </div>
         </Stack>
       );
+    } if (migrationStatus === 'Partial Succeeded') {
+      const importedSuccessfullyCount = courseImportDetails.migrationSummary.totalBlocks
+        - courseImportDetails.migrationSummary.unsupported;
+
+      return (
+        <Stack gap={3}>
+          <Alert variant="warning" icon={WarningFilled}>
+            <Alert.Heading>
+              <FormattedMessage {...messages.importPartialAlertTitle} />
+            </Alert.Heading>
+            <p>
+              <FormattedMessage
+                {...messages.importPartialAlertBody}
+                values={{
+                  courseName: courseDetails?.title,
+                  collectionName: courseImportDetails.targetCollection?.title,
+                }}
+              />
+            </p>
+          </Alert>
+          <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
+          <SummaryCard
+            totalBlocks={
+              courseImportDetails.migrationSummary.totalBlocks - courseImportDetails.migrationSummary.unsupported
+            }
+            totalComponents={courseImportDetails.migrationSummary.components}
+            sections={courseImportDetails.migrationSummary.sections}
+            subsections={courseImportDetails.migrationSummary.subsections}
+            units={courseImportDetails.migrationSummary.units}
+            unsupportedBlocks={courseImportDetails.migrationSummary.unsupported}
+          />
+          <div>
+            <FormattedMessage
+              {...messages.importPartialBody}
+              values={{
+                percentage: Math.floor(
+                  (importedSuccessfullyCount * 100) / courseImportDetails.migrationSummary.totalBlocks,
+                ),
+                courseName: courseDetails?.title,
+                p: Paragraph,
+              }}
+            />
+          </div>
+          <DataTable
+            columns={[
+              {
+                Header: intl.formatMessage(messages.importPartialReasonTableBlockName),
+                accessor: 'blockName',
+
+              },
+              {
+                Header: intl.formatMessage(messages.importPartialReasonTableBlockType),
+                accessor: 'blockType',
+              },
+              {
+                Header: intl.formatMessage(messages.importPartialReasonTableReason),
+                accessor: 'reason',
+              },
+            ]}
+            data={courseImportDetails.unsupportedReasons}
+          >
+            <DataTable.Table />
+          </DataTable>
+          <div className="w-100 d-flex justify-content-end">
+            <Button
+              variant="outline-primary"
+              iconAfter={ArrowForward}
+              onClick={() => navigate(collectionLink())}
+            >
+              <FormattedMessage {...messages.viewImportedContentButton} />
+            </Button>
+          </div>
+        </Stack>
+      );
     }
+
     return (
-    // In Progress
+      // In Progress
       <Stack gap={3}>
         <h4><FormattedMessage {...messages.importInProgressTitle} /></h4>
         <p>
           <FormattedMessage {...messages.importInProgressBody} />
         </p>
+        <h4><FormattedMessage {...messages.importSummaryTitle} /></h4>
         <SummaryCard isPending />
         <div className="w-100 d-flex justify-content-end">
           <Button

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

@@ -280,6 +280,39 @@ const messages = defineMessages({
     defaultMessage: 'Course {courseName} is being imported. This page will update when import is complete',
     description: 'Body of the import details when the migration is in progress',
   },
+  importPartialAlertTitle: {
+    id: 'library-authoring.import-course.import-details.import-partial.alert.title',
+    defaultMessage: 'Partial Import Successful',
+    description: 'Title of the alert in the import details page when the migration is in partial import.',
+  },
+  importPartialAlertBody: {
+    id: 'library-authoring.import-course.import-details.import-partial.alert.title',
+    defaultMessage: '{courseName} has been imported to your library in a collection called {collectionName}.'
+    + ' Some content was not added to your course. See details bellow.',
+    description: 'Body of the alert in the import details page when the migration is in partial import.',
+  },
+  importPartialBody: {
+    id: 'library-authoring.import-course.import-details.import-partial.alert.title',
+    defaultMessage: '<p>{percentage}% of Course {courseName} has been imported successfully.'
+    + ' Imported Course content can be edited and remixed in your Library, and reused in Courses.</p>'
+    + '<p>Details of the import, including reasons some content was not abled to be imported are described below</p>',
+    description: 'Body of the import details page when the migration is in partial import.',
+  },
+  importPartialReasonTableBlockName: {
+    id: 'library-authoring.import-course.import-details.reasons-table.block-name',
+    defaultMessage: 'Block Name',
+    description: 'Label for the Block Name field in the Reasons table in the import details',
+  },
+  importPartialReasonTableBlockType: {
+    id: 'library-authoring.import-course.import-details.reasons-table.block-type',
+    defaultMessage: 'Block Type',
+    description: 'Label for the Block Type field in the Reasons table in the import details',
+  },
+  importPartialReasonTableReason: {
+    id: 'library-authoring.import-course.import-details.reasons-table.reason',
+    defaultMessage: 'Reason For Failed import',
+    description: 'Label for the Reason For Failed import field in the Reasons table in the import details',
+  },
 });
 
 export default messages;