Add toast for recovery keys being out of sync (#28946)

* Refine `SettingsSection` & `SettingsTab`

* Add encryption tab

* Add recovery section

* Add device verification

* Rename `Panel` into `State`

* Update & add tests to user settings common

* Add tests to `RecoveryPanel`

* Add tests to `ChangeRecoveryKey`

* Update CreateSecretStorageDialog-test snapshot

* Add tests to `EncryptionUserSettingsTab`

* Update existing screenshots of e2e tests

* Add new encryption tab ownership to `@element-hq/element-crypto-web-reviewers`

* Add e2e tests

* Fix monospace font and add figma link to hardcoded value

* Add unit to Icon

* Improve e2e doc

* Assert that the crypto module is defined

* Add classname doc

* Fix typo

* Use `good` state instead of default

* Rename `ChangeRecoveryKey.isSetupFlow` into `ChangeRecoveryKey.userHasKeyBackup`

* Move `deleteCachedSecrets` fixture in `recovery.spec.ts`

* Use one callback instead of two in `RecoveryPanel`

* Fix docs and naming of `utils.createBot`

* Fix typo in `RecoveryPanel`

* Add more doc to the state of the `EncryptionUserSettingsTab`

* Rename `verification_required` into `set_up_encryption`

* Update test

* ADd new license

* Very early WIP of rejigged e2e error toast code

* Update comments and doc

* Assert that `recoveryKey.encodedPrivateKey` is always defined

* Add comments to explain how the secrets could be uncached

* Use `matrixClient.secretStorage.getDefaultKeyId` instead of `matrixClient.getCrypto().checkKeyBackupAndEnable` to know if we need to set up a recovery key

* Update existing screenshot to add encryption tab.

* Fix tests

* Remove unused file!

* Remove test for unused file

* Show 'set up encryption' in the 'other' case.

* Test 'key storage out of sync' toast

* Update tests

* Fix test & make toast look correct

* Use new labels when changing the recovery key

* Fix docs

* Don't reset key backup when creating a recovery key

* Add playwright test for toast

* Dismiss the toast as it's now in the way due to being wider

* Doesn't look like this needs to be async

* Typo

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

* Typo

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

* Override width for just this toast

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

test/unit-tests/DeviceListener-test.ts

@@ -329,7 +329,7 @@ describe("DeviceListener", () => {
                 });
 
                 it("shows verify session toast when account has cross signing", async () => {
-                    mockCrypto!.userHasCrossSigningKeys.mockResolvedValue(true);
+                    mockCrypto!.isCrossSigningReady.mockResolvedValue(true);
                     await createAndStart();
 
                     expect(mockCrypto!.getUserDeviceInfo).toHaveBeenCalled();
@@ -337,24 +337,25 @@ describe("DeviceListener", () => {
                         SetupEncryptionToast.Kind.VERIFY_THIS_SESSION,
                     );
                 });
-
-                it("checks key backup status when when account has cross signing", async () => {
-                    mockCrypto!.getCrossSigningKeyId.mockResolvedValue(null);
-                    mockCrypto!.userHasCrossSigningKeys.mockResolvedValue(true);
-                    await createAndStart();
-
-                    expect(mockCrypto!.getActiveSessionBackupVersion).toHaveBeenCalled();
-                });
             });
 
             describe("when user does have a cross signing id on this device", () => {
                 beforeEach(() => {
+                    mockCrypto!.isCrossSigningReady.mockResolvedValue(true);
                     mockCrypto!.getCrossSigningKeyId.mockResolvedValue("abc");
+                    mockCrypto!.getDeviceVerificationStatus.mockResolvedValue(
+                        new DeviceVerificationStatus({
+                            trustCrossSignedDevices: true,
+                            crossSigningVerified: true,
+                        }),
+                    );
                 });
 
                 it("shows set up recovery toast when user has a key backup available", async () => {
                     // non falsy response
                     mockCrypto.getKeyBackupInfo.mockResolvedValue({} as unknown as KeyBackupInfo);
+                    mockClient.secretStorage.getDefaultKeyId.mockResolvedValue(null);
+
                     await createAndStart();
 
                     expect(SetupEncryptionToast.showToast).toHaveBeenCalledWith(

test/unit-tests/toasts/SetupEncryptionToast-test.tsx

@@ -16,9 +16,15 @@ describe("SetupEncryptionToast", () => {
         render(<ToastContainer />);
     });
 
-    it("should render the se up recovery toast", async () => {
+    it("should render the 'set up recovery' toast", async () => {
         showToast(Kind.SET_UP_RECOVERY);
 
         await expect(screen.findByText("Set up recovery")).resolves.toBeInTheDocument();
     });
+
+    it("should render the 'key storage out of sync' toast", async () => {
+        showToast(Kind.KEY_STORAGE_OUT_OF_SYNC);
+
+        await expect(screen.findByText("Your key storage is out of sync.")).resolves.toBeInTheDocument();
+    });
 });

test/unit-tests/utils/login-test.ts

@@ -1,22 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import MatrixChat from "../../../src/components/structures/MatrixChat.tsx";
-import { isLoggedIn } from "../../../src/utils/login.ts";
-import Views from "../../../src/Views.ts";
-
-describe("isLoggedIn", () => {
-    it("should return true if MatrixChat state view is LOGGED_IN", () => {
-        window.matrixChat = {
-            state: {
-                view: Views.LOGGED_IN,
-            },
-        } as unknown as MatrixChat;
-
-        expect(isLoggedIn()).toBe(true);
-    });
-});