React bump fixes (#467)

* fix styles and render function for upload file list: react 18 compatibility * remove formatting arifacts * rename custom render function * wrap p tags in div in file error modal * add return type to renderUploadFile * Update src/containers/ConversionForm/index.tsx Co-authored-by: Peyton Lee <[email protected]> --------- Co-authored-by: Peyton Lee <[email protected]>
simularium · Feb 21, 2024 · b27e6fe · b27e6fe
1 parent 3da2018
commit b27e6fe
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 34 deletions.
diff --git a/src/components/ConversionCancelModal/index.tsx b/src/components/ConversionCancelModal/index.tsx
@@ -25,19 +25,18 @@ const ConversionCancelModal: React.FC<ConversionCancelModalProps> = ({
 
     return (
         <CustomModal
-            className={styles.uploadModal}
+            className={styles.cancelModal}
             title="Cancel file import"
             open
             footer={footerButtons}
             width={341}
             centered
             onCancel={continueProcessing}
         >
-            <div>
-                {" "}
+            <p>
                 Information provided will not be saved. Are you sure you want to
                 cancel the process?
-            </div>
+            </p>
         </CustomModal>
     );
 };

diff --git a/src/components/ConversionCancelModal/style.css b/src/components/ConversionCancelModal/style.css
@@ -1,3 +1,7 @@
-.upload-modal :global(.ant-modal-footer) {
+.cancel-modal p {
+    font-size: 14px;
+}
+
+.cancel-modal :global(.ant-modal-footer) {
     background-color: var(--modal-content-bg);
 }
diff --git a/src/components/ConversionFileErrorModal/index.tsx b/src/components/ConversionFileErrorModal/index.tsx
@@ -32,12 +32,14 @@ const ConversionFileErrorModal: React.FC<ConversionFileErrorModalProps> = ({
             onCancel={closeModal}
         >
             <div>
-                <div className={styles.warningText}>
+                <p className={styles.warningText}>
                     {"We're sorry, there was a problem importing your file."}
-                </div>
-                You may want to double check that the file you selected is a
-                valid {engineType} file and try again. For further assistance,
-                please visit
+                </p>
+                <p>
+                    You may want to double check that the file you selected is a
+                    valid {engineType} file and try again. For further
+                    assistance, please visit
+                </p>
                 <a
                     href="https://forum.allencell.org/"
                     target="_blank"

diff --git a/src/components/ConversionFileErrorModal/style.css b/src/components/ConversionFileErrorModal/style.css
@@ -4,6 +4,7 @@
 }
 
 .error-modal :global(.ant-modal-body) {
+    font-size: 14px;
     padding: 15px 15px 0px 15px;
 }
 

diff --git a/src/components/ConversionProcessingOverlay/style.css b/src/components/ConversionProcessingOverlay/style.css
@@ -10,16 +10,13 @@
     justify-content: center;
 }
 
-.container h2,
-.container h3 {
-    color: var(--dark);
-}
-
 .title {
+    color: var(--light-theme-text-primary-color);
     font-weight: 700;
 }
 
 .content {
+    color: var(--light-theme-text-primary-color);
     display: flex;
     flex-flow: column;
     align-items: center;

diff --git a/src/components/ConversionServerErrorModal/style.css b/src/components/ConversionServerErrorModal/style.css
@@ -20,6 +20,7 @@
 }
 
 .server-error-modal :global(.ant-modal-body) {
+    font-size: 14px;
     padding: 20px 20px 0px;
 }
 

diff --git a/src/containers/ConversionForm/index.tsx b/src/containers/ConversionForm/index.tsx
@@ -112,6 +112,7 @@ const ConversionForm = ({
 
     const handleFileSelection = async (file: UploadFile) => {
         setFileToConvert(file);
+        customRequest(file, receiveFileToConvert, setError);
     };
 
     const validateFileType = (fileName: string) => {
@@ -144,6 +145,11 @@ const ConversionForm = ({
         }
     };
 
+    const renderUploadFile = (): JSX.Element => {
+        const fileName = fileToConvert ? fileToConvert.name : "";
+        return <span className={styles.renderedFileName}>{fileName}</span>;
+    };
+
     // TODO: use conversion template data to render the form
     console.log("conversion form data", conversionProcessingData);
     const conversionForm = (
@@ -172,8 +178,7 @@ const ConversionForm = ({
                     following information
                 </h3>
                 <h3 className={styles.sectionHeader}>
-                    {" "}
-                    Provide file information (required){" "}
+                    Provide file information (required)
                 </h3>
                 <h3 className={styles.selectTitle}>Simulation engine</h3>
                 <div className={styles.uploadContainer}>
@@ -193,6 +198,7 @@ const ConversionForm = ({
                         listType="text"
                         multiple={false}
                         fileList={fileToConvert ? [fileToConvert] : []}
+                        itemRender={renderUploadFile}
                         showUploadList={{
                             showPreviewIcon: false,
                             showDownloadIcon: false,
@@ -201,14 +207,6 @@ const ConversionForm = ({
                         onChange={({ file }) => {
                             handleFileSelection(file);
                         }}
-                        customRequest={(options) =>
-                            customRequest(
-                                fileToConvert,
-                                receiveFileToConvert,
-                                setError,
-                                options
-                            )
-                        }
                     >
                         <Button type="default">Select file</Button>
                     </Upload>
@@ -221,9 +219,7 @@ const ConversionForm = ({
                         </button>
                     )}
                 </div>
-                <Divider orientation="right" orientationMargin={400}>
-                    {" "}
-                </Divider>
+                <Divider orientation="right" orientationMargin={400}/>
                 <Button ghost>Cancel</Button>
                 <Button
                     type="primary"

diff --git a/src/containers/ConversionForm/style.css b/src/containers/ConversionForm/style.css
@@ -2,6 +2,7 @@
     background-color: var(--overlay-purple);
     height: calc(100vh - var(--header-height));
     width: 100%;
+    z-index: 1000;
 }
 
 .form-content {
@@ -53,12 +54,10 @@
     background-color: var(--overlay-purple);
 }
 
-.upload :global(.ant-upload-list) {
-    padding-bottom: 7px;
-}
-
-.upload :global(.ant-upload-list-item) {
+.upload .rendered-file-name {
+    height: 100%;
     margin-top: 6px;
+    display: block;
 }
 
 .upload :global(.ant-upload-text-icon) {
@@ -72,7 +71,6 @@
     border: none;
     cursor: pointer;
     min-width: 16px;
-    padding: 1px 0px 0px;
 }
 
 .remove-file-icon svg {

diff --git a/src/styles/colors.css b/src/styles/colors.css
@@ -69,6 +69,7 @@
     --dark-theme-slider-color: var(--white-three);    
     --dark-theme-tooltip-bg: var(--charcoal-grey);
     --dark-theme-version-badge-purple: var(--dark-five);
+    --light-theme-text-primary-color: var(--dark);
     --light-theme-background-purple: var(--pale-grey);
     --light-theme-button-purple: var(--dark-blue-grey);
     --light-theme-heading1-gray: var(--dark-three);
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ @@
     }
     .error-modal :global(.ant-modal-body) {
+        font-size: 14px;
         padding: 15px 15px 0px 15px;
     }
@@ Expand Down @@