feat: WIP adding move modal

.env

@@ -42,3 +42,4 @@ INVITE_STUDENTS_EMAIL_TO=''
 AI_TRANSLATIONS_BASE_URL=''
 ENABLE_HOME_PAGE_COURSE_API_V2=false
 ENABLE_CHECKLIST_QUALITY=''
+SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=null

.env.development

@@ -45,3 +45,4 @@ INVITE_STUDENTS_EMAIL_TO="[email protected]"
 AI_TRANSLATIONS_BASE_URL='http://localhost:18760'
 ENABLE_HOME_PAGE_COURSE_API_V2=false
 ENABLE_CHECKLIST_QUALITY=true
+SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=/xblock-bootstrap.html

.env.test

@@ -36,3 +36,4 @@ BBB_LEARN_MORE_URL=''
 INVITE_STUDENTS_EMAIL_TO="[email protected]"
 ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
+SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=/xblock-bootstrap.html

.gitignore

@@ -20,6 +20,7 @@ temp/babel-plugin-react-intl
 /temp
 /.vscode
 /module.config.js
+/module.dev-tutor.config.js
 
 # Local environment overrides
 .env.private

package.json

@@ -109,6 +109,7 @@
     "@testing-library/user-event": "^13.2.1",
     "axios": "^0.28.0",
     "axios-mock-adapter": "1.22.0",
+    "copy-webpack-plugin": "^11.0.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "fetch-mock-jest": "^1.5.1",
     "glob": "7.2.3",

src/CourseAuthoringRoutes.jsx

@@ -23,6 +23,7 @@ import CourseImportPage from './import-page/CourseImportPage';
 import { DECODED_ROUTES } from './constants';
 import CourseChecklist from './course-checklist';
 import GroupConfigurations from './group-configurations';
+import { Textbooks } from './textbooks';
 
 /**
  * As of this writing, these routes are mounted at a path prefixed with the following:
@@ -125,6 +126,10 @@ const CourseAuthoringRoutes = () => {
           path="certificates"
           element={<PageWrap><Certificates courseId={courseId} /></PageWrap>}
         />
+        <Route
+          path="/pages-and-resources/textbooks"
+          element={<PageWrap><Textbooks courseId={courseId} /></PageWrap>}
+        />
       </Routes>
     </CourseAuthoringPage>
   );

src/certificates/data/selectors.js

@@ -3,6 +3,7 @@ import { createSelector } from '@reduxjs/toolkit';
 export const getLoadingStatus = (state) => state.certificates.loadingStatus;
 export const getSavingStatus = (state) => state.certificates.savingStatus;
 export const getSavingImageStatus = (state) => state.certificates.savingImageStatus;
+export const getErrorMessage = (state) => state.certificates.errorMessage;
 export const getSendRequestErrors = (state) => state.certificates.sendRequestErrors.developer_message;
 export const getCertificates = state => state.certificates.certificatesData.certificates;
 export const getHasCertificateModes = state => state.certificates.certificatesData.hasCertificateModes;

src/certificates/data/slice.js

@@ -12,10 +12,13 @@ const slice = createSlice({
     loadingStatus: RequestStatus.PENDING,
     savingStatus: '',
     savingImageStatus: '',
+    errorMessage: '',
   },
   reducers: {
     updateSavingStatus: (state, { payload }) => {
-      state.savingStatus = payload.status;
+      const { status, errorMessage } = payload;
+      state.savingStatus = status;
+      state.errorMessage = errorMessage;
     },
     updateSavingImageStatus: (state, { payload }) => {
       state.savingImageStatus = payload.status;

src/certificates/data/thunks.js

@@ -3,6 +3,7 @@ import {
   hideProcessingNotification,
   showProcessingNotification,
 } from '../../generic/processing-notification/data/slice';
+import { handleResponseErrors } from '../../generic/saving-error-alert';
 import { NOTIFICATION_MESSAGES } from '../../constants';
 import {
   getCertificates,
@@ -51,8 +52,7 @@ export function createCourseCertificate(courseId, certificate) {
       dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
       return true;
     } catch (error) {
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-      return false;
+      return handleResponseErrors(error, dispatch, updateSavingStatus);
     } finally {
       dispatch(hideProcessingNotification());
     }
@@ -70,8 +70,7 @@ export function updateCourseCertificate(courseId, certificate) {
       dispatch(updateCertificateSuccess(certificatesValues));
       return true;
     } catch (error) {
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-      return false;
+      return handleResponseErrors(error, dispatch, updateSavingStatus);
     } finally {
       dispatch(hideProcessingNotification());
     }
@@ -89,8 +88,7 @@ export function deleteCourseCertificate(courseId, certificateId) {
       dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
       return true;
     } catch (error) {
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-      return false;
+      return handleResponseErrors(error, dispatch, updateSavingStatus);
     } finally {
       dispatch(hideProcessingNotification());
     }
@@ -111,8 +109,7 @@ export function updateCertificateActiveStatus(courseId, path, activationStatus)
       dispatch(fetchCertificates(courseId));
       return true;
     } catch (error) {
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-      return false;
+      return handleResponseErrors(error, dispatch, updateSavingStatus);
     } finally {
       dispatch(hideProcessingNotification());
     }

src/certificates/layout/MainLayout.jsx

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import { Container, Layout } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { SavingErrorAlert } from '../../generic/saving-error-alert';
 import ProcessingNotification from '../../generic/processing-notification';
-import InternetConnectionAlert from '../../generic/internet-connection-alert';
 import SubHeader from '../../generic/sub-header/SubHeader';
 import messages from '../messages';
 import CertificatesSidebar from './certificates-sidebar/CertificatesSidebar';
@@ -14,8 +14,8 @@ const MainLayout = ({ courseId, showHeaderButtons, children }) => {
   const intl = useIntl();
 
   const {
-    isQueryPending,
-    isQueryFailed,
+    errorMessage,
+    savingStatus,
     isShowProcessingNotification,
     processingNotificationTitle,
   } = useLayout();
@@ -54,9 +54,9 @@ const MainLayout = ({ courseId, showHeaderButtons, children }) => {
           isShow={isShowProcessingNotification}
           title={processingNotificationTitle}
         />
-        <InternetConnectionAlert
-          isFailed={isQueryFailed}
-          isQueryPending={isQueryPending}
+        <SavingErrorAlert
+          savingStatus={savingStatus}
+          errorMessage={errorMessage}
         />
       </div>
     </>

src/certificates/layout/hooks/useLayout.jsx

@@ -3,28 +3,26 @@ import { useSelector } from 'react-redux';
 
 import { RequestStatus } from '../../../data/constants';
 import { getProcessingNotification } from '../../../generic/processing-notification/data/selectors';
-import { getSavingStatus, getSavingImageStatus } from '../../data/selectors';
+import { getSavingStatus, getErrorMessage } from '../../data/selectors';
 
 const useLayout = () => {
   const savingStatus = useSelector(getSavingStatus);
-  const savingImageStatus = useSelector(getSavingImageStatus);
+  const errorMessage = useSelector(getErrorMessage);
+
   const {
     isShow: isShowProcessingNotification,
     title: processingNotificationTitle,
   } = useSelector(getProcessingNotification);
 
-  const isQueryPending = savingStatus === RequestStatus.PENDING || savingImageStatus === RequestStatus.PENDING;
-  const isQueryFailed = savingStatus === RequestStatus.FAILED || savingImageStatus === RequestStatus.FAILED;
-
   useEffect(() => {
     if (savingStatus === RequestStatus.SUCCESSFUL) {
       window.scrollTo({ top: 0, behavior: 'smooth' });
     }
   }, [savingStatus]);
 
   return {
-    isQueryPending,
-    isQueryFailed,
+    errorMessage,
+    savingStatus,
     isShowProcessingNotification,
     processingNotificationTitle,
   };

src/constants.js

@@ -67,3 +67,5 @@ export const CLIPBOARD_STATUS = {
 };
 
 export const STRUCTURAL_XBLOCK_TYPES = ['vertical', 'sequential', 'chapter', 'course'];
+
+export const UPLOAD_FILE_MAX_SIZE = 20 * 1000 * 1000; // 20mb