Update SdkConfig usage to use new translation layer + update config.md docs (#21429)

* Update SdkConfig usage to use new translation layer

* Appease the linter

* WIP refactor of config documentation

* Finish re-writing config.md

* Update surrounding documentation

* Apply suggestions from code review

Co-authored-by: Germain <germains@element.io>

* Textual updates

Co-authored-by: Germain <germains@element.io>

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 { parseQs } from './url_utils';
 import VectorBasePlatform from "./platform/VectorBasePlatform";
@@ -101,6 +103,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();
@@ -116,8 +119,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}`);
 
@@ -127,7 +130,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();
     }