feat: create organization filter on home page

.env

@@ -33,7 +33,6 @@ 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

.env.test

@@ -31,7 +31,6 @@ 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

package.json

@@ -38,9 +38,9 @@
     "@edx/brand": "npm:@edx/[email protected]",
     "@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.169.0",
     "@edx/frontend-platform": "4.2.0",
-    "@edx/paragon": "^20.32.0",
+    "@edx/paragon": "^20.45.4",
     "@fortawesome/fontawesome-svg-core": "1.2.28",
     "@fortawesome/free-brands-svg-icons": "5.11.2",
     "@fortawesome/free-regular-svg-icons": "5.11.2",
@@ -52,6 +52,7 @@
     "core-js": "3.8.1",
     "email-validator": "2.0.4",
     "formik": "2.2.6",
+    "jszip": "^3.10.1",
     "lodash": "4.17.21",
     "moment": "2.29.2",
     "prop-types": "15.7.2",

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 CustomPages from './custom-pages';
+import FilesAndUploads from './files-and-uploads';
 import { AdvancedSettings } from './advanced-settings';
 import { CourseOutline } from './course-outline';
 import ScheduleAndDetails from './schedule-and-details';
@@ -51,10 +52,7 @@ const CourseAuthoringRoutes = ({ courseId }) => {
             )}
         </PageRoute>
         <PageRoute path={`${path}/assets`}>
-          {process.env.ENABLE_NEW_FILES_UPLOADS_PAGE === 'true'
-            && (
-              <Placeholder />
-            )}
+          <FilesAndUploads courseId={courseId} />
         </PageRoute>
         <PageRoute path={`${path}/videos`}>
           {process.env.ENABLE_NEW_VIDEO_UPLOAD_PAGE === 'true'

src/CourseAuthoringRoutes.test.jsx

@@ -28,6 +28,7 @@ jest.mock('@tinymce/tinymce-react', () => {
 // 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'),
@@ -74,9 +75,7 @@ describe('<CourseAuthoringRoutes>', () => {
     store = initializeStore();
   });
 
-  // TODO: This test needs to be corrected.
-  // The problem arose after moving new commits (https://github.com/raccoongang/frontend-app-course-authoring/pull/25)
-  it.skip('renders the PagesAndResources component when the pages and resources route is active', () => {
+  it('renders the PagesAndResources component when the pages and resources route is active', () => {
     render(
       <AppProvider store={store}>
         <MemoryRouter initialEntries={[`/course/${courseId}/pages-and-resources`]}>
@@ -94,9 +93,7 @@ describe('<CourseAuthoringRoutes>', () => {
     );
   });
 
-  // TODO: This test needs to be corrected.
-  // The problem arose after moving new commits (https://github.com/raccoongang/frontend-app-course-authoring/pull/25)
-  it.skip('renders the ProctoredExamSettings component when the proctored exam settings route is active', () => {
+  it('renders the ProctoredExamSettings component when the proctored exam settings route is active', () => {
     render(
       <AppProvider store={store}>
         <MemoryRouter initialEntries={[`/course/${courseId}/proctored-exam-settings`]}>

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;

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

@@ -9,8 +9,12 @@ import PropTypes from 'prop-types';
 import HelpSidebar from '../../generic/help-sidebar';
 import messages from './messages';
 
-const SettingsSidebar = ({ intl, courseId }) => (
-  <HelpSidebar courseId={courseId} showOtherSettings>
+const SettingsSidebar = ({ intl, courseId, proctoredExamSettingsUrl }) => (
+  <HelpSidebar
+    courseId={courseId}
+    proctoredExamSettingsUrl={proctoredExamSettingsUrl}
+    showOtherSettings
+  >
     <h4 className="help-sidebar-about-title">
       {intl.formatMessage(messages.about)}
     </h4>
@@ -30,9 +34,14 @@ const SettingsSidebar = ({ intl, courseId }) => (
   </HelpSidebar>
 );
 
+SettingsSidebar.defaultProps = {
+  proctoredExamSettingsUrl: '',
+};
+
 SettingsSidebar.propTypes = {
   intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
+  proctoredExamSettingsUrl: PropTypes.string,
 };
 
 export default injectIntl(SettingsSidebar);

src/assets/scss/_form.scss

@@ -79,3 +79,14 @@
     color: $black;
   }
 }
+
+.dropdown-group-wrapper {
+  position: relative;
+  z-index: $zindex-dropdown;
+  margin-left: auto;
+
+  .dropdown-container {
+    position: absolute;
+    width: 100%;
+  }
+}

src/constants.js

@@ -23,3 +23,10 @@ export const NOTIFICATION_MESSAGES = {
   duplicating: 'Duplicating',
   deleting: 'Deleting',
 };
+
+export const COURSE_CREATOR_STATUSES = {
+  unrequested: 'unrequested',
+  pending: 'pending',
+  granted: 'granted',
+  denied: 'denied',
+};