feat: add new header and page routes (#501)

2023-05-18 17:08:38 -04:00
parent ff6a5d99d6
commit 738f501cf9
6 changed files with 142 additions and 13 deletions
--- a/.env
+++ b/.env
@@ -27,6 +27,19 @@ USER_INFO_COOKIE_NAME=''
 ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_NEW_EDITOR_PAGES=true
+ENABLE_NEW_HOME_PAGE = false
+ENABLE_NEW_COURSE_OUTLINE_PAGE = false
+ENABLE_NEW_UPDATES_PAGE = false
+ENABLE_NEW_FILES_UPLOADS_PAGE = false
+ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
+ENABLE_NEW_SCHEDULE_DETAILS_PAGE = false
+ENABLE_NEW_GRADING_PAGE = false
+ENABLE_NEW_COURSE_TEAM_PAGE = false
+ENABLE_NEW_ADVANCED_SETTINGS_PAGE = false
+ENABLE_NEW_IMPORT_PAGE = false
+ENABLE_NEW_EXPORT_PAGE = false
+ENABLE_UNIT_PAGE = false
+ENABLE_NEW_CUSTOM_PAGES = false
 BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
--- a/.env.development
+++ b/.env.development
@@ -29,6 +29,19 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_NEW_EDITOR_PAGES=true
+ENABLE_NEW_HOME_PAGE = false
+ENABLE_NEW_COURSE_OUTLINE_PAGE = false
+ENABLE_NEW_UPDATES_PAGE = false
+ENABLE_NEW_FILES_UPLOADS_PAGE = false
+ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
+ENABLE_NEW_SCHEDULE_DETAILS_PAGE = false
+ENABLE_NEW_GRADING_PAGE = false
+ENABLE_NEW_COURSE_TEAM_PAGE = false
+ENABLE_NEW_ADVANCED_SETTINGS_PAGE = false
+ENABLE_NEW_IMPORT_PAGE = false
+ENABLE_NEW_EXPORT_PAGE = false
+ENABLE_UNIT_PAGE = false
+ENABLE_NEW_CUSTOM_PAGES = false
 BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
--- a/.env.test
+++ b/.env.test
@@ -28,4 +28,17 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 ENABLE_PROGRESS_GRAPH_SETTINGS=false
 ENABLE_TEAM_TYPE_SETTING=false
 ENABLE_NEW_EDITOR_PAGES=true
+ENABLE_NEW_HOME_PAGE = false
+ENABLE_NEW_COURSE_OUTLINE_PAGE = true
+ENABLE_NEW_UPDATES_PAGE = true
+ENABLE_NEW_FILES_UPLOADS_PAGE = true
+ENABLE_NEW_VIDEO_UPLOAD_PAGE = true
+ENABLE_NEW_SCHEDULE_DETAILS_PAGE = true
+ENABLE_NEW_GRADING_PAGE = true
+ENABLE_NEW_COURSE_TEAM_PAGE = true
+ENABLE_NEW_ADVANCED_SETTINGS_PAGE = true
+ENABLE_NEW_IMPORT_PAGE = true
+ENABLE_NEW_EXPORT_PAGE = true
+ENABLE_UNIT_PAGE = true
+ENABLE_NEW_CUSTOM_PAGES = true
 BBB_LEARN_MORE_URL=''
--- a/src/CourseAuthoringRoutes.jsx
+++ b/src/CourseAuthoringRoutes.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Switch, useRouteMatch } from 'react-router';
 import { PageRoute } from '@edx/frontend-platform/react';
+import Placeholder from '@edx/frontend-lib-content-components';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';
 import ProctoredExamSettings from './proctored-exam-settings/ProctoredExamSettings';
@@ -29,12 +30,48 @@ const CourseAuthoringRoutes = ({ courseId }) => {
  return (
    <CourseAuthoringPage courseId={courseId}>
      <Switch>
+        <PageRoute path={`${path}/outline`}>
+          {process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
+        <PageRoute path={`${path}/course_info`}>
+          {process.env.ENABLE_NEW_UPDATES_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
+        <PageRoute path={`${path}/assets`}>
+          {process.env.ENABLE_NEW_FILES_UPLOADS_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
+        <PageRoute path={`${path}/videos`}>
+          {process.env.ENABLE_NEW_VIDEO_UPLOAD_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
        <PageRoute path={`${path}/pages-and-resources`}>
          <PagesAndResources courseId={courseId} />
        </PageRoute>
        <PageRoute path={`${path}/proctored-exam-settings`}>
          <ProctoredExamSettings courseId={courseId} />
        </PageRoute>
+        <PageRoute path={`${path}/custom_pages`}>
+          {process.env.ENABLE_NEW_CUSTOM_PAGES === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
+        <PageRoute path={`${path}//:blockType/:blockId?`}>
+          {process.env.ENABLE_UNIT_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
        <PageRoute path={`${path}/editor/course-videos/:blockId`}>
          {process.env.ENABLE_NEW_EDITOR_PAGES === 'true'
            && (
@@ -51,6 +88,42 @@ const CourseAuthoringRoutes = ({ courseId }) => {
            />
            )}
        </PageRoute>
+        <PageRoute path={`${path}/settings/details`}>
+          {process.env.ENABLE_NEW_SCHEDULE_DETAILS_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
+        <PageRoute path={`${path}/settings/grading`}>
+          {process.env.ENABLE_NEW_GRADING_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
+        <PageRoute path={`${path}/course_team`}>
+          {process.env.ENABLE_NEW_COURSE_TEAM_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
+        <PageRoute path={`${path}/settings/advanced`}>
+          {process.env.ENABLE_NEW_ADVANCED_SETTINGS_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
+        <PageRoute path={`${path}/import`}>
+          {process.env.ENABLE_NEW_IMPORT_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
+        <PageRoute path={`${path}/export`}>
+          {process.env.ENABLE_NEW_EXPORT_PAGE === 'true'
+            && (
+            <Placeholder />
+            )}
+        </PageRoute>
      </Switch>
    </CourseAuthoringPage>
  );
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -11,6 +11,7 @@ import { Route, Switch } from 'react-router-dom';

 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 import { logError } from '@edx/frontend-platform/logging';
+import Placeholder from '@edx/frontend-lib-content-components';
 import messages from './i18n';

 import initializeStore from './store';
@@ -37,6 +38,12 @@ const App = () => {
    <AppProvider store={initializeStore()}>
      <Head />
      <Switch>
+        <Route path="/home">
+          {process.env.ENABLE_NEW_HOME_PAGE === 'true'
+              && (
+              <Placeholder />
+              )}
+        </Route>
        <Route
          path="/course/:courseId"
          render={({ match }) => {
--- a/src/studio-header/Header.jsx
+++ b/src/studio-header/Header.jsx
@@ -27,6 +27,16 @@ const Header = ({
 }) => {
  const { authenticatedUser, config } = useContext(AppContext);

+  const getPagePath = (isMfePageEnabled, urlParameter) => {
+    if (isMfePageEnabled === 'true') {
+      if (urlParameter === 'tabs') {
+        return `/course/${courseId}/pages-and-resources`;
+      }
+      return `/course/${courseId}/${urlParameter}`;
+    }
+    return `${config.STUDIO_BASE_URL}/${urlParameter}/${courseId}`;
+  };
+
  const mainMenu = [
    {
      type: 'submenu',
@@ -34,22 +44,22 @@ const Header = ({
      submenuContent: (
        <>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/course/${courseId}`}>{intl.formatMessage(messages['header.links.outline'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE, 'course')}>{intl.formatMessage(messages['header.links.outline'])}</a>
          </div>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/course_info/${courseId}`}>{intl.formatMessage(messages['header.links.updates'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_UPDATES_PAGE, 'course_info')}>{intl.formatMessage(messages['header.links.updates'])}</a>
          </div>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/tabs/${courseId}`}>{intl.formatMessage(messages['header.links.pages'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_CUSTOM_PAGES, 'tabs')}>{intl.formatMessage(messages['header.links.pages'])}</a>
          </div>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/assets/${courseId}`}>{intl.formatMessage(messages['header.links.filesAndUploads'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_FILES_UPLOADS_PAGE, 'assets')}>{intl.formatMessage(messages['header.links.filesAndUploads'])}</a>
          </div>
          <div className="mb-1 small">
            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/textbooks/${courseId}`}>{intl.formatMessage(messages['header.links.textbooks'])}</a>
          </div>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/videos/${courseId}`}>{intl.formatMessage(messages['header.links.videoUploads'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_VIDEO_UPLOAD_PAGE, 'videos')}>{intl.formatMessage(messages['header.links.videoUploads'])}</a>
          </div>
        </>
      ),
@@ -60,19 +70,19 @@ const Header = ({
      submenuContent: (
        <>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/details/${courseId}`}>{intl.formatMessage(messages['header.links.scheduleAndDetails'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_SCHEDULE_DETAILS_PAGE, 'settings/details')}>{intl.formatMessage(messages['header.links.scheduleAndDetails'])}</a>
          </div>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/grading/${courseId}`}>{intl.formatMessage(messages['header.links.grading'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_GRADING_PAGE, 'settings/grading')}>{intl.formatMessage(messages['header.links.grading'])}</a>
          </div>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/course_team/${courseId}`}>{intl.formatMessage(messages['header.links.courseTeam'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_COURSE_TEAM_PAGE, 'course_team')}>{intl.formatMessage(messages['header.links.courseTeam'])}</a>
          </div>
          <div className="mb-1 small">
            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/group_configurations/${courseId}`}>{intl.formatMessage(messages['header.links.groupConfigurations'])}</a>
          </div>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/advanced/${courseId}`}>{intl.formatMessage(messages['header.links.advancedSettings'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_ADVANCED_SETTINGS_PAGE, 'settings/advanced')}>{intl.formatMessage(messages['header.links.advancedSettings'])}</a>
          </div>
          <div className="mb-1 small">
            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/certificates/${courseId}`}>{intl.formatMessage(messages['header.links.certificates'])}</a>
@@ -86,10 +96,10 @@ const Header = ({
      submenuContent: (
        <>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/import/${courseId}`}>{intl.formatMessage(messages['header.links.import'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_IMPORT_PAGE, 'import')}>{intl.formatMessage(messages['header.links.import'])}</a>
          </div>
          <div className="mb-1 small">
-            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/export/${courseId}`}>{intl.formatMessage(messages['header.links.export'])}</a>
+            <a rel="noopener" href={getPagePath(process.env.ENABLE_NEW_EXPORT_PAGE, 'export')}>{intl.formatMessage(messages['header.links.export'])}</a>
          </div>
          <div className="mb-1 small">
            <a rel="noopener" href={`${config.STUDIO_BASE_URL}/checklists/${courseId}`}>{intl.formatMessage(messages['header.links.checklists'])}</a>
@@ -143,7 +153,7 @@ const Header = ({
    >
      <a
        className="course-title-lockup w-25"
-        href={`${config.STUDIO_BASE_URL}/course/${courseId}`}
+        href={getPagePath(process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE, 'course')}
        aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
      >
        <span className="d-block small m-0" data-testid="course-org-number">{courseOrg} {courseNumber}</span>
@@ -156,7 +166,7 @@ const Header = ({
    logo: config.LOGO_URL,
    logoAltText: 'Studio edX',
    siteName: 'edX',
-    logoDestination: config.STUDIO_BASE_URL,
+    logoDestination: process.env.ENABLE_NEW_HOME_PAGE === 'true' ? '/home' : config.STUDIO_BASE_URL,
    courseLockUp,
    courseId,
    username: authenticatedUser !== null ? authenticatedUser.username : null,