From 3b04b3bbf8c12f389e5b3527c48e71f12d63962b Mon Sep 17 00:00:00 2001
From: knguyenrise8 <159168836+knguyenrise8@users.noreply.github.com>
Date: Fri, 27 Dec 2024 13:23:41 -0600
Subject: [PATCH] fix(RV-428): Fix change upload flow to reflect UI (#494)

---
 frontend/package-lock.json                    | 19 ++++++++++---------
 frontend/src/components/ExtractUploadFile.tsx | 10 ++++++++--
 frontend/src/components/FileInput.tsx         |  2 +-
 .../src/components/FileInput/file-input.tsx   |  7 ++++---
 .../src/components/FileInput/file-preview.tsx |  4 +++-
 frontend/src/components/UploadFile.scss       |  2 +-
 frontend/src/components/UploadFile.tsx        |  5 +++++
 frontend/src/pages/AnnotateTemplate.tsx       |  1 +
 .../UploadTemplate.test.tsx.snap              |  1 +
 9 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 211f0131..ef16ebe5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2474,9 +2474,9 @@
       "optional": true
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4635,9 +4635,9 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4785,9 +4785,9 @@
       "optional": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "dev": true,
       "funding": [
         {
@@ -4795,6 +4795,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
diff --git a/frontend/src/components/ExtractUploadFile.tsx b/frontend/src/components/ExtractUploadFile.tsx
index 7084f614..3faa91a9 100644
--- a/frontend/src/components/ExtractUploadFile.tsx
+++ b/frontend/src/components/ExtractUploadFile.tsx
@@ -150,6 +150,11 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files.length > 0) {
       const files = Array.from(event.target.files);
+      if (files.length > 0) {
+        setUploadedFile([]);
+        clearFiles();
+        setHasError(false);
+      }
       setUploadedFile(files);
       const filesObj: IFilesObj = { files };
       localStorage.setItem("files", JSON.stringify(filesObj));
@@ -243,8 +248,9 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
               >
                 {uploadedFile.length} file(s) selected
               </label>
-              {!isUploadComplete && (
                 <FileInput
+                  hidePreview
+                  accept=".pdf"
                   multiple
                   onChange={handleChange}
                   id={`file-input-multiple-${id}-2`}
@@ -253,7 +259,6 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
                   chooseText="Change file(s)"
                   dragText=" "
                 />
-              )}
             </div>
             <div
               className="display-flex flex-column width-full height-full margin-bottom-2 margin-top-1"
@@ -352,6 +357,7 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
               style={{ width: "80%" }}
             >
               <FileInput
+                accept=".pdf"
                 multiple
                 onChange={handleChange}
                 id={`file-input-multiple-${id}-1`}
diff --git a/frontend/src/components/FileInput.tsx b/frontend/src/components/FileInput.tsx
index 988b7bfd..1666ffac 100644
--- a/frontend/src/components/FileInput.tsx
+++ b/frontend/src/components/FileInput.tsx
@@ -177,7 +177,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
       }
     }
     setFiles(fileArr);
-
+    console.log('change')
     if (onChange) onChange(e);
   };
 
diff --git a/frontend/src/components/FileInput/file-input.tsx b/frontend/src/components/FileInput/file-input.tsx
index c15ae9ff..1aedce04 100644
--- a/frontend/src/components/FileInput/file-input.tsx
+++ b/frontend/src/components/FileInput/file-input.tsx
@@ -19,6 +19,7 @@ type FileInputProps = {
   disabled?: boolean;
   multiple?: boolean;
   accept?: string;
+  hidePreview?: boolean;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onDrop?: (e: React.DragEvent) => void;
 };
@@ -43,6 +44,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
     multiple,
     className,
     accept,
+    hidePreview,
     onChange,
     onDrop,
     ...inputProps
@@ -103,15 +105,14 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
       filePreviews.push(
         <FilePreview
           key={key}
+          hidePreview
           imageId={imageId}
           file={files[parseInt(`${i}`)]}
         />,
       );
     }
   }
-
   const instructionClasses = classnames("usa-file-input__instructions", {
-    "display-none": filePreviews.length > 0,
   });
 
   const previewHeaderText =
@@ -187,7 +188,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
       >
-        {filePreviews.length > 0 && (
+        {filePreviews.length > 0 && !hidePreview && (
           <div
             data-testid="file-input-preview-heading"
             className="usa-file-input__preview-heading"
diff --git a/frontend/src/components/FileInput/file-preview.tsx b/frontend/src/components/FileInput/file-preview.tsx
index 567fe82d..466d143b 100644
--- a/frontend/src/components/FileInput/file-preview.tsx
+++ b/frontend/src/components/FileInput/file-preview.tsx
@@ -7,9 +7,11 @@ const SPACER_GIF =
 export const FilePreview = ({
   imageId,
   file,
+  hidePreview,
 }: {
   imageId: string;
   file: File;
+  hidePreview?: boolean;
 }): React.ReactElement => {
   const [previewSrc, setPreviewSrc] = useState(SPACER_GIF);
   const [showGenericPreview, setShowGenericPreview] = useState(false);
@@ -47,7 +49,7 @@ export const FilePreview = ({
   return (
     <div
       data-testid="file-input-preview"
-      className="usa-file-input__preview"
+      className={`${hidePreview ? 'display-none' : ''} usa-file-input__preview`}
       aria-hidden="true"
     >
       <img
diff --git a/frontend/src/components/UploadFile.scss b/frontend/src/components/UploadFile.scss
index 4f5d7419..6210b378 100644
--- a/frontend/src/components/UploadFile.scss
+++ b/frontend/src/components/UploadFile.scss
@@ -22,7 +22,7 @@
 }
 
 .dashed-container-upload {
-  height: 160px;
+  height: 245px;
 }
 
 .upload-back-button {
diff --git a/frontend/src/components/UploadFile.tsx b/frontend/src/components/UploadFile.tsx
index 3de077bd..69a136ba 100644
--- a/frontend/src/components/UploadFile.tsx
+++ b/frontend/src/components/UploadFile.tsx
@@ -23,6 +23,10 @@ export const Uploadfile = () => {
         const file = fileList[i];
         filesObj["files"].push(file);
       }
+      if(files.length > 0) {
+        clearFiles();
+        localStorage.setItem("files", JSON.stringify('{}'));
+      }
       localStorage.setItem("files", JSON.stringify(filesObj));
       addFile(event.target?.files[0]);
     }
@@ -59,6 +63,7 @@ export const Uploadfile = () => {
           <div className="display-flex flex-column flex-align-center width-full height-full">
             <FileInput
               onChange={handleChange}
+              accept=".pdf"
               id={`file-input-${id}`}
               className="padding-bottom-2"
               name="file-input-single"
diff --git a/frontend/src/pages/AnnotateTemplate.tsx b/frontend/src/pages/AnnotateTemplate.tsx
index ad9ecd50..318e83ee 100644
--- a/frontend/src/pages/AnnotateTemplate.tsx
+++ b/frontend/src/pages/AnnotateTemplate.tsx
@@ -214,6 +214,7 @@ const AnnotateTemplate: React.FC = () => {
       <UploadHeader
         title="Annotate new template"
         onBack={() => navigate("/new-template/upload")}
+        onSubmit={handleSubmit} 
       />
       <Divider margin="0px" />
       <div className="display-flex flex-justify-center padding-top-4">
diff --git a/frontend/src/pages/__snapshots__/UploadTemplate.test.tsx.snap b/frontend/src/pages/__snapshots__/UploadTemplate.test.tsx.snap
index ae36bf1f..24f50f62 100644
--- a/frontend/src/pages/__snapshots__/UploadTemplate.test.tsx.snap
+++ b/frontend/src/pages/__snapshots__/UploadTemplate.test.tsx.snap
@@ -201,6 +201,7 @@ exports[`UploadTemplate component > matches the snapshot 1`] = `
                   data-testid="file-input-box"
                 />
                 <input
+                  accept=".pdf"
                   class="usa-file-input__input"
                   data-testid="file-input-input"
                   id="file-input-:r0:"