Enhance E2E Tests and Configuration (#358)

* Enhance E2E Tests and Configuration

- Updated `.gitignore` to exclude `.auth/` directory for cleaner test environment.
- Added `test:fast` script in `package.json` for faster Playwright test execution.
- Configured Playwright to include a setup project for initializing tests.
- Introduced `AUTH_STATES` utility for managing authentication states in tests.
- Created `auth.setup.ts` for user authentication tests, ensuring proper login flows.
- Refactored various test files to utilize the new authentication state management, improving test reliability and maintainability.
- Adjusted team and user billing tests to streamline setup and enhance clarity.
- Refactored some dialogs

packages/features/team-accounts/src/components/members/account-members-table.tsx

@@ -220,10 +220,6 @@ function ActionsDropdown({
   currentTeamAccountId: string;
   currentRoleHierarchy: number;
 }) {
-  const [isRemoving, setIsRemoving] = useState(false);
-  const [isTransferring, setIsTransferring] = useState(false);
-  const [isUpdatingRole, setIsUpdatingRole] = useState(false);
-
   const isCurrentUser = member.user_id === currentUserId;
   const isPrimaryOwner = member.primary_owner_user_id === member.user_id;
 
@@ -258,54 +254,42 @@ function ActionsDropdown({
 
         <DropdownMenuContent>
           <If condition={canUpdateRole}>
-            <DropdownMenuItem onClick={() => setIsUpdatingRole(true)}>
-              <Trans i18nKey={'teams:updateRole'} />
-            </DropdownMenuItem>
+            <UpdateMemberRoleDialog
+              userId={member.user_id}
+              userRole={member.role}
+              teamAccountId={currentTeamAccountId}
+              userRoleHierarchy={currentRoleHierarchy}
+            >
+              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <Trans i18nKey={'teams:updateRole'} />
+              </DropdownMenuItem>
+            </UpdateMemberRoleDialog>
           </If>
 
           <If condition={permissions.canTransferOwnership}>
-            <DropdownMenuItem onClick={() => setIsTransferring(true)}>
-              <Trans i18nKey={'teams:transferOwnership'} />
-            </DropdownMenuItem>
+            <TransferOwnershipDialog
+              targetDisplayName={member.name ?? member.email}
+              accountId={member.account_id}
+              userId={member.user_id}
+            >
+              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <Trans i18nKey={'teams:transferOwnership'} />
+              </DropdownMenuItem>
+            </TransferOwnershipDialog>
           </If>
 
           <If condition={canRemoveFromAccount}>
-            <DropdownMenuItem onClick={() => setIsRemoving(true)}>
-              <Trans i18nKey={'teams:removeMember'} />
-            </DropdownMenuItem>
+            <RemoveMemberDialog
+              teamAccountId={currentTeamAccountId}
+              userId={member.user_id}
+            >
+              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <Trans i18nKey={'teams:removeMember'} />
+              </DropdownMenuItem>
+            </RemoveMemberDialog>
           </If>
         </DropdownMenuContent>
       </DropdownMenu>
-
-      <If condition={isRemoving}>
-        <RemoveMemberDialog
-          isOpen
-          setIsOpen={setIsRemoving}
-          teamAccountId={currentTeamAccountId}
-          userId={member.user_id}
-        />
-      </If>
-
-      <If condition={isUpdatingRole}>
-        <UpdateMemberRoleDialog
-          isOpen
-          setIsOpen={setIsUpdatingRole}
-          userId={member.user_id}
-          userRole={member.role}
-          teamAccountId={currentTeamAccountId}
-          userRoleHierarchy={currentRoleHierarchy}
-        />
-      </If>
-
-      <If condition={isTransferring}>
-        <TransferOwnershipDialog
-          isOpen
-          setIsOpen={setIsTransferring}
-          targetDisplayName={member.name ?? member.email}
-          accountId={member.account_id}
-          userId={member.user_id}
-        />
-      </If>
     </>
   );
 }

packages/features/team-accounts/src/components/members/remove-member-dialog.tsx

@@ -9,6 +9,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
+  AlertDialogTrigger,
 } from '@kit/ui/alert-dialog';
 import { Button } from '@kit/ui/button';
 import { If } from '@kit/ui/if';
@@ -17,18 +18,17 @@ import { Trans } from '@kit/ui/trans';
 import { removeMemberFromAccountAction } from '../../server/actions/team-members-server-actions';
 
 export function RemoveMemberDialog({
-  isOpen,
-  setIsOpen,
   teamAccountId,
   userId,
-}: {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
+  children,
+}: React.PropsWithChildren<{
   teamAccountId: string;
   userId: string;
-}) {
+}>) {
   return (
-    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>
@@ -40,11 +40,7 @@ export function RemoveMemberDialog({
           </AlertDialogDescription>
         </AlertDialogHeader>
 
-        <RemoveMemberForm
-          setIsOpen={setIsOpen}
-          accountId={teamAccountId}
-          userId={userId}
-        />
+        <RemoveMemberForm accountId={teamAccountId} userId={userId} />
       </AlertDialogContent>
     </AlertDialog>
   );
@@ -53,11 +49,9 @@ export function RemoveMemberDialog({
 function RemoveMemberForm({
   accountId,
   userId,
-  setIsOpen,
 }: {
   accountId: string;
   userId: string;
-  setIsOpen: (isOpen: boolean) => void;
 }) {
   const [isSubmitting, startTransition] = useTransition();
   const [error, setError] = useState<boolean>();
@@ -66,8 +60,6 @@ function RemoveMemberForm({
     startTransition(async () => {
       try {
         await removeMemberFromAccountAction({ accountId, userId });
-
-        setIsOpen(false);
       } catch {
         setError(true);
       }

packages/features/team-accounts/src/components/members/transfer-ownership-dialog.tsx

@@ -16,6 +16,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
+  AlertDialogTrigger,
 } from '@kit/ui/alert-dialog';
 import { Button } from '@kit/ui/button';
 import { Form } from '@kit/ui/form';
@@ -26,20 +27,20 @@ import { TransferOwnershipConfirmationSchema } from '../../schema/transfer-owner
 import { transferOwnershipAction } from '../../server/actions/team-members-server-actions';
 
 export function TransferOwnershipDialog({
-  isOpen,
-  setIsOpen,
+  children,
   targetDisplayName,
   accountId,
   userId,
 }: {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
+  children: React.ReactNode;
   accountId: string;
   userId: string;
   targetDisplayName: string;
 }) {
   return (
-    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>
@@ -55,7 +56,6 @@ export function TransferOwnershipDialog({
           accountId={accountId}
           userId={userId}
           targetDisplayName={targetDisplayName}
-          setIsOpen={setIsOpen}
         />
       </AlertDialogContent>
     </AlertDialog>
@@ -66,12 +66,10 @@ function TransferOrganizationOwnershipForm({
   accountId,
   userId,
   targetDisplayName,
-  setIsOpen,
 }: {
   userId: string;
   accountId: string;
   targetDisplayName: string;
-  setIsOpen: (isOpen: boolean) => void;
 }) {
   const [pending, startTransition] = useTransition();
   const [error, setError] = useState<boolean>();
@@ -121,8 +119,6 @@ function TransferOrganizationOwnershipForm({
           startTransition(async () => {
             try {
               await transferOwnershipAction(data);
-
-              setIsOpen(false);
             } catch {
               setError(true);
             }

packages/features/team-accounts/src/components/members/update-member-role-dialog.tsx

@@ -12,6 +12,7 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@kit/ui/dialog';
 import {
   Form,
@@ -33,22 +34,20 @@ import { RolesDataProvider } from './roles-data-provider';
 type Role = string;
 
 export function UpdateMemberRoleDialog({
-  isOpen,
-  setIsOpen,
+  children,
   userId,
   teamAccountId,
   userRole,
   userRoleHierarchy,
-}: {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
+}: React.PropsWithChildren<{
   userId: string;
   teamAccountId: string;
   userRole: Role;
   userRoleHierarchy: number;
-}) {
+}>) {
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
@@ -63,7 +62,6 @@ export function UpdateMemberRoleDialog({
         <RolesDataProvider maxRoleHierarchy={userRoleHierarchy}>
           {(data) => (
             <UpdateMemberForm
-              setIsOpen={setIsOpen}
               userId={userId}
               teamAccountId={teamAccountId}
               userRole={userRole}
@@ -80,13 +78,11 @@ function UpdateMemberForm({
   userId,
   userRole,
   teamAccountId,
-  setIsOpen,
   roles,
 }: React.PropsWithChildren<{
   userId: string;
   userRole: Role;
   teamAccountId: string;
-  setIsOpen: (isOpen: boolean) => void;
   roles: Role[];
 }>) {
   const [pending, startTransition] = useTransition();
@@ -101,8 +97,6 @@ function UpdateMemberForm({
           userId,
           role,
         });
-
-        setIsOpen(false);
       } catch {
         setError(true);
       }