Add s3 route for downloading Formio s3 file metadata to server app's …

…help routes, and update client app's helpdesk component route s3 requests through server app to support file attachment downloads

app/client/src/routes/helpdesk.tsx

@@ -6,8 +6,10 @@ import {
   useQuery,
   useMutation,
 } from "@tanstack/react-query";
-import { Form } from "@formio/react";
+import { Formio, Form } from "@formio/react";
+import s3 from "formiojs/providers/storage/s3";
 import clsx from "clsx";
+import { cloneDeep } from "lodash";
 import icon from "uswds/img/usa-icons-bg/search--white.svg";
 import icons from "uswds/img/sprite.svg";
 // ---
@@ -398,7 +400,28 @@ export function Helpdesk() {
 
   const submissionQuery = useQuery({
     queryKey: ["helpdesk/submission"],
-    queryFn: () => getData<Response>(submissionUrl),
+    queryFn: () => {
+      return getData<Response>(submissionUrl).then((res) => {
+        /**
+         * Change the formUrl the File component's `uploadFile` uses, so the s3
+         * upload PUT request is routed through the server app.
+         *
+         * https://github.com/formio/formio.js/blob/master/src/components/file/File.js#L760
+         * https://github.com/formio/formio.js/blob/master/src/providers/storage/s3.js#L5
+         * https://github.com/formio/formio.js/blob/master/src/providers/storage/xhr.js#L90
+         */
+        Formio.Providers.providers.storage.s3 = function (formio: {
+          formUrl: string;
+          [field: string]: unknown;
+        }) {
+          const s3Formio = cloneDeep(formio);
+          s3Formio.formUrl = `${serverUrl}/api/help/formio/s3/${rebateYear}/${formType}`;
+          return s3(s3Formio);
+        };
+
+        return Promise.resolve(res);
+      });
+    },
     onSuccess: (_res) => setResultDisplayed(true),
     enabled: false,
   });

app/server/app/routes/help.js

@@ -149,6 +149,31 @@ function fetchBapSubmissionData({
   });
 }
 
+// --- download Formio S3 file metadata
+router.get("/formio/s3/:rebateYear/:formType/storage/s3", (req, res) => {
+  const { query } = req;
+  const { rebateYear, formType } = req.params;
+
+  const formioFormUrl = formUrl[rebateYear][formType];
+
+  if (!formioFormUrl) {
+    const errorStatus = 400;
+    const errorMessage = `Formio form URL does not exist for ${rebateYear} ${formType.toUpperCase()}.`;
+    return res.status(errorStatus).json({ message: errorMessage });
+  }
+
+  axiosFormio(req)
+    .get(`${formioFormUrl}/storage/s3`, { params: query })
+    .then((axiosRes) => axiosRes.data)
+    .then((fileMetadata) => res.json(fileMetadata))
+    .catch((error) => {
+      // NOTE: logged in axiosFormio response interceptor
+      const errorStatus = error.response?.status || 500;
+      const errorMessage = `Error downloading file from S3.`;
+      return res.status(errorStatus).json({ message: errorMessage });
+    });
+});
+
 // --- get an existing form's submission data from Formio and the BAP
 router.get("/formio/submission/:rebateYear/:formType/:id", async (req, res) => {
   const { rebateYear, formType, id } = req.params;