Use one callback instead of two in `RecoveryPanel`

src/components/views/settings/encryption/RecoveryPanel.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { JSX, MouseEventHandler, useCallback, useEffect, useState } from "react";
+import React, { JSX, useCallback, useEffect, useState } from "react";
 import { Button, InlineSpinner } from "@vector-im/compound-web";
 import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key";
 
@@ -27,19 +27,15 @@ type State = "loading" | "missing_backup" | "secrets_not_cached" | "good";
 
 interface RecoveryPanelProps {
     /**
-     * Callback for when the user clicks the button to set up their recovery key.
+     * Callback for when the user wants to set up or change their recovery key.
      */
-    onSetUpRecoveryClick: MouseEventHandler<HTMLButtonElement>;
+    onChangeRecoveryKeyClick: (setupNewKey: boolean) => void;
-    /**
-     * Callback for when the user clicks the button to change their recovery key.
-     */
-    onChangingRecoveryKeyClick: MouseEventHandler<HTMLButtonElement>;
 }
 
 /**
  * This component allows the user to set up or change their recovery key.
  */
-export function RecoveryPanel({ onSetUpRecoveryClick, onChangingRecoveryKeyClick }: RecoveryPanelProps): JSX.Element {
+export function RecoveryPanel({ onChangeRecoveryKeyClick }: RecoveryPanelProps): JSX.Element {
     const [state, setState] = useState<State>("loading");
     const isMissingBackup = state === "missing_backup";
 
@@ -71,7 +67,7 @@ export function RecoveryPanel({ onSetUpRecoveryClick, onChangingRecoveryKeyClick
             break;
         case "missing_backup":
             content = (
-                <Button size="sm" kind="primary" Icon={KeyIcon} onClick={onSetUpRecoveryClick}>
+                <Button size="sm" kind="primary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(true)}>
                     {_t("settings|encryption|recovery|set_up_recovery")}
                 </Button>
             );
@@ -90,7 +86,7 @@ export function RecoveryPanel({ onSetUpRecoveryClick, onChangingRecoveryKeyClick
             break;
         case "good":
             content = (
-                <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={onChangingRecoveryKeyClick}>
+                <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(false)}>
                     {_t("settings|encryption|recovery|change_recovery_key")}
                 </Button>
             );

src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx

@@ -44,8 +44,9 @@ export function EncryptionUserSettingsTab(): JSX.Element {
         case "main":
             content = (
                 <RecoveryPanel
-                    onChangingRecoveryKeyClick={() => setState("change_recovery_key")}
+                    onChangeRecoveryKeyClick={(setupNewKey) =>
-                    onSetUpRecoveryClick={() => setState("set_recovery_key")}
+                        setupNewKey ? setState("set_recovery_key") : setState("change_recovery_key")
+                    }
                 />
             );
             break;

test/unit-tests/components/views/settings/encryption/RecoveryPanel-test.tsx

@@ -29,13 +29,11 @@ describe("<RecoveryPanel />", () => {
         mocked(accessSecretStorage).mockClear().mockResolvedValue();
     });
 
-    function renderRecoverPanel(
+    function renderRecoverPanel(onChangeRecoveryKeyClick = jest.fn()) {
-        props = {
+        return render(
-            onSetUpRecoveryClick: jest.fn(),
+            <RecoveryPanel onChangeRecoveryKeyClick={onChangeRecoveryKeyClick} />,
-            onChangingRecoveryKeyClick: jest.fn(),
+            withClientContextRenderOptions(matrixClient),
-        },
+        );
-    ) {
-        return render(<RecoveryPanel {...props} />, withClientContextRenderOptions(matrixClient));
     }
 
     it("should be in loading state when checking backup and the cached keys", () => {
@@ -51,14 +49,14 @@ describe("<RecoveryPanel />", () => {
     it("should ask to set up a recovery key when there is no key backup", async () => {
         const user = userEvent.setup();
 
-        const onSetUpRecoveryClick = jest.fn();
+        const onChangeRecoveryKeyClick = jest.fn();
-        const { asFragment } = renderRecoverPanel({ onSetUpRecoveryClick, onChangingRecoveryKeyClick: jest.fn() });
+        const { asFragment } = renderRecoverPanel(onChangeRecoveryKeyClick);
 
         await waitFor(() => screen.getByRole("button", { name: "Set up recovery" }));
         expect(asFragment()).toMatchSnapshot();
 
         await user.click(screen.getByRole("button", { name: "Set up recovery" }));
-        expect(onSetUpRecoveryClick).toHaveBeenCalled();
+        expect(onChangeRecoveryKeyClick).toHaveBeenCalledWith(true);
     });
 
     it("should ask to enter the recovery key when secrets are not cached", async () => {
@@ -86,12 +84,12 @@ describe("<RecoveryPanel />", () => {
         });
         const user = userEvent.setup();
 
-        const onChangingRecoveryKeyClick = jest.fn();
+        const onChangeRecoveryKeyClick = jest.fn();
-        const { asFragment } = renderRecoverPanel({ onSetUpRecoveryClick: jest.fn(), onChangingRecoveryKeyClick });
+        const { asFragment } = renderRecoverPanel(onChangeRecoveryKeyClick);
         await waitFor(() => screen.getByRole("button", { name: "Change recovery key" }));
         expect(asFragment()).toMatchSnapshot();
 
         await user.click(screen.getByRole("button", { name: "Change recovery key" }));
-        expect(onChangingRecoveryKeyClick).toHaveBeenCalled();
+        expect(onChangeRecoveryKeyClick).toHaveBeenCalledWith(false);
     });
 });