Merge branch 'develop' of https://github.com/vector-im/element-web into dbkr/stateafter

# Conflicts:
#	test/unit-tests/components/structures/RoomView-test.tsx
#	test/unit-tests/components/structures/TimelinePanel-test.tsx

test/unit-tests/components/views/dialogs/AccessSecretStorageDialog-test.tsx

@@ -122,4 +122,34 @@ describe("AccessSecretStorageDialog", () => {
 
         expect(screen.getByPlaceholderText("Security Phrase")).toHaveFocus();
     });
+
+    it("Can reset secret storage", async () => {
+        jest.spyOn(mockClient.secretStorage, "checkKey").mockResolvedValue(true);
+
+        const onFinished = jest.fn();
+        const checkPrivateKey = jest.fn().mockResolvedValue(true);
+        renderComponent({ onFinished, checkPrivateKey });
+
+        await userEvent.click(screen.getByText("Reset all"), { delay: null });
+
+        // It will prompt the user to confirm resetting
+        expect(screen.getByText("Reset everything")).toBeInTheDocument();
+        await userEvent.click(screen.getByText("Reset"), { delay: null });
+
+        // Then it will prompt the user to create a key/passphrase
+        await screen.findByText("Set up Secure Backup");
+        document.execCommand = jest.fn().mockReturnValue(true);
+        jest.spyOn(mockClient.getCrypto()!, "createRecoveryKeyFromPassphrase").mockResolvedValue({
+            privateKey: new Uint8Array(),
+            encodedPrivateKey: securityKey,
+        });
+        screen.getByRole("button", { name: "Continue" }).click();
+
+        await screen.findByText(/Save your Security Key/);
+        screen.getByRole("button", { name: "Copy" }).click();
+        await screen.findByText("Copied!");
+        screen.getByRole("button", { name: "Continue" }).click();
+
+        await screen.findByText("Secure Backup successful");
+    });
 });

test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { CryptoApi, KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
-import { render, RenderResult } from "jest-matrix-react";
+import { fireEvent, render, RenderResult, screen } from "jest-matrix-react";
 
 import { filterConsole, getMockClientWithEventEmitter, mockClientMethodsCrypto } from "../../../../test-utils";
 import LogoutDialog from "../../../../../src/components/views/dialogs/LogoutDialog";
@@ -22,7 +22,6 @@ describe("LogoutDialog", () => {
     beforeEach(() => {
         mockClient = getMockClientWithEventEmitter({
             ...mockClientMethodsCrypto(),
-            getKeyBackupVersion: jest.fn(),
         });
 
         mockCrypto = mocked(mockClient.getCrypto()!);
@@ -50,23 +49,26 @@ describe("LogoutDialog", () => {
     });
 
     it("Prompts user to connect backup if there is a backup on the server", async () => {
-        mockClient.getKeyBackupVersion.mockResolvedValue({} as KeyBackupInfo);
+        mockCrypto.getKeyBackupInfo.mockResolvedValue({} as KeyBackupInfo);
         const rendered = renderComponent();
         await rendered.findByText("Connect this session to Key Backup");
         expect(rendered.container).toMatchSnapshot();
     });
 
     it("Prompts user to set up backup if there is no backup on the server", async () => {
-        mockClient.getKeyBackupVersion.mockResolvedValue(null);
+        mockCrypto.getKeyBackupInfo.mockResolvedValue(null);
         const rendered = renderComponent();
         await rendered.findByText("Start using Key Backup");
         expect(rendered.container).toMatchSnapshot();
+
+        fireEvent.click(await screen.findByRole("button", { name: "Manually export keys" }));
+        await expect(screen.findByRole("heading", { name: "Export room keys" })).resolves.toBeInTheDocument();
     });
 
     describe("when there is an error fetching backups", () => {
         filterConsole("Unable to fetch key backup status");
         it("prompts user to set up backup", async () => {
-            mockClient.getKeyBackupVersion.mockImplementation(async () => {
+            mockCrypto.getKeyBackupInfo.mockImplementation(async () => {
                 throw new Error("beep");
             });
             const rendered = renderComponent();

test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx

@@ -239,7 +239,7 @@ describe("Spotlight Dialog", () => {
         });
 
         it("should call getVisibleRooms with MSC3946 dynamic room predecessors", async () => {
-            render(<SpotlightDialog onFinished={() => null} />, { legacyRoot: false });
+            render(<SpotlightDialog onFinished={() => null} />);
             jest.advanceTimersByTime(200);
             await flushPromisesWithFakeTimers();
             expect(mockedClient.getVisibleRooms).toHaveBeenCalledWith(true);

test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap

@@ -33,7 +33,6 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     >
       Room ID: !id
       <div
-        aria-describedby=":r2:"
         aria-label="Copy"
         class="mx_AccessibleButton mx_CopyableText_copyButton"
         role="button"

test/unit-tests/components/views/dialogs/security/CreateSecretStorageDialog-test.tsx

@@ -13,7 +13,7 @@ import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
 import { sleep } from "matrix-js-sdk/src/utils";
 
-import { filterConsole, stubClient } from "../../../../../test-utils";
+import { filterConsole, flushPromises, stubClient } from "../../../../../test-utils";
 import CreateSecretStorageDialog from "../../../../../../src/async-components/views/dialogs/security/CreateSecretStorageDialog";
 
 describe("CreateSecretStorageDialog", () => {
@@ -77,7 +77,7 @@ describe("CreateSecretStorageDialog", () => {
         filterConsole("Error fetching backup data from server");
 
         it("shows an error", async () => {
-            mockClient.getKeyBackupVersion.mockImplementation(async () => {
+            jest.spyOn(mockClient.getCrypto()!, "getKeyBackupInfo").mockImplementation(async () => {
                 throw new Error("bleh bleh");
             });
 
@@ -92,9 +92,44 @@ describe("CreateSecretStorageDialog", () => {
             expect(result.container).toMatchSnapshot();
 
             // Now we can get the backup and we retry
-            mockClient.getKeyBackupVersion.mockRestore();
+            jest.spyOn(mockClient.getCrypto()!, "getKeyBackupInfo").mockRestore();
             await userEvent.click(screen.getByRole("button", { name: "Retry" }));
             await screen.findByText("Your keys are now being backed up from this device.");
         });
     });
+
+    it("resets keys in the right order when resetting secret storage and cross-signing", async () => {
+        const result = renderComponent({ forceReset: true, resetCrossSigning: true });
+
+        await result.findByText(/Set up Secure Backup/);
+        jest.spyOn(mockClient.getCrypto()!, "createRecoveryKeyFromPassphrase").mockResolvedValue({
+            privateKey: new Uint8Array(),
+            encodedPrivateKey: "abcd efgh ijkl",
+        });
+        result.getByRole("button", { name: "Continue" }).click();
+
+        await result.findByText(/Save your Security Key/);
+        result.getByRole("button", { name: "Copy" }).click();
+
+        // Resetting should reset secret storage, cross signing, and key
+        // backup.  We make sure that all three are reset, and done in the
+        // right order.
+        const resetFunctionCallLog: string[] = [];
+        jest.spyOn(mockClient.getCrypto()!, "bootstrapSecretStorage").mockImplementation(async () => {
+            resetFunctionCallLog.push("bootstrapSecretStorage");
+        });
+        jest.spyOn(mockClient.getCrypto()!, "bootstrapCrossSigning").mockImplementation(async () => {
+            resetFunctionCallLog.push("bootstrapCrossSigning");
+        });
+        jest.spyOn(mockClient.getCrypto()!, "resetKeyBackup").mockImplementation(async () => {
+            resetFunctionCallLog.push("resetKeyBackup");
+        });
+
+        await flushPromises();
+        result.getByRole("button", { name: "Continue" }).click();
+
+        await result.findByText("Your keys are now being backed up from this device.");
+
+        expect(resetFunctionCallLog).toEqual(["bootstrapSecretStorage", "bootstrapCrossSigning", "resetKeyBackup"]);
+    });
 });

test/unit-tests/components/views/dialogs/security/ExportE2eKeysDialog-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { screen, fireEvent, render, waitFor } from "jest-matrix-react";
+import { screen, fireEvent, render, waitFor, act } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { Crypto, IMegolmSessionData } from "matrix-js-sdk/src/matrix";
 
@@ -23,12 +23,12 @@ describe("ExportE2eKeysDialog", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
-    it("should have disabled submit button initially", () => {
+    it("should have disabled submit button initially", async () => {
         const cli = createTestClient();
         const onFinished = jest.fn();
         const { container } = render(<ExportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
-        fireEvent.click(container.querySelector("[type=submit]")!);
-        expect(screen.getByText("Enter passphrase")).toBeInTheDocument();
+        await act(() => fireEvent.click(container.querySelector("[type=submit]")!));
+        expect(screen.getByLabelText("Enter passphrase")).toBeInTheDocument();
     });
 
     it("should complain about weak passphrases", async () => {
@@ -38,7 +38,7 @@ describe("ExportE2eKeysDialog", () => {
         const { container } = render(<ExportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
         const input = screen.getByLabelText("Enter passphrase");
         await userEvent.type(input, "password");
-        fireEvent.click(container.querySelector("[type=submit]")!);
+        await act(() => fireEvent.click(container.querySelector("[type=submit]")!));
         await expect(screen.findByText("This is a top-10 common password")).resolves.toBeInTheDocument();
     });
 
@@ -49,7 +49,7 @@ describe("ExportE2eKeysDialog", () => {
         const { container } = render(<ExportE2eKeysDialog matrixClient={cli} onFinished={onFinished} />);
         await userEvent.type(screen.getByLabelText("Enter passphrase"), "ThisIsAMoreSecurePW123$$");
         await userEvent.type(screen.getByLabelText("Confirm passphrase"), "ThisIsAMoreSecurePW124$$");
-        fireEvent.click(container.querySelector("[type=submit]")!);
+        await act(() => fireEvent.click(container.querySelector("[type=submit]")!));
         await expect(screen.findByText("Passphrases must match")).resolves.toBeInTheDocument();
     });
 
@@ -74,7 +74,7 @@ describe("ExportE2eKeysDialog", () => {
         const { container } = render(<ExportE2eKeysDialog matrixClient={cli} onFinished={jest.fn()} />);
         await userEvent.type(screen.getByLabelText("Enter passphrase"), passphrase);
         await userEvent.type(screen.getByLabelText("Confirm passphrase"), passphrase);
-        fireEvent.click(container.querySelector("[type=submit]")!);
+        await act(() => fireEvent.click(container.querySelector("[type=submit]")!));
 
         // Then it exports keys and encrypts them
         await waitFor(() => expect(exportRoomKeysAsJson).toHaveBeenCalled());

test/unit-tests/components/views/dialogs/security/RestoreKeyBackupDialog-test.tsx

@@ -9,6 +9,8 @@
 import React from "react";
 import { screen, render, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
 // Needed to be able to mock decodeRecoveryKey
 // eslint-disable-next-line no-restricted-imports
 import * as recoveryKeyModule from "matrix-js-sdk/src/crypto-api/recovery-key";
@@ -17,9 +19,16 @@ import RestoreKeyBackupDialog from "../../../../../../src/components/views/dialo
 import { stubClient } from "../../../../../test-utils";
 
 describe("<RestoreKeyBackupDialog />", () => {
+    const keyBackupRestoreResult = {
+        total: 2,
+        imported: 1,
+    };
+
+    let matrixClient: MatrixClient;
     beforeEach(() => {
-        stubClient();
+        matrixClient = stubClient();
         jest.spyOn(recoveryKeyModule, "decodeRecoveryKey").mockReturnValue(new Uint8Array(32));
+        jest.spyOn(matrixClient.getCrypto()!, "getKeyBackupInfo").mockResolvedValue({ version: "1" } as KeyBackupInfo);
     });
 
     it("should render", async () => {
@@ -48,4 +57,71 @@ describe("<RestoreKeyBackupDialog />", () => {
         await waitFor(() => expect(screen.getByText("👍 This looks like a valid Security Key!")).toBeInTheDocument());
         expect(asFragment()).toMatchSnapshot();
     });
+
+    it("should restore key backup when the key is cached", async () => {
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup").mockResolvedValue(keyBackupRestoreResult);
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should restore key backup when the key is in secret storage", async () => {
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup")
+            // Reject when trying to restore from cache
+            .mockRejectedValueOnce(new Error("key backup not found"))
+            // Resolve when trying to restore from secret storage
+            .mockResolvedValue(keyBackupRestoreResult);
+        jest.spyOn(matrixClient.secretStorage, "hasKey").mockResolvedValue(true);
+        jest.spyOn(matrixClient, "isKeyBackupKeyStored").mockResolvedValue({});
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should restore key backup when security key is filled by user", async () => {
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup")
+            // Reject when trying to restore from cache
+            .mockRejectedValueOnce(new Error("key backup not found"))
+            // Resolve when trying to restore from recovery key
+            .mockResolvedValue(keyBackupRestoreResult);
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Enter Security Key")).toBeInTheDocument());
+
+        await userEvent.type(screen.getByRole("textbox"), "my security key");
+        await userEvent.click(screen.getByRole("button", { name: "Next" }));
+
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    test("should restore key backup when passphrase is filled", async () => {
+        // Determine that the passphrase is required
+        jest.spyOn(matrixClient.getCrypto()!, "getKeyBackupInfo").mockResolvedValue({
+            version: "1",
+            auth_data: {
+                private_key_salt: "salt",
+                private_key_iterations: 1,
+            },
+        } as KeyBackupInfo);
+
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup")
+            // Reject when trying to restore from cache
+            .mockRejectedValue(new Error("key backup not found"));
+
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackupWithPassphrase").mockResolvedValue(
+            keyBackupRestoreResult,
+        );
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Enter Security Phrase")).toBeInTheDocument());
+        // Not role for password https://github.com/w3c/aria/issues/935
+        await userEvent.type(screen.getByTestId("passphraseInput"), "my passphrase");
+        await userEvent.click(screen.getByRole("button", { name: "Next" }));
+
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
 });

test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap

@@ -296,3 +296,263 @@ exports[`<RestoreKeyBackupDialog /> should render 1`] = `
   />
 </DocumentFragment>
 `;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when passphrase is filled 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when security key is filled by user 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is cached 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is in secret storage 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;