Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/react18/context

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/update-topics.yaml

@@ -21,9 +21,6 @@ jobs:
         runs-on: ubuntu-latest
         environment: Matrix
         steps:
-            - id: stable
-              uses: fangqiuming/latest-release-version@45b2da0e20968cd18c356c548d3c5ccb7318bb8f
-
             - uses: actions/github-script@v6
               env:
                   HS_URL: ${{ secrets.BETABOT_HS_URL }}
@@ -31,12 +28,22 @@ jobs:
                   PUBLIC_ROOM_ID: "!YTvKGNlinIzlkMTVRl:matrix.org"
                   ANNOUNCEMENT_ROOM_ID: "!bijaLdadorKgNGtHdA:matrix.org"
                   TOKEN: ${{ secrets.BETABOT_ACCESS_TOKEN }}
-                  RELEASE_TOPIC: "Stable: ${{ steps.stable.outputs.tag_name }} | Release status: ${{ inputs.expected_status }} expected ${{ inputs.expected_date }}"
+                  RELEASE_STATUS: "Release status: ${{ inputs.expected_status }} expected ${{ inputs.expected_date }}"
               with:
                   script: |
-                      const { HS_URL, TOKEN, RELEASE_TOPIC, LOBBY_ROOM_ID, PUBLIC_ROOM_ID, ANNOUNCEMENT_ROOM_ID } = process.env;
+                      const { HS_URL, TOKEN, RELEASE_STATUS, LOBBY_ROOM_ID, PUBLIC_ROOM_ID, ANNOUNCEMENT_ROOM_ID } = process.env;
 
-                      const regex = /Stable: v(\d+.\d+.\d+) \| Release status: (\w+) expected (\w+ \d+\w+)/gm;
+                      const repo = context.repo;
+                      const { data } = await github.rest.repos.getLatestRelease({
+                          owner: repo.owner,
+                          repo: repo.repo,
+                      });
+                      console.log("Found latest version: " + data.tag_name);
+
+                      const releaseTopic = `Stable: ${data.tag_name} | ${RELEASE_STATUS}`;
+                      console.log("Release topic: " + releaseTopic);
+
+                      const regex = /Stable: v(.+) \| Release status: (\w+) expected (\w+ \d+\w\w)/gm;
 
                       async function updateReleaseInTopic(roomId) {
                           const apiUrl = `${HS_URL}/_matrix/client/v3/rooms/${roomId}/state/m.room.topic/`;
@@ -56,14 +63,14 @@ jobs:
                           });
 
                           const data = await res.json();
-                          const topic = data.topic.replace(regex, RELEASE_TOPIC);
+                          const topic = data.topic.replace(regex, releaseTopic);
                           if (topic === data.topic) {
                               console.log(roomId, "nothing to do");
                               return;
                           }
                           if (data["org.matrix.msc3765.topic"]) {
                               data["org.matrix.msc3765.topic"].forEach(d => {
-                                  d.body = d.body.replace(regex, RELEASE_TOPIC);
+                                  d.body = d.body.replace(regex, releaseTopic);
                               });
                           }
 

babel.config.js

@@ -10,18 +10,20 @@ module.exports = {
                     "last 2 Safari versions",
                     "last 2 Edge versions",
                 ],
+                include: [
+                    "@babel/plugin-proposal-nullish-coalescing-operator",
+                    "@babel/plugin-proposal-class-properties",
+                ],
             },
         ],
-        "@babel/preset-typescript",
+        ["@babel/preset-typescript", { allowDeclareFields: true }],
         "@babel/preset-react",
     ],
     plugins: [
         "@babel/plugin-proposal-export-default-from",
         "@babel/plugin-proposal-numeric-separator",
-        "@babel/plugin-proposal-class-properties",
         "@babel/plugin-proposal-object-rest-spread",
         "@babel/plugin-proposal-optional-chaining",
-        "@babel/plugin-proposal-nullish-coalescing-operator",
 
         // transform logical assignment (??=, ||=, &&=). preset-env doesn't
         // normally bother with these (presumably because all the target

config.sample.json

@@ -22,8 +22,6 @@
         "https://scalar-staging.vector.im/api",
         "https://scalar-staging.riot.im/scalar/api"
     ],
-    "bug_report_endpoint_url": "https://element.io/bugreports/submit",
-    "uisi_autorageshake_app": "element-auto-uisi",
     "default_country_code": "GB",
     "show_labs_settings": false,
     "features": {},

docs/config.md

@@ -1,5 +1,13 @@
 # Configuration
 
+### 🦖 Deprecation notice
+
+Configuration keys were previously a mix of camelCase and snake_case.
+We standardised to snake_case but added compatibility for camelCase to all settings.
+This backwards compatibility will be getting removed in a future release so please ensure you are using snake_case.
+
+---
+
 You can configure the app by copying `config.sample.json` to `config.json` or `config.$domain.json` and customising it.
 Element will attempt to load first `config.$domain.json` and if it fails `config.json`. This mechanism allows different
 configuration options depending on if you're hitting e.g. `app1.example.com` or `app2.example.com`. Configs are not mixed

docs/jitsi.md

@@ -30,7 +30,7 @@ to your [config](./config.md) the following:
 ```json
 {
     "jitsi": {
-        "preferredDomain": "your.jitsi.example.org"
+        "preferred_domain": "your.jitsi.example.org"
     }
 }
 ```

package.json

@@ -70,7 +70,7 @@
     },
     "dependencies": {
         "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
-        "@matrix-org/react-sdk-module-api": "^0.0.6",
+        "@matrix-org/react-sdk-module-api": "^1.0.0",
         "gfm.css": "^1.1.2",
         "jsrsasign": "^10.5.25",
         "katex": "^0.16.0",
@@ -88,6 +88,7 @@
         "@babel/eslint-plugin": "^7.12.10",
         "@babel/plugin-proposal-class-properties": "^7.12.1",
         "@babel/plugin-proposal-export-default-from": "^7.12.1",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
         "@babel/plugin-proposal-numeric-separator": "^7.12.7",
         "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
@@ -139,7 +140,7 @@
         "fs-extra": "^11.0.0",
         "html-webpack-plugin": "^4.5.2",
         "jest": "^29.0.0",
-        "jest-canvas-mock": "2.5.1",
+        "jest-canvas-mock": "2.5.2",
         "jest-environment-jsdom": "^29.0.0",
         "jest-mock": "^29.0.0",
         "jest-raw-loader": "^1.0.1",
@@ -171,7 +172,7 @@
         "string-replace-loader": "3",
         "style-loader": "2",
         "stylelint": "^15.10.1",
-        "stylelint-config-standard": "^33.0.0",
+        "stylelint-config-standard": "^34.0.0",
         "stylelint-scss": "^5.0.0",
         "terser-webpack-plugin": "^4.0.0",
         "ts-node": "^10.9.1",

src/@types/global.d.ts

@@ -32,7 +32,8 @@ type ElectronChannel =
     | "setBadgeCount"
     | "update-downloaded"
     | "userDownloadCompleted"
-    | "userDownloadAction";
+    | "userDownloadAction"
+    | "openDesktopCapturerSourcePicker";
 
 declare global {
     interface Window {

src/vector/platform/ElectronPlatform.tsx

@@ -43,6 +43,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { BreadcrumbsStore } from "matrix-react-sdk/src/stores/BreadcrumbsStore";
 import { UPDATE_EVENT } from "matrix-react-sdk/src/stores/AsyncStore";
 import { avatarUrlForRoom, getInitialLetter } from "matrix-react-sdk/src/Avatar";
+import DesktopCapturerSourcePicker from "matrix-react-sdk/src/components/views/elements/DesktopCapturerSourcePicker";
 
 import VectorBasePlatform from "./VectorBasePlatform";
 import { SeshatIndexManager } from "./SeshatIndexManager";
@@ -163,6 +164,14 @@ export default class ElectronPlatform extends VectorBasePlatform {
             });
         });
 
+        window.electron.on("openDesktopCapturerSourcePicker", () => {
+            const { finished } = Modal.createDialog(DesktopCapturerSourcePicker);
+            finished.then(([source]) => {
+                if (!source) return;
+                this.ipc.call("callDisplayMediaCallback", source);
+            });
+        });
+
         this.ipc.call("startSSOFlow", this.ssoID);
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);

src/vector/rageshakesetup.ts

@@ -38,7 +38,8 @@ export function initRageshake(): Promise<void> {
         () => {
             logger.log("Initialised rageshake.");
             logger.log(
-                "To fix line numbers in Chrome: " + "Meatball menu → Settings → Ignore list → Add /rageshake\\.js$",
+                "To fix line numbers in Chrome: " +
+                    "Meatball menu → Settings → Ignore list → Add /rageshake\\.ts & /logger\\.ts$",
             );
 
             window.addEventListener("beforeunload", () => {

test/app-tests/loading-test.tsx

@@ -592,6 +592,11 @@ describe("loading:", function () {
 
                     return tokenLoginCompletePromise;
                 })
+                .then(() => {
+                    return expectAndAwaitSync().catch((e) => {
+                        throw new Error("Never got /sync after login: did the client start?");
+                    });
+                })
                 .then(() => {
                     // check that the localstorage has been set up in such a way that
                     // the reloaded app can pick up where we leave off.

test/unit-tests/vector/platform/ElectronPlatform-test.ts

@@ -21,6 +21,9 @@ import { Action } from "matrix-react-sdk/src/dispatcher/actions";
 import dispatcher from "matrix-react-sdk/src/dispatcher/dispatcher";
 import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
 import { BreadcrumbsStore } from "matrix-react-sdk/src/stores/BreadcrumbsStore";
+import Modal from "matrix-react-sdk/src/Modal";
+import DesktopCapturerSourcePicker from "matrix-react-sdk/src/components/views/elements/DesktopCapturerSourcePicker";
+import { mocked } from "jest-mock";
 
 import ElectronPlatform from "../../../../src/vector/platform/ElectronPlatform";
 
@@ -76,6 +79,35 @@ describe("ElectronPlatform", () => {
         expect(dispatchFireSpy).toHaveBeenCalledWith(Action.ViewUserSettings);
     });
 
+    it("creates a modal on openDesktopCapturerSourcePicker", async () => {
+        const plat = new ElectronPlatform();
+        Modal.createDialog = jest.fn();
+
+        // @ts-ignore mock
+        mocked(Modal.createDialog).mockReturnValue({
+            finished: new Promise((r) => r(["source"])),
+        });
+
+        let res: () => void;
+        const waitForIPCSend = new Promise<void>((r) => {
+            res = r;
+        });
+        // @ts-ignore mock
+        jest.spyOn(plat.ipc, "call").mockImplementation(() => {
+            res();
+        });
+
+        const [event, handler] = getElectronEventHandlerCall("openDesktopCapturerSourcePicker")!;
+        handler();
+
+        await waitForIPCSend;
+
+        expect(event).toBeTruthy();
+        expect(Modal.createDialog).toHaveBeenCalledWith(DesktopCapturerSourcePicker);
+        // @ts-ignore mock
+        expect(plat.ipc.call).toHaveBeenCalledWith("callDisplayMediaCallback", "source");
+    });
+
     describe("updates", () => {
         it("dispatches on check updates action", () => {
             new ElectronPlatform();

tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "useDefineForClassFields": true,
         "experimentalDecorators": false,
         "emitDecoratorMetadata": false,
         "resolveJsonModule": true,