Refactor to no longer use window.defaultConfig, instead create a module

Author: johnsimons

frontend/env.d.ts

@@ -1,15 +1 @@
 /// <reference types="vite/client" />
-
-export {};
-
-declare global {
-  interface Window {
-    defaultConfig: {
-      default_route: string;
-      version: string;
-      service_control_url: string;
-      monitoring_urls: string[];
-      showPendingRetry: boolean;
-    };
-  }
-}

frontend/src/defaultConfig.ts

@@ -0,0 +1,20 @@
+export interface DefaultConfig {
+  default_route: string;
+  version: string;
+  service_control_url: string;
+  monitoring_url: string;
+  showPendingRetry: boolean;
+}
+
+let config: DefaultConfig | null = null;
+
+export function setDefaultConfig(defaultConfig: DefaultConfig): void {
+  config = defaultConfig;
+}
+
+export function getDefaultConfig(): DefaultConfig {
+  if (!config) {
+    throw new Error("defaultConfig has not been initialized");
+  }
+  return config;
+}

frontend/src/main.ts

@@ -4,6 +4,7 @@ import "vue-toastification/dist/index.css";
 import "vue3-simple-typeahead/dist/vue3-simple-typeahead.css"; //Optional default CSS
 import "./assets/main.css";
 import "tippy.js/dist/tippy.css";
+import { setDefaultConfig } from "./defaultConfig";
 
 async function conditionallyEnableMocking() {
   if (process.env.NODE_ENV !== "dev-mocks") {
@@ -27,7 +28,7 @@ conditionallyEnableMocking()
     // eslint-disable-next-line promise/always-return
     if (response.ok) {
       const appConstants = await response.json();
-      window.defaultConfig = appConstants;
+      setDefaultConfig(appConstants);
     } else {
       console.error("Failed to load app constants");
     }

frontend/src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory, type RouteRecordRaw, RouteRecordSingleViewWithChildren } from "vue-router";
 import config, { RouteItem } from "./config";
+import { getDefaultConfig } from "@/defaultConfig";
 
 function meta(item: { title: string }) {
   return { title: `${item.title} • ServicePulse` };
@@ -43,7 +44,7 @@ export default function makeRouter() {
     return result;
   });
 
-  const defaultRoute = window.defaultConfig.default_route;
+  const defaultRoute = getDefaultConfig().default_route;
   if (!!defaultRoute && defaultRoute !== "/") {
     routes.push({
       path: "/",

frontend/src/stores/EnvironmentAndVersionsStore.ts

@@ -5,6 +5,7 @@ import { useMemoize } from "@vueuse/core";
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { computed, reactive } from "vue";
 import { useServiceControlStore } from "./ServiceControlStore";
+import { getDefaultConfig } from "@/defaultConfig";
 
 export const useEnvironmentAndVersionsStore = defineStore("EnvironmentAndVersionsStore", () => {
   const serviceControlStore = useServiceControlStore();
@@ -14,7 +15,7 @@ export const useEnvironmentAndVersionsStore = defineStore("EnvironmentAndVersion
     sc_version: "",
     minimum_supported_sc_version: "6.6.0",
     is_compatible_with_sc: true,
-    sp_version: window.defaultConfig && window.defaultConfig.version ? window.defaultConfig.version : "1.2.0",
+    sp_version: getDefaultConfig().version,
     supportsArchiveGroups: false,
     endpoints_error_url: "",
     known_endpoints_url: "",

frontend/src/stores/ServiceControlStore.ts

@@ -1,5 +1,6 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { computed, ref } from "vue";
+import { getDefaultConfig } from "@/defaultConfig";
 
 export const useServiceControlStore = defineStore("ServiceControlStore", () => {
   const serviceControlUrl = ref<string | null>();
@@ -26,10 +27,11 @@ export const useServiceControlStore = defineStore("ServiceControlStore", () => {
   function refresh() {
     const params = new URLSearchParams(window.location.search);
     const mu = params.get("mu");
+    const config = getDefaultConfig();
 
-    if (window.defaultConfig && window.defaultConfig.service_control_url) {
-      serviceControlUrl.value = window.defaultConfig.service_control_url;
-      console.debug(`setting ServiceControl Url to its default value: ${window.defaultConfig.service_control_url}`);
+    if (config.service_control_url) {
+      serviceControlUrl.value = config.service_control_url;
+      console.debug(`setting ServiceControl Url to its default value: ${config.service_control_url}`);
     } else {
       console.warn("ServiceControl Url is not defined.");
     }
@@ -41,9 +43,9 @@ export const useServiceControlStore = defineStore("ServiceControlStore", () => {
     } else if (window.localStorage.getItem("mu")) {
       monitoringUrl.value = window.localStorage.getItem("mu");
       console.debug(`Monitoring Url, not in QS, found in local storage: ${monitoringUrl.value}`);
-    } else if (window.defaultConfig && window.defaultConfig.monitoring_urls && window.defaultConfig.monitoring_urls.length) {
-      monitoringUrl.value = window.defaultConfig.monitoring_urls[0];
-      console.debug(`setting Monitoring Url to its default value: ${window.defaultConfig.monitoring_urls[0]}`);
+    } else if (config.monitoring_url) {
+      monitoringUrl.value = config.monitoring_url;
+      console.debug(`setting Monitoring Url to its default value: ${config.monitoring_url}`);
     } else {
       console.warn("Monitoring Url is not defined.");
     }

frontend/src/views/FailedMessagesView.vue

@@ -5,8 +5,9 @@ import routeLinks from "@/router/routeLinks";
 import isRouteSelected from "@/composables/isRouteSelected";
 import { storeToRefs } from "pinia";
 import useConnectionsAndStatsAutoRefresh from "@/composables/useConnectionsAndStatsAutoRefresh";
+import { getDefaultConfig } from "@/defaultConfig";
 
-const showPendingRetry = window.defaultConfig.showPendingRetry;
+const showPendingRetry = getDefaultConfig().showPendingRetry;
 const { store: connectionsAndStatsStore } = useConnectionsAndStatsAutoRefresh();
 connectionsAndStatsStore.requiresFullFailureDetails();
 const connectionState = connectionsAndStatsStore.connectionState;

frontend/src/views/ThroughputReportView.spec.ts

@@ -12,6 +12,7 @@ import Toast from "vue-toastification";
 import { serviceControlWithThroughput } from "@/views/throughputreport/serviceControlWithThroughput";
 import { useServiceControlStore } from "@/stores/ServiceControlStore";
 import { setActivePinia } from "pinia";
+import { getDefaultConfig } from "@/defaultConfig";
 
 describe("EndpointsView tests", () => {
   async function setup() {
@@ -100,7 +101,7 @@ describe("EndpointsView tests", () => {
       await renderComponent(Transport.AmazonSQS, async (driver) => {
         await driver.setUp(precondition.hasLicensingReportAvailable());
         await driver.setUp(precondition.hasLicensingEndpoints([{ name: "foo", is_known_endpoint: false, user_indicator: "something", max_daily_throughput: 0 }]));
-        driver.mockEndpoint(`${window.defaultConfig.service_control_url}licensing/report/file`, {
+        driver.mockEndpoint(`${getDefaultConfig().service_control_url}licensing/report/file`, {
           body: {},
           headers: {
             "Content-Disposition": `attachment; filename="${fileName}"`,

frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts

@@ -13,6 +13,7 @@ import { serviceControlWithThroughput } from "@/views/throughputreport/serviceCo
 import { flushPromises } from "@vue/test-utils";
 import { useServiceControlStore } from "@/stores/ServiceControlStore";
 import { setActivePinia } from "pinia";
+import { getDefaultConfig } from "@/defaultConfig";
 import { createTestingPinia } from "@pinia/testing";
 
 describe("DetectedListView tests", () => {
@@ -283,7 +284,7 @@ describe("DetectedListView tests", () => {
         ]
       ) =>
       ({ driver }: SetupFactoryOptions) => {
-        driver.mockEndpoint(`${window.defaultConfig.service_control_url}licensing/endpoints/update`, {
+        driver.mockEndpoint(`${getDefaultConfig().service_control_url}licensing/endpoints/update`, {
           body,
           method: "post",
           status: 200,

frontend/src/views/throughputreport/setup/MasksView.spec.ts

@@ -9,6 +9,7 @@ import { flushPromises } from "@vue/test-utils";
 import { createTestingPinia } from "@pinia/testing";
 import { useServiceControlStore } from "@/stores/ServiceControlStore";
 import { setActivePinia } from "pinia";
+import { getDefaultConfig } from "@/defaultConfig";
 
 describe("MaskView tests", () => {
   async function setup() {
@@ -26,7 +27,7 @@ describe("MaskView tests", () => {
 
   async function renderComponent(body: string[] = []) {
     const driver = await setup();
-    driver.mockEndpoint(`${window.defaultConfig.service_control_url}licensing/settings/masks`, { body });
+    driver.mockEndpoint(`${getDefaultConfig().service_control_url}licensing/settings/masks`, { body });
     setActivePinia(createTestingPinia({ stubActions: false }));
 
     useServiceControlStore();
@@ -68,7 +69,7 @@ describe("MaskView tests", () => {
     const use = userEvent.setup();
     await use.type(getTextAreaElement(), "\nthree\nfour\nfive");
 
-    driver.mockEndpoint(`${window.defaultConfig.service_control_url}licensing/settings/masks/update`, { body: undefined, method: "post" });
+    driver.mockEndpoint(`${getDefaultConfig().service_control_url}licensing/settings/masks/update`, { body: undefined, method: "post" });
     await use.click(screen.getByRole("button", { name: /Save/i }));
 
     expect(screen.queryAllByText(/Masks Saved/i).length).toBeGreaterThanOrEqual(1);