Moves all env vars to global APP_SETTINGS

frontends/README.md

@@ -56,11 +56,3 @@ yarn watch
 ```
 
 **Warning:** Depending on your host operating system (e.g., Macs), node packages installed on your host vs on the container may not be compatible. You may need to reinstall node_modules in order to run on host.
-
-### Running locally against RC
-
-For frontend-only work, you can run your frontend against the RC backend via
-
-```bash
-yarn workspace frontends watch:rc
-```

frontends/api/jest.config.ts

@@ -9,8 +9,8 @@ const config: Config.InitialOptions = {
   ],
   globals: {
     APP_SETTINGS: {
-      axios_with_credentials: "False",
-      axios_base_path: "",
+      MITOPEN_AXIOS_WITH_CREDENTIALS: false,
+      MITOPEN_API_BASE_URL: "https://api.mitopen-test.odl.mit.edu",
     },
   },
 }

frontends/api/src/axios.ts

@@ -7,8 +7,7 @@ const instance = axios.create({
   xsrfCookieName: "csrftoken",
   xsrfHeaderName: "X-CSRFToken",
   withXSRFToken: true,
-  withCredentials:
-    APP_SETTINGS.axios_with_credentials?.toLowerCase() === "true",
+  withCredentials: APP_SETTINGS.MITOPEN_AXIOS_WITH_CREDENTIALS,
 })
 
 export default instance

frontends/api/src/clients.ts

@@ -24,7 +24,9 @@ import {
 
 import axiosInstance from "./axios"
 
-const BASE_PATH = process.env.MITOPEN_API_BASE_URL?.replace(/\/+$/, "") ?? ""
+const { MITOPEN_API_BASE_URL } = APP_SETTINGS
+
+const BASE_PATH = MITOPEN_API_BASE_URL?.replace(/\/+$/, "") ?? ""
 
 const learningResourcesApi = new LearningResourcesApi(
   undefined,

frontends/api/src/test-utils/urls.ts

@@ -26,7 +26,7 @@ import type {
 import type { BaseAPI } from "../generated/v1/base"
 import type { BaseAPI as BaseAPIv0 } from "../generated/v0/base"
 
-const API_BASE_URL = process.env.MITOPEN_API_BASE_URL
+const { MITOPEN_API_BASE_URL: API_BASE_URL } = APP_SETTINGS
 
 // OpenAPI Generator declares parameters using interfaces, which makes passing
 // them to functions a little annoying.

frontends/api/src/types/settings.d.ts

@@ -2,7 +2,7 @@
 
 export declare global {
   const APP_SETTINGS: {
-    axios_with_credentials?: string
-    axios_base_path?: string
+    MITOPEN_AXIOS_WITH_CREDENTIALS?: boolean
+    MITOPEN_API_BASE_URL?: string
   }
 }

frontends/jest.jsdom.config.ts

@@ -1,8 +1,6 @@
 import { resolve } from "path"
 import type { Config } from "@jest/types"
 
-process.env.SITE_NAME = "MIT Open"
-
 /**
  * Base configuration for jest tests.
  */

frontends/mit-open/.storybook/main.ts

@@ -34,10 +34,9 @@ const config = {
   },
   env: (config: any) => ({
     ...config,
-    PUBLIC_URL: process.env.PUBLIC_URL || "",
-    EMBEDLY_KEY: process.env.EMBEDLY_KEY || "",
     APP_SETTINGS: {
-      embedlyKey: process.env.EMBEDLY_KEY || "",
+      PUBLIC_URL: process.env.PUBLIC_URL || "",
+      EMBEDLY_KEY: process.env.EMBEDLY_KEY || "",
     },
   }),
 }

frontends/mit-open/jest.config.ts

@@ -15,10 +15,11 @@ const config: Config.InitialOptions = {
   transformIgnorePatterns: ["/node_modules/(?!(" + "yaml", ")/)"],
   globals: {
     APP_SETTINGS: {
-      embedlyKey: "embedly_key",
-      axios_base_path: "https://api.mitopen-test.odl.mit.edu",
+      EMBEDLY_KEY: "embedly_key",
+      MITOPEN_API_BASE_URL: "https://api.mitopen-test.odl.mit.edu",
+      PUBLIC_URL: "",
+      SITE_NAME: "MIT Open",
     },
-    MITOPEN_API_BASE_URL: "https://api.mitopen-test.odl.mit.edu",
   },
 }
 

frontends/mit-open/src/App.tsx

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

frontends/mit-open/src/AppProviders.test.tsx

@@ -10,7 +10,7 @@ jest.mock("posthog-js/react", () => ({
 
 describe("PostHogProvider", () => {
   it("Renders with PostHog support if enabled", async () => {
-    APP_SETTINGS.posthog = {
+    APP_SETTINGS.POSTHOG = {
       api_key: "12345", // pragma: allowlist secret
     }
 
@@ -22,7 +22,7 @@ describe("PostHogProvider", () => {
   })
 
   it("Renders without PostHog support if disabled", async () => {
-    APP_SETTINGS.posthog = {
+    APP_SETTINGS.POSTHOG = {
       api_key: "", // pragma: allowlist secret
     }
 

frontends/mit-open/src/AppProviders.tsx

@@ -8,7 +8,6 @@ import { Provider as NiceModalProvider } from "@ebay/nice-modal-react"
 import { ThemeProvider } from "ol-components"
 import GlobalStyles from "./GlobalStyles"
 import { PostHogProvider } from "posthog-js/react"
-
 import type { PostHogSettings } from "./types/settings"
 
 interface AppProps {
@@ -20,12 +19,14 @@ interface AppProps {
  * Renders child with Router, QueryClientProvider, and other such context provides.
  */
 const AppProviders: React.FC<AppProps> = ({ router, queryClient }) => {
-  const phSettings: PostHogSettings =
-    APP_SETTINGS.posthog?.api_key && APP_SETTINGS.posthog.api_key.length > 0
-      ? APP_SETTINGS.posthog
-      : {
-          api_key: "",
-        }
+  const { POSTHOG } = APP_SETTINGS
+
+  const phSettings: PostHogSettings = POSTHOG?.api_key?.length
+    ? POSTHOG
+    : {
+        api_key: "",
+      }
+
   const phOptions = {
     feature_flag_request_timeout_ms: phSettings.timeout || 3000,
     bootstrap: {

frontends/mit-open/src/common/urls.test.ts

@@ -1,6 +1,6 @@
 import { login } from "./urls"
 
-const { MITOPEN_API_BASE_URL } = process.env
+const { MITOPEN_API_BASE_URL } = APP_SETTINGS
 
 test("login encodes the next parameter appropriately", () => {
   expect(login()).toBe(

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

@@ -40,8 +40,10 @@ export const makeChannelManageWidgetsPath = (
   name: string,
 ) => generatePath(CHANNEL_EDIT_WIDGETS, { channelType, name })
 
-export const LOGIN = `${process.env.MITOPEN_API_BASE_URL}/login/ol-oidc/`
-export const LOGOUT = `${process.env.MITOPEN_API_BASE_URL}/logout/`
+const { MITOPEN_API_BASE_URL } = APP_SETTINGS
+
+export const LOGIN = `${MITOPEN_API_BASE_URL}/login/ol-oidc/`
+export const LOGOUT = `${MITOPEN_API_BASE_URL}/logout/`
 
 /**
  * Returns the URL to the login page, with a `next` parameter to redirect back

frontends/mit-open/src/page-components/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import { MITLogoLink } from "ol-utilities"
 import * as urls from "@/common/urls"
 import React, { FunctionComponent } from "react"
 
-const PUBLIC_URL = process.env.PUBLIC_URL || ""
+const PUBLIC_URL = APP_SETTINGS.PUBLIC_URL
 const HOME_URL = `${PUBLIC_URL}/`
 
 const FooterContainer = styled.div(({ theme }) => ({

frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx

@@ -35,19 +35,20 @@ jest.mock("posthog-js/react", () => ({
 
 describe("LearningResourceDrawer", () => {
   it.each([
-    ["is enabled", true],
-    ["is not enabled", false],
+    { descriptor: "is enabled", enablePostHog: true },
+    { descriptor: "is not enabled", enablePostHog: false },
   ])(
     "Renders drawer content when resource=id is in the URL and captures the view if PostHog $descriptor",
-    async (descriptor, enablePostHog) => {
-      APP_SETTINGS.posthog = {
+    async ({ enablePostHog }) => {
+      APP_SETTINGS.POSTHOG = {
         api_key: enablePostHog ? "test1234" : "", // pragma: allowlist secret
       }
       const resource = factories.learningResources.resource()
       setMockResponse.get(
         urls.learningResources.details({ id: resource.id }),
         resource,
       )
+
       renderWithProviders(<LearningResourceDrawer />, {
         url: `?dog=woof&${RESOURCE_DRAWER_QUERY_PARAM}=${resource.id}`,
       })
@@ -56,6 +57,7 @@ describe("LearningResourceDrawer", () => {
         expectProps(LearningResourceExpanded, { resource })
       })
       await screen.findByRole("heading", { name: resource.title })
+
       if (enablePostHog) {
         expect(mockedPostHogCapture).toHaveBeenCalled()
       } else {

frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx

@@ -16,12 +16,10 @@ const useCapturePageView = (resourceId: number) => {
   const { data, isSuccess } = useLearningResourcesDetail(Number(resourceId))
   const posthog = usePostHog()
 
+  const { POSTHOG } = APP_SETTINGS
+
   useEffect(() => {
-    if (
-      !APP_SETTINGS.posthog?.api_key ||
-      APP_SETTINGS.posthog.api_key.length < 1
-    )
-      return
+    if (!POSTHOG?.api_key || POSTHOG.api_key.length < 1) return
     if (!isSuccess) return
     posthog.capture("lrd_view", {
       resourceId: data?.id,
@@ -36,6 +34,7 @@ const useCapturePageView = (resourceId: number) => {
     data?.readable_id,
     data?.platform?.code,
     data?.resource_type,
+    POSTHOG?.api_key,
   ])
 }
 

frontends/mit-open/src/page-components/SignupPopover/SignupPopover.tsx

@@ -31,7 +31,7 @@ const SignupPopover: React.FC<SignupPopoverProps> = (props) => {
   return (
     <StyledPopover {...props} open={!!props.anchorEl}>
       <HeaderText variant="subtitle2">
-        Join {process.env.SITE_NAME} for free.
+        Join {APP_SETTINGS.SITE_NAME} for free.
       </HeaderText>
       <BodyText variant="body2">
         As a member, get personalized recommendations, curate learning lists,

frontends/mit-open/src/pages/AboutPage/AboutPage.tsx

@@ -165,11 +165,11 @@ const AboutPage: React.FC = () => {
               component="h2"
               id={WHAT_IS_MIT_OPEN_FRAGMENT_IDENTIFIER}
             >
-              What is {process.env.SITE_NAME}?
+              What is {APP_SETTINGS.SITE_NAME}?
             </Typography>
             <Typography variant="body1">
-              {process.env.SITE_NAME} offers a single platform for accessing all
-              of MIT's non-degree learning resources. This includes courses,
+              {APP_SETTINGS.SITE_NAME} offers a single platform for accessing
+              all of MIT's non-degree learning resources. This includes courses,
               programs, and various educational materials from different MIT
               units such as MITx, MIT Bootcamps, MIT OpenCourseWare, MIT
               Professional Education, MIT Sloan Executive Education, MIT xPRO,

frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.test.tsx

@@ -10,7 +10,7 @@ import {
   user,
   waitFor,
 } from "../../test-utils"
-import type { User } from "../../types/settings"
+import type { User } from "../../test-utils"
 
 /**
  * Set up the mock API responses for lists pages.

frontends/mit-open/src/pages/PrivacyPage/PrivacyPage.tsx

@@ -51,8 +51,7 @@ const UnorderedList = styled.ul(({ theme }) => ({
   ...theme.typography.body1,
 }))
 
-const { SITE_NAME } = process.env
-const { MITOPEN_SUPPORT_EMAIL } = process.env
+const { SITE_NAME, MITOPEN_SUPPORT_EMAIL } = APP_SETTINGS
 
 const PrivacyPage: React.FC = () => {
   return (

frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.test.tsx

@@ -9,7 +9,8 @@ import {
   expectProps,
   waitFor,
 } from "../../test-utils"
-import type { User } from "../../types/settings"
+import type { User } from "../../test-utils"
+
 import { UserListListingPage } from "./UserListListingPage"
 import UserListCardTemplate from "@/page-components/UserListCardTemplate/UserListCardTemplate"
 import { manageListDialogs } from "@/page-components/ManageListDialogs/ManageListDialogs"

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-var */
 export type User = {
   id: number | null
   first_name: string | null
@@ -15,22 +14,10 @@ export type PostHogSettings = {
 }
 
 export declare global {
-  interface Window {
-    SETTINGS: SETTINGS
-  }
-
-  /**
-   * Settings injected by Django
-   */
-  interface SETTINGS {
-    user: User
-    posthog?: PostHogSettings
-  }
   const APP_SETTINGS: {
-    search_page_size: number
-    sentry_dsn?: string
-    release_version?: string
-    environment?: string
-    embedlyKey: string
+    SENTRY_DSN?: string
+    VERSION?: string
+    ENVIRONMENT?: string
+    posthog?: PostHogSettings
   }
 }