feat: Added Schedule and Details MFE page

.env

@@ -35,7 +35,6 @@ 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_IMPORT_PAGE = false
@@ -46,3 +45,4 @@ BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=false
+INVITE_STUDENTS_EMAIL_TO=''

.env.development

@@ -37,7 +37,6 @@ 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_IMPORT_PAGE = false
@@ -48,3 +47,4 @@ BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=true
+INVITE_STUDENTS_EMAIL_TO="someone@domain.com"

.env.test

@@ -33,11 +33,11 @@ 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_IMPORT_PAGE = true
 ENABLE_NEW_EXPORT_PAGE = true
 ENABLE_UNIT_PAGE = true
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = true
 BBB_LEARN_MORE_URL=''
+INVITE_STUDENTS_EMAIL_TO="someone@domain.com"

package.json

@@ -37,7 +37,7 @@
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
     "@edx/frontend-component-footer": "12.0.0",
     "@edx/frontend-enterprise-hotjar": "^1.2.1",
-    "@edx/frontend-lib-content-components": "^1.163.1",
+    "@edx/frontend-lib-content-components": "^1.167.0",
     "@edx/frontend-platform": "4.2.0",
     "@edx/paragon": "^20.32.0",
     "@fortawesome/fontawesome-svg-core": "1.2.28",
@@ -54,6 +54,7 @@
     "moment": "2.29.2",
     "prop-types": "15.7.2",
     "react": "16.14.0",
+    "react-datepicker": "^4.13.0",
     "react-dom": "16.14.0",
     "react-helmet": "^6.1.0",
     "react-redux": "7.1.3",

src/CourseAuthoringRoutes.jsx

@@ -10,6 +10,7 @@ import EditorContainer from './editors/EditorContainer';
 import VideoSelectorContainer from './selectors/VideoSelectorContainer';
 import CustomPages from './custom-pages';
 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:
@@ -88,10 +89,7 @@ const CourseAuthoringRoutes = ({ courseId }) => {
             )}
         </PageRoute>
         <PageRoute path={`${path}/settings/details`}>
-          {process.env.ENABLE_NEW_SCHEDULE_DETAILS_PAGE === 'true'
-            && (
-              <Placeholder />
-            )}
+          <ScheduleAndDetails courseId={courseId} />
         </PageRoute>
         <PageRoute path={`${path}/settings/grading`}>
           {process.env.ENABLE_NEW_GRADING_PAGE === 'true'

src/CourseAuthoringRoutes.test.jsx

@@ -14,6 +14,17 @@ const videoSelectorContainerMockText = 'Video Selector Container';
 const customPagesMockText = 'Custom Pages';
 let store;
 const mockComponentFn = jest.fn();
+
+// Mock the TinyMceWidget from frontend-lib-content-components
+jest.mock('@edx/frontend-lib-content-components', () => ({
+  TinyMceWidget: () => <div>Widget</div>,
+  Footer: () => <div>Footer</div>,
+  prepareEditorRef: jest.fn(() => ({
+    refReady: true,
+    setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
+  })),
+}));
+
 jest.mock('react-router', () => ({
   ...jest.requireActual('react-router'),
   useRouteMatch: () => ({

src/advanced-settings/AdvancedSettings.jsx

@@ -55,6 +55,10 @@ const AdvancedSettings = ({ intl, courseId }) => {
     },
     disabledStates: ['pending'],
   };
+  const {
+    proctoringErrors,
+    mfeProctoredExamSettingsUrl,
+  } = proctoringExamErrors;
 
   useEffect(() => {
     if (savingStatus === RequestStatus.SUCCESSFUL) {
@@ -123,10 +127,10 @@ const AdvancedSettings = ({ intl, courseId }) => {
     <>
       <Container size="xl" className="px-4">
         <div className="setting-header mt-5">
-          {(proctoringExamErrors?.length > 0) && (
+          {(proctoringErrors?.length > 0) && (
             <AlertProctoringError
               icon={Info}
-              proctoringErrorsData={proctoringExamErrors}
+              proctoringErrorsData={proctoringErrors}
               aria-hidden="true"
               aria-labelledby={intl.formatMessage(messages.alertProctoringAriaLabelledby)}
               aria-describedby={intl.formatMessage(messages.alertProctoringDescribedby)}
@@ -215,7 +219,10 @@ const AdvancedSettings = ({ intl, courseId }) => {
               </article>
             </Layout.Element>
             <Layout.Element>
-              <SettingsSidebar courseId={courseId} />
+              <SettingsSidebar
+                courseId={courseId}
+                proctoredExamSettingsUrl={mfeProctoredExamSettingsUrl}
+              />
             </Layout.Element>
           </Layout>
         </section>

src/advanced-settings/data/selectors.js

@@ -1,5 +1,5 @@
 export const getLoadingStatus = (state) => state.advancedSettings.loadingStatus;
 export const getCourseAppSettings = state => state.advancedSettings.courseAppSettings;
 export const getSavingStatus = (state) => state.advancedSettings.savingStatus;
-export const getProctoringExamErrors = (state) => state.advancedSettings.proctoringErrors.proctoringErrors;
+export const getProctoringExamErrors = (state) => state.advancedSettings.proctoringErrors;
 export const getSendRequestErrors = (state) => state.advancedSettings.sendRequestErrors.developer_message;