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.

Author: rpenido

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>
+);

src/studio-home/tabs-section/libraries-tab/index.jsx

@@ -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;

src/studio-home/tabs-section/libraries-tab/index.tsx

@@ -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;