feat: Migrate Legacy Libraries Flow [FC-0097] (#2425)

- Creates all steps of the flow described in #2201

Author: ChrisChV

src/generic/unlink-modal/UnlinkModal.tsx

@@ -5,12 +5,11 @@ import {
 } from '@openedx/paragon';
 import { Warning } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { BoldText } from '@src/utils';
 
 import messages from './messages';
 import LoadingButton from '../loading-button';
 
-const BoldText = (chunk: string[]) => <b>{chunk}</b>;
-
 type UnlinkModalPropsContainer = {
   displayName?: string;
   category?: string;

src/index.jsx

@@ -35,6 +35,7 @@ import { ContentType } from './library-authoring/routes';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import './index.scss';
+import { LegacyLibMigrationPage } from './legacy-libraries-migration/LegacyLibMigrationPage';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -65,6 +66,7 @@ const App = () => {
         <Route path="/home" element={<StudioHome />} />
         <Route path="/libraries" element={<StudioHome />} />
         <Route path="/libraries-v1" element={<StudioHome />} />
+        <Route path="/libraries-v1/migrate" element={<LegacyLibMigrationPage />} />
         <Route path="/library/create" element={<CreateLibrary />} />
         <Route path="/library/:libraryId/*" element={<LibraryLayout />} />
         <Route

src/index.scss

@@ -30,6 +30,7 @@
 @import "certificates/scss/Certificates";
 @import "group-configurations/GroupConfigurations";
 @import "optimizer-page/scan-results/ScanResults";
+@import "legacy-libraries-migration/";
 
 // To apply the glow effect to the selected Section/Subsection, in the Course Outline
 div.row:has(> div > div.highlight) {

src/legacy-libraries-migration/ConfirmationView.tsx

@@ -0,0 +1,89 @@
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  Alert,
+  Card,
+  Container,
+  Icon,
+  Stack,
+} from '@openedx/paragon';
+import {
+  AccessTime,
+  Folder,
+  SubdirectoryArrowRight,
+} from '@openedx/paragon/icons';
+
+import type { ContentLibrary } from '@src/library-authoring/data/api';
+import { LibraryV1Data } from '@src/studio-home/data/api';
+import { BoldText } from '@src/utils';
+
+import messages from './messages';
+
+interface ConfirmationCardProps {
+  legacyLib: LibraryV1Data;
+  destinationName: string;
+}
+
+const ConfirmationCard = ({
+  legacyLib,
+  destinationName,
+}: ConfirmationCardProps) => (
+  <Card className="mb-3.5">
+    <Card.Header
+      title={(
+        <Stack className="h4" direction="horizontal">
+          <Icon className="mr-1" src={Folder} />
+          <span>{legacyLib.displayName}</span>
+        </Stack>
+      )}
+      subtitle={(
+        <Stack className="mb-1.5" direction="horizontal">
+          <Icon className="mr-1.5" src={SubdirectoryArrowRight} />
+          <span>{destinationName}</span>
+        </Stack>
+      )}
+    />
+    {legacyLib.isMigrated && (
+      <Stack className="ml-3.5 mt-1 mb-2 text-gray-500" direction="horizontal">
+        <Icon className="mr-1.5" src={AccessTime} />
+        <span className="x-small">
+          <FormattedMessage
+            {...messages.previouslyMigratedAlert}
+            values={{
+              libraryName: legacyLib.migratedToTitle,
+              b: BoldText,
+            }}
+          />
+        </span>
+      </Stack>
+    )}
+  </Card>
+);
+
+interface ConfirmationViewProps {
+  destination: ContentLibrary;
+  legacyLibraries: LibraryV1Data[];
+}
+
+export const ConfirmationView = ({
+  destination,
+  legacyLibraries,
+}: ConfirmationViewProps) => (
+  <Container className="confirmation-view">
+    <Alert variant="info">
+      <FormattedMessage
+        {...messages.confirmationViewAlert}
+        values={{
+          count: legacyLibraries.length,
+          libraryName: destination.title,
+          b: BoldText,
+        }}
+      />
+    </Alert>
+    {legacyLibraries.map((legacyLib) => (
+      <ConfirmationCard
+        legacyLib={legacyLib}
+        destinationName={destination.title}
+      />
+    ))}
+  </Container>
+);