feat: [FC-0070] Remove backend redirects (use SPA functionality) (#1372)

Introduces the ability to utilize SPA functionality when the relevant waffle flags are enabled for current MFE pages. When any new MFE page is loaded, a request is made to retrieve the waffle flags. This includes both global waffle flags related to MFE Authoring pages, as well as waffle flags specific to the current course.

src/header/Header.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import { useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { StudioHeader } from '@edx/frontend-component-header';
 import { type Container, useToggle } from '@openedx/paragon';
 import { generatePath, useHref } from 'react-router-dom';
 
+import { getWaffleFlags } from '../data/selectors';
 import { SearchModal } from '../search-modal';
 import { useContentMenuItems, useSettingMenuItems, useToolsMenuItems } from './hooks';
 import messages from './messages';
@@ -32,6 +33,7 @@ const Header = ({
 }: HeaderProps) => {
   const intl = useIntl();
   const libraryHref = useHref('/library/:libraryId');
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
 
@@ -59,9 +61,12 @@ const Header = ({
     },
   ] : [];
 
-  const outlineLink = !isLibrary
-    ? `${studioBaseUrl}/course/${contextId}`
-    : generatePath(libraryHref, { libraryId: contextId });
+  const getOutlineLink = () => {
+    if (isLibrary) {
+      return generatePath(libraryHref, { libraryId: contextId });
+    }
+    return waffleFlags.useNewCourseOutlinePage ? `/course/${contextId}` : `${studioBaseUrl}/course/${contextId}`;
+  };
 
   return (
     <>
@@ -71,9 +76,10 @@ const Header = ({
         title={title}
         isHiddenMainMenu={isHiddenMainMenu}
         mainMenuDropdowns={mainMenuDropdowns}
-        outlineLink={outlineLink}
+        outlineLink={getOutlineLink()}
         searchButtonAction={meiliSearchEnabled ? openSearchModal : undefined}
         containerProps={containerProps}
+        isNewHomePage={waffleFlags.useNewHomePage}
       />
       {meiliSearchEnabled && (
         <SearchModal

src/header/hooks.js

@@ -1,21 +1,24 @@
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
+
 import { getPagePath } from '../utils';
+import { getWaffleFlags } from '../data/selectors';
 import { getStudioHomeData } from '../studio-home/data/selectors';
 import messages from './messages';
 
 export const useContentMenuItems = courseId => {
   const intl = useIntl();
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const items = [
     {
-      href: `${studioBaseUrl}/course/${courseId}`,
+      href: waffleFlags.useNewCourseOutlinePage ? `/course/${courseId}` : `${studioBaseUrl}/course/${courseId}`,
       title: intl.formatMessage(messages['header.links.outline']),
     },
     {
-      href: `${studioBaseUrl}/course_info/${courseId}`,
+      href: waffleFlags.useNewUpdatesPage ? `/course/${courseId}/course_info` : `${studioBaseUrl}/course_info/${courseId}`,
       title: intl.formatMessage(messages['header.links.updates']),
     },
     {
@@ -23,13 +26,13 @@ export const useContentMenuItems = courseId => {
       title: intl.formatMessage(messages['header.links.pages']),
     },
     {
-      href: `${studioBaseUrl}/assets/${courseId}`,
+      href: waffleFlags.useNewFilesUploadsPage ? `/course/${courseId}/assets` : `${studioBaseUrl}/assets/${courseId}`,
       title: intl.formatMessage(messages['header.links.filesAndUploads']),
     },
   ];
-  if (getConfig().ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN === 'true') {
+  if (getConfig().ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN === 'true' || waffleFlags.useNewVideoUploadsPage) {
     items.push({
-      href: `${studioBaseUrl}/videos/${courseId}`,
+      href: `/course/${courseId}/videos`,
       title: intl.formatMessage(messages['header.links.videoUploads']),
     });
   }
@@ -41,34 +44,35 @@ export const useSettingMenuItems = courseId => {
   const intl = useIntl();
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
   const { canAccessAdvancedSettings } = useSelector(getStudioHomeData);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const items = [
     {
-      href: `${studioBaseUrl}/settings/details/${courseId}`,
+      href: waffleFlags.useNewScheduleDetailsPage ? `/course/${courseId}/settings/details` : `${studioBaseUrl}/settings/details/${courseId}`,
       title: intl.formatMessage(messages['header.links.scheduleAndDetails']),
     },
     {
-      href: `${studioBaseUrl}/settings/grading/${courseId}`,
+      href: waffleFlags.useNewGradingPage ? `/course/${courseId}/settings/grading` : `${studioBaseUrl}/settings/grading/${courseId}`,
       title: intl.formatMessage(messages['header.links.grading']),
     },
     {
-      href: `${studioBaseUrl}/course_team/${courseId}`,
+      href: waffleFlags.useNewCourseTeamPage ? `/course/${courseId}/course_team` : `${studioBaseUrl}/course_team/${courseId}`,
       title: intl.formatMessage(messages['header.links.courseTeam']),
     },
     {
-      href: `${studioBaseUrl}/group_configurations/${courseId}`,
+      href: waffleFlags.useNewGroupConfigurationsPage ? `/course/${courseId}/group_configurations` : `${studioBaseUrl}/group_configurations/${courseId}`,
       title: intl.formatMessage(messages['header.links.groupConfigurations']),
     },
     ...(canAccessAdvancedSettings === true
       ? [{
-        href: `${studioBaseUrl}/settings/advanced/${courseId}`,
+        href: waffleFlags.useNewAdvancedSettingsPage ? `/course/${courseId}/settings/advanced` : `${studioBaseUrl}/settings/advanced/${courseId}`,
         title: intl.formatMessage(messages['header.links.advancedSettings']),
       }] : []
     ),
   ];
-  if (getConfig().ENABLE_CERTIFICATE_PAGE === 'true') {
+  if (getConfig().ENABLE_CERTIFICATE_PAGE === 'true' || waffleFlags.useNewCertificatesPage) {
     items.push({
-      href: `${studioBaseUrl}/certificates/${courseId}`,
+      href: `/course/${courseId}/certificates`,
       title: intl.formatMessage(messages['header.links.certificates']),
     });
   }
@@ -78,14 +82,15 @@ export const useSettingMenuItems = courseId => {
 export const useToolsMenuItems = courseId => {
   const intl = useIntl();
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const items = [
     {
-      href: `${studioBaseUrl}/import/${courseId}`,
+      href: waffleFlags.useNewImportPage ? `/course/${courseId}/import` : `${studioBaseUrl}/import/${courseId}`,
       title: intl.formatMessage(messages['header.links.import']),
     },
     {
-      href: `${studioBaseUrl}/export/${courseId}`,
+      href: waffleFlags.useNewExportPage ? `/course/${courseId}/export` : `${studioBaseUrl}/export/${courseId}`,
       title: intl.formatMessage(messages['header.links.exportCourse']),
     },
     ...(getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true'
@@ -95,7 +100,7 @@ export const useToolsMenuItems = courseId => {
       }] : []
     ),
     {
-      href: `${studioBaseUrl}/checklists/${courseId}`,
+      href: `/course/${courseId}/checklists`,
       title: intl.formatMessage(messages['header.links.checklists']),
     },
   ];