Add data-testid attributes for improved testing in modals

app/src/components/modals/account/DeleteAccountModal.tsx

@@ -39,12 +39,17 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
         <PasswordInput
           label="Current Password"
           placeholder="Enter your current password"
+          data-testid="delete-account-password-input"
           value={password}
           onChange={(e) => setPassword(e.currentTarget.value)}
           required
         />
         <Group justify="flex-end" mt="md">
-          <Button variant="default" onClick={onClose}>
+          <Button
+            variant="default"
+            onClick={onClose}
+            data-testid="cancel-delete-button"
+          >
             Cancel
           </Button>
           <Button
@@ -53,6 +58,7 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
               void onConfirm(password);
               setPassword('');
             }}
+            data-testid="confirm-delete-button"
           >
             Delete Account
           </Button>

app/src/components/modals/account/EmailPasswordModal.tsx

@@ -38,12 +38,17 @@ const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
         <PasswordInput
           label="Current Password"
           placeholder="Enter your current password"
+          data-testid="email-password-input"
           value={password}
           onChange={(e) => setPassword(e.currentTarget.value)}
           required
         />
         <Group justify="flex-end" mt="md">
-          <Button variant="default" onClick={onClose}>
+          <Button
+            variant="default"
+            onClick={onClose}
+            data-testid="cancel-email-password-button"
+          >
             Cancel
           </Button>
           <Button
@@ -51,6 +56,7 @@ const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
               void onConfirm(password);
               setPassword('');
             }}
+            data-testid="confirm-email-password-button"
           >
             Confirm
           </Button>

app/src/components/modals/user/CreateUserModal.tsx

@@ -54,12 +54,14 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
           label="Email"
           required
           value={email}
+          data-testid="create-user-email-input"
           onChange={(e) => setEmail(e.currentTarget.value)}
           placeholder="user@example.com"
         />
         <TextInput
           label="Display Name"
           value={displayName}
+          data-testid="create-user-display-name-input"
           onChange={(e) => setDisplayName(e.currentTarget.value)}
           placeholder="John Doe"
         />
@@ -67,6 +69,7 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
           label="Password"
           required
           value={password}
+          data-testid="create-user-password-input"
           onChange={(e) => setPassword(e.currentTarget.value)}
           placeholder="Enter password"
         />
@@ -74,6 +77,7 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
           label="Role"
           required
           value={role}
+          data-testid="create-user-role-select"
           onChange={(value) => value && setRole(value as UserRole)}
           data={[
             { value: UserRole.Admin, label: 'Admin' },
@@ -82,10 +86,18 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
           ]}
         />
         <Group justify="flex-end" mt="md">
-          <Button variant="default" onClick={onClose}>
+          <Button
+            variant="default"
+            onClick={onClose}
+            data-testid="cancel-create-user-button"
+          >
             Cancel
           </Button>
-          <Button onClick={() => void handleSubmit} loading={loading}>
+          <Button
+            onClick={() => void handleSubmit}
+            loading={loading}
+            data-testid="confirm-create-user-button"
+          >
             Create User
           </Button>
         </Group>

app/src/components/modals/user/DeleteUserModal.tsx

@@ -31,10 +31,19 @@ const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
         deleted.
       </Text>
       <Group justify="flex-end" mt="xl">
-        <Button variant="default" onClick={onClose}>
+        <Button
+          variant="default"
+          onClick={onClose}
+          data-testid="cancel-delete-user-button"
+        >
           Cancel
         </Button>
-        <Button color="red" onClick={() => void onConfirm()} loading={loading}>
+        <Button
+          color="red"
+          onClick={() => void onConfirm()}
+          loading={loading}
+          data-testid="confirm-delete-user-button"
+        >
           Delete User
         </Button>
       </Group>

app/src/components/modals/user/EditUserModal.tsx

@@ -72,6 +72,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
           label="Email"
           required
           value={formData.email}
+          data-testid="edit-user-email-input"
           onChange={(e) =>
             setFormData({ ...formData, email: e.currentTarget.value })
           }
@@ -80,6 +81,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
         <TextInput
           label="Display Name"
           value={formData.displayName}
+          data-testid="edit-user-display-name-input"
           onChange={(e) =>
             setFormData({ ...formData, displayName: e.currentTarget.value })
           }
@@ -89,6 +91,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
           label="Role"
           required
           value={formData.role ? formData.role.toString() : null}
+          data-testid="edit-user-role-select"
           onChange={(value) =>
             setFormData({ ...formData, role: value as UserRole })
           }
@@ -101,6 +104,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
         <PasswordInput
           label="New Password"
           value={formData.password}
+          data-testid="edit-user-password-input"
           onChange={(e) =>
             setFormData({ ...formData, password: e.currentTarget.value })
           }
@@ -110,10 +114,18 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
           Leave password empty to keep the current password
         </Text>
         <Group justify="flex-end" mt="md">
-          <Button variant="default" onClick={onClose}>
+          <Button
+            variant="default"
+            onClick={onClose}
+            data-testid="cancel-edit-user-button"
+          >
             Cancel
           </Button>
-          <Button onClick={() => void handleSubmit} loading={loading}>
+          <Button
+            onClick={() => void handleSubmit}
+            loading={loading}
+            data-testid="confirm-edit-user-button"
+          >
             Save Changes
           </Button>
         </Group>

app/src/components/modals/workspace/CreateWorkspaceModal.tsx

@@ -63,6 +63,7 @@ const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
         <TextInput
           label="Workspace Name"
           placeholder="Enter workspace name"
+          data-testid="workspace-name-input"
           value={name}
           onChange={(event) => setName(event.currentTarget.value)}
           mb="md"
@@ -74,10 +75,15 @@ const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
             variant="default"
             onClick={() => setCreateWorkspaceModalVisible(false)}
             disabled={loading}
+            data-testid="cancel-create-workspace-button"
           >
             Cancel
           </Button>
-          <Button onClick={() => void handleSubmit} loading={loading}>
+          <Button
+            onClick={() => void handleSubmit}
+            loading={loading}
+            data-testid="confirm-create-workspace-button"
+          >
             Create
           </Button>
         </Group>

app/src/components/modals/workspace/DeleteWorkspaceModal.tsx

@@ -28,10 +28,18 @@ const DeleteWorkspaceModal: React.FC<DeleteUserModalProps> = ({
         permanently deleted.
       </Text>
       <Group justify="flex-end" mt="xl">
-        <Button variant="default" onClick={onClose}>
+        <Button
+          variant="default"
+          onClick={onClose}
+          data-testid="cancel-delete-workspace-button"
+        >
           Cancel
         </Button>
-        <Button color="red" onClick={() => void onConfirm}>
+        <Button
+          color="red"
+          onClick={() => void onConfirm}
+          data-testid="confirm-delete-workspace-button"
+        >
           Delete Workspace
         </Button>
       </Group>