From 5fb1857538909b9a263d67d2af91b741222bec76 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Tue, 19 Dec 2023 13:04:15 +0530
Subject: [PATCH] fix: Org invitation e2e flakiness (#12861)

---
 apps/web/pages/signup.tsx                          | 14 +++++++++++++-
 .../organization/organization-invitation.e2e.ts    |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 10a977fdc3..f7c558363e 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -75,6 +75,7 @@ function UsernameField({
   setUsernameTaken,
   orgSlug,
   usernameTaken,
+  disabled,
   ...props
 }: React.ComponentProps<typeof TextField> & {
   username: string;
@@ -92,6 +93,8 @@ function UsernameField({
     if (formState.isSubmitting || formState.isSubmitSuccessful) return;
 
     async function checkUsername() {
+      // If the username can't be changed, there is no point in doing the username availability check
+      if (disabled) return;
       if (!debouncedUsername) {
         setPremium(false);
         setUsernameTaken(false);
@@ -103,11 +106,20 @@ function UsernameField({
       });
     }
     checkUsername();
-  }, [debouncedUsername, setPremium, setUsernameTaken, formState.isSubmitting, formState.isSubmitSuccessful]);
+  }, [
+    debouncedUsername,
+    setPremium,
+    disabled,
+    orgSlug,
+    setUsernameTaken,
+    formState.isSubmitting,
+    formState.isSubmitSuccessful,
+  ]);
 
   return (
     <div>
       <TextField
+        disabled={disabled}
         {...props}
         {...register("username")}
         data-testid="signup-usernamefield"
diff --git a/apps/web/playwright/organization/organization-invitation.e2e.ts b/apps/web/playwright/organization/organization-invitation.e2e.ts
index f931baf9d7..5726968ccd 100644
--- a/apps/web/playwright/organization/organization-invitation.e2e.ts
+++ b/apps/web/playwright/organization/organization-invitation.e2e.ts
@@ -392,7 +392,7 @@ async function signupFromEmailInviteLink({
   const signupPage = await context.newPage();
 
   signupPage.goto(inviteLink);
-  await signupPage.waitForLoadState("networkidle");
+  await signupPage.locator(`[data-testid="signup-usernamefield"]`).waitFor({ state: "visible" });
   await expect(signupPage.locator(`[data-testid="signup-usernamefield"]`)).toBeDisabled();
   expect(await signupPage.locator(`[data-testid="signup-usernamefield"]`).inputValue()).toBe(
     expectedUsername