Feature/max file size (#518)

* create modal fior file size error * handle conversion errors with single typed piece of local state * rename state to conversionError * bump up comment on file size limit * use single component for all conversion error modals * DRY out code (#519) * use constant for max file size * default to no error on conversion form * restore server error text * use double quotes for error message --------- Co-authored-by: Megan Riel-Mehan <[email protected]>
simularium · May 21, 2024 · 1330a41 · 1330a41
1 parent 3dc1e9d
commit 1330a41
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 136 deletions.
diff --git a/src/components/ConversionErrorModal/index.tsx b/src/components/ConversionErrorModal/index.tsx
@@ -0,0 +1,56 @@
+import { Button } from "antd";
+import React from "react";
+import classNames from "classnames";
+
+import CustomModal from "../CustomModal";
+import { Exclamation } from "../Icons";
+
+import styles from "./style.css";
+
+interface ConversionErrorModalProps {
+    closeModal: () => void;
+    showForumMessage: boolean;
+    errorMessage?: string;
+}
+
+const ConversionErrorModal: React.FC<ConversionErrorModalProps> = ({
+    closeModal,
+    errorMessage,
+    showForumMessage = true,
+}) => {
+    const footerButton = (
+        <Button className="primary-button" onClick={closeModal}>
+            OK
+        </Button>
+    );
+
+    return (
+        <CustomModal
+            titleText="File import cannot be completed"
+            footerButtons={footerButton}
+            closeHandler={closeModal}
+        >
+            <p className={classNames(styles.warningText)}>
+                {Exclamation}
+                We&apos;re sorry, there was a problem importing your file.
+            </p>
+            <p>
+                {errorMessage}
+                {showForumMessage && (
+                    <>
+                        <>For further assistance, please visit </>
+                        <a
+                            href="https://forum.allencell.org/"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            The Allen Cell Discussion Forum.
+                        </a>
+                    </>
+                )}
+            </p>
+        </CustomModal>
+    );
+};
+
+export default ConversionErrorModal;
diff --git a/...onents/ConversionFileErrorModal/style.css → ...components/ConversionErrorModal/style.css b/...onents/ConversionFileErrorModal/style.css → ...components/ConversionErrorModal/style.css
@@ -1,4 +1,4 @@
-.error-modal .warning-text {
+.warning-text {
     color: var(--cancel-icon-color);
     padding-bottom: 0.5em;
 }
diff --git a/src/components/ConversionFileErrorModal/index.tsx b/src/components/ConversionFileErrorModal/index.tsx
diff --git a/src/components/ConversionServerErrorModal/index.tsx b/src/components/ConversionServerErrorModal/index.tsx
diff --git a/src/components/ConversionServerErrorModal/style.css b/src/components/ConversionServerErrorModal/style.css
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -64,3 +64,4 @@ export const USER_TRAJ_REDIRECTS = [
 ];
 
 export const MOBILE_CUTOFF = "(max-width: 900px)";
+export const MAX_CONVERSION_FILE_SIZE = 2e8; // 200 MB
diff --git a/src/constants/interfaces.ts b/src/constants/interfaces.ts
@@ -60,3 +60,10 @@ export enum IconGlyphs {
     Reset = "reset-icon",
     Close = "close-icon",
 }
+
+export enum ConversionError {
+    SERVER_ERROR = "serverError",
+    FILE_TYPE_ERROR = "fileTypeError",
+    FILE_SIZE_ERROR = "fileSizeError",
+    NO_ERROR = "noError",
+}
diff --git a/src/containers/ConversionForm/index.tsx b/src/containers/ConversionForm/index.tsx
@@ -23,8 +23,6 @@ import {
     ExtensionMap,
 } from "../../state/trajectory/conversion-data-types";
 import ConversionProcessingOverlay from "../../components/ConversionProcessingOverlay";
-import ConversionServerErrorModal from "../../components/ConversionServerErrorModal";
-import ConversionFileErrorModal from "../../components/ConversionFileErrorModal";
 import { Cancel, DownCaret } from "../../components/Icons";
 import {
     CONVERSION_ACTIVE,
@@ -35,6 +33,9 @@ import customRequest from "./custom-request";
 
 import theme from "../../components/theme/light-theme.css";
 import styles from "./style.css";
+import { ConversionError } from "../../constants/interfaces";
+import ConversionErrorModal from "../../components/ConversionErrorModal";
+import { MAX_CONVERSION_FILE_SIZE } from "../../constants";
 
 interface ConversionProps {
     setConversionEngine: ActionCreator<SetConversionEngineAction>;
@@ -77,11 +78,21 @@ const ConversionForm = ({
 }: ConversionProps): JSX.Element => {
     const [fileToConvert, setFileToConvert] = useState<UploadFile | null>();
     const [isProcessing, setIsProcessing] = useState<boolean>(false);
-    const [serverErrorModalOpen, setServerErrorModalOpen] =
-        useState<boolean>(false);
-    const [fileTypeErrorModalOpen, setFileTypeErrorModalOpen] = useState(false);
+    const [conversionError, setConversionError] = useState<ConversionError>(
+        ConversionError.NO_ERROR
+    );
 
     const engineSelected = !!conversionProcessingData.engineType;
+    const errorModalOpen = conversionError !== ConversionError.NO_ERROR;
+
+    const errorMessage = {
+        [ConversionError.SERVER_ERROR]:
+            "We're sorry, the server is currently experiencing an issue. Please try again at a later time. ",
+        [ConversionError.FILE_TYPE_ERROR]: `You may want to double check that the file you selected is a valid ${conversionProcessingData.engineType}
+                        file and try again. `,
+        [ConversionError.FILE_SIZE_ERROR]:
+            "Your file exceeds the maximum allowed size of 200 MB, please try uploading a smaller file.",
+    };
 
     useEffect(() => {
         // on page load assume server is down until we hear back from it
@@ -93,17 +104,12 @@ const ConversionForm = ({
         // this is to account for the server going down while a conversion is in process
         if (isProcessing && conversionStatus === CONVERSION_NO_SERVER) {
             setIsProcessing(false);
-            setServerErrorModalOpen(true);
+            setConversionError(ConversionError.SERVER_ERROR);
         }
     }, [conversionStatus]);
 
-    // callbacks for state variables
-    const toggleServerCheckModal = () => {
-        setServerErrorModalOpen(!serverErrorModalOpen);
-    };
-
-    const toggleFileTypeModal = () => {
-        setFileTypeErrorModalOpen(!fileTypeErrorModalOpen);
+    const closeErrorModal = () => {
+        setConversionError(ConversionError.NO_ERROR);
     };
 
     const cancelProcessing = () => {
@@ -125,6 +131,11 @@ const ConversionForm = ({
     };
 
     const handleFileSelection = async (file: UploadFile) => {
+        // 200 MB limit
+        if (file.size !== undefined && file.size > MAX_CONVERSION_FILE_SIZE) {
+            setConversionError(ConversionError.FILE_SIZE_ERROR);
+            return;
+        }
         setFileToConvert(file);
         customRequest(file, receiveFileToConvert, setError);
     };
@@ -139,8 +150,7 @@ const ConversionForm = ({
                 return true;
             }
         }
-
-        setFileTypeErrorModalOpen(true);
+        setConversionError(ConversionError.FILE_TYPE_ERROR);
         return false;
     };
 
@@ -151,7 +161,7 @@ const ConversionForm = ({
             validateFileType(fileToConvert.name)
         ) {
             if (conversionStatus === CONVERSION_NO_SERVER) {
-                setServerErrorModalOpen(true);
+                setConversionError(ConversionError.SERVER_ERROR);
             } else {
                 // we now use this local state lets us distinguish between arriving on this page normally
                 // and arriving here because the server went down while a conversion was in process
@@ -171,23 +181,21 @@ const ConversionForm = ({
     console.log("conversion form data", conversionProcessingData);
     const conversionForm = (
         <div className={classNames(styles.container, theme.lightTheme)}>
-            {serverErrorModalOpen && (
-                <ConversionServerErrorModal
-                    closeModal={toggleServerCheckModal}
-                />
-            )}
-            {fileTypeErrorModalOpen && (
-                <ConversionFileErrorModal
-                    closeModal={toggleFileTypeModal}
-                    engineType={conversionProcessingData.engineType}
-                />
-            )}
             {conversionStatus === CONVERSION_ACTIVE && (
                 <ConversionProcessingOverlay
                     fileName={conversionProcessingData.fileName}
                     cancelProcessing={cancelProcessing}
                 />
             )}
+            {errorModalOpen && (
+                <ConversionErrorModal
+                    closeModal={closeErrorModal}
+                    showForumMessage={
+                        conversionError !== ConversionError.FILE_SIZE_ERROR
+                    }
+                    errorMessage={errorMessage[conversionError] || ""}
+                />
+            )}
             <div className={styles.formContent}>
                 <h3 className={styles.title}>Import a non-native file type</h3>
                 <h3>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -64,3 +64,4 @@ export const USER_TRAJ_REDIRECTS = [
		];

		export const MOBILE_CUTOFF = "(max-width: 900px)";
		export const MAX_CONVERSION_FILE_SIZE = 2e8; // 200 MB