Add key storage toggle to Encryption settings

src/DeviceListener.ts

@@ -49,9 +49,12 @@ import { asyncSomeParallel } from "./utils/arrays.ts";
 
 const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
 
-// Unfortunately named account data key used by Element X to indicate that the user
-// has chosen to disable server side key backups. We need to set and honour this
-// to prevent Element X from automatically turning key backup back on.
+/**
+ * Unfortunately-named account data key used by Element X to indicate that the user
+ * has chosen to disable server side key backups.
+ *
+ * We need to set and honour this to prevent Element X from automatically turning key backup back on.
+ */
 export const BACKUP_DISABLED_ACCOUNT_DATA_KEY = "m.org.matrix.custom.backup_disabled";
 
 const logger = baseLogger.getChild("DeviceListener:");

src/components/viewmodels/settings/encryption/KeyStoragePanelViewModel.ts

@@ -79,14 +79,16 @@ export function useKeyStoragePanelViewModel(): KeyStoragePanelState {
                     return;
                 }
                 if (enable) {
+                    // If there is no existing key backup on the server, create one.
+                    // `resetKeyBackup` will delete any existing backup, so we only do this if there is no existing backup.
                     const currentKeyBackup = await crypto.checkKeyBackupAndEnable();
                     if (currentKeyBackup === null) {
                         await crypto.resetKeyBackup();
-                    }
 
-                    // resetKeyBackup fires this off in the background without waiting, so we need to do it
-                    // explicitly and wait for it, otherwise it won't be enabled yet when we check again.
-                    await crypto.checkKeyBackupAndEnable();
+                        // resetKeyBackup fires this off in the background without waiting, so we need to do it
+                        // explicitly and wait for it, otherwise it won't be enabled yet when we check again.
+                        await crypto.checkKeyBackupAndEnable();
+                    }
 
                     // Set the flag so that EX no longer thinks the user wants backup disabled
                     await matrixClient.setAccountData(BACKUP_DISABLED_ACCOUNT_DATA_KEY, { disabled: false });

src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx

@@ -8,9 +8,8 @@
 import React, { type JSX, useCallback, useEffect, useState } from "react";
 import { Button, InlineSpinner, Separator } from "@vector-im/compound-web";
 import ComputerIcon from "@vector-im/compound-design-tokens/assets/web/icons/computer";
-import { ClientEvent } from "matrix-js-sdk/src/matrix";
+import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
 
-import type { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import SettingsTab from "../SettingsTab";
 import { RecoveryPanel } from "../../encryption/RecoveryPanel";
 import { ChangeRecoveryKey } from "../../encryption/ChangeRecoveryKey";
@@ -26,7 +25,6 @@ import { RecoveryPanelOutOfSync } from "../../encryption/RecoveryPanelOutOfSync"
 import { useTypedEventEmitter } from "../../../../../hooks/useEventEmitter";
 import { KeyStoragePanel } from "../../encryption/KeyStoragePanel";
 import { DeleteKeyStoragePanel } from "../../encryption/DeleteKeyStoragePanel";
-import { BACKUP_DISABLED_ACCOUNT_DATA_KEY } from "../../../../../DeviceListener";
 
 /**
  * The state in the encryption settings tab.
@@ -131,7 +129,7 @@ export function EncryptionUserSettingsTab({ initialState = "loading" }: Encrypti
             );
             break;
         case "key_storage_delete":
-            content = <DeleteKeyStoragePanel onFinish={() => setState("main")} />;
+            content = <DeleteKeyStoragePanel onFinish={checkEncryptionState} />;
             break;
     }
 
@@ -146,10 +144,7 @@ export function EncryptionUserSettingsTab({ initialState = "loading" }: Encrypti
  * Hook to check if the user needs:
  * - to go through the SetupEncryption flow.
  * - to enter their recovery key, if the secrets are not cached locally.
- * ...and also whether megolm key backup is enabled on this device (which we use to set the state of the 'allow key storage' toggle):
- * we don't so much care about the value of the account data, "m.org.matrix.custom.backup_disabled" although we do use it
- * as a trigger to update as there's no event emitted for megolm key backup enabled state changing.
- * flag here: what's important is whether key backup is actually happening or not).
+ * ...and also whether megolm key backup is enabled on this device (which we use to set the state of the 'allow key storage' toggle)
  *
  * If cross signing is set up, key backup is enabled and the secrets are cached, the state will be set to "main".
  * If cross signing is not set up, the state will be set to "set_up_encryption".
@@ -189,18 +184,13 @@ function useCheckEncryptionState(state: State, setState: (state: State) => void)
         if (state === "loading") checkEncryptionState();
     }, [checkEncryptionState, state]);
 
-    useTypedEventEmitter(matrixClient, ClientEvent.AccountData, (event: MatrixEvent): void => {
-        const type = event.getType();
-        // Recheck the status if this account data has been updated as this implies the status
-        // of megolm key backup has changed on the user's account (there's no event emitted for megolm
-        // key backup enabled state changing, so we use this instead).
+    useTypedEventEmitter(matrixClient, CryptoEvent.KeyBackupStatus, (): void => {
+        // Recheck the status if the key backup status has changed so we can keep the page up to date.
         // Note that this could potentially update the UI while the user is trying to do something, although
         // if their account data is changing then it implies that they're changing encryption related things
         // on another device. This code is written with the assumption that it's better for the UI to refresh
         // and be up to date with whatever changes they've made.
-        if (type === BACKUP_DISABLED_ACCOUNT_DATA_KEY) {
-            checkEncryptionState();
-        }
+        checkEncryptionState();
     });
 
     // Also return the callback so that the component can re-run the logic.

test/unit-tests/components/views/settings/tabs/user/EncryptionUserSettingsTab-test.tsx

@@ -10,7 +10,7 @@ import { act, render, screen } from "jest-matrix-react";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { waitFor } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
-import { ClientEvent, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
 
 import {
     EncryptionUserSettingsTab,
@@ -163,7 +163,7 @@ describe("<EncryptionUserSettingsTab />", () => {
         ).toBeVisible();
     });
 
-    it("should update when backup_disabled account data is changed", async () => {
+    it("should update when key backup status event is fired", async () => {
         jest.spyOn(matrixClient.getCrypto()!, "getActiveSessionBackupVersion").mockResolvedValue("1");
 
         renderComponent();
@@ -173,8 +173,7 @@ describe("<EncryptionUserSettingsTab />", () => {
         jest.spyOn(matrixClient.getCrypto()!, "getActiveSessionBackupVersion").mockResolvedValue(null);
 
         act(() => {
-            const accountDataEvent = new MatrixEvent({ type: "m.org.matrix.custom.backup_disabled" });
-            matrixClient.emit(ClientEvent.AccountData, accountDataEvent);
+            matrixClient.emit(CryptoEvent.KeyBackupStatus, false);
         });
 
         await waitFor(() => {