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>

src/toasts/SetupEncryptionToast.ts

@@ -27,6 +27,8 @@ const getTitle = (kind: Kind): string => {
             return _t("encryption|set_up_recovery");
         case Kind.VERIFY_THIS_SESSION:
             return _t("encryption|verify_toast_title");
+        case Kind.KEY_STORAGE_OUT_OF_SYNC:
+            return _t("encryption|key_storage_out_of_sync");
     }
 };
 
@@ -37,6 +39,7 @@ const getIcon = (kind: Kind): string | undefined => {
         case Kind.SET_UP_RECOVERY:
             return undefined;
         case Kind.VERIFY_THIS_SESSION:
+        case Kind.KEY_STORAGE_OUT_OF_SYNC:
             return "verification_warning";
     }
 };
@@ -49,6 +52,8 @@ const getSetupCaption = (kind: Kind): string => {
             return _t("action|continue");
         case Kind.VERIFY_THIS_SESSION:
             return _t("action|verify");
+        case Kind.KEY_STORAGE_OUT_OF_SYNC:
+            return _t("encryption|enter_recovery_key");
     }
 };
 
@@ -59,6 +64,8 @@ const getSecondaryButtonLabel = (kind: Kind): string => {
         case Kind.SET_UP_ENCRYPTION:
         case Kind.VERIFY_THIS_SESSION:
             return _t("encryption|verification|unverified_sessions_toast_reject");
+        case Kind.KEY_STORAGE_OUT_OF_SYNC:
+            return _t("encryption|forgot_recovery_key");
     }
 };
 
@@ -70,6 +77,8 @@ const getDescription = (kind: Kind): string => {
             return _t("encryption|set_up_recovery_toast_description");
         case Kind.VERIFY_THIS_SESSION:
             return _t("encryption|verify_toast_description");
+        case Kind.KEY_STORAGE_OUT_OF_SYNC:
+            return _t("encryption|key_storage_out_of_sync_description");
     }
 };
 
@@ -89,6 +98,10 @@ export enum Kind {
      * Prompt the user to verify this session
      */
     VERIFY_THIS_SESSION = "verify_this_session",
+    /**
+     * Prompt the user to enter their recovery key
+     */
+    KEY_STORAGE_OUT_OF_SYNC = "key_storage_out_of_sync",
 }
 
 const onReject = (): void => {
@@ -139,6 +152,7 @@ export const showToast = (kind: Kind): void => {
             onPrimaryClick: onAccept,
             secondaryLabel: getSecondaryButtonLabel(kind),
             onSecondaryClick: onReject,
+            overrideWidth: kind === Kind.KEY_STORAGE_OUT_OF_SYNC ? "366px" : undefined,
         },
         component: GenericToast,
         priority: kind === Kind.VERIFY_THIS_SESSION ? 95 : 40,