Update SdkConfig usage to use new translation layer + update config.md docs

config.sample.json

@@ -24,31 +24,31 @@
     ],
     "bug_report_endpoint_url": "https://element.io/bugreports/submit",
     "uisi_autorageshake_app": "element-auto-uisi",
-    "defaultCountryCode": "GB",
-    "showLabsSettings": false,
+    "default_country_code": "GB",
+    "show_labs_settings": false,
     "features": { },
     "default_federate": true,
     "default_theme": "light",
-    "roomDirectory": {
+    "room_directory": {
         "servers": [
             "matrix.org"
         ]
     },
     "piwik": {
         "url": "https://piwik.riot.im/",
-        "whitelistedHSUrls": ["https://matrix.org"],
-        "whitelistedISUrls": ["https://vector.im", "https://matrix.org"],
+        "whitelisted_hs_urls": ["https://matrix.org"],
+        "whitelisted_is_urls": ["https://vector.im", "https://matrix.org"],
         "siteId": 1
     },
     "enable_presence_by_hs_url": {
         "https://matrix.org": false,
         "https://matrix-client.matrix.org": false
     },
-    "settingDefaults": {
+    "setting_defaults": {
         "breadcrumbs": true
     },
     "jitsi": {
-        "preferredDomain": "meet.element.io"
+        "preferred_domain": "meet.element.io"
     },
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
 }

docs/kubernetes.md

@@ -61,11 +61,11 @@ Then you can deploy it to your cluster with something like `kubectl apply -f my-
             ],
             "bug_report_endpoint_url": "https://element.io/bugreports/submit",
             "defaultCountryCode": "GB",
-            "showLabsSettings": false,
+            "show_labs_settings": false,
             "features": { },
             "default_federate": true,
             "default_theme": "light",
-            "roomDirectory": {
+            "room_directory": {
                 "servers": [
                         "matrix.org"
                 ]
@@ -80,11 +80,11 @@ Then you can deploy it to your cluster with something like `kubectl apply -f my-
                 "https://matrix.org": false,
                 "https://matrix-client.matrix.org": false
             },
-            "settingDefaults": {
+            "setting_defaults": {
                 "breadcrumbs": true
             },
             "jitsi": {
-                "preferredDomain": "meet.element.io"
+                "preferred_domain": "meet.element.io"
             }
         }
 

docs/theming.md

@@ -36,7 +36,7 @@ default theme, you would use `default_theme: "custom-Electric Blue"`.
 eg. in config.json:
 
 ```
-"settingDefaults": {
+"setting_defaults": {
         "custom_themes": [
             {
                 "name": "Electric Blue",

src/async-components/structures/CompatibilityView.tsx

@@ -27,7 +27,8 @@ interface IProps {
 }
 
 const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
-    const { brand, mobileBuilds } = SdkConfig.get();
+    const brand = SdkConfig.get("brand");
+    const mobileBuilds = SdkConfig.get("mobile_builds");
 
     let ios = null;
     const iosCustomUrl = mobileBuilds?.ios;

src/components/views/auth/VectorAuthFooter.tsx

@@ -20,17 +20,13 @@ import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
 import { _t } from 'matrix-react-sdk/src/languageHandler';
 
 const VectorAuthFooter = () => {
-    const brandingConfig = SdkConfig.get().branding;
-    let links = [
+    const brandingConfig = SdkConfig.getObject("branding");
+    const links = brandingConfig?.get("auth_footer_links") ?? [
         { "text": "Blog", "url": "https://element.io/blog" },
         { "text": "Twitter", "url": "https://twitter.com/element_hq" },
         { "text": "GitHub", "url": "https://github.com/vector-im/element-web" },
     ];
 
-    if (brandingConfig && brandingConfig.authFooterLinks) {
-        links = brandingConfig.authFooterLinks;
-    }
-
     const authFooterLinks = [];
     for (const linkEntry of links) {
         authFooterLinks.push(

src/components/views/auth/VectorAuthHeaderLogo.tsx

@@ -22,11 +22,8 @@ export default class VectorAuthHeaderLogo extends React.PureComponent {
     static replaces = 'AuthHeaderLogo';
 
     render() {
-        const brandingConfig = SdkConfig.get().branding;
-        let logoUrl = "themes/element/img/logos/element-logo.svg";
-        if (brandingConfig && brandingConfig.authHeaderLogoUrl) {
-            logoUrl = brandingConfig.authHeaderLogoUrl;
-        }
+        const brandingConfig = SdkConfig.getObject("branding");
+        const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
 
         return (
             <div className="mx_AuthHeaderLogo">

src/components/views/auth/VectorAuthPage.tsx

@@ -27,14 +27,16 @@ export default class VectorAuthPage extends React.PureComponent {
     static getWelcomeBackgroundUrl() {
         if (VectorAuthPage.welcomeBackgroundUrl) return VectorAuthPage.welcomeBackgroundUrl;
 
-        const brandingConfig = SdkConfig.get().branding;
+        const brandingConfig = SdkConfig.getObject("branding");
         VectorAuthPage.welcomeBackgroundUrl = "themes/element/img/backgrounds/lake.jpg";
-        if (brandingConfig && brandingConfig.welcomeBackgroundUrl) {
-            if (Array.isArray(brandingConfig.welcomeBackgroundUrl)) {
-                const index = Math.floor(Math.random() * brandingConfig.welcomeBackgroundUrl.length);
-                VectorAuthPage.welcomeBackgroundUrl = brandingConfig.welcomeBackgroundUrl[index];
+
+        const configuredUrl = brandingConfig?.get("welcome_background_url");
+        if (configuredUrl) {
+            if (Array.isArray(configuredUrl)) {
+                const index = Math.floor(Math.random() * configuredUrl.length);
+                VectorAuthPage.welcomeBackgroundUrl = configuredUrl[index];
             } else {
-                VectorAuthPage.welcomeBackgroundUrl = brandingConfig.welcomeBackgroundUrl;
+                VectorAuthPage.welcomeBackgroundUrl = configuredUrl;
             }
         }
 

src/vector/app.tsx

@@ -26,8 +26,10 @@ import AutoDiscoveryUtils from 'matrix-react-sdk/src/utils/AutoDiscoveryUtils';
 import { AutoDiscovery } from "matrix-js-sdk/src/autodiscovery";
 import * as Lifecycle from "matrix-react-sdk/src/Lifecycle";
 import SdkConfig, { parseSsoRedirectOptions } from "matrix-react-sdk/src/SdkConfig";
+import { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
 import { logger } from "matrix-js-sdk/src/logger";
 import { createClient } from "matrix-js-sdk/src/matrix";
+import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
 
 import type MatrixChatType from "matrix-react-sdk/src/components/structures/MatrixChat";
 import { parseQs, parseQsFromFragment } from './url_utils';
@@ -154,6 +156,7 @@ export async function loadApp(fragParams: {}) {
 
     // Don't bother loading the app until the config is verified
     const config = await verifyServerConfig();
+    const snakedConfig = new SnakedObject<IConfigOptions>(config);
 
     // Before we continue, let's see if we're supposed to do an SSO redirect
     const [userId] = await Lifecycle.getStoredSessionOwner();
@@ -169,8 +172,8 @@ export async function loadApp(fragParams: {}) {
     if (!hasPossibleToken && !isReturningFromSso && autoRedirect) {
         logger.log("Bypassing app load to redirect to SSO");
         const tempCli = createClient({
-            baseUrl: config['validated_server_config'].hsUrl,
-            idBaseUrl: config['validated_server_config'].isUrl,
+            baseUrl: config.validated_server_config.hsUrl,
+            idBaseUrl: config.validated_server_config.isUrl,
         });
         PlatformPeg.get().startSingleSignOn(tempCli, "sso", `/${getScreenFromLocation(window.location).screen}`);
 
@@ -180,7 +183,8 @@ export async function loadApp(fragParams: {}) {
         return;
     }
 
-    const defaultDeviceName = config['defaultDeviceDisplayName'] ?? platform.getDefaultDeviceDisplayName();
+    const defaultDeviceName = snakedConfig.get("default_device_display_name")
+        ?? platform.getDefaultDeviceDisplayName();
 
     const MatrixChat = sdk.getComponent('structures.MatrixChat');
     return <MatrixChat

src/vector/getconfig.ts

@@ -16,9 +16,11 @@ limitations under the License.
 
 import request from 'browser-request';
 
+import type { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
+
 // Load the config file. First try to load up a domain-specific config of the
 // form "config.$domain.json" and if that fails, fall back to config.json.
-export async function getVectorConfig(relativeLocation='') {
+export async function getVectorConfig(relativeLocation=''): Promise<IConfigOptions> {
     if (relativeLocation !== '' && !relativeLocation.endsWith('/')) relativeLocation += '/';
 
     const specificConfigPromise = getConfig(`${relativeLocation}config.${document.domain}.json`);
@@ -30,9 +32,9 @@ export async function getVectorConfig(relativeLocation='') {
         if (Object.keys(configJson).length === 0) {
             throw new Error(); // throw to enter the catch
         }
-        return configJson;
+        return configJson as IConfigOptions;
     } catch (e) {
-        return await generalConfigPromise;
+        return await generalConfigPromise as IConfigOptions;
     }
 }
 

src/vector/init.tsx

@@ -63,7 +63,12 @@ export async function loadConfig() {
     // granular settings are loaded correctly and to avoid duplicating the override logic for the theme.
     //
     // Note: this isn't called twice for some wrappers, like the Jitsi wrapper.
-    SdkConfig.put(await PlatformPeg.get().getConfig() || {});
+    const platformConfig = await PlatformPeg.get().getConfig();
+    if (platformConfig) {
+        SdkConfig.put(platformConfig);
+    } else {
+        SdkConfig.unset(); // clears the config (sets to empty object)
+    }
 }
 
 export function loadOlm(): Promise<void> {

src/vector/jitsi/index.ts

@@ -23,6 +23,8 @@ import {
 } from "matrix-widget-api";
 import { ElementWidgetActions } from "matrix-react-sdk/src/stores/widgets/ElementWidgetActions";
 import { logger } from "matrix-js-sdk/src/logger";
+import { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
+import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
 
 import { getVectorConfig } from "../getconfig";
 
@@ -118,8 +120,10 @@ let skipOurWelcomeScreen = false;
         startAudioOnly = qsParam('isAudioOnly', true) === "true";
 
         // We've reached the point where we have to wait for the config, so do that then parse it.
-        const instanceConfig = await configPromise;
-        skipOurWelcomeScreen = instanceConfig?.['jitsiWidget']?.['skipBuiltInWelcomeScreen'] || false;
+        const instanceConfig = new SnakedObject<IConfigOptions>((await configPromise) ?? <IConfigOptions>{});
+        const jitsiConfig = instanceConfig.get("jitsi_widget") ?? {};
+        skipOurWelcomeScreen = (new SnakedObject<IConfigOptions["jitsi_widget"]>(jitsiConfig))
+            .get("skip_built_in_welcome_screen") || false;
 
         // If we're meant to skip our screen, skip to the part where we show Jitsi instead of us.
         // We don't set up the call yet though as this might lead to failure without the widget API.

src/vector/platform/ElectronPlatform.tsx

@@ -28,6 +28,7 @@ import BaseEventIndexManager, {
 import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
 import { _t } from 'matrix-react-sdk/src/languageHandler';
 import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
+import { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
 import * as rageshake from 'matrix-react-sdk/src/rageshake/rageshake';
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -280,7 +281,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
         this.ipcCall("startSSOFlow", this.ssoID);
     }
 
-    async getConfig(): Promise<{}> {
+    async getConfig(): Promise<IConfigOptions> {
         return this.ipcCall('getConfig');
     }
 

src/vector/platform/VectorBasePlatform.ts

@@ -20,6 +20,7 @@ limitations under the License.
 import BasePlatform from 'matrix-react-sdk/src/BasePlatform';
 import { _t } from 'matrix-react-sdk/src/languageHandler';
 
+import type { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
 import { getVectorConfig } from "../getconfig";
 import Favicon from "../../favicon";
 
@@ -29,7 +30,7 @@ import Favicon from "../../favicon";
 export default abstract class VectorBasePlatform extends BasePlatform {
     protected _favicon: Favicon;
 
-    async getConfig(): Promise<{}> {
+    async getConfig(): Promise<IConfigOptions> {
         return getVectorConfig();
     }