Encryption tab: hide Advanced section when the key storage is out of sync (#29129)

* fix(encryption tab): hide the advanced section when the secrets are not cached locally

The secret verification is now made at the level of `EncryptionUserSettingsTab` instead at the `RecoveryPanel` level. In the `EncryptionUserSettingsTab`, we decide to only display `RecoveryPanelOutOfSync` in case of uncached secrets.

`RecoveryPanelOutOfSync` is simplified version of `RecoveryPanel` handling only the `secrets_not_cached` case.

* refactor(encryption tab): simplify the `RecoveryPanel` without having to handle the missing secrets

* test(encryption tab): move test about cached secrets in `EncryptionUserSettingsTab-test.tsx`

* test(encryption tab): move e2e test which are testing all the encryption tab in `encryption-tab.spec.ts

* refactor(encryption tab): move `RecoveryPanelOutOfSync` in its own file

- fix typos
- call onFinish after accessSecretStorage
- onFinish doesn't need to be asynchronous

* doc(encryption tab): improve documentation when the secrets are not cached locally

* test(encryption tab): improve test documentation and naming

* doc(encryption tab): improve `RecoveryPanelOutOfSync` documentation

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

@@ -10,10 +10,16 @@ import { render, screen } from "jest-matrix-react";
 import { 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 } 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;
@@ -33,6 +39,8 @@ describe("<EncryptionUserSettingsTab />", () => {
                 userSigningKey: true,
             },
         });
+
+        mocked(accessSecretStorage).mockClear().mockResolvedValue();
     });
 
     function renderComponent() {
@@ -68,6 +76,28 @@ describe("<EncryptionUserSettingsTab />", () => {
         await waitFor(() => expect(screen.getByText("Recovery")).toBeInTheDocument());
     });
 
+    it("should ask to enter the recovery key when secrets are not cached", async () => {
+        // Secrets are not cached
+        jest.spyOn(matrixClient.getCrypto()!, "getCrossSigningStatus").mockResolvedValue({
+            privateKeysInSecretStorage: true,
+            publicKeysOnDevice: true,
+            privateKeysCachedLocally: {
+                masterKey: false,
+                selfSigningKey: true,
+                userSigningKey: true,
+            },
+        });
+
+        const user = userEvent.setup();
+        const { asFragment } = renderComponent();
+
+        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();
+    });
+
     it("should display the change recovery key panel when the user clicks on the change recovery button", async () => {
         const user = userEvent.setup();