Merge branch 'develop' into andybalaam/fix-flake-in-redactions

cypress/e2e/crypto/utils.ts

@@ -97,6 +97,19 @@ export function checkDeviceIsCrossSigned(): void {
         });
 }
 
+/**
+ * Check that the current device is connected to the key backup.
+ */
+export function checkDeviceIsConnectedKeyBackup() {
+    cy.findByRole("button", { name: "User menu" }).click();
+    cy.get(".mx_UserMenu_contextMenu").within(() => {
+        cy.findByRole("menuitem", { name: "Security & Privacy" }).click();
+    });
+    cy.get(".mx_Dialog").within(() => {
+        cy.findByRole("button", { name: "Restore from Backup" }).should("exist");
+    });
+}
+
 /**
  * Fill in the login form in element with the given creds.
  *

cypress/e2e/crypto/verification.spec.ts

@@ -21,7 +21,13 @@ import type { VerificationRequest, Verifier } from "matrix-js-sdk/src/crypto-api
 import { CypressBot } from "../../support/bot";
 import { HomeserverInstance } from "../../plugins/utils/homeserver";
 import { emitPromise } from "../../support/util";
-import { checkDeviceIsCrossSigned, doTwoWaySasVerification, logIntoElement, waitForVerificationRequest } from "./utils";
+import {
+    checkDeviceIsConnectedKeyBackup,
+    checkDeviceIsCrossSigned,
+    doTwoWaySasVerification,
+    logIntoElement,
+    waitForVerificationRequest,
+} from "./utils";
 import { getToast } from "../../support/toasts";
 import { UserCredentials } from "../../support/login";
 
@@ -111,6 +117,9 @@ describe("Device verification", () => {
 
         // Check that our device is now cross-signed
         checkDeviceIsCrossSigned();
+
+        // Check that the current device is connected to key backup
+        checkDeviceIsConnectedKeyBackup();
     });
 
     it("Verify device during login with QR code", () => {
@@ -148,6 +157,9 @@ describe("Device verification", () => {
 
         // Check that our device is now cross-signed
         checkDeviceIsCrossSigned();
+
+        // Check that the current device is connected to key backup
+        checkDeviceIsConnectedKeyBackup();
     });
 
     it("Verify device during login with Security Phrase", () => {
@@ -170,6 +182,9 @@ describe("Device verification", () => {
 
         // Check that our device is now cross-signed
         checkDeviceIsCrossSigned();
+
+        // Check that the current device is connected to key backup
+        checkDeviceIsConnectedKeyBackup();
     });
 
     it("Verify device during login with Security Key", () => {
@@ -193,6 +208,9 @@ describe("Device verification", () => {
 
         // Check that our device is now cross-signed
         checkDeviceIsCrossSigned();
+
+        // Check that the current device is connected to key backup
+        checkDeviceIsConnectedKeyBackup();
     });
 
     it("Handle incoming verification request with SAS", () => {

cypress/support/bot.ts

@@ -225,6 +225,7 @@ function setupBotClient(
 
                 await cli.getCrypto()!.bootstrapSecretStorage({
                     setupNewSecretStorage: true,
+                    setupNewKeyBackup: true,
                     createSecretStorageKey: () => Promise.resolve(recoveryKey),
                 });
             }

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -41,7 +41,9 @@ limitations under the License.
         }
 
         .mx_RoomSummaryCard_avatar {
-            display: inline-flex;
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
             .mx_RoomSummaryCard_e2ee {
                 display: inline-block;
@@ -50,7 +52,6 @@ limitations under the License.
                 height: 54px;
                 border-radius: 50%;
                 background-color: #737d8c;
-                margin-top: -3px; /* alignment */
                 margin-left: -10px; /* overlap */
                 border: 3px solid $dark-panel-bg-color;
 

res/css/views/rooms/_ReadReceiptGroup.pcss

@@ -109,6 +109,7 @@ limitations under the License.
                 margin: 6px 8px;
                 align-self: center;
                 justify-self: center;
+                flex-shrink: 0; // Long names should not shrink the picture
             }
 
             .mx_ReadReceiptGroup_name {

src/components/views/settings/devices/LoginWithQRSection.tsx

@@ -16,9 +16,9 @@ limitations under the License.
 
 import React from "react";
 import {
-    IMSC3882GetLoginTokenCapability,
+    IGetLoginTokenCapability,
     IServerVersions,
-    UNSTABLE_MSC3882_CAPABILITY,
+    GET_LOGIN_TOKEN_CAPABILITY,
     Capabilities,
     IClientWellKnown,
 } from "matrix-js-sdk/src/matrix";
@@ -40,15 +40,15 @@ export default class LoginWithQRSection extends React.Component<IProps> {
     }
 
     public render(): JSX.Element | null {
-        // Needs server support for MSC3882 and MSC3886:
-        // in r0 of MSC3882 it is exposed as a feature flag, but in r1 it is a capability
-        const capability = UNSTABLE_MSC3882_CAPABILITY.findIn<IMSC3882GetLoginTokenCapability>(this.props.capabilities);
-        const msc3882Supported =
+        // Needs server support for get_login_token and MSC3886:
+        // in r0 of MSC3882 it is exposed as a feature flag, but in stable and unstable r1 it is a capability
+        const capability = GET_LOGIN_TOKEN_CAPABILITY.findIn<IGetLoginTokenCapability>(this.props.capabilities);
+        const getLoginTokenSupported =
             !!this.props.versions?.unstable_features?.["org.matrix.msc3882"] || !!capability?.enabled;
         const msc3886Supported =
             !!this.props.versions?.unstable_features?.["org.matrix.msc3886"] ||
             this.props.wellKnown?.["io.element.rendezvous"]?.server;
-        const offerShowQr = msc3882Supported && msc3886Supported;
+        const offerShowQr = getLoginTokenSupported && msc3886Supported;
 
         // don't show anything if no method is available
         if (!offerShowQr) {

src/utils/AutoDiscoveryUtils.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React, { ReactNode } from "react";
 import {
     AutoDiscovery,
+    AutoDiscoveryError,
     ClientConfig,
     OidcClientConfig,
     M_AUTHENTICATION,
@@ -210,7 +211,7 @@ export default class AutoDiscoveryUtils {
         } else if (isResult && isResult.state !== AutoDiscovery.PROMPT) {
             logger.error("Error determining preferred identity server URL:", isResult);
             if (isResult.state === AutoDiscovery.FAIL_ERROR) {
-                if (AutoDiscovery.ALL_ERRORS.indexOf(isResult.error as string) !== -1) {
+                if (AutoDiscovery.ALL_ERRORS.indexOf(isResult.error as AutoDiscoveryError) !== -1) {
                     // XXX: We mark these with _td at the top of Login.tsx - we should come up with a better solution
                     throw new UserFriendlyError(String(isResult.error) as TranslationKey);
                 }
@@ -227,7 +228,7 @@ export default class AutoDiscoveryUtils {
         if (hsResult.state !== AutoDiscovery.SUCCESS) {
             logger.error("Error processing homeserver config:", hsResult);
             if (!syntaxOnly || !AutoDiscoveryUtils.isLivelinessError(hsResult.error)) {
-                if (AutoDiscovery.ALL_ERRORS.indexOf(hsResult.error as string) !== -1) {
+                if (AutoDiscovery.ALL_ERRORS.indexOf(hsResult.error as AutoDiscoveryError) !== -1) {
                     // XXX: We mark these with _td at the top of Login.tsx - we should come up with a better solution
                     throw new UserFriendlyError(String(hsResult.error) as TranslationKey);
                 }

test/components/views/settings/devices/LoginWithQR-test.tsx

@@ -89,8 +89,7 @@ describe("<LoginWithQR />", () => {
         jest.spyOn(MSC3906Rendezvous.prototype, "verifyNewDeviceOnExistingDevice").mockResolvedValue(undefined);
         client.requestLoginToken.mockResolvedValue({
             login_token: "token",
-            expires_in: 1000, // this is as per MSC3882 r0
-            expires_in_ms: 1000 * 1000, // this is as per MSC3882 r1
+            expires_in_ms: 1000 * 1000,
         } as LoginTokenPostResponse); // we force the type here so that it works with versions of js-sdk that don't have r1 support yet
     });
 

test/components/views/settings/devices/LoginWithQRSection-test.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import { render } from "@testing-library/react";
 import { mocked } from "jest-mock";
-import { IClientWellKnown, IServerVersions, MatrixClient, UNSTABLE_MSC3882_CAPABILITY } from "matrix-js-sdk/src/matrix";
+import { IClientWellKnown, IServerVersions, MatrixClient, GET_LOGIN_TOKEN_CAPABILITY } from "matrix-js-sdk/src/matrix";
 import React from "react";
 
 import LoginWithQRSection from "../../../../../src/components/views/settings/devices/LoginWithQRSection";
@@ -67,57 +67,40 @@ describe("<LoginWithQRSection />", () => {
             expect(container).toMatchSnapshot();
         });
 
-        it("only MSC3882 enabled", async () => {
-            const { container } = render(getComponent({ versions: makeVersions({ "org.matrix.msc3882": true }) }));
-            expect(container).toMatchSnapshot();
-        });
-
-        it("only MSC3882 r1 enabled", async () => {
+        it("only get_login_token enabled", async () => {
             const { container } = render(
-                getComponent({ capabilities: { [UNSTABLE_MSC3882_CAPABILITY.name]: { enabled: true } } }),
+                getComponent({ capabilities: { [GET_LOGIN_TOKEN_CAPABILITY.name]: { enabled: true } } }),
             );
             expect(container).toMatchSnapshot();
         });
 
-        it("MSC3886 + MSC3882 r1 disabled", async () => {
+        it("MSC3886 + get_login_token disabled", async () => {
             const { container } = render(
                 getComponent({
                     versions: makeVersions({ "org.matrix.msc3886": true }),
-                    capabilities: { [UNSTABLE_MSC3882_CAPABILITY.name]: { enabled: false } },
+                    capabilities: { [GET_LOGIN_TOKEN_CAPABILITY.name]: { enabled: false } },
                 }),
             );
             expect(container).toMatchSnapshot();
         });
     });
 
     describe("should render panel", () => {
-        it("MSC3882 + MSC3886", async () => {
-            const { container } = render(
-                getComponent({
-                    versions: makeVersions({
-                        "org.matrix.msc3882": true,
-                        "org.matrix.msc3886": true,
-                    }),
-                }),
-            );
-            expect(container).toMatchSnapshot();
-        });
-
-        it("MSC3882 r1 + MSC3886", async () => {
+        it("get_login_token + MSC3886", async () => {
             const { container } = render(
                 getComponent({
                     versions: makeVersions({
                         "org.matrix.msc3886": true,
                     }),
                     capabilities: {
-                        [UNSTABLE_MSC3882_CAPABILITY.name]: { enabled: true },
+                        [GET_LOGIN_TOKEN_CAPABILITY.name]: { enabled: true },
                     },
                 }),
             );
             expect(container).toMatchSnapshot();
         });
 
-        it("MSC3882 r1 + .well-known", async () => {
+        it("get_login_token + .well-known", async () => {
             const wellKnown = {
                 "io.element.rendezvous": {
                     server: "https://rz.local",
@@ -127,7 +110,7 @@ describe("<LoginWithQRSection />", () => {
             const { container } = render(
                 getComponent({
                     versions: makeVersions({}),
-                    capabilities: { [UNSTABLE_MSC3882_CAPABILITY.name]: { enabled: true } },
+                    capabilities: { [GET_LOGIN_TOKEN_CAPABILITY.name]: { enabled: true } },
                     wellKnown,
                 }),
             );

test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap

@@ -1,52 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<LoginWithQRSection /> should not render MSC3886 + MSC3882 r1 disabled 1`] = `<div />`;
+exports[`<LoginWithQRSection /> should not render MSC3886 + get_login_token disabled 1`] = `<div />`;
 
 exports[`<LoginWithQRSection /> should not render no support at all 1`] = `<div />`;
 
-exports[`<LoginWithQRSection /> should not render only MSC3882 enabled 1`] = `<div />`;
+exports[`<LoginWithQRSection /> should not render only get_login_token enabled 1`] = `<div />`;
 
-exports[`<LoginWithQRSection /> should not render only MSC3882 r1 enabled 1`] = `<div />`;
-
-exports[`<LoginWithQRSection /> should render panel MSC3882 + MSC3886 1`] = `
-<div>
-  <div
-    class="mx_SettingsSubsection"
-  >
-    <div
-      class="mx_SettingsSubsectionHeading"
-    >
-      <h3
-        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
-      >
-        Sign in with QR code
-      </h3>
-    </div>
-    <div
-      class="mx_SettingsSubsection_content"
-    >
-      <div
-        class="mx_LoginWithQRSection"
-      >
-        <p
-          class="mx_SettingsTab_subsectionText"
-        >
-          You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.
-        </p>
-        <div
-          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
-          role="button"
-          tabindex="0"
-        >
-          Show QR code
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<LoginWithQRSection /> should render panel MSC3882 r1 + .well-known 1`] = `
+exports[`<LoginWithQRSection /> should render panel get_login_token + .well-known 1`] = `
 <div>
   <div
     class="mx_SettingsSubsection"
@@ -84,7 +44,7 @@ exports[`<LoginWithQRSection /> should render panel MSC3882 r1 + .well-known 1`]
 </div>
 `;
 
-exports[`<LoginWithQRSection /> should render panel MSC3882 r1 + MSC3886 1`] = `
+exports[`<LoginWithQRSection /> should render panel get_login_token + MSC3886 1`] = `
 <div>
   <div
     class="mx_SettingsSubsection"

test/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -28,7 +28,7 @@ import {
     PUSHER_DEVICE_ID,
     PUSHER_ENABLED,
     IAuthData,
-    UNSTABLE_MSC3882_CAPABILITY,
+    GET_LOGIN_TOKEN_CAPABILITY,
     CryptoApi,
     DeviceVerificationStatus,
     MatrixError,
@@ -1534,7 +1534,7 @@ describe("<SessionManagerTab />", () => {
                 },
             });
             mockClient.getCapabilities.mockResolvedValue({
-                [UNSTABLE_MSC3882_CAPABILITY.name]: {
+                [GET_LOGIN_TOKEN_CAPABILITY.name]: {
                     enabled: true,
                 },
             });