Shanbady/retrieve environment config (#653)

* injecting settings via env vars

* moving env vars to APP_SETTINGS and removed refs to  window.SETTINGS for non-user settings

* removing non user settings from js_settings on django side

* fixing build error

* removing interface

* changing interface type for app settings

* reverting to interface

* making utils a tsx file

* testing fix

* testing

* fixing types

* adding ckeditor attribute

* removing unused variable

* un-SHOUT-CASING warn message

frontends/mit-open/jest.config.ts

@@ -12,6 +12,11 @@ const config: Config.InitialOptions = {
     "^@/(.*)$": path.resolve(__dirname, "src/$1"),
     ...baseConfig.moduleNameMapper,
   },
+  globals: {
+    APP_SETTINGS: {
+      embedlyKey: "embedly_key",
+    },
+  },
 }
 
 export default config

frontends/mit-open/src/App.tsx

@@ -8,9 +8,9 @@ import routes from "./routes"
 import AppProviders from "./AppProviders"
 
 Sentry.init({
-  dsn: window.SETTINGS.sentry_dsn,
-  release: window.SETTINGS.release_version,
-  environment: window.SETTINGS.environment,
+  dsn: APP_SETTINGS.sentry_dsn,
+  release: APP_SETTINGS.release_version,
+  environment: APP_SETTINGS.environment,
 })
 
 const container = document.getElementById("app-container")

frontends/mit-open/src/common/constants.ts

@@ -2,22 +2,22 @@ import type { EmbedlyConfig } from "ol-utilities"
 
 const imgConfigs = {
   row: {
-    key: window.SETTINGS.embedlyKey,
+    key: APP_SETTINGS.embedlyKey,
     width: 170,
     height: 130,
   },
   "row-reverse": {
-    key: window.SETTINGS.embedlyKey,
+    key: APP_SETTINGS.embedlyKey,
     width: 170,
     height: 130,
   },
   "row-reverse-small": {
-    key: window.SETTINGS.embedlyKey,
+    key: APP_SETTINGS.embedlyKey,
     width: 160,
     height: 100,
   },
   column: {
-    key: window.SETTINGS.embedlyKey,
+    key: APP_SETTINGS.embedlyKey,
     width: 220,
     height: 170,
   },

frontends/mit-open/src/test-utils/setupJest.ts

@@ -17,9 +17,6 @@ jest.mock("axios", () => {
 })
 
 const _createSettings = () => ({
-  embedlyKey: "fake",
-  ocw_next_base_url: "fake-ocw.com",
-  search_page_size: 4,
   user: makeUserSettings(),
 })
 

frontends/mit-open/src/types/settings.d.ts

@@ -17,12 +17,13 @@ export declare global {
    * Settings injected by Django
    */
   interface SETTINGS {
-    search_page_size: number
-    embedlyKey: string
-    ocw_next_base_url: string
     user: User
+  }
+  const APP_SETTINGS: {
+    search_page_size: number
     sentry_dsn?: string
     release_version?: string
     environment?: string
+    embedlyKey: string
   }
 }

frontends/mit-open/webpack.config.js

@@ -84,6 +84,18 @@ const getWebpackConfig = ({ mode, analyzeBundle }) => {
           env: { NODE_ENV: JSON.stringify(mode) },
         },
       }),
+      new webpack.DefinePlugin({
+        APP_SETTINGS: {
+          embedlyKey: JSON.stringify(process.env.EMBEDLY_KEY),
+          search_page_size: JSON.stringify(
+            process.env.OPENSEARCH_DEFAULT_PAGE_SIZE,
+          ),
+          ckeditor_upload_url: JSON.stringify(process.env.CKEDITOR_UPLOAD_URL),
+          environment: JSON.stringify(process.env.ENVIRONMENT),
+          sentry_dsn: JSON.stringify(process.env.SENTRY_DSN),
+          release_version: JSON.stringify(process.env.VERSION),
+        },
+      }),
     ]
       .concat(
         isProduction

frontends/ol-ckeditor/jest.config.ts

@@ -12,6 +12,12 @@ const config: Config.InitialOptions = {
       "|vanilla-colorful" +
       ")/)",
   ],
+  globals: {
+    APP_SETTINGS: {
+      ckeditor_upload_url: "https://meowmeow.com",
+      embedlyKey: "embedly_key",
+    },
+  },
 }
 
 export default config

frontends/ol-ckeditor/src/components/cloudServices.test.ts

@@ -13,7 +13,7 @@ describe("cloudServicesConfig", () => {
   })
 
   test("ckeditor_upload_url is set from global SETTINGS", () => {
-    window.SETTINGS.ckeditor_upload_url = "https://meowmeow.com"
+    APP_SETTINGS.ckeditor_upload_url = "https://meowmeow.com"
     const cloud = getCloudServicesConfig()
     expect(cloud.uploadUrl).toBe("https://meowmeow.com")
   })

frontends/ol-ckeditor/src/components/cloudServices.ts

@@ -3,7 +3,7 @@ import axios from "axios"
 
 const cloudServicesConfig = () =>
   ({
-    uploadUrl: window.SETTINGS.ckeditor_upload_url,
+    uploadUrl: APP_SETTINGS.ckeditor_upload_url,
     tokenUrl: async () => {
       const { data } = await axios.get("/api/v0/ckeditor/")
       return data as string

frontends/ol-ckeditor/src/setupJest.ts

@@ -1,8 +1,3 @@
-window.SETTINGS = {
-  ckeditor_upload_url: "https://ckeditor_upload_url.com",
-  embedlyKey: "embedly_key",
-}
-
 /**
  * CKEditor sometimes creates ResizeObservers, which JSDOM does not support.
  *

frontends/ol-ckeditor/src/types/settings.d.ts

@@ -1,14 +1,8 @@
 /* eslint-disable no-var */
 
 export declare global {
-  interface Window {
-    SETTINGS: SETTINGS
-  }
-
-  /**
-   * Settings injected by Django
-   */
-  interface SETTINGS {
+  const APP_SETTINGS: {
+    embedlyKey: string
     ckeditor_upload_url?: string
   }
 }

frontends/ol-utilities/jest.config.ts

@@ -1,14 +1,12 @@
 import type { Config } from "@jest/types"
 import baseConfig from "../../jest.jsdom.config"
 
-const _createSettings = () => ({
-  embedlyKey: "fake-embedly-key",
-})
-
 const config: Config.InitialOptions = {
   ...baseConfig,
   globals: {
-    SETTINGS: _createSettings(),
+    APP_SETTINGS: {
+      embedlyKey: "fake-embedly-key",
+    },
   },
 }
 

frontends/ol-utilities/src/components/embedly/util.ts

@@ -82,9 +82,9 @@ const createStylesheet = (doc: Document, css: string) => {
 }
 
 const getEmbedlyKey = (): string | null => {
-  const key = window.SETTINGS?.embedlyKey
+  const key = APP_SETTINGS.embedlyKey
   if (typeof key === "string") return key
-  console.warn("window.SETTINGS.EMBEDLY_KEY should be a string.")
+  console.warn("APP_SETTINGS.embedlyKey should be a string.")
   return null
 }
 

frontends/ol-utilities/src/types/settings.d.ts

@@ -1,14 +1,11 @@
 /* eslint-disable no-var */
 
 export declare global {
-  interface Window {
-    SETTINGS: SETTINGS
-  }
-
-  /**
-   * Settings injected by Django
-   */
-  interface SETTINGS {
+  declare const APP_SETTINGS: {
     embedlyKey: string
+    ckeditor_upload_url?: string
+    sentry_dsn?: string
+    release_version?: string
+    environment?: string
   }
 }

frontends/ol-widgets/jest.config.ts

@@ -4,6 +4,11 @@ import baseConfig from "../../jest.jsdom.config"
 const config: Config.InitialOptions = {
   ...baseConfig,
   setupFilesAfterEnv: [...baseConfig.setupFilesAfterEnv, "./setupJest.ts"],
+  globals: {
+    APP_SETTINGS: {
+      embedlyKey: "fake-embedly-key",
+    },
+  },
 }
 
 export default config

frontends/ol-widgets/src/setupJest.ts

@@ -10,7 +10,3 @@ afterEach(() => {
    */
   jest.clearAllMocks()
 })
-
-window.SETTINGS = {
-  embedlyKey: "fake-embedly-key",
-}

frontends/ol-widgets/src/types/settings.d.ts

@@ -1,14 +1 @@
 /* eslint-disable no-var */
-
-export declare global {
-  interface Window {
-    SETTINGS: SETTINGS
-  }
-
-  /**
-   * Settings injected by Django
-   */
-  interface SETTINGS {
-    embedlyKey?: string
-  }
-}

main/views.py

@@ -2,7 +2,6 @@
 main views
 """
 
-from django.conf import settings
 from django.http import (
     HttpResponseBadRequest,
     HttpResponseForbidden,
@@ -20,9 +19,6 @@ def index(request, **kwargs):  # pylint: disable=unused-argument  # noqa: ARG001
     user = request.user
 
     js_settings = {
-        "embedlyKey": settings.EMBEDLY_KEY,
-        "ocw_next_base_url": settings.OCW_BASE_URL,
-        "search_page_size": settings.OPENSEARCH_DEFAULT_PAGE_SIZE,
         "user": {
             "id": user.id,
             "first_name": getattr(user, "first_name", None),
@@ -32,10 +28,6 @@ def index(request, **kwargs):  # pylint: disable=unused-argument  # noqa: ARG001
             and (is_admin_user(request) or is_learning_path_editor(request)),
             "is_article_editor": is_admin_user(request),
         },
-        "ckeditor_upload_url": settings.CKEDITOR_UPLOAD_URL,
-        "environment": settings.ENVIRONMENT,
-        "sentry_dsn": settings.SENTRY_DSN,
-        "release_version": settings.VERSION,
     }
 
     return render(request, "index.html", context={"js_settings": js_settings})