fix: flaky E2E tests for invite revocation and search (#118) (#123)

Co-authored-by: Ona <no-reply@ona.com>

Author: zacharias-ona

src/components/members/members-page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { createClient } from "@/lib/supabase/client";
 import { Separator } from "@/components/ui/separator";
@@ -31,8 +31,14 @@ export function MembersPage({
 }: MembersPageProps) {
   const router = useRouter();
   const [error, setError] = useState<string | null>(null);
+  const [invites, setInvites] = useState(initialInvites);
   const isAdmin = currentUserRole === "owner" || currentUserRole === "admin";
 
+  // Sync local invite state when server data changes (e.g. after sending a new invite)
+  useEffect(() => {
+    setInvites(initialInvites);
+  }, [initialInvites]);
+
   async function handleRoleChange(memberId: string, newRole: MemberRole) {
     setError(null);
     const supabase = createClient();
@@ -71,12 +77,17 @@ export function MembersPage({
     setError(null);
     const supabase = createClient();
 
+    // Optimistically remove the invite so the UI updates immediately
+    setInvites((prev) => prev.filter((i) => i.id !== inviteId));
+
     const { error: deleteError } = await supabase
       .from("workspace_invites")
       .delete()
       .eq("id", inviteId);
 
     if (deleteError) {
+      // Revert optimistic removal on failure
+      setInvites(initialInvites);
       setError(deleteError.message);
       return;
     }
@@ -109,11 +120,11 @@ export function MembersPage({
         onRemove={handleRemoveMember}
       />
 
-      {isAdmin && initialInvites.length > 0 && (
+      {isAdmin && invites.length > 0 && (
         <>
           <Separator className="bg-white/[0.06]" />
           <PendingInviteList
-            invites={initialInvites}
+            invites={invites}
             onRevoke={handleRevokeInvite}
           />
         </>

src/components/sidebar/page-search.tsx

@@ -27,6 +27,7 @@ export function PageSearch() {
   const [open, setOpen] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [workspaceId, setWorkspaceId] = useState<string | null>(null);
+  const [workspaceResolved, setWorkspaceResolved] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -35,9 +36,11 @@ export function PageSearch() {
   useEffect(() => {
     if (!params.workspaceSlug) {
       setWorkspaceId(null);
+      setWorkspaceResolved(true);
       return;
     }
 
+    setWorkspaceResolved(false);
     const supabase = createClient();
     supabase
       .from("workspaces")
@@ -47,9 +50,11 @@ export function PageSearch() {
       .then(({ data, error }) => {
         if (error) {
           captureSupabaseError(error, "page-search:workspace-lookup");
+          setWorkspaceResolved(true);
           return;
         }
         setWorkspaceId(data?.id ?? null);
+        setWorkspaceResolved(true);
       });
   }, [params.workspaceSlug]);
 
@@ -83,7 +88,7 @@ export function PageSearch() {
     [workspaceId]
   );
 
-  // Debounced search (300ms)
+  // Debounced search (300ms) — waits for workspaceId to resolve before firing
   useEffect(() => {
     if (debounceRef.current) {
       clearTimeout(debounceRef.current);
@@ -95,6 +100,11 @@ export function PageSearch() {
       return;
     }
 
+    if (!workspaceResolved) {
+      setLoading(true);
+      return;
+    }
+
     setLoading(true);
     debounceRef.current = setTimeout(() => {
       search(query);
@@ -105,7 +115,7 @@ export function PageSearch() {
         clearTimeout(debounceRef.current);
       }
     };
-  }, [query, search]);
+  }, [query, search, workspaceResolved]);
 
   // Close on click outside
   useEffect(() => {