Fix the flow to upgrade an upgraded legacy identity (#3406)

* Fix upgrade again flow

* Remove unused variable

* E2E test upgrade identity again

* Inline function

Author: lmuntaner

src/frontend/src/lib/components/wizards/migration/views/AlreadyMigrated.svelte

@@ -8,14 +8,18 @@
     UpgradeIdentityEvents,
   } from "$lib/utils/analytics/upgradeIdentityFunnel";
 
-  let { onUpgradeAgain }: { onUpgradeAgain: () => void } = $props();
+  let {
+    onUpgradeAgain,
+  }: { onUpgradeAgain: (attachElement?: HTMLElement) => void } = $props();
+
+  let attachElement = $state<HTMLElement>();
 
   onMount(() => {
     upgradeIdentityFunnel.trigger(UpgradeIdentityEvents.AlreadyMigratedScreen);
   });
 </script>
 
-<div class="flex flex-1 flex-col">
+<div class="flex flex-1 flex-col" bind:this={attachElement}>
   <div class="mb-8 flex flex-col">
     <div class="text-text-primary flex h-32 items-center justify-center py-5">
       <MigrationIllustration />
@@ -48,7 +52,11 @@
     >
       Help & FAQ
     </Button>
-    <Button onclick={onUpgradeAgain} variant="tertiary" size="lg">
+    <Button
+      onclick={() => onUpgradeAgain(attachElement)}
+      variant="tertiary"
+      size="lg"
+    >
       Upgrade again
     </Button>
   </div>

src/frontend/src/lib/flows/migrationFlow.svelte.ts

@@ -44,7 +44,6 @@ export class MigrationFlow {
   view = $state<"enterNumber" | "enterName" | "alreadyMigrated">("enterNumber");
   identityNumber: UserNumber | undefined;
   #webAuthFlows: { flows: WebAuthnFlow[]; currentIndex: number } | undefined;
-  #attachElement?: HTMLElement;
   #devices: Omit<DeviceData, "alias">[] = [];
 
   constructor() {
@@ -56,7 +55,6 @@ export class MigrationFlow {
     attachElement?: HTMLElement,
   ): Promise<void> => {
     this.identityNumber = identityNumber;
-    this.#attachElement = attachElement;
     this.#devices = await this.#lookupAuthenticators(identityNumber);
     const alreadyMigrated = this.#devices.some(isNewOriginDevice);
     if (alreadyMigrated) {
@@ -71,17 +69,17 @@ export class MigrationFlow {
     });
   };
 
-  upgradeAgain = () => {
-    if (isNullish(this.identityNumber) || isNullish(this.#attachElement)) {
+  upgradeAgain = (attachElement?: HTMLElement) => {
+    if (isNullish(this.identityNumber)) {
       // This shouldn't happen because `authenticateWithIdentityNumber` is called, before.
-      // The identityNumber and attachElement are set in authenticateWithIdentityNumber from "enterNumber" view.
+      // The identityNumber is set in authenticateWithIdentityNumber from "enterNumber" view.
       this.view = "enterNumber";
       return;
     }
     return this.#authenticate({
       identityNumber: this.identityNumber,
       devices: this.#devices,
-      attachElement: this.#attachElement,
+      attachElement,
     });
   };
 

src/frontend/tests/e2e-playwright/dashboard/migration.spec.ts

@@ -10,6 +10,7 @@ import {
 } from "../utils";
 
 const TEST_USER_NAME = "Test User";
+const TEST_USER_NAME_2 = "Test User 2";
 
 const createLegacyIdentity = async (page: Page) => {
   await page.getByRole("button", { name: "Create Internet Identity" }).click();
@@ -115,4 +116,69 @@ test.describe("Migration", () => {
       }),
     ).toBeVisible();
   });
+
+  test("User can go through the upgrade flow again", async ({ page }) => {
+    // Step 1: Create a legacy identity
+    await page.goto(LEGACY_II_URL);
+
+    await addVirtualAuthenticator(page);
+    const identityNumber = await createLegacyIdentity(page);
+
+    // Step 2: Navigate to the new II_URL to start the migration
+    await page.goto(II_URL);
+    await page.getByRole("link", { name: "Manage Identity" }).click();
+
+    // Step 3: Perform the first migration
+    const auth = dummyAuth();
+    await upgradeLegacyIdentity(page, identityNumber, auth);
+
+    // Step 4: Verify the migration was successful
+    await page.waitForURL(II_URL + "/manage");
+    await expect(
+      page.getByRole("heading", {
+        name: new RegExp(`Welcome, ${TEST_USER_NAME}!`),
+      }),
+    ).toBeVisible();
+
+    // Step 5: Sign out
+    await signOut(page);
+
+    // Step 6: Navigate back to upgrade flow with the same identity number
+    await page.goto(II_URL);
+    const auth2 = dummyAuth();
+
+    await page.getByRole("link", { name: "Manage Identity" }).click();
+    await page.getByRole("button", { name: "Use another identity" }).click();
+    await page.getByRole("button", { name: "Upgrade" }).click();
+    await page
+      .getByPlaceholder("Internet Identity number")
+      .fill(identityNumber);
+    await page.getByRole("button", { name: "Continue" }).click();
+
+    // Step 7: Verify "Identity already upgraded" screen appears
+    await expect(
+      page.getByRole("heading", { name: "Identity already upgraded" }),
+    ).toBeVisible();
+    await expect(
+      page.getByText(
+        "This identity has already been upgraded to the new experience",
+      ),
+    ).toBeVisible();
+
+    // Step 8: Click "Upgrade again" button
+    await page.getByRole("button", { name: "Upgrade again" }).click();
+
+    // Step 9: Complete the upgrade flow again with a different name
+    await page.getByLabel("Identity name").fill(TEST_USER_NAME_2);
+    auth2(page);
+    await page.getByRole("button", { name: "Create Passkey" }).click();
+
+    // Step 10: Verify the second upgrade was successful
+    await page.waitForURL(II_URL + "/manage");
+    await expect(
+      page.getByRole("heading", {
+        name: new RegExp(`Welcome, ${TEST_USER_NAME_2}!`),
+      }),
+    ).toBeVisible();
+  });
 });