Add button to restore from backup into /devtools (#31581)

* Add button to restore from backup.

* Fix formatting.

src/components/views/dialogs/devtools/Crypto.tsx

@@ -14,6 +14,7 @@ import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
 import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";
 import { ManualDeviceKeyVerificationDialog } from "../ManualDeviceKeyVerificationDialog";
+import RestoreKeyBackupDialog from "../../dialogs/security/RestoreKeyBackupDialog";
 
 interface KeyBackupProps {
     /**
@@ -43,6 +44,20 @@ export function Crypto({ onBack }: KeyBackupProps): JSX.Element {
                     >
                         {_t("devtools|manual_device_verification")}
                     </button>
+                    <button
+                        type="button"
+                        onClick={() => {
+                            Modal.createDialog(
+                                RestoreKeyBackupDialog,
+                                undefined,
+                                undefined,
+                                /* priority = */ true,
+                                /* static = */ true,
+                            );
+                        }}
+                    >
+                        {_t("devtools|restore_from_backup")}
+                    </button>
                 </>
             ) : (
                 <span>{_t("devtools|crypto|crypto_not_available")}</span>

src/i18n/strings/en_EN.json

@@ -849,6 +849,7 @@
         "number_of_users": "Number of users",
         "only_joined_members": "Only joined users",
         "original_event_source": "Original event source",
+        "restore_from_backup": "Restore from backup",
         "room_encrypted": "Room is <strong>encrypted ✅</strong>",
         "room_id": "Room ID: %(roomId)s",
         "room_not_encrypted": "Room is <strong>not encrypted 🚨</strong>",