fix: [AXIMST-488-489] Textbooks: file size and upload connection alert (

#174) * fix: [AXIMST-488-489] file size and upload connection alert * fix: [AXIMST-488-489] refactor after review
raccoongang · Feb 29, 2024 · 32f1554 · 32f1554
1 parent 3366a62
commit 32f1554
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 1 deletion.
diff --git a/src/constants.js b/src/constants.js
@@ -56,3 +56,5 @@ export const COURSE_BLOCK_NAMES = /** @type {const} */ ({
   vertical: { id: 'vertical', name: 'Unit' },
   component: { id: 'component', name: 'Component' },
 });
+
+export const UPLOAD_FILE_MAX_SIZE = 100 * 1024 * 1024; // 100mb
diff --git a/src/generic/modal-dropzone/ModalDropzone.jsx b/src/generic/modal-dropzone/ModalDropzone.jsx
@@ -27,6 +27,7 @@ const ModalDropzone = ({
   onCancel,
   onChange,
   onSavingStatus,
+  maxSize,
 }) => {
   const {
     intl,
@@ -94,6 +95,7 @@ const ModalDropzone = ({
                   inputComponent={inputComponent}
                   accept={accept}
                   validator={imageValidator}
+                  maxSize={maxSize}
                 />
               )}
             </Card.Body>
@@ -118,6 +120,7 @@ ModalDropzone.defaultProps = {
   imageHelpText: '',
   previewComponent: null,
   imageDropzoneText: '',
+  maxSize: Infinity,
 };
 
 ModalDropzone.propTypes = {
@@ -131,6 +134,7 @@ ModalDropzone.propTypes = {
   onCancel: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   onSavingStatus: PropTypes.func.isRequired,
+  maxSize: PropTypes.number,
 };
 
 export default ModalDropzone;
diff --git a/src/textbooks/Textbooks.scss b/src/textbooks/Textbooks.scss
@@ -1,3 +1,7 @@
 @import "./empty-placeholder/EmptyPlaceholder";
 @import "./textbook-card/TextbookCard";
 @import "./textbook-form/TextbookForm";
+
+.alert-toast {
+  z-index: $zindex-tooltip !important;
+}
diff --git a/src/textbooks/hooks.jsx b/src/textbooks/hooks.jsx
@@ -4,7 +4,7 @@ import { AppContext } from '@edx/frontend-platform/react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useToggle } from '@edx/paragon';
 
-import { updateSavingStatus } from '../certificates/data/slice';
+import { updateSavingStatus } from './data/slice';
 import { RequestStatus } from '../data/constants';
 import {
   getTextbooksData,

diff --git a/src/textbooks/textbook-form/TextbookForm.jsx b/src/textbooks/textbook-form/TextbookForm.jsx
@@ -21,6 +21,7 @@ import FormikControl from '../../generic/FormikControl';
 import PromptIfDirty from '../../generic/PromptIfDirty';
 import ModalDropzone from '../../generic/modal-dropzone/ModalDropzone';
 import { useModel } from '../../generic/model-store';
+import { UPLOAD_FILE_MAX_SIZE } from '../../constants';
 import textbookFormValidationSchema from './validations';
 import messages from './messages';
 
@@ -165,6 +166,7 @@ const TextbookForm = ({
               previewComponent={(
                 <Icon src={PdfIcon} className="modal-preview-icon" />
               )}
+              maxSize={UPLOAD_FILE_MAX_SIZE}
             />
             <PromptIfDirty dirty={dirty} />
           </>