Provide the Learn More link for verify_toast_description (#32857)

* Provide the Learn More link for verify_toast_description

* Screenshot test for verify this device toast

apps/web/playwright/e2e/crypto/toasts.spec.ts

@@ -8,7 +8,7 @@
 import { type GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
 
 import { test, expect } from "../../element-web-test";
-import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElementAndVerify } from "./utils";
+import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement, logIntoElementAndVerify } from "./utils";
 import { type Bot } from "../../pages/bot";
 
 test.describe("Key storage out of sync toast", () => {
@@ -181,3 +181,35 @@ test.describe("'Turn on key storage' toast", () => {
         await toasts.assertNoToasts();
     });
 });
+
+test.describe("Verify this device toast", () => {
+    test(
+        "The toast is displayed if we are not verified",
+        { tag: "@screenshot" },
+        async ({ page, credentials, homeserver }) => {
+            // Ensure the user already has a device, and an encrypted toom, so
+            // we need to verify when we log in
+            const { botClient } = await createBot(page, homeserver, credentials, true);
+            await botClient.createRoom({
+                initial_state: [
+                    {
+                        type: "m.room.encryption",
+                        state_key: "",
+                        content: { algorithm: "m.megolm.v1.aes-sha2" },
+                    },
+                ],
+            });
+
+            // Log in without verifying
+            await logIntoElement(page, credentials);
+            const authPage = page.locator(".mx_AuthPage");
+            await authPage.getByRole("button", { name: "Skip verification for now" }).click();
+            await authPage.getByRole("button", { name: "I'll verify later" }).click();
+            await page.waitForSelector(".mx_MatrixChat");
+
+            await expect(page.getByRole("heading", { name: "Verify this device" })).toBeVisible();
+
+            await expect(page.locator(".mx_ToastContainer")).toMatchScreenshot("verify-this-device.png");
+        },
+    );
+});

apps/web/src/toasts/SetupEncryptionToast.tsx

@@ -124,12 +124,22 @@ const getSecondaryButtonLabel = (state: DeviceStateForToast): string => {
     }
 };
 
-const getDescription = (state: DeviceStateForToast): string => {
+const getDescription = (state: DeviceStateForToast): string | React.ReactNode => {
     switch (state) {
         case "set_up_recovery":
             return _t("encryption|set_up_recovery_toast_description");
         case "verify_this_session":
-            return _t("encryption|verify_toast_description");
+            return _t("encryption|verify_toast_description", undefined, {
+                a: (sub) => (
+                    <a
+                        href="https://docs.element.io/latest/element-support/device-verification/how-to-verify-devices/"
+                        target="_blank"
+                        rel="noreferrer noopener"
+                    >
+                        {sub}
+                    </a>
+                ),
+            });
         case "key_storage_out_of_sync":
             return _t("encryption|key_storage_out_of_sync_description");
         case "turn_on_key_storage":