diff --git a/frontends/README.md b/frontends/README.md index cb4af9149d..dd252c2115 100644 --- a/frontends/README.md +++ b/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 -``` diff --git a/frontends/api/jest.config.ts b/frontends/api/jest.config.ts index 4ac2f039a7..6fd5ec7cba 100644 --- a/frontends/api/jest.config.ts +++ b/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", }, }, } diff --git a/frontends/api/src/axios.ts b/frontends/api/src/axios.ts index 15f955b9de..bdbe07e8be 100644 --- a/frontends/api/src/axios.ts +++ b/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 diff --git a/frontends/api/src/clients.ts b/frontends/api/src/clients.ts index b0768a3f5a..f3500fafab 100644 --- a/frontends/api/src/clients.ts +++ b/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, diff --git a/frontends/api/src/test-utils/urls.ts b/frontends/api/src/test-utils/urls.ts index ca3575339f..3f608c939a 100644 --- a/frontends/api/src/test-utils/urls.ts +++ b/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. diff --git a/frontends/api/src/types/settings.d.ts b/frontends/api/src/types/settings.d.ts index 21d40e72ae..0354c84532 100644 --- a/frontends/api/src/types/settings.d.ts +++ b/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 } } diff --git a/frontends/jest.jsdom.config.ts b/frontends/jest.jsdom.config.ts index 246e6514bd..6c7ce2b08f 100644 --- a/frontends/jest.jsdom.config.ts +++ b/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. */ diff --git a/frontends/mit-open/.storybook/main.ts b/frontends/mit-open/.storybook/main.ts index 704846239a..9a386af71c 100644 --- a/frontends/mit-open/.storybook/main.ts +++ b/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 || "", }, }), } diff --git a/frontends/mit-open/jest.config.ts b/frontends/mit-open/jest.config.ts index 0f60c4a731..d85982912e 100644 --- a/frontends/mit-open/jest.config.ts +++ b/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", }, } diff --git a/frontends/mit-open/src/App.tsx b/frontends/mit-open/src/App.tsx index 0183305b97..828a739c2d 100644 --- a/frontends/mit-open/src/App.tsx +++ b/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") diff --git a/frontends/mit-open/src/AppProviders.test.tsx b/frontends/mit-open/src/AppProviders.test.tsx index 5349863e37..2fdd906635 100644 --- a/frontends/mit-open/src/AppProviders.test.tsx +++ b/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 } diff --git a/frontends/mit-open/src/AppProviders.tsx b/frontends/mit-open/src/AppProviders.tsx index 22695357af..99fac0f5a3 100644 --- a/frontends/mit-open/src/AppProviders.tsx +++ b/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 = ({ 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: { diff --git a/frontends/mit-open/src/common/urls.test.ts b/frontends/mit-open/src/common/urls.test.ts index d1f3ed85dc..0fbdc25aec 100644 --- a/frontends/mit-open/src/common/urls.test.ts +++ b/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( diff --git a/frontends/mit-open/src/common/urls.ts b/frontends/mit-open/src/common/urls.ts index f38cb155a9..51eaaa4076 100644 --- a/frontends/mit-open/src/common/urls.ts +++ b/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 diff --git a/frontends/mit-open/src/page-components/Footer/Footer.tsx b/frontends/mit-open/src/page-components/Footer/Footer.tsx index 2de4695d0e..d6df910d08 100644 --- a/frontends/mit-open/src/page-components/Footer/Footer.tsx +++ b/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 }) => ({ diff --git a/frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx b/frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx index f76fcd2b7f..87704724bd 100644 --- a/frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx +++ b/frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx @@ -35,12 +35,12 @@ 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() @@ -48,6 +48,7 @@ describe("LearningResourceDrawer", () => { urls.learningResources.details({ id: resource.id }), resource, ) + renderWithProviders(, { 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 { diff --git a/frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx b/frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx index 1e0ff15c02..64724f2427 100644 --- a/frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx +++ b/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, ]) } diff --git a/frontends/mit-open/src/page-components/SignupPopover/SignupPopover.tsx b/frontends/mit-open/src/page-components/SignupPopover/SignupPopover.tsx index 3e034c9279..64487d1b25 100644 --- a/frontends/mit-open/src/page-components/SignupPopover/SignupPopover.tsx +++ b/frontends/mit-open/src/page-components/SignupPopover/SignupPopover.tsx @@ -31,7 +31,7 @@ const SignupPopover: React.FC = (props) => { return ( - Join {process.env.SITE_NAME} for free. + Join {APP_SETTINGS.SITE_NAME} for free. As a member, get personalized recommendations, curate learning lists, diff --git a/frontends/mit-open/src/pages/AboutPage/AboutPage.tsx b/frontends/mit-open/src/pages/AboutPage/AboutPage.tsx index 1f13a0fd8a..b298de0651 100644 --- a/frontends/mit-open/src/pages/AboutPage/AboutPage.tsx +++ b/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}? - {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, diff --git a/frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.test.tsx b/frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.test.tsx index 75fac9d5b7..b1eca00d5c 100644 --- a/frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.test.tsx +++ b/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. diff --git a/frontends/mit-open/src/pages/PrivacyPage/PrivacyPage.tsx b/frontends/mit-open/src/pages/PrivacyPage/PrivacyPage.tsx index bad2f7d98d..a10cdd1590 100644 --- a/frontends/mit-open/src/pages/PrivacyPage/PrivacyPage.tsx +++ b/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 ( diff --git a/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.test.tsx b/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.test.tsx index 5b737e0eb6..753b9e9c39 100644 --- a/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.test.tsx +++ b/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" diff --git a/frontends/mit-open/src/types/settings.d.ts b/frontends/mit-open/src/types/settings.d.ts index c59600fde5..d5c99ea243 100644 --- a/frontends/mit-open/src/types/settings.d.ts +++ b/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 } } diff --git a/frontends/mit-open/webpack.config.js b/frontends/mit-open/webpack.config.js index 37ae525c2d..63900495d2 100644 --- a/frontends/mit-open/webpack.config.js +++ b/frontends/mit-open/webpack.config.js @@ -26,14 +26,20 @@ const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin" const { cleanEnv, str, bool, port } = require("envalid") const { - NODE_ENV, ENVIRONMENT, + NODE_ENV, PORT, + VERSION, MITOPEN_API_BASE_URL, API_DEV_PROXY_BASE_URL, WEBPACK_ANALYZE, SITE_NAME, + PUBLIC_URL, MITOPEN_SUPPORT_EMAIL, + MITOPEN_AXIOS_WITH_CREDENTIALS, + EMBEDLY_KEY, + CKEDITOR_UPLOAD_URL, + SENTRY_DSN, } = cleanEnv(process.env, { ENVIRONMENT: str({ choices: ["local", "docker", "production"], @@ -47,6 +53,10 @@ const { desc: "Port to run the development server on", default: 8062, }), + VERSION: str({ + desc: "The current release version", + default: "0.0.0", + }), MITOPEN_API_BASE_URL: str({ desc: "Base URL for API requests", devDefault: "", @@ -61,13 +71,33 @@ const { default: false, }), SITE_NAME: str({ - desc: ["The name of the site, used in page titles"], + desc: "The name of the site, used in page titles", default: "MIT Open", }), + PUBLIC_URL: str({ + desc: "The site URL, for display", + default: "", + }), MITOPEN_SUPPORT_EMAIL: str({ desc: "Email address for support", default: "mitopen-support@mit.edu", }), + MITOPEN_AXIOS_WITH_CREDENTIALS: bool({ + desc: "Instructs the Axios API client to send credentials with requests", + default: false, + }), + EMBEDLY_KEY: str({ + desc: "Public API key for Embedly", + default: "EMBEDLY_KEY", + }), + CKEDITOR_UPLOAD_URL: str({ + desc: "Location of the CKEditor uploads handler", + default: "", + }), + SENTRY_DSN: str({ + desc: "Sentry Data Source Name", + default: "", + }), }) const MITOPEN_FEATURES_PREFIX = "FEATURE_" @@ -182,28 +212,19 @@ module.exports = (env, argv) => { }), new webpack.DefinePlugin({ APP_SETTINGS: { - axios_with_credentials: JSON.stringify( - process.env.MITOPEN_AXIOS_WITH_CREDENTIALS, - ), - axios_base_path: JSON.stringify(process.env.MITOPEN_API_BASE_URL), - 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), - posthog: getPostHogSettings(), + MITOPEN_AXIOS_WITH_CREDENTIALS, + MITOPEN_API_BASE_URL: JSON.stringify(MITOPEN_API_BASE_URL), + EMBEDLY_KEY: JSON.stringify(EMBEDLY_KEY), + CKEDITOR_UPLOAD_URL: JSON.stringify(CKEDITOR_UPLOAD_URL), + ENVIRONMENT: JSON.stringify(ENVIRONMENT), + VERSION: JSON.stringify(VERSION), + SENTRY_DSN: JSON.stringify(SENTRY_DSN), + POSTHOG: getPostHogSettings(), + SITE_NAME: JSON.stringify(SITE_NAME), + MITOPEN_SUPPORT_EMAIL: JSON.stringify(MITOPEN_SUPPORT_EMAIL), + PUBLIC_URL: JSON.stringify(PUBLIC_URL), }, }), - new webpack.EnvironmentPlugin({ - // within app, define process.env.VAR_NAME with default from cleanEnv - MITOPEN_API_BASE_URL, - ENVIRONMENT, - SITE_NAME, - MITOPEN_SUPPORT_EMAIL, - }), ] .concat( isProduction diff --git a/frontends/ol-ckeditor/jest.config.ts b/frontends/ol-ckeditor/jest.config.ts index c481eb357b..43cac65181 100644 --- a/frontends/ol-ckeditor/jest.config.ts +++ b/frontends/ol-ckeditor/jest.config.ts @@ -13,10 +13,10 @@ const config: Config.InitialOptions = { ], globals: { APP_SETTINGS: { - ckeditor_upload_url: "https://meowmeow.com", - embedlyKey: "embedly_key", - axios_with_credentials: "False", - axios_base_path: "", + CKEDITOR_UPLOAD_URL: "https://meowmeow.com", + EMBEDLY_KEY: "embedly_key", + MITOPEN_AXIOS_WITH_CREDENTIALS: false, + MITOPEN_API_BASE_URL: "https://api.mitopen-test.odl.mit.edu", }, }, } diff --git a/frontends/ol-ckeditor/src/components/cloudServices.test.ts b/frontends/ol-ckeditor/src/components/cloudServices.test.ts index 6cfa5435e0..fd5c8ccfe6 100644 --- a/frontends/ol-ckeditor/src/components/cloudServices.test.ts +++ b/frontends/ol-ckeditor/src/components/cloudServices.test.ts @@ -12,8 +12,8 @@ describe("cloudServicesConfig", () => { expect(token).toBe("the-cool-token") }) - test("ckeditor_upload_url is set from global SETTINGS", () => { - APP_SETTINGS.ckeditor_upload_url = "https://meowmeow.com" + test("CKEDITOR_UPLOAD_URL is set from global APP_SETTINGS", () => { + APP_SETTINGS.CKEDITOR_UPLOAD_URL = "https://meowmeow.com" const cloud = getCloudServicesConfig() expect(cloud.uploadUrl).toBe("https://meowmeow.com") }) diff --git a/frontends/ol-ckeditor/src/components/cloudServices.ts b/frontends/ol-ckeditor/src/components/cloudServices.ts index ad5df57ca4..7399e95bdf 100644 --- a/frontends/ol-ckeditor/src/components/cloudServices.ts +++ b/frontends/ol-ckeditor/src/components/cloudServices.ts @@ -3,7 +3,7 @@ import axios from "axios" const cloudServicesConfig = () => ({ - uploadUrl: APP_SETTINGS.ckeditor_upload_url, + uploadUrl: APP_SETTINGS.CKEDITOR_UPLOAD_URL, tokenUrl: async () => { const { data } = await axios.get("/api/v0/ckeditor/") return data.token as string diff --git a/frontends/ol-ckeditor/src/types/settings.d.ts b/frontends/ol-ckeditor/src/types/settings.d.ts index 5621faacd0..e3c4ebdb16 100644 --- a/frontends/ol-ckeditor/src/types/settings.d.ts +++ b/frontends/ol-ckeditor/src/types/settings.d.ts @@ -2,9 +2,11 @@ export declare global { const APP_SETTINGS: { - embedlyKey: string - ckeditor_upload_url?: string - axios_with_credentials: string - axios_base_path: string + EMBEDLY_KEY: string + CKEDITOR_UPLOAD_URL?: string + MITOPEN_AXIOS_WITH_CREDENTIALS: boolean + MITOPEN_API_BASE_URL: string + PUBLIC_URL: string + SITE_NAME: string } } diff --git a/frontends/ol-components/jest.config.ts b/frontends/ol-components/jest.config.ts index 964c95c06f..93803471a4 100644 --- a/frontends/ol-components/jest.config.ts +++ b/frontends/ol-components/jest.config.ts @@ -5,7 +5,7 @@ const config: Config.InitialOptions = { ...baseConfig, globals: { APP_SETTINGS: { - embedlyKey: "fake-embedly-key", + EMBEDLY_KEY: "fake-embedly-key", }, }, } diff --git a/frontends/ol-components/src/components/EmbedlyCard/util.ts b/frontends/ol-components/src/components/EmbedlyCard/util.ts index 49c72fcbc7..401896a75a 100644 --- a/frontends/ol-components/src/components/EmbedlyCard/util.ts +++ b/frontends/ol-components/src/components/EmbedlyCard/util.ts @@ -82,9 +82,9 @@ const createStylesheet = (doc: Document, css: string) => { } const getEmbedlyKey = (): string | null => { - const key = APP_SETTINGS.embedlyKey + const key = APP_SETTINGS.EMBEDLY_KEY if (typeof key === "string") return key - console.warn("APP_SETTINGS.embedlyKey should be a string.") + console.warn("APP_SETTINGS.EMBEDLY_KEY should be a string.") return null } diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx index c8b0aa4b33..ca5831d490 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx @@ -44,7 +44,7 @@ const getEmbedlyUrl = ( isMedia: boolean, ) => { return embedlyCroppedImage(resource.image!.url!, { - key: APP_SETTINGS.embedlyKey || process.env.EMBEDLY_KEY!, + key: APP_SETTINGS.EMBEDLY_KEY, ...getImageDimensions(size, isMedia), }) } diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx index 8935db3c9b..a3738e21d7 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx @@ -93,7 +93,7 @@ type ResourceIdCallback = ( const getEmbedlyUrl = (url: string, isMobile: boolean) => { return embedlyCroppedImage(url, { - key: APP_SETTINGS.embedlyKey || process.env.EMBEDLY_KEY!, + key: APP_SETTINGS.EMBEDLY_KEY, ...IMAGE_SIZES[isMobile ? "mobile" : "desktop"], }) } diff --git a/frontends/ol-components/src/constants/imgConfigs.ts b/frontends/ol-components/src/constants/imgConfigs.ts index 1835da9c7f..1d7df45ae4 100644 --- a/frontends/ol-components/src/constants/imgConfigs.ts +++ b/frontends/ol-components/src/constants/imgConfigs.ts @@ -1,28 +1,30 @@ import type { EmbedlyConfig } from "ol-utilities" +const { EMBEDLY_KEY } = APP_SETTINGS + const imgConfigs = { row: { - key: APP_SETTINGS.embedlyKey, + key: EMBEDLY_KEY, width: 170, height: 130, }, "row-reverse": { - key: APP_SETTINGS.embedlyKey, + key: EMBEDLY_KEY, width: 170, height: 130, }, "row-reverse-small": { - key: APP_SETTINGS.embedlyKey, + key: EMBEDLY_KEY, width: 160, height: 100, }, column: { - key: APP_SETTINGS.embedlyKey, + key: EMBEDLY_KEY, width: 302, height: 182, }, large: { - key: APP_SETTINGS.embedlyKey, + key: EMBEDLY_KEY, width: 385, height: 200, }, diff --git a/frontends/ol-utilities/src/components/MITLogoLink.tsx b/frontends/ol-utilities/src/components/MITLogoLink.tsx index ea0bbe0e20..f2cb5fee79 100644 --- a/frontends/ol-utilities/src/components/MITLogoLink.tsx +++ b/frontends/ol-utilities/src/components/MITLogoLink.tsx @@ -1,6 +1,6 @@ import React from "react" -const PUBLIC_URL = process.env.PUBLIC_URL || "" +const PUBLIC_URL = APP_SETTINGS.PUBLIC_URL const HOME_URL = `${PUBLIC_URL}/` const MIT_LOGO_URL = `${PUBLIC_URL}/static/images/mit-logo-transparent4.svg` diff --git a/frontends/ol-utilities/src/components/MetaTags.tsx b/frontends/ol-utilities/src/components/MetaTags.tsx index 6564a0a933..10662a17c6 100644 --- a/frontends/ol-utilities/src/components/MetaTags.tsx +++ b/frontends/ol-utilities/src/components/MetaTags.tsx @@ -27,7 +27,7 @@ const MetaTags: React.FC = ({ return ( - {[...title, process.env.SITE_NAME].join(" | ")} + {[...title, APP_SETTINGS.SITE_NAME].join(" | ")} {children} {canonicalLink ? ( diff --git a/frontends/ol-utilities/src/types/settings.d.ts b/frontends/ol-utilities/src/types/settings.d.ts index 163628022f..c07998375d 100644 --- a/frontends/ol-utilities/src/types/settings.d.ts +++ b/frontends/ol-utilities/src/types/settings.d.ts @@ -8,13 +8,16 @@ export type PostHogSettings = { export declare global { declare const APP_SETTINGS: { - axios_with_credentials?: string - axios_base_path?: string - embedlyKey: string - ckeditor_upload_url?: string - sentry_dsn?: string - release_version?: string - environment?: string - posthog?: PostHogSettings + MITOPEN_AXIOS_WITH_CREDENTIALS?: boolean + MITOPEN_API_BASE_URL: string + EMBEDLY_KEY: string + CKEDITOR_UPLOAD_URL?: string + SENTRY_DSN?: string + VERSION?: string + ENVIRONMENT?: string + POSTHOG?: PostHogSettings + SITE_NAME: string + MITOPEN_SUPPORT_EMAIL: string + PUBLIC_URL: string } } diff --git a/frontends/ol-widgets/jest.config.ts b/frontends/ol-widgets/jest.config.ts index 14e9ba4e4b..06ab03c5f6 100644 --- a/frontends/ol-widgets/jest.config.ts +++ b/frontends/ol-widgets/jest.config.ts @@ -6,7 +6,7 @@ const config: Config.InitialOptions = { setupFilesAfterEnv: [...baseConfig.setupFilesAfterEnv, "./setupJest.ts"], globals: { APP_SETTINGS: { - embedlyKey: "fake-embedly-key", + EMBEDLY_KEY: "fake-embedly-key", }, }, } diff --git a/frontends/package.json b/frontends/package.json index d1ba3e57f9..a8a1c82490 100644 --- a/frontends/package.json +++ b/frontends/package.json @@ -15,7 +15,6 @@ "scripts": { "watch": "yarn workspace mit-open watch", "watch:docker": "yarn workspace mit-open watch:docker", - "watch:rc": "yarn workspace mit-open watch:rc", "build": "yarn workspace mit-open build", "lint-check": "eslint . --ext .js,.jsx,.ts,.tsx,.mdx", "lint-fix": "yarn lint-check --fix", diff --git a/package.json b/package.json index 16fb54b84d..ac3fb7d375 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "scripts": { "build": "yarn workspace mit-open run build", "watch": "yarn workspace mit-open run watch", - "watch:rc": "yarn workspace mit-open run watch:rc", "style-lint": "yarn workspace frontends run style-lint", "test": "MITOPEN_API_BASE_URL=https://api.mitopen-test.odl.mit.edu yarn workspace frontends global:test", "test-watch": "MITOPEN_API_BASE_URL=https://api.mitopen-test.odl.mit.edu yarn workspace frontends test-watch",