Replace `Matrix.getKeyBackupEnabled` by `MatrixClient.CryptoApi.getActiveSessionBackupVersion` (#28225)

* Migrating deprecated sync `MatrixClient.getKeyBackupEnabled` to async `MatrixClient.CryptoApi.getActiveSessionBackupVersion` in `NewRecoveryMethodDialog`.
Rewrite `NewRecoveryMethodDialog` into a functional component to make it easier to handle the new async method.

* Migrating deprecated sync `MatrixClient.getKeyBackupEnabled` to async `MatrixClient.CryptoApi.getActiveSessionBackupVersion` in `MatrixChat`.

src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx

@@ -7,10 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
-import { KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
+import React, { JSX, useEffect, useState } from "react";
 
-import { MatrixClientPeg } from "../../../../MatrixClientPeg";
 import dis from "../../../../dispatcher/dispatcher";
 import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";
@@ -18,81 +16,73 @@ import RestoreKeyBackupDialog from "../../../../components/views/dialogs/securit
 import { Action } from "../../../../dispatcher/actions";
 import DialogButtons from "../../../../components/views/elements/DialogButtons";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
+import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext.tsx";
 
-interface IProps {
-    newVersionInfo: KeyBackupInfo;
+/**
+ * Properties for {@link NewRecoveryMethodDialog}.
+ */
+interface NewRecoveryMethodDialogProps {
+    /**
+     * Callback when the dialog is dismissed.
+     */
     onFinished(): void;
 }
 
-export default class NewRecoveryMethodDialog extends React.PureComponent<IProps> {
-    private onOkClick = (): void => {
-        this.props.onFinished();
+// Export as default instead of a named export so that it can be dynamically imported with `Modal.createDialogAsync`
+
+/**
+ * Dialog to inform the user that a new recovery method has been detected.
+ */
+export default function NewRecoveryMethodDialog({ onFinished }: NewRecoveryMethodDialogProps): JSX.Element {
+    const matrixClient = useMatrixClientContext();
+    const [isKeyBackupEnabled, setIsKeyBackupEnabled] = useState(false);
+    useEffect(() => {
+        const checkBackupEnabled = async (): Promise<void> => {
+            const crypto = matrixClient.getCrypto();
+            setIsKeyBackupEnabled(Boolean(crypto && (await crypto.getActiveSessionBackupVersion()) !== null));
         };
 
-    private onGoToSettingsClick = (): void => {
-        this.props.onFinished();
-        dis.fire(Action.ViewUserSettings);
-    };
+        checkBackupEnabled();
+    }, [matrixClient]);
 
-    private onSetupClick = async (): Promise<void> => {
+    function onClick(): void {
+        if (isKeyBackupEnabled) {
+            onFinished();
+        } else {
             Modal.createDialog(
                 RestoreKeyBackupDialog,
                 {
-                onFinished: this.props.onFinished,
+                    onFinished,
                 },
                 undefined,
-            /* priority = */ false,
-            /* static = */ true,
-        );
-    };
-
-    public render(): React.ReactNode {
-        const title = (
-            <span className="mx_KeyBackupFailedDialog_title">
-                {_t("encryption|new_recovery_method_detected|title")}
-            </span>
-        );
-
-        const newMethodDetected = <p>{_t("encryption|new_recovery_method_detected|description_1")}</p>;
-
-        const hackWarning = (
-            <strong className="warning">{_t("encryption|new_recovery_method_detected|warning")}</strong>
-        );
-
-        let content: JSX.Element | undefined;
-        if (MatrixClientPeg.safeGet().getKeyBackupEnabled()) {
-            content = (
-                <div>
-                    {newMethodDetected}
-                    <p>{_t("encryption|new_recovery_method_detected|description_2")}</p>
-                    {hackWarning}
-                    <DialogButtons
-                        primaryButton={_t("action|ok")}
-                        onPrimaryButtonClick={this.onOkClick}
-                        cancelButton={_t("common|go_to_settings")}
-                        onCancel={this.onGoToSettingsClick}
-                    />
-                </div>
-            );
-        } else {
-            content = (
-                <div>
-                    {newMethodDetected}
-                    {hackWarning}
-                    <DialogButtons
-                        primaryButton={_t("common|setup_secure_messages")}
-                        onPrimaryButtonClick={this.onSetupClick}
-                        cancelButton={_t("common|go_to_settings")}
-                        onCancel={this.onGoToSettingsClick}
-                    />
-                </div>
+                false,
+                true,
             );
         }
+    }
 
     return (
-            <BaseDialog className="mx_KeyBackupFailedDialog" onFinished={this.props.onFinished} title={title}>
-                {content}
+        <BaseDialog
+            className="mx_KeyBackupFailedDialog"
+            onFinished={onFinished}
+            title={
+                <span className="mx_KeyBackupFailedDialog_title">
+                    {_t("encryption|new_recovery_method_detected|title")}
+                </span>
+            }
+        >
+            <p>{_t("encryption|new_recovery_method_detected|description_1")}</p>
+            {isKeyBackupEnabled && <p>{_t("encryption|new_recovery_method_detected|description_2")}</p>}
+            <strong className="warning">{_t("encryption|new_recovery_method_detected|warning")}</strong>
+            <DialogButtons
+                primaryButton={_t("common|setup_secure_messages")}
+                onPrimaryButtonClick={onClick}
+                cancelButton={_t("common|go_to_settings")}
+                onCancel={() => {
+                    onFinished();
+                    dis.fire(Action.ViewUserSettings);
+                }}
+            />
         </BaseDialog>
     );
 }
-}

src/components/structures/MatrixChat.tsx

@@ -1631,8 +1631,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         cli.on(CryptoEvent.KeyBackupFailed, async (errcode): Promise<void> => {
             let haveNewVersion: boolean | undefined;
             let newVersionInfo: KeyBackupInfo | null = null;
+            const keyBackupEnabled = Boolean(
+                cli.getCrypto() && (await cli.getCrypto()?.getActiveSessionBackupVersion()) !== null,
+            );
+
             // if key backup is still enabled, there must be a new backup in place
-            if (cli.getKeyBackupEnabled()) {
+            if (keyBackupEnabled) {
                 haveNewVersion = true;
             } else {
                 // otherwise check the server to see if there's a new one
@@ -1650,7 +1654,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     import(
                         "../../async-components/views/dialogs/security/NewRecoveryMethodDialog"
                     ) as unknown as Promise<typeof NewRecoveryMethodDialog>,
-                    { newVersionInfo: newVersionInfo! },
                 );
             } else {
                 Modal.createDialogAsync(

test/test-utils/test-utils.ts

@@ -129,6 +129,7 @@ export function createTestClient(): MatrixClient {
             getVerificationRequestsToDeviceInProgress: jest.fn().mockReturnValue([]),
             setDeviceIsolationMode: jest.fn(),
             prepareToEncrypt: jest.fn(),
+            getActiveSessionBackupVersion: jest.fn().mockResolvedValue(null),
         }),
 
         getPushActionsForEvent: jest.fn(),

test/unit-tests/async-components/dialogs/security/NewRecoveryMethodDialog-test.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { render, screen } from "jest-matrix-react";
+import { waitFor } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+import { act } from "@testing-library/react-hooks/dom";
+
+import NewRecoveryMethodDialog from "../../../../../src/async-components/views/dialogs/security/NewRecoveryMethodDialog";
+import { createTestClient } from "../../../../test-utils";
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext.tsx";
+import dis from "../../../../../src/dispatcher/dispatcher.ts";
+import { Action } from "../../../../../src/dispatcher/actions.ts";
+import Modal from "../../../../../src/Modal.tsx";
+
+describe("<NewRecoveryMethodDialog />", () => {
+    let matrixClient: MatrixClient;
+    beforeEach(() => {
+        matrixClient = createTestClient();
+        jest.spyOn(dis, "fire");
+        jest.spyOn(Modal, "createDialog");
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    function renderComponent(onFinished: () => void = jest.fn()) {
+        return render(
+            <MatrixClientContext.Provider value={matrixClient}>
+                <NewRecoveryMethodDialog onFinished={onFinished} />
+            </MatrixClientContext.Provider>,
+        );
+    }
+
+    test("when cancel is clicked", async () => {
+        const onFinished = jest.fn();
+        act(() => {
+            renderComponent(onFinished);
+        });
+
+        await userEvent.click(screen.getByRole("button", { name: "Go to Settings" }));
+        expect(onFinished).toHaveBeenCalled();
+        expect(dis.fire).toHaveBeenCalledWith(Action.ViewUserSettings);
+    });
+
+    test("when key backup is enabled", async () => {
+        jest.spyOn(matrixClient.getCrypto()!, "getActiveSessionBackupVersion").mockResolvedValue("version");
+
+        const onFinished = jest.fn();
+
+        await act(async () => {
+            const { asFragment } = renderComponent(onFinished);
+            await waitFor(() =>
+                expect(
+                    screen.getByText("This session is encrypting history using the new recovery method."),
+                ).toBeInTheDocument(),
+            );
+            expect(asFragment()).toMatchSnapshot();
+        });
+
+        await userEvent.click(screen.getByRole("button", { name: "Set up Secure Messages" }));
+        expect(onFinished).toHaveBeenCalled();
+    });
+
+    test("when key backup is disabled", async () => {
+        const onFinished = jest.fn();
+
+        const { asFragment } = renderComponent(onFinished);
+        expect(asFragment()).toMatchSnapshot();
+
+        await userEvent.click(screen.getByRole("button", { name: "Set up Secure Messages" }));
+        await waitFor(() => expect(Modal.createDialog).toHaveBeenCalled());
+    });
+});

test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap

@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NewRecoveryMethodDialog /> when key backup is disabled 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_KeyBackupFailedDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        <span
+          class="mx_KeyBackupFailedDialog_title"
+        >
+          New Recovery Method
+        </span>
+      </h1>
+    </div>
+    <p>
+      A new Security Phrase and key for Secure Messages have been detected.
+    </p>
+    <strong
+      class="warning"
+    >
+      If you didn't set the new recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.
+    </strong>
+    <div
+      class="mx_Dialog_buttons"
+    >
+      <span
+        class="mx_Dialog_buttons_row"
+      >
+        <button
+          data-testid="dialog-cancel-button"
+          type="button"
+        >
+          Go to Settings
+        </button>
+        <button
+          class="mx_Dialog_primary"
+          data-testid="dialog-primary-button"
+          type="button"
+        >
+          Set up Secure Messages
+        </button>
+      </span>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<NewRecoveryMethodDialog /> when key backup is enabled 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_KeyBackupFailedDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        <span
+          class="mx_KeyBackupFailedDialog_title"
+        >
+          New Recovery Method
+        </span>
+      </h1>
+    </div>
+    <p>
+      A new Security Phrase and key for Secure Messages have been detected.
+    </p>
+    <p>
+      This session is encrypting history using the new recovery method.
+    </p>
+    <strong
+      class="warning"
+    >
+      If you didn't set the new recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.
+    </strong>
+    <div
+      class="mx_Dialog_buttons"
+    >
+      <span
+        class="mx_Dialog_buttons_row"
+      >
+        <button
+          data-testid="dialog-cancel-button"
+          type="button"
+        >
+          Go to Settings
+        </button>
+        <button
+          class="mx_Dialog_primary"
+          data-testid="dialog-primary-button"
+          type="button"
+        >
+          Set up Secure Messages
+        </button>
+      </span>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;

test/unit-tests/components/structures/MatrixChat-test.tsx

@@ -22,7 +22,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { OidcError } from "matrix-js-sdk/src/oidc/error";
 import { BearerTokenResponse } from "matrix-js-sdk/src/oidc/validate";
 import { defer, IDeferred, sleep } from "matrix-js-sdk/src/utils";
-import { UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
+import { CryptoEvent, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
 
 import MatrixChat from "../../../../src/components/structures/MatrixChat";
 import * as StorageAccess from "../../../../src/utils/StorageAccess";
@@ -135,6 +135,7 @@ describe("<MatrixChat />", () => {
             getVersion: jest.fn().mockReturnValue("1"),
             setDeviceIsolationMode: jest.fn(),
             userHasCrossSigningKeys: jest.fn(),
+            getActiveSessionBackupVersion: jest.fn().mockResolvedValue(null),
         }),
         // This needs to not finish immediately because we need to test the screen appears
         bootstrapCrossSigning: jest.fn().mockImplementation(() => bootstrapDeferred.promise),
@@ -1515,4 +1516,22 @@ describe("<MatrixChat />", () => {
             expect(screen.getByTestId("mobile-register")).toBeInTheDocument();
         });
     });
+
+    describe("when key backup failed", () => {
+        it("should show the new recovery method dialog", async () => {
+            jest.mock("../../../../src/async-components/views/dialogs/security/NewRecoveryMethodDialog", () => ({
+                __esModule: true,
+                default: () => <span>mocked dialog</span>,
+            }));
+            jest.spyOn(mockClient.getCrypto()!, "getActiveSessionBackupVersion").mockResolvedValue("version");
+
+            getComponent({});
+            defaultDispatcher.dispatch({
+                action: "will_start_client",
+            });
+            await flushPromises();
+            mockClient.emit(CryptoEvent.KeyBackupFailed, "error code");
+            await waitFor(() => expect(screen.getByText("mocked dialog")).toBeInTheDocument());
+        });
+    });
 });