Add an env wrapper

src/App.js

@@ -27,6 +27,7 @@ import { applicationTitle } from "./components/common/Helper";
 import { CreateIOCAccessControl } from "./views/IOC/CreateIOCAccessControl";
 import { UserDetailsAccessControl } from "./views/UserPage/UserDetailsAccessControl";
 import { DeployAPIProvider } from "./api/DeployApi";
+import env from "./config/env";
 
 // setting up the application (TAB)title
 function App() {
@@ -34,7 +35,7 @@ function App() {
   useEffect(() => setTitle(applicationTitle()), [setTitle]);
 
   return (
-    <AppErrorBoundary supportHref={window.SUPPORT_URL}>
+    <AppErrorBoundary supportHref={env.SUPPORT_URL}>
       <BrowserRouter>
         <SnackbarProvider
           preventDuplicate

src/api/DeployApi.js

@@ -6,7 +6,7 @@ import React from "react";
 import { createContext } from "react";
 import { APIProvider } from "@ess-ics/ce-ui-common";
 import { node, arrayOf, oneOfType } from "prop-types";
-
+import env from "../config/env";
 const propTypes = {
   /** Elements used as children */
   children: oneOfType([
@@ -20,8 +20,8 @@ const propTypes = {
 export const apiContext = createContext(null);
 
 const apiOptions = {
-  url: `${window.API_BASE_ENDPOINT}`,
-  server: `${window.SERVER_ADDRESS}`,
+  url: `${env.API_BASE_ENDPOINT}`,
+  server: `${env.SERVER_ADDRESS}`,
   // Workaround for https://github.com/swagger-api/swagger-js/issues/1022
   // Empty body POST requests are sent with Content-Type text/plaintext
   // instead of no content type, or application/json

src/components/IOC/IOCManage/IOCManage.js

@@ -21,6 +21,7 @@ import { DeploymentStatus } from "../../../api/DataTypes";
 import { IOCService } from "../IOCService";
 import { JobTable } from "../../Job";
 import { apiContext } from "../../../api/DeployApi";
+import env from "../../../config/env";
 
 export function IOCManage({
   ioc,
@@ -81,7 +82,7 @@ export function IOCManage({
       let subset = {
         "Naming service record": (
           <ExternalLink
-            href={`${window.NAMING_ADDRESS}/devices.xhtml?i=2&deviceName=${ioc.namingName}`}
+            href={`${env.NAMING_ADDRESS}/devices.xhtml?i=2&deviceName=${ioc.namingName}`}
             label="Naming Service Record"
           >
             {ioc.namingName}

src/components/auth/AccessDenied/AccessDenied.js

 import React from "react";
 import { ServerErrorPage } from "@ess-ics/ce-ui-common";
+import env from "../../../config/env";
 
 export default function AccessDenied() {
   return (
     <ServerErrorPage
       message="You do not have permission to access this page. Please contact an administrator to request access"
       status={401}
-      supportHref={window.SUPPORT_URL}
+      supportHref={env.SUPPORT_URL}
     />
   );
 }

src/components/auth/TokenRenew/TokenRenew.js

 import { useContext, useCallback } from "react";
 import { apiContext } from "../../../api/DeployApi";
 import { userContext, useAPIMethod, usePolling } from "@ess-ics/ce-ui-common";
+import env from "../../../config/env";
 
 export default function TokenRenew() {
   const { user } = useContext(userContext);
@@ -25,12 +26,7 @@ export default function TokenRenew() {
     }
   }, [user, renewToken, abort]);
 
-  usePolling(
-    renewTokenWhenLoggedIn,
-    loading,
-    window.TOKEN_RENEW_INTERVAL,
-    abort
-  );
+  usePolling(renewTokenWhenLoggedIn, loading, env.TOKEN_RENEW_INTERVAL, abort);
 
   return null;
 }

src/components/common/Helper.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { alpha } from "@mui/material/styles";
 import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
+import env from "../../config/env";
 
 export function formatToList(items) {
   if (!items) {
@@ -66,7 +67,7 @@ export function circularPalette(palette, index, opacity = 1.0) {
 }
 
 function applicationSubTitle() {
-  const title = `${window.ENVIRONMENT_TITLE}`;
+  const title = `${env.ENVIRONMENT_TITLE}`;
 
   if (title && title !== "undefined") {
     return " - " + title;

src/components/navigation/NotFoundView/NotFoundView.tsx

@@ -4,6 +4,7 @@
  */
 import React from "react";
 import { ServerErrorPage, RootPaper } from "@ess-ics/ce-ui-common";
+import env from "../../../config/env";
 
 interface NotFoundProps {
   /** String containing message of page not found. Otherwise defaults to a generic "Page Not Found" message */
@@ -17,7 +18,7 @@ export default function NotFoundView({ message, status }: NotFoundProps) {
       <ServerErrorPage
         status={status}
         message={message}
-        supportHref={window.SUPPORT_URL}
+        supportHref={env.SUPPORT_URL}
       />
     </RootPaper>
   );

src/config/env.js

+const env = {
+  SERVER_ADDRESS: window.SERVER_ADDRESS,
+  ENVIRONMENT_TITLE: window.ENVIRONMENT_TITLE,
+  API_BASE_ENDPOINT: window.API_BASE_ENDPOINT,
+  TOKEN_RENEW_INTERVAL: window.TOKEN_RENEW_INTERVAL,
+  FRONTEND_VERSION: window.FRONTEND_VERSION,
+  FRONTEND_REPOSITORY_TAGS: window.FRONTEND_REPOSITORY_TAGS,
+  SUPPORT_URL: window.SUPPORT_URL,
+  NETBOX_ADDRESS: window.NETBOX_ADDRESS,
+  NAMING_ADDRESS: window.NETBOX_ADDRESS
+};
+
+export default env;

src/views/help/HelpView.js

@@ -3,6 +3,7 @@ import { RootPaper, Help } from "@ess-ics/ce-ui-common";
 import { Stack, Typography } from "@mui/material";
 import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
 import { applicationTitle } from "../../components/common/Helper";
+import env from "../../config/env";
 
 export function HelpView() {
   const { setTitle } = useContext(GlobalAppBarContext);
@@ -39,9 +40,9 @@ export function HelpView() {
           </Stack>
         }
         docsHref="https://confluence.esss.lu.se/x/CVGQFg"
-        supportHref={window.SUPPORT_URL}
-        version={window.FRONTEND_VERSION}
-        versionHref={`${window.FRONTEND_REPOSITORY_TAGS}${window.FRONTEND_VERSION}`}
+        supportHref={env.SUPPORT_URL}
+        version={env.FRONTEND_VERSION}
+        versionHref={`${env.FRONTEND_REPOSITORY_TAGS}${env.FRONTEND_VERSION}`}
       />
     </RootPaper>
   );

src/views/host/details/HostDetailsView.js

@@ -21,6 +21,7 @@ import {
 import { HostDetailsTable } from "./HostDetailsTable";
 import { HostJobsSection } from "./HostJobsSection";
 import { HostIocSection } from "./HostIocSection";
+import env from "../../../config/env";
 
 export function HostDetailsView({ hostId, host }) {
   const { setTitle } = useContext(GlobalAppBarContext);
@@ -124,15 +125,15 @@ export function HostDetailsView({ hostId, host }) {
                 <ExternalLink
                   href={
                     host?.netBoxHost.vm
-                      ? `${window.NETBOX_ADDRESS}/virtualization/virtual-machines/${host?.netBoxHost.id}`
-                      : `${window.NETBOX_ADDRESS}/dcim/devices/${host?.netBoxHost.id}`
+                      ? `${env.NETBOX_ADDRESS}/virtualization/virtual-machines/${host?.netBoxHost.id}`
+                      : `${env.NETBOX_ADDRESS}/dcim/devices/${host?.netBoxHost.id}`
                   }
                   aria-label="Host Configuration"
                 >
                   {" "}
                   {host?.netBoxHost.vm
-                    ? `${window.NETBOX_ADDRESS}/virtualization/virtual-machines/${host?.netBoxHost.id}`
-                    : `${window.NETBOX_ADDRESS}/dcim/devices/${host?.netBoxHost.id}`}
+                    ? `${env.NETBOX_ADDRESS}/virtualization/virtual-machines/${host?.netBoxHost.id}`
+                    : `${env.NETBOX_ADDRESS}/dcim/devices/${host?.netBoxHost.id}`}
                 </ExternalLink>
               ),
               "Host Metrics": (