Merge pull request #513 from USEPA/feature/update-formiojs

Feature/update formiojs
USEPA · Dec 11, 2024 · 4c00bc3 · 4c00bc3
2 parents 2602b4d + 915edc7
commit 4c00bc3
Show file tree

Hide file tree

Showing 12 changed files with 719 additions and 1,193 deletions.
diff --git a/app/client/package-lock.json b/app/client/package-lock.json
diff --git a/app/client/package.json b/app/client/package.json
@@ -37,6 +37,7 @@
     "vite": "6.0.2"
   },
   "dependencies": {
+    "@formio/js": "5.0.0",
     "@formio/premium": "1.18.4",
     "@formio/react": "5.2.3",
     "@formio/uswds": "2.4.8",
@@ -46,7 +47,6 @@
     "@tanstack/react-query": "4.35.0",
     "@tanstack/react-query-devtools": "4.35.0",
     "bootstrap": "5.3.3",
-    "formiojs": "4.14.5",
     "lodash": "4.17.21",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/app/client/src/components/app.tsx b/app/client/src/components/app.tsx
@@ -15,7 +15,7 @@ import "bootstrap/dist/css/bootstrap-grid.min.css";
 import "@formio/uswds/dist/uswds.min.css";
 import "@formio/choices.js/public/assets/styles/choices.min.css";
 import "@formio/premium/dist/premium.css";
-import "formiojs/dist/formio.full.min.css";
+import "@formio/js/dist/formio.full.min.css";
 // ---
 import { serverBasePath, serverUrl, cloudSpace, messages } from "@/config";
 import {

diff --git a/app/client/src/routes/crf2022.tsx b/app/client/src/routes/crf2022.tsx
@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef } from "react";
 import { useNavigate, useOutletContext, useParams } from "react-router-dom";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
+import { Providers } from "@formio/js";
 import { Formio, Form } from "@formio/react";
-import s3 from "formiojs/providers/storage/s3";
 import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
@@ -54,18 +54,14 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
         /**
          * 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/formio/2022/s3/crf/${mongoId}/${comboKey}`;
-          return s3(s3Formio);
+          return Providers.providers.storage.s3(s3Formio);
         };
 
         return Promise.resolve(res);

diff --git a/app/client/src/routes/frf2022.tsx b/app/client/src/routes/frf2022.tsx
@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef } from "react";
 import { useNavigate, useOutletContext, useParams } from "react-router-dom";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
+import { Providers } from "@formio/js";
 import { Formio, Form } from "@formio/react";
-import s3 from "formiojs/providers/storage/s3";
 import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
@@ -54,18 +54,14 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
         /**
          * 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/formio/2022/s3/frf/${mongoId}/${comboKey}`;
-          return s3(s3Formio);
+          return Providers.providers.storage.s3(s3Formio);
         };
 
         const data = { ...res.submission?.data };

diff --git a/app/client/src/routes/frf2023.tsx b/app/client/src/routes/frf2023.tsx
@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef } from "react";
 import { useNavigate, useOutletContext, useParams } from "react-router-dom";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
+import { Providers } from "@formio/js";
 import { Formio, Form } from "@formio/react";
-import s3 from "formiojs/providers/storage/s3";
 import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
@@ -54,18 +54,14 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
         /**
          * 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/formio/2023/s3/frf/${mongoId}/${comboKey}`;
-          return s3(s3Formio);
+          return Providers.providers.storage.s3(s3Formio);
         };
 
         return Promise.resolve(res);

diff --git a/app/client/src/routes/frf2024.tsx b/app/client/src/routes/frf2024.tsx
@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef } from "react";
 import { useNavigate, useOutletContext, useParams } from "react-router-dom";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
+import { Providers } from "@formio/js";
 import { Formio, Form } from "@formio/react";
-import s3 from "formiojs/providers/storage/s3";
 import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
@@ -54,18 +54,14 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
         /**
          * 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/formio/2024/s3/frf/${mongoId}/${comboKey}`;
-          return s3(s3Formio);
+          return Providers.providers.storage.s3(s3Formio);
         };
 
         return Promise.resolve(res);

diff --git a/app/client/src/routes/helpdesk.tsx b/app/client/src/routes/helpdesk.tsx
@@ -6,8 +6,8 @@ import {
   useQuery,
   useMutation,
 } from "@tanstack/react-query";
+import { Providers } from "@formio/js";
 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";
@@ -405,18 +405,14 @@ export function Helpdesk() {
         /**
          * 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 Providers.providers.storage.s3(s3Formio);
         };
 
         return Promise.resolve(res);

diff --git a/app/client/src/routes/prf2022.tsx b/app/client/src/routes/prf2022.tsx
@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef } from "react";
 import { useNavigate, useOutletContext, useParams } from "react-router-dom";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
+import { Providers } from "@formio/js";
 import { Formio, Form } from "@formio/react";
-import s3 from "formiojs/providers/storage/s3";
 import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
@@ -54,18 +54,14 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
         /**
          * 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/formio/2022/s3/prf/${mongoId}/${comboKey}`;
-          return s3(s3Formio);
+          return Providers.providers.storage.s3(s3Formio);
         };
 
         return Promise.resolve(res);

diff --git a/app/client/src/routes/prf2023.tsx b/app/client/src/routes/prf2023.tsx
@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef } from "react";
 import { useNavigate, useOutletContext, useParams } from "react-router-dom";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
+import { Providers } from "@formio/js";
 import { Formio, Form } from "@formio/react";
-import s3 from "formiojs/providers/storage/s3";
 import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
@@ -54,18 +54,14 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
         /**
          * 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/formio/2023/s3/prf/${mongoId}/${comboKey}`;
-          return s3(s3Formio);
+          return Providers.providers.storage.s3(s3Formio);
         };
 
         return Promise.resolve(res);

diff --git a/app/client/src/routes/prf2024.tsx b/app/client/src/routes/prf2024.tsx
@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef } from "react";
 import { useNavigate, useOutletContext, useParams } from "react-router-dom";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { Dialog } from "@headlessui/react";
+import { Providers } from "@formio/js";
 import { Formio, Form } from "@formio/react";
-import s3 from "formiojs/providers/storage/s3";
 import clsx from "clsx";
 import { cloneDeep, isEqual } from "lodash";
 import icons from "uswds/img/sprite.svg";
@@ -54,18 +54,14 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
         /**
          * 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/formio/2024/s3/prf/${mongoId}/${comboKey}`;
-          return s3(s3Formio);
+          return Providers.providers.storage.s3(s3Formio);
         };
 
         return Promise.resolve(res);

diff --git a/app/client/src/vite-env.d.ts b/app/client/src/vite-env.d.ts
@@ -1,4 +1,3 @@
 /// <reference types="vite/client" />
 
-declare module "formiojs/providers/storage/s3";
 declare module "@formio/react";