From 2fb04d670f5996cf54f81aea864c0885b75fdc7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Tue, 2 Sep 2025 16:23:49 -0300
Subject: [PATCH] feat: add legacy library alert (#2412)

Adds an Alert to the Legacy Library Page to notify the user of the process of deprecating Legacy Libraries and a Button to open the Migrate Library interface.
---
 .../MigrateLegacyLibrariesAlert.tsx           | 23 ++++++
 .../tabs-section/libraries-tab/index.jsx      | 69 ------------------
 .../tabs-section/libraries-tab/index.tsx      | 71 +++++++++++++++++++
 src/studio-home/tabs-section/messages.ts      | 18 +++++
 4 files changed, 112 insertions(+), 69 deletions(-)
 create mode 100644 src/studio-home/tabs-section/libraries-tab/MigrateLegacyLibrariesAlert.tsx
 delete mode 100644 src/studio-home/tabs-section/libraries-tab/index.jsx
 create mode 100644 src/studio-home/tabs-section/libraries-tab/index.tsx

diff --git a/src/studio-home/tabs-section/libraries-tab/MigrateLegacyLibrariesAlert.tsx b/src/studio-home/tabs-section/libraries-tab/MigrateLegacyLibrariesAlert.tsx
new file mode 100644
index 000000000..d4a35c95a
--- /dev/null
+++ b/src/studio-home/tabs-section/libraries-tab/MigrateLegacyLibrariesAlert.tsx
@@ -0,0 +1,23 @@
+import { Alert, Button } from '@openedx/paragon';
+import { Warning } from '@openedx/paragon/icons';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
+
+export const MigrateLegacyLibrariesAlert = () => (
+  <Alert variant="warning" icon={Warning}>
+    <Alert.Heading>
+      <FormattedMessage {...messages.alertTitle} />
+    </Alert.Heading>
+    <div className="row">
+      <div className="col-8">
+        <FormattedMessage {...messages.alertDescription} />
+      </div>
+      <div className="col-4 d-flex justify-content-center align-items-start">
+        <Button>
+          <FormattedMessage {...messages.alertReviewButton} />
+        </Button>
+      </div>
+    </div>
+  </Alert>
+);
diff --git a/src/studio-home/tabs-section/libraries-tab/index.jsx b/src/studio-home/tabs-section/libraries-tab/index.jsx
deleted file mode 100644
index 1a3383c40..000000000
--- a/src/studio-home/tabs-section/libraries-tab/index.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, Row } from '@openedx/paragon';
-import { Error } from '@openedx/paragon/icons';
-
-import { LoadingSpinner } from '../../../generic/Loading';
-import CardItem from '../../card-item';
-import { sortAlphabeticallyArray } from '../utils';
-import AlertMessage from '../../../generic/alert-message';
-import messages from '../messages';
-
-const LibrariesTab = ({
-  libraries,
-  isLoading,
-  isFailed,
-}) => {
-  const intl = useIntl();
-  if (isLoading) {
-    return (
-      <Row className="m-0 mt-4 justify-content-center">
-        <LoadingSpinner />
-      </Row>
-    );
-  }
-  return (
-    isFailed ? (
-      <AlertMessage
-        variant="danger"
-        description={(
-          <Row className="m-0 align-items-center">
-            <Icon src={Error} className="text-danger-500 mr-1" />
-            <span>{intl.formatMessage(messages.librariesTabErrorMessage)}</span>
-          </Row>
-        )}
-      />
-    ) : (
-      <div className="courses-tab">
-        {sortAlphabeticallyArray(libraries).map(({
-          displayName, org, number, url,
-        }) => (
-          <CardItem
-            key={`${org}+${number}`}
-            isLibraries
-            displayName={displayName}
-            org={org}
-            number={number}
-            url={url}
-          />
-        ))}
-      </div>
-    )
-  );
-};
-LibrariesTab.propTypes = {
-  libraries: PropTypes.arrayOf(
-    PropTypes.shape({
-      displayName: PropTypes.string.isRequired,
-      libraryKey: PropTypes.string.isRequired,
-      number: PropTypes.string.isRequired,
-      org: PropTypes.string.isRequired,
-      url: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  isFailed: PropTypes.bool.isRequired,
-};
-
-export default LibrariesTab;
diff --git a/src/studio-home/tabs-section/libraries-tab/index.tsx b/src/studio-home/tabs-section/libraries-tab/index.tsx
new file mode 100644
index 000000000..b993e9a78
--- /dev/null
+++ b/src/studio-home/tabs-section/libraries-tab/index.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, Row } from '@openedx/paragon';
+import { Error } from '@openedx/paragon/icons';
+
+import AlertMessage from '@src/generic/alert-message';
+import { LoadingSpinner } from '@src/generic/Loading';
+import CardItem from '../../card-item';
+import { sortAlphabeticallyArray } from '../utils';
+import messages from '../messages';
+import { MigrateLegacyLibrariesAlert } from './MigrateLegacyLibrariesAlert';
+
+interface LibrariesTabProps {
+  libraries: {
+    displayName: string;
+    libraryKey: string;
+    number: string;
+    org: string;
+    url: string;
+  }[];
+  isLoading: boolean;
+  isFailed: boolean;
+}
+
+const LibrariesTab = ({
+  libraries,
+  isLoading,
+  isFailed,
+}: LibrariesTabProps) => {
+  const intl = useIntl();
+  if (isLoading) {
+    return (
+      <Row className="m-0 mt-4 justify-content-center">
+        <LoadingSpinner />
+      </Row>
+    );
+  }
+  return (
+    isFailed ? (
+      <AlertMessage
+        variant="danger"
+        description={(
+          <Row className="m-0 align-items-center">
+            <Icon src={Error} className="text-danger-500 mr-1" />
+            <span>{intl.formatMessage(messages.librariesTabErrorMessage)}</span>
+          </Row>
+        )}
+      />
+    ) : (
+      <>
+        <MigrateLegacyLibrariesAlert />
+        <div className="courses-tab">
+          {sortAlphabeticallyArray(libraries).map(({
+            displayName, org, number, url,
+          }) => (
+            <CardItem
+              key={`${org}+${number}`}
+              isLibraries
+              displayName={displayName}
+              org={org}
+              number={number}
+              url={url}
+            />
+          ))}
+        </div>
+      </>
+    )
+  );
+};
+
+export default LibrariesTab;
diff --git a/src/studio-home/tabs-section/messages.ts b/src/studio-home/tabs-section/messages.ts
index cecac598e..db60d6536 100644
--- a/src/studio-home/tabs-section/messages.ts
+++ b/src/studio-home/tabs-section/messages.ts
@@ -88,6 +88,24 @@ const messages = defineMessages({
     id: 'course-authoring.studio-home.libraries.tab.library.not.found.alert.message',
     defaultMessage: 'There are no libraries with the current filters.',
   },
+  alertTitle: {
+    id: 'studio-home.legacy-libraries.migrate-alert.title',
+    defaultMessage: 'Migrate Legacy Libraries',
+    description: 'Title for the alert message to migrate legacy libraries',
+  },
+  alertDescription: {
+    id: 'studio-home.legacy-libraries.migrate-alert.description',
+    defaultMessage: 'In a future release, legacy libraries will no longer be supported.'
+      + ' The new libraries experience allows you to author sections, subsections, units,'
+      + ' and components to reuse across your courses. Content from legacy libraries can be'
+      + ' migrated to the new experience.',
+    description: 'Description for the alert message to migrate legacy libraries',
+  },
+  alertReviewButton: {
+    id: 'studio-home.legacy-libraries.migrate-alert.review-button',
+    defaultMessage: 'Review Legacy Libraries',
+    description: 'Label for the button to review legacy libraries',
+  },
 });
 
 export default messages;