feat: Add lib v2/legacy tabs in studio home

When lib mode is set to "mixed", both "Libraries" and "Legacy Libraries" tabs are show in the Studio Home. When "Libraries" is clicked, v2 libraries are fetched, when "Legacy Libraries" is clicked, v1 libraries are fetched. When lib mode is set to "v1 only" or "v2 only", only one tab "Libraries" is show and only the respective libraries are fetched when the tab is clicked.
open-craft · May 29, 2024 · 418e561 · 418e561
1 parent a585a13
commit 418e561
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 24 deletions.
diff --git a/src/studio-home/StudioHome.jsx b/src/studio-home/StudioHome.jsx
@@ -18,6 +18,7 @@ import Header from '../header';
 import SubHeader from '../generic/sub-header/SubHeader';
 import HomeSidebar from './home-sidebar';
 import TabsSection from './tabs-section';
+import { isMixedOrV2LibrariesMode } from './tabs-section/utils';
 import OrganizationSection from './organization-section';
 import VerifyEmailLayout from './verify-email-layout';
 import CreateNewCourseForm from './create-new-course-form';
@@ -43,12 +44,14 @@ const StudioHome = ({ intl }) => {
     dispatch,
   } = useStudioHome(isPaginationCoursesEnabled);
 
+  // TODO: this should be a flag in the backend
+  const LIB_MODE = 'mixed';
+
   const {
     userIsActive,
     studioShortName,
     studioRequestEmail,
     libraryAuthoringMfeUrl,
-    redirectToLibraryAuthoringMfe,
   } = studioHomeData;
 
   function getHeaderButtons() {
@@ -79,8 +82,8 @@ const StudioHome = ({ intl }) => {
     }
 
     let libraryHref = `${getConfig().STUDIO_BASE_URL}/home_library`;
-    if (redirectToLibraryAuthoringMfe) {
-      libraryHref = `${libraryAuthoringMfeUrl}/create`;
+    if (isMixedOrV2LibrariesMode(LIB_MODE)) {
+      libraryHref = `${libraryAuthoringMfeUrl}create`;
     }
 
     headerButtons.push(

diff --git a/src/studio-home/data/api.js b/src/studio-home/data/api.js
@@ -40,6 +40,11 @@ export async function getStudioHomeLibraries() {
   return camelCaseObject(data);
 }
 
+export async function getStudioHomeLibrariesV2() {
+  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/libraries/v2/`);
+  return camelCaseObject(data);
+}
+
 /**
  * Handle course notification requests.
  * @param {string} url

diff --git a/src/studio-home/data/apiHooks.ts b/src/studio-home/data/apiHooks.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getStudioHomeLibrariesV2 } from './api';
+
+/**
+ * Builds the query to fetch list of V2 Libraries
+ */
+export const useListStudioHomeV2Libraries = () => (
+  useQuery({
+    queryKey: ['listV2Libraries'],
+    queryFn: () => getStudioHomeLibrariesV2(),
+  })
+);
diff --git a/src/studio-home/tabs-section/TabsSection.test.jsx b/src/studio-home/tabs-section/TabsSection.test.jsx
@@ -80,7 +80,7 @@ describe('<TabsSection />', () => {
 
     expect(screen.getByText(tabMessages.coursesTabTitle.defaultMessage)).toBeInTheDocument();
 
-    expect(screen.getByText(tabMessages.librariesTabTitle.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(tabMessages.legacyLibrariesTabTitle.defaultMessage)).toBeInTheDocument();
 
     expect(screen.getByText(tabMessages.archivedTabTitle.defaultMessage)).toBeInTheDocument();
   });
@@ -222,7 +222,7 @@ describe('<TabsSection />', () => {
 
       expect(screen.getByText(tabMessages.coursesTabTitle.defaultMessage)).toBeInTheDocument();
 
-      expect(screen.getByText(tabMessages.librariesTabTitle.defaultMessage)).toBeInTheDocument();
+      expect(screen.getByText(tabMessages.legacyLibrariesTabTitle.defaultMessage)).toBeInTheDocument();
 
       expect(screen.queryByText(tabMessages.archivedTabTitle.defaultMessage)).toBeNull();
     });
@@ -236,7 +236,7 @@ describe('<TabsSection />', () => {
       await executeThunk(fetchStudioHomeData(), store.dispatch);
       await executeThunk(fetchLibraryData(), store.dispatch);
 
-      const librariesTab = screen.getByText(tabMessages.librariesTabTitle.defaultMessage);
+      const librariesTab = screen.getByText(tabMessages.legacyLibrariesTabTitle.defaultMessage);
       await act(async () => {
         fireEvent.click(librariesTab);
       });
@@ -257,7 +257,7 @@ describe('<TabsSection />', () => {
       await executeThunk(fetchStudioHomeData(), store.dispatch);
 
       expect(screen.getByText(tabMessages.coursesTabTitle.defaultMessage)).toBeInTheDocument();
-      expect(screen.queryByText(tabMessages.librariesTabTitle.defaultMessage)).toBeNull();
+      expect(screen.queryByText(tabMessages.legacyLibrariesTabTitle.defaultMessage)).toBeNull();
     });
 
     it('should redirect to library authoring mfe', async () => {
@@ -268,7 +268,7 @@ describe('<TabsSection />', () => {
       axiosMock.onGet(getStudioHomeApiUrl()).reply(200, data);
       await executeThunk(fetchStudioHomeData(), store.dispatch);
 
-      const librariesTab = screen.getByText(tabMessages.librariesTabTitle.defaultMessage);
+      const librariesTab = screen.getByText(tabMessages.legacyLibrariesTabTitle.defaultMessage);
       fireEvent.click(librariesTab);
 
       waitFor(() => {
@@ -283,7 +283,7 @@ describe('<TabsSection />', () => {
       await executeThunk(fetchStudioHomeData(), store.dispatch);
       await executeThunk(fetchLibraryData(), store.dispatch);
 
-      const librariesTab = screen.getByText(tabMessages.librariesTabTitle.defaultMessage);
+      const librariesTab = screen.getByText(tabMessages.legacyLibrariesTabTitle.defaultMessage);
       await act(async () => {
         fireEvent.click(librariesTab);
       });

diff --git a/src/studio-home/tabs-section/index.jsx b/src/studio-home/tabs-section/index.jsx
@@ -9,10 +9,12 @@ import { useNavigate } from 'react-router-dom';
 import { getLoadingStatuses, getStudioHomeData } from '../data/selectors';
 import messages from './messages';
 import LibrariesTab from './libraries-tab';
+import LibrariesV2Tab from './libraries-v2-tab/index.tsx';
 import ArchivedTab from './archived-tab';
 import CoursesTab from './courses-tab';
 import { RequestStatus } from '../../data/constants';
 import { fetchLibraryData } from '../data/thunks';
+import { isMixedOrV1LibrariesMode, isMixedOrV2LibrariesMode } from './utils';
 
 const TabsSection = ({
   intl,
@@ -23,9 +25,14 @@ const TabsSection = ({
   isPaginationCoursesEnabled,
 }) => {
   const navigate = useNavigate();
+
+  // TODO: this should be a flag in the backend
+  const LIB_MODE = 'mixed';
+
   const TABS_LIST = {
     courses: 'courses',
     libraries: 'libraries',
+    legacyLibraries: 'legacyLibraries',
     archived: 'archived',
     taxonomies: 'taxonomies',
   };
@@ -87,21 +94,37 @@ const TabsSection = ({
     }
 
     if (librariesEnabled) {
-      tabs.push(
-        <Tab
-          key={TABS_LIST.libraries}
-          eventKey={TABS_LIST.libraries}
-          title={intl.formatMessage(messages.librariesTabTitle)}
-        >
-          {!redirectToLibraryAuthoringMfe && (
+      if (isMixedOrV2LibrariesMode(LIB_MODE)) {
+        tabs.push(
+          <Tab
+            key={TABS_LIST.libraries}
+            eventKey={TABS_LIST.libraries}
+            title={intl.formatMessage(messages.librariesTabTitle)}
+          >
+            <LibrariesV2Tab />
+          </Tab>,
+        );
+      }
+
+      if (isMixedOrV1LibrariesMode(LIB_MODE)) {
+        tabs.push(
+          <Tab
+            key={TABS_LIST.legacyLibraries}
+            eventKey={TABS_LIST.legacyLibraries}
+            title={intl.formatMessage(
+              LIB_MODE === 'v1 only'
+                ? messages.librariesTabTitle
+                : messages.legacyLibrariesTabTitle,
+            )}
+          >
             <LibrariesTab
               libraries={libraries}
               isLoading={isLoadingLibraries}
               isFailed={isFailedLibrariesPage}
             />
-          )}
-        </Tab>,
-      );
+          </Tab>,
+        );
+      }
     }
 
     if (getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true') {
@@ -118,9 +141,7 @@ const TabsSection = ({
   }, [archivedCourses, librariesEnabled, showNewCourseContainer, isLoadingCourses, isLoadingLibraries]);
 
   const handleSelectTab = (tab) => {
-    if (tab === TABS_LIST.libraries && redirectToLibraryAuthoringMfe) {
-      window.location.assign(libraryAuthoringMfeUrl);
-    } else if (tab === TABS_LIST.libraries && !redirectToLibraryAuthoringMfe) {
+    if (tab === TABS_LIST.legacyLibraries) {
       dispatch(fetchLibraryData());
     } else if (tab === TABS_LIST.taxonomies) {
       navigate('/taxonomies');

diff --git a/src/studio-home/tabs-section/libraries-v2-tab/index.tsx b/src/studio-home/tabs-section/libraries-v2-tab/index.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Icon, Row } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { useListStudioHomeV2Libraries } from '../../data/apiHooks';
+import { LoadingSpinner } from '../../../generic/Loading';
+import AlertMessage from '../../../generic/alert-message';
+import CardItem from '../../card-item';
+import messages from '../messages';
+
+const LibrariesV2Tab = () => {
+  const intl = useIntl();
+  const {
+    data,
+    isLoading,
+    isError,
+  } = useListStudioHomeV2Libraries();
+
+  if (isLoading) {
+    return (
+      <Row className="m-0 mt-4 justify-content-center">
+        <LoadingSpinner />
+      </Row>
+    );
+  }
+
+  return (
+    isError ? (
+      <AlertMessage
+        title={intl.formatMessage(messages.librariesTabErrorMessage)}
+        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">
+        {data.map(({ org, slug, title }) => (
+          <CardItem
+            key={`${org}+${slug}`}
+            isLibraries
+            displayName={title}
+            org={org}
+            number={slug}
+            // TODO: Pass in the URL
+            // url={url}
+          />
+        ))}
+      </div>
+    )
+  );
+};
+
+
+export default LibrariesV2Tab;
diff --git a/src/studio-home/tabs-section/messages.js b/src/studio-home/tabs-section/messages.js
@@ -21,6 +21,10 @@ const messages = defineMessages({
     id: 'course-authoring.studio-home.libraries.tab.title',
     defaultMessage: 'Libraries',
   },
+  legacyLibrariesTabTitle: {
+    id: 'course-authoring.studio-home.legacy.libraries.tab.title',
+    defaultMessage: 'Legacy Libraries',
+  },
   archivedTabTitle: {
     id: 'course-authoring.studio-home.archived.tab.title',
     defaultMessage: 'Archived courses',

diff --git a/src/studio-home/tabs-section/utils.js b/src/studio-home/tabs-section/utils.js
@@ -8,5 +8,11 @@ const sortAlphabeticallyArray = (arr) => [...arr]
   .sort((firstArrayData, secondArrayData) => firstArrayData
     .displayName.localeCompare(secondArrayData.displayName));
 
-// eslint-disable-next-line import/prefer-default-export
-export { sortAlphabeticallyArray };
+const isMixedOrV1LibrariesMode = (libMode) => ['mixed', 'v1 only'].includes(libMode);
+const isMixedOrV2LibrariesMode = (libMode) => ['mixed', 'v2 only'].includes(libMode);
+
+export {
+  sortAlphabeticallyArray,
+  isMixedOrV1LibrariesMode,
+  isMixedOrV2LibrariesMode,
+};