refactor: Import blocked state implemented

Author: ChrisChV

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

@@ -313,6 +313,23 @@ const messages = defineMessages({
     defaultMessage: 'Reason For Failed import',
     description: 'Label for the Reason For Failed import field in the Reasons table in the import details',
   },
+  importBlockedTitle: {
+    id: 'library-authoring.import-course.review-details.import-blocked.title',
+    defaultMessage: 'Import Blocked',
+    description: 'Title for the alert in review details when the import is blocked',
+  },
+  importBlockedBody: {
+    id: 'library-authoring.import-course.review-details.import-blocked.body',
+    defaultMessage: 'This import would exceed the Content Library limit of {limitNumber} items.'
+    + ' To prevent incomplete or lost content, the import has been blocked. For more information,'
+    + ' view the Content Library documentation.',
+    description: 'Body for the alert in review details when the import is blocked',
+  },
+  importNotPossibleTooltip: {
+    id: 'library-authoring.import-course.review-details.import-blocked.import-course-btn.tooltip',
+    defaultMessage: 'Import not possible',
+    description: 'Label for the tooltip for the import button in review details when the import is blocked',
+  },
 });
 
 export default messages;

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

@@ -3,7 +3,8 @@ import { Helmet } from 'react-helmet';
 import { useNavigate } from 'react-router-dom';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
-  ActionRow, Button, Chip, Container, Layout, Stepper,
+  ActionRow, Button, Chip, Container, Layout, OverlayTrigger, Stepper,
+  Tooltip,
 } from '@openedx/paragon';
 
 import { CoursesList, MigrationStatusProps } from '@src/studio-home/tabs-section/courses-tab';
@@ -72,6 +73,7 @@ export const ImportStepperPage = () => {
   const [currentStep, setCurrentStep] = useState<MigrationStep>('select-course');
   const [selectedCourseId, setSelectedCourseId] = useState<string>();
   const [analysisCompleted, setAnalysisCompleted] = useState<boolean>(false);
+  const [importIsBlocked, setImportIsBlocked] = useState<boolean>(false);
   const { data: courseData } = useCourseDetails(selectedCourseId);
   const { libraryId, libraryData, readOnly } = useLibraryContext();
   const { showToast } = useContext(ToastContext);
@@ -152,6 +154,7 @@ export const ImportStepperPage = () => {
                   >
                     <ReviewImportDetails
                       markAnalysisComplete={setAnalysisCompleted}
+                      setImportIsBlocked={setImportIsBlocked}
                       courseId={selectedCourseId}
                     />
                   </Stepper.Step>
@@ -175,12 +178,27 @@ export const ImportStepperPage = () => {
                     <Button onClick={() => setCurrentStep('select-course')} variant="tertiary">
                       <FormattedMessage {...messages.importCourseBack} />
                     </Button>
-                    <LoadingButton
-                      onClick={handleImportCourse}
-                      label={intl.formatMessage(messages.importCourseButton)}
-                      variant="primary"
-                      disabled={!analysisCompleted}
-                    />
+                    {importIsBlocked ? (
+                      <OverlayTrigger
+                        placement="top"
+                        overlay={(
+                          <Tooltip id="tooltip-import-course-button">
+                            <FormattedMessage {...messages.importNotPossibleTooltip} />
+                          </Tooltip>
+                        )}
+                      >
+                        <Button variant="primary" disabled>
+                          <FormattedMessage {...messages.importCourseButton} />
+                        </Button>
+                      </OverlayTrigger>
+                    ) : (
+                      <LoadingButton
+                        onClick={handleImportCourse}
+                        label={intl.formatMessage(messages.importCourseButton)}
+                        variant="primary"
+                        disabled={!analysisCompleted}
+                      />
+                    )}
                   </ActionRow>
                 )}
               </div>

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

@@ -5,7 +5,7 @@ import { LoadingSpinner } from '@src/generic/Loading';
 import { useCourseDetails } from '@src/course-outline/data/apiHooks';
 
 import { useEffect, useMemo } from 'react';
-import { CheckCircle, Warning } from '@openedx/paragon/icons';
+import { CheckCircle, Info, Warning } from '@openedx/paragon/icons';
 import { useLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
 import { useLibraryBlockLimits, useMigrationInfo } from '@src/library-authoring/data/apiHooks';
 import { useGetBlockTypes, useGetContentHits } from '@src/search-manager';
@@ -15,6 +15,7 @@ import messages from '../messages';
 interface Props {
   courseId?: string;
   markAnalysisComplete: (analysisCompleted: boolean) => void;
+  setImportIsBlocked: (importIsBlocked: boolean) => void;
 }
 
 interface BannerProps {
@@ -114,14 +115,21 @@ const Banner = ({ courseId, isBlockDataPending, unsupportedBlockPercentage }: Ba
   );
 };
 
-export const ReviewImportDetails = ({ courseId, markAnalysisComplete }: Props) => {
+export const ReviewImportDetails = ({
+  courseId,
+  markAnalysisComplete,
+  setImportIsBlocked,
+}: Props) => {
   const { data: blockTypes, isPending: isBlockDataPending } = useGetBlockTypes([
     `context_key = "${courseId}"`,
   ]);
   const {
     data: libraryBlockLimits,
     isPending: isPendinglibraryBlockLimits,
   } = useLibraryBlockLimits();
+  const {
+    libraryData,
+  } = useLibraryContext();
 
   useEffect(() => {
     // Mark complete to inform parent component of analysis completion.
@@ -176,21 +184,25 @@ export const ReviewImportDetails = ({ courseId, markAnalysisComplete }: Props) =
 
   /** Finally calculate the final number of unsupported blocks by adding parent unsupported and children
   unsupported blocks. */
-  let finalUnsupportedBlocks = useMemo(
+  const finalUnsupportedBlocks = useMemo(
     () => totalUnsupportedBlocks + totalUnsupportedBlockChildren,
     [totalUnsupportedBlocks, totalUnsupportedBlockChildren],
   );
 
+  /** Calculate total supported blocks by subtracting final unsupported blocks from the total number of blocks */
+  const totalBlocks = useMemo(() => {
+    if (!blockTypes) {
+      return undefined;
+    }
+    return Object.values(blockTypes).reduce((total, block) => total + block, 0) - finalUnsupportedBlocks;
+  }, [blockTypes, finalUnsupportedBlocks]);
+
   /** Calculate total components by excluding those that are chapters, sequential, or vertical. */
-  /** Also, calculate if the total components exceed the limits */
-  const { totalComponents, unsupportedByLimit } = useMemo(() => {
+  const totalComponents = useMemo(() => {
     if (!blockTypes) {
-      return {
-        totalComponents: undefined,
-        unsupportedByLimit: 0,
-      };
+      return undefined;
     }
-    let resultTotalComponents = Object.entries(blockTypes).reduce(
+    return Object.entries(blockTypes).reduce(
       (total, [blockType, count]) => {
         const isComponent = !['chapter', 'sequential', 'vertical'].includes(blockType);
         if (isComponent) {
@@ -200,32 +212,8 @@ export const ReviewImportDetails = ({ courseId, markAnalysisComplete }: Props) =
       },
       0,
     ) - finalUnsupportedBlocks;
-
-    let resultUnsupportedByLimit = 0;
-    if (libraryBlockLimits && resultTotalComponents > libraryBlockLimits.maxBlocksPerContentLibrary) {
-      resultUnsupportedByLimit = resultTotalComponents - libraryBlockLimits.maxBlocksPerContentLibrary;
-      resultTotalComponents -= resultUnsupportedByLimit;
-    }
-
-    return {
-      totalComponents: resultTotalComponents,
-      unsupportedByLimit: resultUnsupportedByLimit,
-    };
   }, [blockTypes, finalUnsupportedBlocks, libraryBlockLimits]);
 
-  // Adds the components exceed the limit to the final unsupported count
-  if (unsupportedByLimit) {
-    finalUnsupportedBlocks += unsupportedByLimit;
-  }
-
-  /** Calculate total supported blocks by subtracting final unsupported blocks from the total number of blocks */
-  const totalBlocks = useMemo(() => {
-    if (!blockTypes) {
-      return undefined;
-    }
-    return Object.values(blockTypes).reduce((total, block) => total + block, 0) - finalUnsupportedBlocks;
-  }, [blockTypes, finalUnsupportedBlocks]);
-
   /** Calculate the unsupported block percentage based on the final total blocks and unsupported blocks. */
   const unsupportedBlockPercentage = useMemo(() => {
     if (!blockTypes || !totalBlocks) {
@@ -234,6 +222,33 @@ export const ReviewImportDetails = ({ courseId, markAnalysisComplete }: Props) =
     return (finalUnsupportedBlocks / (totalBlocks + finalUnsupportedBlocks)) * 100;
   }, [blockTypes, finalUnsupportedBlocks]);
 
+  const limitIsExceeded = useMemo(() => (
+    libraryData?.numBlocks || 0) + (totalBlocks || 0) > (libraryBlockLimits?.maxBlocksPerContentLibrary || 0
+  ), [libraryData?.numBlocks, totalBlocks, libraryBlockLimits?.maxBlocksPerContentLibrary]);
+
+  useEffect(() => {
+    setImportIsBlocked(limitIsExceeded);
+  }, [limitIsExceeded, setImportIsBlocked]);
+
+  // If the total blocks exceeds the permitted limit, render the page to block import
+  if (limitIsExceeded) {
+    return (
+      <Stack gap={4}>
+        <Alert variant="danger" icon={Info}>
+          <Alert.Heading>
+            <FormattedMessage {...messages.importBlockedTitle} />
+          </Alert.Heading>
+        </Alert>
+        <FormattedMessage
+          {...messages.importBlockedBody}
+          values={{
+            limitNumber: libraryBlockLimits?.maxBlocksPerContentLibrary || 0,
+          }}
+        />
+      </Stack>
+    );
+  }
+
   return (
     <Stack gap={4}>
       <Banner