feat: LibraryV2 redirect to lib mfe or placeholder

src/index.jsx

@@ -23,6 +23,7 @@ import initializeStore from './store';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
 import Head from './head/Head';
 import { StudioHome } from './studio-home';
+import LibraryV2Placeholder from './studio-home/tabs-section/LibraryV2Placeholder.tsx';
 import CourseRerun from './course-rerun';
 import { TaxonomyLayout, TaxonomyDetailPage, TaxonomyListPage } from './taxonomy';
 import { ContentTagsDrawer } from './content-tags-drawer';
@@ -54,6 +55,7 @@ const App = () => {
         <Route path="/home" element={<StudioHome />} />
         <Route path="/libraries" element={<StudioHome />} />
         <Route path="/legacy-libraries" element={<StudioHome />} />
+        <Route path="/library/:libraryId" element={<LibraryV2Placeholder />} />
         <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
         <Route path="/course_rerun/:courseId" element={<CourseRerun />} />
         {getConfig().ENABLE_ACCESSIBILITY_PAGE === 'true' && (

src/studio-home/tabs-section/LibraryV2Placeholder.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Container } from '@openedx/paragon';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import Header from '../../header';
+import SubHeader from '../../generic/sub-header/SubHeader';
+import messages from './messages';
+
+
+const LibraryV2Placeholder = () => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <Header isHiddenMainMenu />
+      <Container size="xl" className="p-4 mt-3">
+        <section className="mb-4">
+          <article className="studio-home-sub-header">
+            <section>
+              <SubHeader
+                title={intl.formatMessage(messages.libraryV2PlaceholderTitle)}
+              />
+            </section>
+          </article>
+          <section>
+            <p>{intl.formatMessage(messages.libraryV2PlaceholderBody)}</p>
+          </section>
+        </section>
+      </Container>
+      <StudioFooter />
+    </>
+  );
+};
+
+export default LibraryV2Placeholder;

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

@@ -129,7 +129,10 @@ const TabsSection = ({
             eventKey={TABS_LIST.libraries}
             title={intl.formatMessage(messages.librariesTabTitle)}
           >
-            <LibrariesV2Tab />
+            <LibrariesV2Tab
+              libraryAuthoringMfeUrl={libraryAuthoringMfeUrl}
+              redirectToLibraryAuthoringMfe={redirectToLibraryAuthoringMfe}
+            />
           </Tab>,
         );
       }

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Icon, Row } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
@@ -8,7 +9,10 @@ import AlertMessage from '../../../generic/alert-message';
 import CardItem from '../../card-item';
 import messages from '../messages';
 
-const LibrariesV2Tab = () => {
+const LibrariesV2Tab = ({
+  libraryAuthoringMfeUrl,
+  redirectToLibraryAuthoringMfe,
+}) => {
   const intl = useIntl();
   const {
     data,
@@ -24,6 +28,14 @@ const LibrariesV2Tab = () => {
     );
   }
 
+  const libURL = (id: string): string => (
+    libraryAuthoringMfeUrl && redirectToLibraryAuthoringMfe
+      ? `${libraryAuthoringMfeUrl}library/${id}`
+      // Redirection to the placeholder is done in the MFE rather than
+      // through the backend i.e. redirection from cms, because this this will probably change
+      : `${window.location.origin}/course-authoring/library/${id}`
+  );
+
   return (
     isError ? (
       <AlertMessage
@@ -38,21 +50,24 @@ const LibrariesV2Tab = () => {
       />
     ) : (
       <div className="courses-tab">
-        {data.map(({ org, slug, title }) => (
+        {data.map(({ id, org, slug, title }) => (
           <CardItem
             key={`${org}+${slug}`}
             isLibraries
             displayName={title}
             org={org}
             number={slug}
-            // TODO: Pass in the URL
-            // url={url}
+            url={libURL(id)}
           />
         ))}
       </div>
     )
   );
 };
 
+LibrariesV2Tab.propTypes = {
+  libraryAuthoringMfeUrl: PropTypes.string.isRequired,
+  redirectToLibraryAuthoringMfe: PropTypes.bool.isRequired,
+};
 
 export default LibrariesV2Tab;

src/studio-home/tabs-section/messages.js

@@ -50,6 +50,14 @@ const messages = defineMessages({
     defaultMessage: 'Taxonomies',
     description: 'Title of Taxonomies tab on the home page',
   },
+  libraryV2PlaceholderTitle: {
+    id: 'course-authoring.studio-home.libraries.placeholder.title',
+    defaultMessage: 'Library V2 Placeholder',
+  },
+  libraryV2PlaceholderBody: {
+    id: 'course-authoring.studio-home.libraries.placeholder.body',
+    defaultMessage: 'This is a placeholder page, as the Library Authoring MFE is not enabled.',
+  },
 });
 
 export default messages;