Merge pull request #540 from USEPA/feature/update-client-app-env-setup

Feature/update client app env setup
USEPA · Jan 27, 2025 · 4682dea · 4682dea
2 parents bff90e1 + 6a80569
commit 4682dea
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 42 deletions.
diff --git a/.github/workflows/dev.yml b/.github/workflows/dev.yml
@@ -114,8 +114,6 @@ jobs:
         run: |
           VITE_SERVER_BASE_PATH="$SERVER_BASE_PATH" \
             VITE_CLOUD_SPACE="$CLOUD_SPACE" \
-            VITE_FORMIO_BASE_URL="$FORMIO_BASE_URL" \
-            VITE_FORMIO_PROJECT_NAME="$FORMIO_PROJECT_NAME" \
             npm run build
           rm ../server/app/public/index.html
           cd build

diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml
@@ -67,8 +67,6 @@ jobs:
         run: |
           VITE_SERVER_BASE_PATH="$SERVER_BASE_PATH" \
             VITE_CLOUD_SPACE="$CLOUD_SPACE" \
-            VITE_FORMIO_BASE_URL="$FORMIO_BASE_URL" \
-            VITE_FORMIO_PROJECT_NAME="$FORMIO_PROJECT_NAME" \
             npm run build
           rm ../server/app/public/index.html
           cd build

diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
@@ -114,8 +114,6 @@ jobs:
         run: |
           VITE_SERVER_BASE_PATH="$SERVER_BASE_PATH" \
             VITE_CLOUD_SPACE="$CLOUD_SPACE" \
-            VITE_FORMIO_BASE_URL="$FORMIO_BASE_URL" \
-            VITE_FORMIO_PROJECT_NAME="$FORMIO_PROJECT_NAME" \
             npm run build
           rm ../server/app/public/index.html
           cd build

diff --git a/app/client/.env.example b/app/client/.env.example
diff --git a/app/client/src/components/userDashboard.tsx b/app/client/src/components/userDashboard.tsx
@@ -1,21 +1,21 @@
+import { useEffect } from "react";
 import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { Formio } from "@formio/react";
 import premium from "@formio/premium/lib/index.js";
 import uswds from "@formio/uswds";
 import icons from "uswds/img/sprite.svg";
 // ---
-import { serverUrl, formioBaseUrl, formioProjectUrl } from "@/config";
+import { serverUrl } from "@/config";
 import {
   useHelpdeskAccess,
   useConfigQuery,
+  useConfigData,
   useBapSamQuery,
   useBapSamData,
 } from "@/utilities";
 import { Loading } from "@/components/loading";
 import { useDialogActions } from "@/contexts/dialog";
 
-Formio.setBaseUrl(formioBaseUrl);
-Formio.setProjectUrl(formioProjectUrl);
 Formio.use(premium); /* eslint-disable-line react-hooks/rules-of-hooks */
 Formio.use(uswds); /* eslint-disable-line react-hooks/rules-of-hooks */
 
@@ -61,11 +61,24 @@ export function UserDashboard(props: { email: string }) {
   useConfigQuery();
   useBapSamQuery();
 
+  const configData = useConfigData();
   const bapSamData = useBapSamData();
 
   const { displayDialog } = useDialogActions();
   const helpdeskAccess = useHelpdeskAccess();
 
+  useEffect(() => {
+    const { formioBaseUrl, formioProjectName } = configData ?? {};
+
+    if (formioBaseUrl) {
+      Formio.setBaseUrl(formioBaseUrl);
+    }
+
+    if (formioBaseUrl && formioProjectName) {
+      Formio.setProjectUrl(`${formioBaseUrl}/${formioProjectName}`);
+    }
+  }, [configData]);
+
   const onSubmissionsPage = pathname === "/";
   const onHelpdeskPage = pathname === "/helpdesk";
   const onFormPage =
@@ -93,7 +106,7 @@ export function UserDashboard(props: { email: string }) {
     });
   }
 
-  if (!bapSamData || !email) {
+  if (!configData || !bapSamData || !email) {
     return <Loading />;
   }
 

diff --git a/app/client/src/config.tsx b/app/client/src/config.tsx
@@ -1,20 +1,4 @@
-const {
-  MODE,
-  VITE_SERVER_BASE_PATH,
-  VITE_CLOUD_SPACE,
-  VITE_FORMIO_BASE_URL,
-  VITE_FORMIO_PROJECT_NAME,
-} = import.meta.env;
-
-if (!VITE_FORMIO_BASE_URL) {
-  const message = `Required VITE_FORMIO_BASE_URL environment variable not found.`;
-  throw new Error(message);
-}
-
-if (!VITE_FORMIO_PROJECT_NAME) {
-  const message = `Required VITE_FORMIO_PROJECT_NAME environment variable not found.`;
-  throw new Error(message);
-}
+const { MODE, VITE_SERVER_BASE_PATH, VITE_CLOUD_SPACE } = import.meta.env;
 
 // allows the app to be accessed from a sub directory of a server (e.g. /csb)
 export const serverBasePath =
@@ -25,12 +9,6 @@ export const serverUrl = window.location.origin + serverBasePath;
 export const cloudSpace =
   MODE === "development" ? "dev" : VITE_CLOUD_SPACE || "";
 
-export const formioBaseUrl = VITE_FORMIO_BASE_URL;
-
-const formioProjectName = VITE_FORMIO_PROJECT_NAME;
-
-export const formioProjectUrl = `${formioBaseUrl}/${formioProjectName}`;
-
 export const messages = {
   genericError: "The application has encountered an unknown error.",
   authError: "Authentication error. Please log in again or contact support.",

diff --git a/app/client/src/types.ts b/app/client/src/types.ts
@@ -25,6 +25,8 @@ export type UserData = {
 };
 
 export type ConfigData = {
+  formioBaseUrl: string;
+  formioProjectName: string;
   rebateYear: RebateYear;
   submissionPeriodOpen: {
     2022: { frf: boolean; prf: boolean; crf: boolean };

diff --git a/app/server/app/config/formio.js b/app/server/app/config/formio.js
@@ -40,7 +40,9 @@ const {
   FORMIO_API_KEY,
 } = process.env;
 
-const formioProjectUrl = `${FORMIO_BASE_URL}/${FORMIO_PROJECT_NAME}`;
+const formioBaseUrl = FORMIO_BASE_URL;
+const formioProjectName = FORMIO_PROJECT_NAME;
+const formioProjectUrl = `${formioBaseUrl}/${FORMIO_PROJECT_NAME}`;
 
 /**
  * Stores form url for each form by rebate year.
@@ -166,6 +168,8 @@ const formioNoUserAccess = {
 
 module.exports = {
   axiosFormio,
+  formioBaseUrl,
+  formioProjectName,
   formioProjectUrl,
   formUrl,
   formIntroSubstring,

diff --git a/app/server/app/routes/config.js b/app/server/app/routes/config.js
@@ -1,6 +1,10 @@
 const express = require("express");
 // ---
-const { submissionPeriodOpen } = require("../config/formio");
+const {
+  formioBaseUrl,
+  formioProjectName,
+  submissionPeriodOpen,
+} = require("../config/formio");
 const { ensureAuthenticated } = require("../middleware");
 
 const { CSB_REBATE_YEAR } = process.env;
@@ -16,6 +20,8 @@ router.get("/", (_req, res) => {
   const year = date.getFullYear().toString();
 
   return res.json({
+    formioBaseUrl,
+    formioProjectName,
     rebateYear: CSB_REBATE_YEAR || year,
     submissionPeriodOpen,
   });

diff --git a/docs/csb-openapi.json b/docs/csb-openapi.json
@@ -158,12 +158,20 @@
         "parameters": [],
         "responses": {
           "200": {
-            "description": "Open enrollment status (true/false) for each form, by rebate year.",
+            "description": "Formio base URL and project name, CSB rebate year and open enrollment status.",
             "content": {
               "application/json": {
                 "schema": {
                   "type": "object",
                   "properties": {
+                    "formioBaseUrl": {
+                      "type": "string",
+                      "example": "https://api.form.io"
+                    },
+                    "formioProjectName": {
+                      "type": "string",
+                      "example": "forms"
+                    },
                     "rebateYear": {
                       "schema": {
                         "type": "string",