Add Forgot recovery key? button to encryption tab (#29202)

* feat(crypto settings): add "Forgot  recovery key?" button to encryption tab

* test(crypto settings): add tests for `RecoveryPanelOutOfSync`

* test(crypto settings): update encryption tab test

* test(crypto settings): update and add e2e test

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

@@ -10,7 +10,6 @@ import { 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 { mocked } from "jest-mock";
 
 import {
     EncryptionUserSettingsTab,
@@ -18,11 +17,6 @@ import {
 } from "../../../../../../../src/components/views/settings/tabs/user/EncryptionUserSettingsTab";
 import { createTestClient, withClientContextRenderOptions } from "../../../../../../test-utils";
 import Modal from "../../../../../../../src/Modal";
-import { accessSecretStorage } from "../../../../../../../src/SecurityManager";
-
-jest.mock("../../../../../../../src/SecurityManager", () => ({
-    accessSecretStorage: jest.fn(),
-}));
 
 describe("<EncryptionUserSettingsTab />", () => {
     let matrixClient: MatrixClient;
@@ -42,8 +36,6 @@ describe("<EncryptionUserSettingsTab />", () => {
                 userSigningKey: true,
             },
         });
-
-        mocked(accessSecretStorage).mockClear().mockResolvedValue();
     });
 
     function renderComponent(props: { initialState?: State } = {}) {
@@ -79,7 +71,7 @@ describe("<EncryptionUserSettingsTab />", () => {
         await waitFor(() => expect(screen.getByText("Recovery")).toBeInTheDocument());
     });
 
-    it("should ask to enter the recovery key when secrets are not cached", async () => {
+    it("should display the recovery out of sync panel when secrets are not cached", async () => {
         // Secrets are not cached
         jest.spyOn(matrixClient.getCrypto()!, "getCrossSigningStatus").mockResolvedValue({
             privateKeysInSecretStorage: true,
@@ -97,8 +89,10 @@ describe("<EncryptionUserSettingsTab />", () => {
         await waitFor(() => screen.getByRole("button", { name: "Enter recovery key" }));
         expect(asFragment()).toMatchSnapshot();
 
-        await user.click(screen.getByRole("button", { name: "Enter recovery key" }));
-        expect(accessSecretStorage).toHaveBeenCalled();
+        await user.click(screen.getByRole("button", { name: "Forgot recovery key?" }));
+        expect(
+            screen.getByRole("heading", { name: "Forgot your recovery key? You’ll need to reset your identity." }),
+        ).toBeVisible();
     });
 
     it("should display the change recovery key panel when the user clicks on the change recovery button", async () => {