refactor: getConfig, App, and standalone mode

This does a few things:

* Renames APP_* events
* Renames getConfig & company into getSiteConfig
* Removes standalone mode: we don't foresee an intermediate step in MFE
  migration, anymore
* This means the `appConfig` structure is not needed anymore, so remove
  it
* ... which necessitated a refactor of the `App` type and associated
  functions

Author: arbrandes

docs/decisions/0006-middleware-support-for-http-clients.rst

@@ -35,7 +35,7 @@ If a consumer chooses not to use ``initialize`` and instead the ``configureAuth`
 
    configureAuth({
        loggingService: getLoggingService(),
-       config: getConfig(),
+       config: getSiteConfig(),
        options: {
             middleware: [axiosCaseConverter, (client) => axiosRetry(client, { retries: 3 })]
        }

docs/decisions/0008-stylesheet-import-in-site-config.md

@@ -31,9 +31,9 @@ The site.config file should then import the top-level SCSS file:
 ```diff
 + import './site.scss';
 
-const config = {
+const siteConfig = {
   // config document
 }
 
-export default config;
+export default siteConfig;
 ```

docs/how_tos/automatic-case-conversion.rst

@@ -32,7 +32,7 @@ Or, if you choose to use ``configureAuth`` instead::
 
     configureAuth({
         loggingService: getLoggingService(),
-        config: getConfig(),
+        config: getSiteConfig(),
         options: {
                 middleware: [axiosCaseConverter, (client) => axiosRetry(client, { retries: 3 })]
         }

docs/how_tos/i18n.rst

@@ -101,7 +101,7 @@ Load up your translation files
 
       configureI18n({
         messages,
-        config: getConfig(), // environment and languagePreferenceCookieName are required
+        config: getSiteConfig(), // environment and languagePreferenceCookieName are required
         loggingService: getLoggingService(), // An object with logError and logInfo methods
       });
 

docs/how_tos/migrate-frontend-app.md

@@ -127,10 +127,8 @@ With the exception of any custom scripts, replace the `scripts` section of your
 
 ```
   "scripts": {
-    "build": "PORT=YOUR_PORT openedx build",
-    "build:standalone": "openedx build:standalone",
+    "build": "openedx build",
     "dev": "PORT=YOUR_PORT openedx dev",
-    "dev:standalone": "PORT=YOUR_PORT openedx dev:standalone",
     "i18n_extract": "openedx formatjs extract",
     "lint": "openedx lint .",
     "lint:fix": "openedx lint --fix .",
@@ -305,13 +303,13 @@ module.exports = config;
 Merge site.config into config in setupTest.js
 =============================================
 
-frontend-platform used environment variables to seed the configuration object, meaning it had default values at the time code is loaded based on `process.env` variables.  frontend-base has a hard-coded, minimal configuration object that _must_ be augmented by a valid site config file at initialization time.  This means that any tests that rely on configuration (e.g., via `getConfig()`) must first initialize the configuration object.  This can be done for tests by adding these lines to `setupTest.js`:
+frontend-platform used environment variables to seed the configuration object, meaning it had default values at the time code is loaded based on `process.env` variables.  frontend-base has a hard-coded, minimal configuration object that _must_ be augmented by a valid site config file at initialization time.  This means that any tests that rely on configuration (e.g., via `getSiteConfig()`) must first initialize the configuration object.  This can be done for tests by adding these lines to `setupTest.js`:
 
 ```
 import siteConfig from 'site.config';
-import { mergeConfig } from '@openedx/frontend-base';
+import { mergeSiteConfig } from '@openedx/frontend-base';
 
-mergeConfig(siteConfig);
+mergeSiteConfig(siteConfig);
 
 ```
 
@@ -413,7 +411,7 @@ Replace all imports from @edx/frontend-platform with @openedx/frontend-base
 - import { logInfo } from '@edx/frontend-platform/logging';
 - import { FormattedMessage } from '@edx/frontend-platform/i18n';
 + import {
-+   getConfig,
++   getSiteConfig,
 +   logInfo,
 +   FormattedMessage
 + } from '@openedx/frontend-base';
@@ -520,6 +518,7 @@ Note that the .env files and env.config.js files also include a number of URLs f
 ```
 // Creating a route role with for 'example' in an App
 const app: App = {
+  ...
   routes: [{
     path: '/example',
     id: 'example.page',
@@ -537,17 +536,16 @@ const examplePageUrl = getUrlForRouteRole('example');
 App-specific config values
 --------------------------
 
-App-specific configuration can be expressed by adding a `standalone` section to SiteConfig which allows arbitrary config variables.
+App-specific configuration can be expressed by adding an `config` section to the app, allowing arbitrary variables:
 
 ```
-const config: SiteConfig = {
-  // ... Other config
-
-  standalone: {
+const app: App = {
+  ...
+  config: {
     appId: 'myapp',
     myCustomVariableName: 'my custom variable value',
-  }
-}
+  },
+};
 ```
 
 These variables can be used in code with the `getAppConfig` function:
@@ -556,16 +554,16 @@ These variables can be used in code with the `getAppConfig` function:
 getAppConfig('myapp').myCustomVariableName
 ```
 
-If you have fully converted your app over to the new architecture, you can add custom variables to the `config` object in your `App` definition and they will be available via `getAppConfig`.
+Or via `useAppConfig()` (with no need to specify the appId), if `AppProvider` is wrapping your app.
 
 
 Replace the .env.test file with configuration in site.config.test.tsx file
 ==========================================================================
 
-We're moving away from .env files because they're not expressive enough (only string types!) to configure an Open edX frontend.  Instead, the test suite has been configured to expect a `site.config.test.tsx` file.  If you're initializing an application in your tests, `frontend-base` will pick up this configuration and make it available to `getConfig()`, etc.  If you need to manually access the variables, you can import `site.config` in your test files:
+We're moving away from .env files because they're not expressive enough (only string types!) to configure an Open edX frontend.  Instead, the test suite has been configured to expect a `site.config.test.tsx` file.  If you're initializing an application in your tests, `frontend-base` will pick up this configuration and make it available to `getSiteConfig()`, etc.  If you need to manually access the variables, you can import `site.config` in your test files:
 
 ```diff
-+ import config from 'site.config';
++ import siteConfig from 'site.config';
 ```
 
 The Jest configuration has been set up to find `site.config` in a `site.config.test.tsx` file.
@@ -577,26 +575,37 @@ A sample `site.config.test.tsx` file:
 ```
 import { SiteConfig } from '@openedx/frontend-base';
 
-const config: SiteConfig = {
-  apps: [],
-  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
+const siteConfig: SiteConfig = {
+  siteId: 'test',
+  siteName: 'localhost',
   baseUrl: 'http://localhost:8080',
-  csrfTokenApiPath: '/csrf/api/v1/token',
-  languagePreferenceCookieName: 'openedx-language-preference',
   lmsBaseUrl: 'http://localhost:18000',
   loginUrl: 'http://localhost:18000/login',
   logoutUrl: 'http://localhost:18000/logout',
+  environment: 'dev',
+  apps: [{
+    appId: 'test-app',
+    routes: [{
+      path: '/app1',
+      element: (
+        <div>Test App 1</div>
+      ),
+      handle: {
+        role: 'test-app-1'
+      }
+    }]
+  }],
+  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
+  csrfTokenApiPath: '/csrf/api/v1/token',
+  languagePreferenceCookieName: 'openedx-language-preference',
   refreshAccessTokenApiPath: '/login_refresh',
   segmentKey: '',
-  siteId: 'test',
-  siteName: 'localhost',
   userInfoCookieName: 'edx-user-info',
-  environment: 'dev',
   ignoredErrorRegex: null,
   publicPath: '/',
 };
 
-export default config;
+export default siteConfig;
 ```
 
 
@@ -642,11 +651,11 @@ You must then import this new stylesheet into your `site.config` file:
 ```diff
 + import './site.scss';
 
-const config: SiteConfig = {
+const siteConfig: SiteConfig = {
   // config document
 }
 
-export default config;
+export default siteConfig;
 ```
 
 This file will be ignored via `.gitignore`, as it is part of your 'site', not the module library.

runtime/analytics/interface.js

@@ -9,15 +9,15 @@
  *
  * ```
  * import {
- *   getConfig,
+ *   getSiteConfig,
  *   getAuthenticatedHttpClient,
  *   getLoggingService,
  *   configureAnalytics,
  *   SegmentAnalyticsService
  * } from '@openedx/frontend-base';
  *
  * configureAnalytics(SegmentAnalyticsService, {
- *   config: getConfig(),
+ *   config: getSiteConfig(),
  *   loggingService: getLoggingService(),
  *   httpClient: getAuthenticatedHttpClient(),
  * });

runtime/auth/AxiosJwtAuthService.test.jsx

@@ -2,7 +2,7 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Cookies from 'universal-cookie';
-import { getConfig } from '../config';
+import { getSiteConfig } from '../config';
 import AxiosJwtAuthService from './AxiosJwtAuthService';
 
 const mockLoggingService = {
@@ -12,7 +12,7 @@ const mockLoggingService = {
 };
 
 const authOptions = {
-  config: getConfig(),
+  config: getSiteConfig(),
   loggingService: mockLoggingService,
 };
 

runtime/auth/MockAuthService.js

@@ -45,22 +45,22 @@ const optionsPropTypes = {
  * you could do the following to set up a MockAuthService for your test:
  *
  * ```
- * import { getConfig, mergeConfig, configureAuth, MockAuthService } from '@openedx/frontend-base';
+ * import { getSiteConfig, mergeSiteConfig, configureAuth, MockAuthService } from '@openedx/frontend-base';
  * import MockAdapter from 'axios-mock-adapter';
  *
  * const mockLoggingService = {
  *   logInfo: jest.fn(),
  *   logError: jest.fn(),
  * };
- * mergeConfig({
+ * mergeSiteConfig({
  *   authenticatedUser: {
  *     userId: 'abc123',
  *     username: 'Mock User',
  *     roles: [],
  *     administrator: false,
  *   },
  * });
- * configureAuth(MockAuthService, { config: getConfig(), loggingService: mockLoggingService });
+ * configureAuth(MockAuthService, { config: getSiteConfig(), loggingService: mockLoggingService });
  * const mockAdapter = new MockAdapter(getAuthenticatedHttpClient());
  * // Mock calls for your tests.  This configuration can be done in any sort of test setup.
  * mockAdapter.onGet(...);

runtime/auth/interface.js

@@ -13,13 +13,13 @@
  *   configureAuth,
  *   fetchAuthenticatedUser,
  *   getAuthenticatedHttpClient,
- *   getConfig,
+ *   getSiteConfig,
  *   getLoggingService
  * } from '@openedx/frontend-base';
  *
  * configureAuth({
  *   loggingService: getLoggingService(),
- *   config: getConfig(),
+ *   config: getSiteConfig(),
  * });
  *
  * const authenticatedUser = await fetchAuthenticatedUser(); // validates and decodes JWT token

runtime/config/getExternalLinkUrl.test.js

@@ -1,19 +1,19 @@
-import { getExternalLinkUrl, setConfig } from '.';
+import { getExternalLinkUrl, setSiteConfig } from '.';
 
 describe('getExternalLinkUrl', () => {
   afterEach(() => {
     // Reset config after each test to avoid cross-test pollution
-    setConfig({});
+    setSiteConfig({});
   });
 
   it('should return the url passed in when externalLinkUrlOverrides is not set', () => {
-    setConfig({});
+    setSiteConfig({});
     const url = 'https://foo.example.com';
     expect(getExternalLinkUrl(url)).toBe(url);
   });
 
   it('should return the url passed in when externalLinkUrlOverrides does not have the url mapping', () => {
-    setConfig({
+    setSiteConfig({
       externalLinkUrlOverrides: {
         'https://bar.example.com': 'https://mapped.example.com',
       },
@@ -25,39 +25,39 @@ describe('getExternalLinkUrl', () => {
   it('should return the mapped url when externalLinkUrlOverrides has the url mapping', () => {
     const url = 'https://foo.example.com';
     const mappedUrl = 'https://mapped.example.com';
-    setConfig({ externalLinkUrlOverrides: { [url]: mappedUrl } });
+    setSiteConfig({ externalLinkUrlOverrides: { [url]: mappedUrl } });
     expect(getExternalLinkUrl(url)).toBe(mappedUrl);
   });
 
   it('should handle empty externalLinkUrlOverrides object', () => {
-    setConfig({ externalLinkUrlOverrides: {} });
+    setSiteConfig({ externalLinkUrlOverrides: {} });
     const url = 'https://foo.example.com';
     expect(getExternalLinkUrl(url)).toBe(url);
   });
 
   it('should guard against empty string argument', () => {
     const fallbackResult = '#';
-    setConfig({ externalLinkUrlOverrides: { foo: 'bar' } });
+    setSiteConfig({ externalLinkUrlOverrides: { foo: 'bar' } });
     expect(getExternalLinkUrl(undefined)).toBe(fallbackResult);
   });
 
   it('should guard against non-string argument', () => {
     const fallbackResult = '#';
-    setConfig({ externalLinkUrlOverrides: { foo: 'bar' } });
+    setSiteConfig({ externalLinkUrlOverrides: { foo: 'bar' } });
     expect(getExternalLinkUrl(null)).toBe(fallbackResult);
     expect(getExternalLinkUrl(42)).toBe(fallbackResult);
   });
 
   it('should not throw if externalLinkUrlOverrides is not an object', () => {
-    setConfig({ externalLinkUrlOverrides: null });
+    setSiteConfig({ externalLinkUrlOverrides: null });
     const url = 'https://foo.example.com';
     expect(getExternalLinkUrl(url)).toBe(url);
-    setConfig({ externalLinkUrlOverrides: 42 });
+    setSiteConfig({ externalLinkUrlOverrides: 42 });
     expect(getExternalLinkUrl(url)).toBe(url);
   });
 
   it('should work with multiple mappings', () => {
-    setConfig({
+    setSiteConfig({
       externalLinkUrlOverrides: {
         'https://a.example.com': 'https://mapped-a.example.com',
         'https://b.example.com': 'https://mapped-b.example.com',