Merge pull request #16595 from CDCgov/experience/16309/hl7-download-c…

…haracter-bug remove usage of downloadjs
CDCgov · Nov 20, 2024 · 448460a · 448460a
2 parents 9ae54e5 + 44e690d
commit 448460a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 55 deletions.
diff --git a/frontend-react/package.json b/frontend-react/package.json
@@ -19,7 +19,6 @@
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.2.0",
     "dompurify": "^3.1.7",
-    "downloadjs": "^1.4.7",
     "export-to-csv-fix-source-map": "^0.2.1",
     "focus-trap-react": "^10.3.0",
     "history": "^5.3.0",
@@ -135,7 +134,6 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/dompurify": "^3.0.5",
     "@types/dotenv-flow": "^3.3.3",
-    "@types/downloadjs": "^1.4.6",
     "@types/eslint__js": "^8.42.3",
     "@types/github-slugger": "^1.3.0",
     "@types/html-to-text": "^9.0.4",

diff --git a/frontend-react/src/pages/deliveries/daily-data/ReportLink.tsx b/frontend-react/src/pages/deliveries/daily-data/ReportLink.tsx
@@ -1,7 +1,7 @@
 import { Button, Icon } from "@trussworks/react-uswds";
-import download from "downloadjs";
 import { PropsWithChildren } from "react";
 
+import { downloadReport } from "./ReportsUtils";
 import config from "../../../config";
 import useSessionContext from "../../../contexts/Session/useSessionContext";
 import { isDateExpired } from "../../../utils/DateTimeUtils";
@@ -28,13 +28,7 @@ const formatFileType = (fileType: string) => {
     This element provides a download link on each row of the table and on the report
     details page
 */
-function ReportLink({
-    reportId,
-    fileType,
-    reportExpires,
-    children,
-    button,
-}: PropsWithChildren<ReportLinkProps>) {
+function ReportLink({ reportId, fileType, reportExpires, children, button }: PropsWithChildren<ReportLinkProps>) {
     const { authState } = useSessionContext();
     const { activeMembership } = useSessionContext();
     const organization = activeMembership?.parsedName;
@@ -50,15 +44,7 @@ function ReportLink({
             })
                 .then((res) => res.json())
                 .then((report) => {
-                    // The filename to use for the download should not contain blob folders if present
-                    let filename = decodeURIComponent(report.fileName);
-                    const filenameStartIndex = filename.lastIndexOf("/");
-                    if (
-                        filenameStartIndex >= 0 &&
-                        filename.length > filenameStartIndex + 1
-                    )
-                        filename = filename.substring(filenameStartIndex + 1);
-                    download(report.content, filename, report.mimetype);
+                    downloadReport(report);
                 });
         }
     };
@@ -73,21 +59,16 @@ function ReportLink({
     } else {
         return (
             <>
-                {fileType !== undefined &&
-                    !isDateExpired(reportExpires ?? "") && (
-                        <Button
-                            type="button"
-                            outline
-                            onClick={handleClick}
-                            className="usa-button usa-button--outline float-right display-flex flex-align-center margin-left-1"
-                        >
-                            {formatFileType(fileType)}{" "}
-                            <Icon.FileDownload
-                                className="margin-left-1"
-                                size={3}
-                            />
-                        </Button>
-                    )}
+                {fileType !== undefined && !isDateExpired(reportExpires ?? "") && (
+                    <Button
+                        type="button"
+                        outline
+                        onClick={handleClick}
+                        className="usa-button usa-button--outline float-right display-flex flex-align-center margin-left-1"
+                    >
+                        {formatFileType(fileType)} <Icon.FileDownload className="margin-left-1" size={3} />
+                    </Button>
+                )}
             </>
         );
     }

diff --git a/frontend-react/src/pages/deliveries/daily-data/ReportsUtils.ts b/frontend-react/src/pages/deliveries/daily-data/ReportsUtils.ts
@@ -1,12 +1,10 @@
 import axios from "axios";
-import download from "downloadjs";
 
 import config from "../../../config";
 import { RSReportInterface } from "../../../utils/ReportUtils";
 
 const { RS_API_URL } = config;
-export const reportDetailURL = (id: string, base?: string) =>
-    `${base ? base : RS_API_URL}/api/history/report/${id}`;
+export const reportDetailURL = (id: string, base?: string) => `${base ? base : RS_API_URL}/api/history/report/${id}`;
 
 export const getReportAndDownload = (
     reportId: string,
@@ -31,9 +29,27 @@ export const getReportAndDownload = (
 };
 
 export const downloadReport = (report: RSReportInterface) => {
+    // Decode the file name from the report
     let filename = decodeURIComponent(report.fileName);
+
+    // Extract the filename if it contains a path
     const filenameStartIndex = filename.lastIndexOf("/");
-    if (filenameStartIndex >= 0 && filename.length > filenameStartIndex + 1)
+    if (filenameStartIndex >= 0 && filename.length > filenameStartIndex + 1) {
         filename = filename.substring(filenameStartIndex + 1);
-    return download(report.content, filename, report.mimeType);
+    }
+
+    const blob = new Blob([report.content], { type: report.mimeType || "application/octet-stream" });
+
+    const url = URL.createObjectURL(blob);
+
+    // Create a temporary anchor element to trigger the download
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+
+    // Append the anchor to the DOM, trigger the download, and clean up
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
 };
diff --git a/frontend-react/yarn.lock b/frontend-react/yarn.lock
@@ -2654,13 +2654,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/downloadjs@npm:^1.4.6":
-  version: 1.4.6
-  resolution: "@types/downloadjs@npm:1.4.6"
-  checksum: 0e98425946c12315a7b9646edb75285bcc0fda2d59f9d296fa3bf9455ef62d6d73383c52ee86eec50e9b4cee6f9af9dba78c6fb56bc6444395b4ac4f76a86ec0
-  languageName: node
-  linkType: hard
-
 "@types/escodegen@npm:^0.0.6":
   version: 0.0.6
   resolution: "@types/escodegen@npm:0.0.6"
@@ -5146,13 +5139,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"downloadjs@npm:^1.4.7":
-  version: 1.4.7
-  resolution: "downloadjs@npm:1.4.7"
-  checksum: 4c546a28e7adcb1c290685f923add84e89582549f93502fa1b028194492522f716abb95a70f6ae464067a767e967806970d2a03e6262f8ccbcf3dd68e950d1da
-  languageName: node
-  linkType: hard
-
 "eastasianwidth@npm:^0.2.0":
   version: 0.2.0
   resolution: "eastasianwidth@npm:0.2.0"
@@ -10365,7 +10351,6 @@ __metadata:
     "@trussworks/react-uswds": ^9.1.0
     "@types/dompurify": ^3.0.5
     "@types/dotenv-flow": ^3.3.3
-    "@types/downloadjs": ^1.4.6
     "@types/eslint__js": ^8.42.3
     "@types/github-slugger": ^1.3.0
     "@types/html-to-text": ^9.0.4
@@ -10392,7 +10377,6 @@ __metadata:
     date-fns-tz: ^3.2.0
     dompurify: ^3.1.7
     dotenv-flow: ^4.1.0
-    downloadjs: ^1.4.7
     eslint: 9.13.0
     eslint-config-prettier: ^9.1.0
     eslint-import-resolver-typescript: ^3.6.3