feat: Create MFE page with base structure for schedule and details

.env

@@ -44,3 +44,4 @@ BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=false
+INVITE_STUDENTS_EMAIL_TO=''

.env.development

@@ -34,7 +34,7 @@ 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_SCHEDULE_DETAILS_PAGE = true
 ENABLE_NEW_GRADING_PAGE = false
 ENABLE_NEW_COURSE_TEAM_PAGE = false
 ENABLE_NEW_ADVANCED_SETTINGS_PAGE = true
@@ -46,3 +46,4 @@ BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=true
+INVITE_STUDENTS_EMAIL_TO="someone@domain.com"

.env.test

@@ -42,3 +42,4 @@ ENABLE_NEW_EXPORT_PAGE = true
 ENABLE_UNIT_PAGE = true
 ENABLE_NEW_CUSTOM_PAGES = true
 BBB_LEARN_MORE_URL=''
+INVITE_STUDENTS_EMAIL_TO="someone@domain.com"

src/CourseAuthoringRoutes.jsx

@@ -9,6 +9,7 @@ import ProctoredExamSettings from './proctored-exam-settings/ProctoredExamSettin
 import EditorContainer from './editors/EditorContainer';
 import VideoSelectorContainer from './selectors/VideoSelectorContainer';
 import { AdvancedSettings } from './advanced-settings';
+import ScheduleAndDetails from './schedule-and-details';
 
 /**
  * As of this writing, these routes are mounted at a path prefixed with the following:
@@ -92,7 +93,7 @@ const CourseAuthoringRoutes = ({ courseId }) => {
         <PageRoute path={`${path}/settings/details`}>
           {process.env.ENABLE_NEW_SCHEDULE_DETAILS_PAGE === 'true'
             && (
-              <Placeholder />
+              <ScheduleAndDetails courseId={courseId} />
             )}
         </PageRoute>
         <PageRoute path={`${path}/settings/grading`}>

src/advanced-settings/AdvancedSettings.jsx

@@ -13,7 +13,7 @@ import {
   getCourseAppSettings, getSavingStatus, getProctoringExamErrors, getSendRequestErrors,
 } from './data/selectors';
 import SettingCard from './setting-card/SettingCard';
-import SettingAlert from './setting-alert/SettingAlert';
+import AlertMessage from '../generic/alert-message';
 import SettingsSidebar from './settings-sidebar/SettingsSidebar';
 import validateAdvancedSettingsData from './utils';
 import messages from './messages';
@@ -91,7 +91,7 @@ const AdvancedSettings = ({ intl, courseId }) => {
               aria-describedby={intl.formatMessage(messages.alertProctoringDescribedby)}
             />
           )}
-          <SettingAlert
+          <AlertMessage
             show={showSuccessAlert}
             variant="success"
             icon={CheckCircle}
@@ -172,7 +172,7 @@ const AdvancedSettings = ({ intl, courseId }) => {
         </section>
       </Container>
       <div className="alert-toast">
-        <SettingAlert
+        <AlertMessage
           show={saveSettingsPrompt}
           aria-hidden={saveSettingsPrompt}
           aria-labelledby={intl.formatMessage(messages.alertWarningAriaLabelledby)}

src/advanced-settings/AdvancedSettings.test.jsx

@@ -31,6 +31,14 @@ jest.mock('./data/selectors', () => ({
   getProctoringExamErrors: jest.fn(),
 }));
 
+const mockPathname = '/foo-bar';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
 describe('AdvancedSettings', () => {
   const courseId = '123';
   const mockDispatch = jest.fn();
@@ -70,14 +78,14 @@ describe('AdvancedSettings', () => {
     const textarea = settingCard.find('textarea');
     textarea.simulate('change', { target: { value: 'new value' } });
     expect(textarea.text()).toBe('new value');
-    const settingAlert = wrapper.find('SettingAlert');
+    const settingAlert = wrapper.find('AlertMessage');
     expect(settingAlert.find('AlertHeading').at(0).text()).toBe('You`ve made some changes');
   });
   it('show warning alert and after click on Cancel button reset textarea value', () => {
     const settingCard = wrapper.find('SettingCard').at(0);
     const textarea = settingCard.find('textarea');
     textarea.simulate('change', { target: { value: 'new value' } });
-    const settingAlert = wrapper.find('SettingAlert');
+    const settingAlert = wrapper.find('AlertMessage');
     const resetBtn = settingAlert.find('Button').at(1);
     resetBtn.simulate('click');
     expect(textarea.text()).toBe('value1');

src/advanced-settings/scss/AdvencedSettings.scss → src/advanced-settings/scss/AdvancedSettings.scss

@@ -97,40 +97,6 @@
   }
 }
 
-.setting-sidebar-supplementary {
-  margin-top: 1.875rem;
-
-  .setting-sidebar-supplementary-about {
-    .setting-sidebar-supplementary-about-title {
-      font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
-      color: $headings-color;
-      margin-bottom: 1.25rem;
-    }
-
-    .setting-sidebar-supplementary-about-descriptions {
-      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
-      color: $text-color-base;
-    }
-  }
-
-  .setting-sidebar-supplementary-other-links ul {
-    list-style: none;
-
-    .setting-sidebar-supplementary-other-link {
-      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
-      line-height: 1.5rem;
-      color: $info-500;
-      margin-bottom: .5rem;
-    }
-  }
-
-  .setting-sidebar-supplementary-other-title {
-    font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
-    color: $headings-color;
-    margin-bottom: 1.25rem;
-  }
-}
-
 .modal-error-item {
   list-style: none;
 

src/advanced-settings/scss/_variables.scss

@@ -1,3 +1 @@
-$font-family-base: inter, sans-serif;
-$text-color-base: $gray-700;
 $setting-form-control-width: 34.375rem;

src/advanced-settings/settings-sidebar/SettingsSidebar.jsx

@@ -1,75 +1,34 @@
-import React, { useContext } from 'react';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
+import React from 'react';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import { Hyperlink } from '@edx/paragon';
 
-import { getPagePath } from '../../utils';
+import HelpSidebar from '../../generic/HelpSidebar';
 import messages from './messages';
 
-const SettingsSidebar = ({ intl, courseId }) => {
-  const { config } = useContext(AppContext);
-  return (
-    <aside className="setting-sidebar-supplementary">
-      <div className="setting-sidebar-supplementary-about">
-        <h4 className="setting-sidebar-supplementary-about-title">{intl.formatMessage(messages.about)}</h4>
-        <p className="setting-sidebar-supplementary-about-descriptions">
-          {intl.formatMessage(messages.aboutDescription1)}
-        </p>
-        <p className="setting-sidebar-supplementary-about-descriptions">
-          {intl.formatMessage(messages.aboutDescription2)}
-        </p>
-        <p className="setting-sidebar-supplementary-about-descriptions">
-          <FormattedMessage
-            id="course-authoring.advanced-settings.about.description-3"
-            defaultMessage="{notice} When you enter strings as policy values, ensure that you use double quotation marks (“) around the string. Do not use single quotation marks (‘)."
-            values={{ notice: <strong>Note:</strong> }}
-          />
-        </p>
-      </div>
-      <hr />
-      <div className="setting-sidebar-supplementary-other">
-        <h4 className="setting-sidebar-supplementary-other-title">{intl.formatMessage(messages.other)}</h4>
-        <nav className="setting-sidebar-supplementary-other-links" aria-label={intl.formatMessage(messages.other)}>
-          <ul className="p-0 mb-0">
-            <li className="setting-sidebar-supplementary-other-link">
-              <Hyperlink
-                rel="noopener"
-                destination={getPagePath(courseId, process.env.ENABLE_NEW_SCHEDULE_DETAILS_PAGE, 'settings/details')}
-              >
-                {intl.formatMessage(messages.otherCourseSettingsLinkToScheduleAndDetails)}
-              </Hyperlink>
-            </li>
-            <li className="setting-sidebar-supplementary-other-link">
-              <Hyperlink
-                rel="noopener"
-                destination={getPagePath(courseId, process.env.ENABLE_NEW_GRADING_PAGE, 'settings/grading')}
-              >
-                {intl.formatMessage(messages.otherCourseSettingsLinkToGrading)}
-              </Hyperlink>
-            </li>
-            <li className="setting-sidebar-supplementary-other-link">
-              <Hyperlink
-                rel="noopener"
-                destination={getPagePath(courseId, process.env.ENABLE_NEW_COURSE_TEAM_PAGE, 'course_team')}
-              >
-                {intl.formatMessage(messages.otherCourseSettingsLinkToCourseTeam)}
-              </Hyperlink>
-            </li>
-            <li className="setting-sidebar-supplementary-other-link">
-              <Hyperlink
-                rel="noopener"
-                destination={`${config.STUDIO_BASE_URL}/group_configurations/${courseId}`}
-              >
-                {intl.formatMessage(messages.otherCourseSettingsLinkToGroupConfigurations)}
-              </Hyperlink>
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </aside>
-  );
-};
+const SettingsSidebar = ({ intl, courseId }) => (
+  <HelpSidebar courseId={courseId} showOtherSettings>
+    <h4 className="help-sidebar-about-title">
+      {intl.formatMessage(messages.about)}
+    </h4>
+    <p className="help-sidebar-about-descriptions">
+      {intl.formatMessage(messages.aboutDescription1)}
+    </p>
+    <p className="help-sidebar-about-descriptions">
+      {intl.formatMessage(messages.aboutDescription2)}
+    </p>
+    <p className="help-sidebar-about-descriptions">
+      <FormattedMessage
+        id="course-authoring.advanced-settings.about.description-3"
+        defaultMessage="{notice} When you enter strings as policy values, ensure that you use double quotation marks (“) around the string. Do not use single quotation marks (‘)."
+        values={{ notice: <strong>Note:</strong> }}
+      />
+    </p>
+  </HelpSidebar>
+);
 
 SettingsSidebar.propTypes = {
   intl: intlShape.isRequired,

src/advanced-settings/settings-sidebar/SettingsSidebar.test.jsx

@@ -4,6 +4,14 @@ import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import SettingsSidebar from './SettingsSidebar';
 
+const mockPathname = '/foo-bar';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
 describe('SettingsSidebar', () => {
   const config = { STUDIO_BASE_URL: 'https://example.com' };
   const courseId = 'course123';

src/advanced-settings/settings-sidebar/__snapshots__/SettingsSidebar.test.jsx.snap

@@ -2,28 +2,28 @@
 
 exports[`SettingsSidebar should match the snapshot 1`] = `
 <aside
-  className="setting-sidebar-supplementary"
+  className="help-sidebar"
 >
   <div
-    className="setting-sidebar-supplementary-about"
+    className="help-sidebar-about"
   >
     <h4
-      className="setting-sidebar-supplementary-about-title"
+      className="help-sidebar-about-title"
     >
       What do advanced settings do?
     </h4>
     <p
-      className="setting-sidebar-supplementary-about-descriptions"
+      className="help-sidebar-about-descriptions"
     >
       Advanced settings control specific course functionality. On this page, you can edit manual policies, which are JSON-based key and value pairs that control specific course settings.
     </p>
     <p
-      className="setting-sidebar-supplementary-about-descriptions"
+      className="help-sidebar-about-descriptions"
     >
       Any policies you modify here override all other information you’ve defined elsewhere in Studio. Do not edit policies unless you are familiar with both their purpose and syntax.
     </p>
     <p
-      className="setting-sidebar-supplementary-about-descriptions"
+      className="help-sidebar-about-descriptions"
     >
       <strong>
         Note:
@@ -33,22 +33,22 @@ exports[`SettingsSidebar should match the snapshot 1`] = `
   </div>
   <hr />
   <div
-    className="setting-sidebar-supplementary-other"
+    className="help-sidebar-other"
   >
     <h4
-      className="setting-sidebar-supplementary-other-title"
+      className="help-sidebar-other-title"
     >
       Other Course Settings
     </h4>
     <nav
       aria-label="Other Course Settings"
-      className="setting-sidebar-supplementary-other-links"
+      className="help-sidebar-other-links"
     >
       <ul
         className="p-0 mb-0"
       >
         <li
-          className="setting-sidebar-supplementary-other-link"
+          className="help-sidebar-other-link"
         >
           <a
             className="pgn__hyperlink default-link standalone-link"
@@ -61,7 +61,7 @@ exports[`SettingsSidebar should match the snapshot 1`] = `
           </a>
         </li>
         <li
-          className="setting-sidebar-supplementary-other-link"
+          className="help-sidebar-other-link"
         >
           <a
             className="pgn__hyperlink default-link standalone-link"
@@ -74,7 +74,7 @@ exports[`SettingsSidebar should match the snapshot 1`] = `
           </a>
         </li>
         <li
-          className="setting-sidebar-supplementary-other-link"
+          className="help-sidebar-other-link"
         >
           <a
             className="pgn__hyperlink default-link standalone-link"
@@ -86,8 +86,9 @@ exports[`SettingsSidebar should match the snapshot 1`] = `
             Course Team
           </a>
         </li>
+
         <li
-          className="setting-sidebar-supplementary-other-link"
+          className="help-sidebar-other-link"
         >
           <a
             className="pgn__hyperlink default-link standalone-link"
@@ -99,6 +100,19 @@ exports[`SettingsSidebar should match the snapshot 1`] = `
             Group Configurations
           </a>
         </li>
+        <li
+          className="help-sidebar-other-link"
+        >
+          <a
+            className="pgn__hyperlink default-link standalone-link"
+            href="/course/course123/settings/advanced"
+            onClick={[Function]}
+            rel="noopener"
+            target="_self"
+          >
+            Advanced Settings
+          </a>
+        </li>
       </ul>
     </nav>
   </div>