chore: improved SPA routes

openedx · Oct 20, 2024 · 6187a96 · 6187a96
1 parent 56e025a
commit 6187a96
Show file tree

Hide file tree

Showing 21 changed files with 255 additions and 101 deletions.
diff --git a/src/course-checklist/ChecklistSection/ChecklistItemBody.jsx b/src/course-checklist/ChecklistSection/ChecklistItemBody.jsx
@@ -1,65 +1,89 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Button,
   Hyperlink,
   Icon,
 } from '@openedx/paragon';
+import { useSelector } from 'react-redux';
 import { CheckCircle, RadioButtonUnchecked } from '@openedx/paragon/icons';
+
+import { getStudioHomeData } from '../../studio-home/data/selectors';
 import messages from './messages';
 
 const ChecklistItemBody = ({
+  courseId,
   checkId,
   isCompleted,
   updateLink,
   // injected
   intl,
-}) => (
-  <ActionRow>
-    <div className="mr-3" id={`icon-${checkId}`} data-testid={`icon-${checkId}`}>
-      {isCompleted ? (
-        <Icon
-          data-testid="completed-icon"
-          src={CheckCircle}
-          className="text-success"
-          style={{ height: '32px', width: '32px' }}
-          screenReaderText={intl.formatMessage(messages.completedItemLabel)}
-        />
-      ) : (
-        <Icon
-          data-testid="uncompleted-icon"
-          src={RadioButtonUnchecked}
-          style={{ height: '32px', width: '32px' }}
-          screenReaderText={intl.formatMessage(messages.uncompletedItemLabel)}
-        />
-      )}
-    </div>
-    <div>
-      <div>
-        <FormattedMessage {...messages[`${checkId}ShortDescription`]} />
+}) => {
+  const { waffleFlags } = useSelector(getStudioHomeData);
+  const navigate = useNavigate();
+
+  const handleClick = (e, url) => {
+    e.preventDefault();
+
+    if (waffleFlags?.ENABLE_NEW_COURSE_UPDATES_PAGE) {
+      navigate(`/course/${courseId}/course_info`);
+    } else {
+      window.location.href = url;
+    }
+  };
+
+  return (
+    <ActionRow>
+      <div className="mr-3" id={`icon-${checkId}`} data-testid={`icon-${checkId}`}>
+        {isCompleted ? (
+          <Icon
+            data-testid="completed-icon"
+            src={CheckCircle}
+            className="text-success"
+            style={{ height: '32px', width: '32px' }}
+            screenReaderText={intl.formatMessage(messages.completedItemLabel)}
+          />
+        ) : (
+          <Icon
+            data-testid="uncompleted-icon"
+            src={RadioButtonUnchecked}
+            style={{ height: '32px', width: '32px' }}
+            screenReaderText={intl.formatMessage(messages.uncompletedItemLabel)}
+          />
+        )}
       </div>
-      <div className="small">
-        <FormattedMessage {...messages[`${checkId}LongDescription`]} />
+      <div>
+        <div>
+          <FormattedMessage {...messages[`${checkId}ShortDescription`]} />
+        </div>
+        <div className="small">
+          <FormattedMessage {...messages[`${checkId}LongDescription`]} />
+        </div>
       </div>
-    </div>
-    <ActionRow.Spacer />
-    {updateLink && (
-      <Hyperlink destination={updateLink} data-testid="update-hyperlink">
-        <Button size="sm">
-          <FormattedMessage {...messages.updateLinkLabel} />
-        </Button>
-      </Hyperlink>
-    )}
-  </ActionRow>
-);
+      <ActionRow.Spacer />
+      {updateLink && (
+        <Hyperlink
+          destination={updateLink}
+          data-testid="update-hyperlink"
+          onClick={(e) => handleClick(e, updateLink)}
+        >
+          <Button size="sm">
+            <FormattedMessage {...messages.updateLinkLabel} />
+          </Button>
+        </Hyperlink>
+      )}
+    </ActionRow>
+  );
+};
 
 ChecklistItemBody.defaultProps = {
   updateLink: null,
 };
 
 ChecklistItemBody.propTypes = {
+  courseId: PropTypes.string.isRequired,
   checkId: PropTypes.string.isRequired,
   isCompleted: PropTypes.bool.isRequired,
   updateLink: PropTypes.string,

diff --git a/src/course-checklist/ChecklistSection/ChecklistSection.jsx b/src/course-checklist/ChecklistSection/ChecklistSection.jsx
@@ -10,6 +10,7 @@ import ChecklistItemComment from './ChecklistItemComment';
 import { checklistItems } from './utils/courseChecklistData';
 
 const ChecklistSection = ({
+  courseId,
   dataHeading,
   data,
   idPrefix,
@@ -46,7 +47,7 @@ const ChecklistSection = ({
                   data-testid={`checklist-item-${checkId}`}
                   key={checkId}
                 >
-                  <ChecklistItemBody {...{ checkId, isCompleted, updateLink }} />
+                  <ChecklistItemBody courseId={courseId} {...{ checkId, isCompleted, updateLink }} />
                   <div data-testid={`comment-section-${checkId}`}>
                     <ChecklistItemComment {...{ checkId, outlineUrl, data }} />
                   </div>
@@ -66,6 +67,7 @@ ChecklistSection.defaultProps = {
 };
 
 ChecklistSection.propTypes = {
+  courseId: PropTypes.string.isRequired,
   dataHeading: PropTypes.string.isRequired,
   data: PropTypes.oneOfType([
     PropTypes.shape({

diff --git a/src/course-checklist/CourseChecklist.jsx b/src/course-checklist/CourseChecklist.jsx
@@ -66,6 +66,7 @@ const CourseChecklist = ({
         />
         <Stack gap={4}>
           <ChecklistSection
+            courseId={courseId}
             dataHeading={intl.formatMessage(messages.launchChecklistLabel)}
             data={launchData}
             idPrefix="launchChecklist"

diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
@@ -8,6 +8,7 @@ import { copyToClipboard } from '../generic/data/thunks';
 import { getSavingStatus as getGenericSavingStatus } from '../generic/data/selectors';
 import { RequestStatus } from '../data/constants';
 import { COURSE_BLOCK_NAMES } from './constants';
+import { getStudioHomeData } from '../studio-home/data/selectors';
 import {
   setCurrentItem,
   setCurrentSection,
@@ -58,6 +59,7 @@ import {
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const { waffleFlags } = useSelector(getStudioHomeData);
 
   const {
     reindexLink,
@@ -112,15 +114,15 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const getUnitUrl = (locator) => {
-    if (getConfig().ENABLE_UNIT_PAGE === 'true') {
+    if (getConfig().ENABLE_UNIT_PAGE === 'true' || waffleFlags?.ENABLE_NEW_UNIT_PAGE) {
       return `/course/${courseId}/container/${locator}`;
     }
     return `${getConfig().STUDIO_BASE_URL}/container/${locator}`;
   };
 
   const openUnitPage = (locator) => {
     const url = getUnitUrl(locator);
-    if (getConfig().ENABLE_UNIT_PAGE === 'true') {
+    if (getConfig().ENABLE_UNIT_PAGE === 'true' || waffleFlags?.ENABLE_NEW_UNIT_PAGE) {
       navigate(url);
     } else {
       window.location.assign(url);

diff --git a/src/course-outline/status-bar/StatusBar.jsx b/src/course-outline/status-bar/StatusBar.jsx
@@ -1,12 +1,15 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import moment from 'moment/moment';
 import PropTypes from 'prop-types';
 import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform/config';
 import {
   Button, Hyperlink, Form, Stack, useToggle,
 } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
+import { useSelector } from 'react-redux';
+import { getStudioHomeData } from '../../studio-home/data/selectors';
 
 import { ContentTagsDrawerSheet } from '../../content-tags-drawer';
 import TagCount from '../../generic/tag-count';
@@ -43,6 +46,7 @@ const StatusBar = ({
 }) => {
   const intl = useIntl();
   const { config } = useContext(AppContext);
+  const { waffleFlags } = useSelector(getStudioHomeData);
 
   const {
     courseReleaseDate,
@@ -62,7 +66,6 @@ const StatusBar = ({
 
   const courseReleaseDateObj = moment.utc(courseReleaseDate, 'MMM DD, YYYY at HH:mm UTC', true);
   const checkListTitle = `${completedCourseLaunchChecks + completedCourseBestPracticesChecks}/${totalCourseLaunchChecks + totalCourseBestPracticesChecks}`;
-  const checklistDestination = () => new URL(`checklists/${courseId}`, config.STUDIO_BASE_URL).href;
   const scheduleDestination = () => new URL(`settings/details/${courseId}#schedule`, config.STUDIO_BASE_URL).href;
 
   const {
@@ -82,10 +85,9 @@ const StatusBar = ({
     <>
       <Stack direction="horizontal" gap={3.5} className="d-flex align-items-stretch outline-status-bar" data-testid="outline-status-bar">
         <StatusBarItem title={intl.formatMessage(messages.startDateTitle)}>
-          <Hyperlink
+          <Link
             className="small"
-            destination={scheduleDestination()}
-            showLaunchIcon={false}
+            to={waffleFlags?.ENABLE_NEW_SCHEDULE_AND_DETAILS_PAGE ? `/course/${courseId}/settings/details/#schedule` : scheduleDestination()}
           >
             {courseReleaseDateObj.isValid() ? (
               <FormattedDate
@@ -97,7 +99,7 @@ const StatusBar = ({
                 minute="numeric"
               />
             ) : courseReleaseDate}
-          </Hyperlink>
+          </Link>
         </StatusBarItem>
         <StatusBarItem title={intl.formatMessage(messages.pacingTypeTitle)}>
           <span className="small">
@@ -107,13 +109,12 @@ const StatusBar = ({
           </span>
         </StatusBarItem>
         <StatusBarItem title={intl.formatMessage(messages.checklistTitle)}>
-          <Hyperlink
+          <Link
             className="small"
-            destination={checklistDestination()}
-            showLaunchIcon={false}
+            to={`/course/${courseId}/checklists`}
           >
             {checkListTitle} {intl.formatMessage(messages.checklistCompleted)}
-          </Hyperlink>
+          </Link>
         </StatusBarItem>
         <StatusBarItem title={intl.formatMessage(messages.highlightEmailsTitle)}>
           <div className="d-flex align-items-center">

diff --git a/src/course-unit/breadcrumbs/Breadcrumbs.jsx b/src/course-unit/breadcrumbs/Breadcrumbs.jsx
@@ -1,19 +1,33 @@
 import { useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Dropdown, Icon } from '@openedx/paragon';
+import { useNavigate } from 'react-router-dom';
 import {
   ArrowDropDown as ArrowDropDownIcon,
   ChevronRight as ChevronRightIcon,
 } from '@openedx/paragon/icons';
+import { getConfig } from '@edx/frontend-platform';
 
 import { createCorrectInternalRoute } from '../../utils';
 import { getCourseSectionVertical } from '../data/selectors';
+import { getStudioHomeData } from '../../studio-home/data/selectors';
 import messages from './messages';
 
 const Breadcrumbs = () => {
   const intl = useIntl();
   const { ancestorXblocks } = useSelector(getCourseSectionVertical);
   const [section, subsection] = ancestorXblocks ?? [];
+  const navigate = useNavigate();
+  const { waffleFlags } = useSelector(getStudioHomeData);
+
+  const handleClick = (e, url) => {
+    e.preventDefault();
+    if (waffleFlags?.ENABLE_NEW_COURSE_OUTLINE_PAGE) {
+      navigate(url);
+    } else {
+      window.location.href = `${getConfig().STUDIO_BASE_URL}/${url}`;
+    }
+  };
 
   return (
     <nav className="d-flex align-center mb-2.5">
@@ -31,7 +45,7 @@ const Breadcrumbs = () => {
               {section.children.map(({ url, displayName }) => (
                 <Dropdown.Item
                   key={url}
-                  href={createCorrectInternalRoute(url)}
+                  onClick={(e) => handleClick(e, createCorrectInternalRoute(`${url}`))}
                   className="small"
                   data-testid="breadcrumbs-section-dropdown-item"
                 >
@@ -60,7 +74,7 @@ const Breadcrumbs = () => {
               {subsection.children.map(({ url, displayName }) => (
                 <Dropdown.Item
                   key={url}
-                  href={createCorrectInternalRoute(url)}
+                  onClick={(e) => handleClick(e, createCorrectInternalRoute(`${url}`))}
                   className="small"
                   data-testid="breadcrumbs-subsection-dropdown-item"
                 >

diff --git a/src/generic/help-sidebar/HelpSidebar.jsx b/src/generic/help-sidebar/HelpSidebar.jsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
+import { getStudioHomeData } from '../../studio-home/data/selectors';
 
 import { otherLinkURLParams } from './constants';
 import messages from './messages';
@@ -25,6 +26,7 @@ const HelpSidebar = ({
     scheduleAndDetails,
     groupConfigurations,
   } = otherLinkURLParams;
+  const { waffleFlags } = useSelector(getStudioHomeData);
 
   const showOtherLink = (params) => !pathname.includes(params);
   const generateLegacyURL = (urlParameter) => {
@@ -55,36 +57,46 @@ const HelpSidebar = ({
               <ul className="p-0 mb-0">
                 {showOtherLink(scheduleAndDetails) && (
                   <HelpSidebarLink
-                    pathToPage={scheduleAndDetailsDestination}
+                    pathToPage={waffleFlags?.ENABLE_NEW_SCHEDULE_AND_DETAILS_PAGE
+                      ? `/course/${courseId}/${scheduleAndDetails}` : scheduleAndDetailsDestination}
                     title={intl.formatMessage(
                       messages.sidebarLinkToScheduleAndDetails,
                     )}
+                    isNewPage={waffleFlags?.ENABLE_NEW_SCHEDULE_AND_DETAILS_PAGE}
                   />
                 )}
                 {showOtherLink(grading) && (
                   <HelpSidebarLink
-                    pathToPage={gradingDestination}
+                    pathToPage={waffleFlags?.ENABLE_NEW_GRADING_PAGE
+                      ? `/course/${courseId}/${grading}` : gradingDestination}
                     title={intl.formatMessage(messages.sidebarLinkToGrading)}
+                    isNewPage={waffleFlags?.ENABLE_NEW_GRADING_PAGE}
                   />
                 )}
                 {showOtherLink(courseTeam) && (
                   <HelpSidebarLink
-                    pathToPage={courseTeamDestination}
+                    pathToPage={waffleFlags?.ENABLE_NEW_COURSE_TEAM_PAGE
+                      ? `/course/${courseId}/${courseTeam}` : courseTeamDestination}
                     title={intl.formatMessage(messages.sidebarLinkToCourseTeam)}
+                    isNewPage={waffleFlags?.ENABLE_NEW_COURSE_TEAM_PAGE}
                   />
                 )}
                 {showOtherLink(groupConfigurations) && (
                   <HelpSidebarLink
-                    pathToPage={groupConfigurationsDestination}
+                    pathToPage={waffleFlags?.ENABLE_NEW_GROUP_CONFIGURATIONS_PAGE
+                      ? `/course/${courseId}/${groupConfigurations}` : groupConfigurationsDestination}
                     title={intl.formatMessage(
                       messages.sidebarLinkToGroupConfigurations,
                     )}
+                    isNewPage={waffleFlags?.ENABLE_NEW_GROUP_CONFIGURATIONS_PAGE}
                   />
                 )}
                 {showOtherLink(advancedSettings) && (
                   <HelpSidebarLink
-                    pathToPage={advancedSettingsDestination}
+                    pathToPage={waffleFlags?.ENABLE_NEW_ADVANCED_SETTINGS_PAGE
+                      ? `/course/${courseId}/${advancedSettings}` : advancedSettingsDestination}
                     title={intl.formatMessage(messages.sidebarLinkToAdvancedSettings)}
+                    isNewPage={waffleFlags?.ENABLE_NEW_ADVANCED_SETTINGS_PAGE}
                   />
                 )}
                 {proctoredExamSettingsUrl && (