Merge branch 'develop' into florianduros/fix/spotlight-click

.eslintrc.js

@@ -98,8 +98,6 @@ module.exports = {
                             "!matrix-js-sdk/src/secret-storage",
                             "!matrix-js-sdk/src/room-hierarchy",
                             "!matrix-js-sdk/src/rendezvous",
-                            "!matrix-js-sdk/src/rendezvous/transports",
-                            "!matrix-js-sdk/src/rendezvous/channels",
                             "!matrix-js-sdk/src/indexeddb-worker",
                             "!matrix-js-sdk/src/pushprocessor",
                             "!matrix-js-sdk/src/extensible_events_v1",

.github/workflows/static_analysis.yaml

@@ -27,7 +27,7 @@ jobs:
                   cache: "yarn"
 
             - name: Install Deps
-              run: "./scripts/ci/install-deps.sh --ignore-scripts"
+              run: "./scripts/ci/install-deps.sh"
 
             - name: Typecheck
               run: "yarn run lint:types"

.github/workflows/tests.yml

@@ -47,7 +47,7 @@ jobs:
                   cache: "yarn"
 
             - name: Install Deps
-              run: "./scripts/ci/install-deps.sh --ignore-scripts"
+              run: "./scripts/ci/install-deps.sh"
               env:
                   JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
 

package.json

@@ -77,7 +77,7 @@
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^4.3.1",
+        "@vector-im/compound-web": "^4.4.1",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

playwright/e2e/settings/general-user-settings-tab.spec.ts

@@ -21,8 +21,6 @@ const USER_NAME_NEW = "Alice";
 const IntegrationManager = "scalar.vector.im";
 
 test.describe("General user settings tab", () => {
-    let userId: string;
-
     test.use({
         displayName: USER_NAME,
         config: {
@@ -34,18 +32,18 @@ test.describe("General user settings tab", () => {
         },
     });
 
-    test("should be rendered properly", async ({ uut }) => {
+    test("should be rendered properly", async ({ uut, user }) => {
         await expect(uut).toMatchScreenshot("general.png");
 
         // Assert that the top heading is rendered
         await expect(uut.getByRole("heading", { name: "General" })).toBeVisible();
 
-        const profile = uut.locator(".mx_ProfileSettings_profile");
+        const profile = uut.locator(".mx_UserProfileSettings_profile");
         await profile.scrollIntoViewIfNeeded();
         await expect(profile.getByRole("textbox", { name: "Display Name" })).toHaveValue(USER_NAME);
 
         // Assert that a userId is rendered
-        await expect(profile.locator(".mx_ProfileSettings_profile_controls_userId", { hasText: userId })).toBeVisible();
+        expect(uut.getByLabel("Username")).toHaveText(user.userId);
 
         // Check avatar setting
         const avatar = profile.locator(".mx_AvatarSetting_avatar");
@@ -131,12 +129,15 @@ test.describe("General user settings tab", () => {
     });
 
     test("should support adding and removing a profile picture", async ({ uut }) => {
-        const profileSettings = uut.locator(".mx_ProfileSettings");
+        const profileSettings = uut.locator(".mx_UserProfileSettings");
         // Upload a picture
         await profileSettings.getByAltText("Upload").setInputFiles("playwright/sample-files/riot.png");
 
         // Find and click "Remove" link button
-        await profileSettings.locator(".mx_ProfileSettings_profile").getByRole("button", { name: "Remove" }).click();
+        await profileSettings
+            .locator(".mx_UserProfileSettings_profile")
+            .getByRole("button", { name: "Remove" })
+            .click();
 
         // Assert that the link button disappeared
         await expect(
@@ -175,7 +176,7 @@ test.describe("General user settings tab", () => {
     test("should support changing a display name", async ({ uut, page, app }) => {
         // Change the diaplay name to USER_NAME_NEW
         const displayNameInput = uut
-            .locator(".mx_SettingsTab .mx_ProfileSettings")
+            .locator(".mx_SettingsTab .mx_UserProfileSettings")
             .getByRole("textbox", { name: "Display Name" });
         await displayNameInput.fill(USER_NAME_NEW);
         await displayNameInput.press("Enter");

playwright/plugins/homeserver/synapse/index.ts

@@ -28,7 +28,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for `matrixdotorg/synapse` image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:13d471114317080014318b4fe41b67ffda6ac11fdfd866e03be7a77e6cb08a4e";
+const DOCKER_TAG = "develop@sha256:a832fd5bcf98a0056b23007d1ef6c749bfa922267c7638a32b447e8c14e30588";
 
 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
     const templateDir = path.join(__dirname, "templates", opts.template);

res/css/_common.pcss

@@ -597,7 +597,10 @@ legend {
  * Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
  * For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
  */
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton),
+.mx_Dialog
+    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
+        .mx_ProfileSettings button
+    ),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -614,11 +617,17 @@ legend {
     font-family: inherit;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):last-child {
+.mx_Dialog
+    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
+        .mx_ProfileSettings button
+    ):last-child {
     margin-right: 0px;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):focus,
+.mx_Dialog
+    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
+        .mx_ProfileSettings button
+    ):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
@@ -627,7 +636,8 @@ legend {
 
 .mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].mx_Dialog_primary,
-.mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
+.mx_Dialog_buttons
+    button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_ProfileSettings button),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
     background-color: var(--cpd-color-bg-action-primary-rest);
@@ -637,7 +647,8 @@ legend {
 
 .mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].danger,
-.mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
+.mx_Dialog_buttons
+    button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_ProfileSettings button),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
     border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -650,7 +661,10 @@ legend {
     color: var(--cpd-color-text-critical-primary);
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
+.mx_Dialog
+    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
+        .mx_ProfileSettings button
+    ):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {

res/css/_components.pcss

@@ -337,14 +337,15 @@
 @import "./views/settings/_Notifications.pcss";
 @import "./views/settings/_PhoneNumbers.pcss";
 @import "./views/settings/_PowerLevelSelector.pcss";
-@import "./views/settings/_ProfileSettings.pcss";
+@import "./views/settings/_RoomProfileSettings.pcss";
 @import "./views/settings/_SecureBackupPanel.pcss";
 @import "./views/settings/_SetIdServer.pcss";
 @import "./views/settings/_SetIntegrationManager.pcss";
 @import "./views/settings/_SettingsFieldset.pcss";
 @import "./views/settings/_SpellCheckLanguages.pcss";
 @import "./views/settings/_ThemeChoicePanel.pcss";
 @import "./views/settings/_UpdateCheckButton.pcss";
+@import "./views/settings/_UserProfileSettings.pcss";
 @import "./views/settings/tabs/_SettingsBanner.pcss";
 @import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";

res/css/structures/_UserMenu.pcss

@@ -207,6 +207,10 @@ limitations under the License.
     .mx_UserMenu_iconSignOut::before {
         mask-image: url("$(res)/img/element-icons/leave.svg");
     }
+
+    .mx_UserMenu_iconQr::before {
+        mask-image: url("@vector-im/compound-design-tokens/icons/qr-code.svg");
+    }
 }
 
 .mx_UserMenu_CustomStatusSection {

res/css/views/dialogs/_UserSettingsDialog.pcss

@@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_SettingsDialog_toastContainer {
+    position: absolute;
+    bottom: var(--cpd-space-10x);
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
 /* ICONS */
 /* ========================================================== */
 

res/css/views/settings/_ProfileSettings.pcss → res/css/views/settings/_RoomProfileSettings.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020, 2024 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,40 +14,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ProfileSettings {
+.mx_RoomProfileSettings {
     border-bottom: 1px solid $quinary-content;
 
-    .mx_ProfileSettings_profile {
+    .mx_RoomProfileSettings_profile {
         display: flex;
 
-        .mx_ProfileSettings_profile_controls {
+        .mx_RoomProfileSettings_profile_controls {
             flex-grow: 1;
             margin-inline-end: 54px;
 
             .mx_Field {
                 margin-top: $spacing-8;
             }
 
-            .mx_ProfileSettings_profile_controls_topic {
+            .mx_RoomProfileSettings_profile_controls_topic {
                 margin-top: $spacing-8;
 
                 & > textarea {
                     font-family: inherit;
                     resize: vertical;
                 }
 
-                &.mx_ProfileSettings_profile_controls_topic--room textarea {
+                &.mx_RoomProfileSettings_profile_controls_topic--room textarea {
                     min-height: 4em;
                 }
             }
 
-            .mx_ProfileSettings_profile_controls_userId {
+            .mx_RoomProfileSettings_profile_controls_userId {
                 margin-inline-end: $spacing-20;
             }
         }
     }
 
-    .mx_ProfileSettings_buttons {
+    .mx_RoomProfileSettings_buttons {
         display: flex;
         gap: var(--cpd-space-4x);
         margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */

res/css/views/settings/_UserProfileSettings.pcss

@@ -0,0 +1,58 @@
+/*
+Copyright 2019, 2020, 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserProfileSettings {
+    border-bottom: 1px solid $quinary-content;
+
+    .mx_UserProfileSettings_profile {
+        display: flex;
+        margin-top: var(--cpd-space-6x);
+        gap: 16px;
+        /* This is temporary until the 'Remove' link is replaced by a context menu. */
+        margin-bottom: 20px;
+
+        .mx_UserProfileSettings_profile_displayName {
+            flex-grow: 1;
+            width: 100%;
+        }
+    }
+
+    .mx_UserProfileSettings_profile_controls {
+        flex-grow: 1;
+    }
+
+    .mx_UserProfileSettings_profile_controls_userId {
+        width: 100%;
+        .mx_CopyableText {
+            margin-top: var(--cpd-space-1x);
+            width: 100%;
+            box-sizing: border-box;
+        }
+    }
+
+    .mx_UserProfileSettings_profile_controls_userId_label {
+        font-size: 15px;
+        font-weight: 500;
+    }
+}
+
+@media (max-width: 768px) {
+    .mx_UserProfileSettings_profile {
+        flex-direction: column;
+        align-items: center;
+        gap: 30px;
+    }
+}

src/DecryptionFailureTracker.ts

@@ -158,10 +158,16 @@ export class DecryptionFailureTracker {
      *
      * @param {function} errorCodeMapFn The function used to map decryption failure reason  codes to the
      * `trackedErrorCode`.
+     *
+     * @param {boolean} checkReportedEvents Check if we have already reported an event.
+     * Defaults to `true`. This is only used for tests, to avoid possible false positives from
+     * the Bloom filter. This should be set to `false` for all tests except for those
+     * that specifically test the `reportedEvents` functionality.
      */
     private constructor(
         private readonly fn: TrackingFn,
         private readonly errorCodeMapFn: ErrCodeMapFn,
+        private readonly checkReportedEvents: boolean = true,
     ) {
         if (!fn || typeof fn !== "function") {
             throw new Error("DecryptionFailureTracker requires tracking function");
@@ -214,7 +220,7 @@ export class DecryptionFailureTracker {
         const eventId = e.getId()!;
 
         // if it's already reported, we don't need to do anything
-        if (this.reportedEvents.has(eventId)) {
+        if (this.reportedEvents.has(eventId) && this.checkReportedEvents) {
             return;
         }
 
@@ -240,7 +246,7 @@ export class DecryptionFailureTracker {
         const eventId = e.getId()!;
 
         // if it's already reported, we don't need to do anything
-        if (this.reportedEvents.has(eventId)) {
+        if (this.reportedEvents.has(eventId) && this.checkReportedEvents) {
             return;
         }
 

src/components/structures/MatrixChat.tsx

@@ -764,7 +764,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 const tabPayload = payload as OpenToTabPayload;
                 Modal.createDialog(
                     UserSettingsDialog,
-                    { initialTabId: tabPayload.initialTabId as UserTab, sdkContext: this.stores },
+                    { ...payload.props, initialTabId: tabPayload.initialTabId as UserTab, sdkContext: this.stores },
                     /*className=*/ undefined,
                     /*isPriority=*/ false,
                     /*isStatic=*/ true,