From d34793d7a96345caac67d9294ed0d3b9a111c827 Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Sat, 9 May 2026 22:21:36 +0200
Subject: [PATCH] feat(PBI-49): add BEM sub-element data-debug-id to
 components/products/*

---
 components/products/auto-pr-toggle.tsx     | 3 ++-
 components/products/pr-strategy-select.tsx | 2 +-
 components/products/product-form.tsx       | 4 +++-
 components/products/team-manager.tsx       | 4 ++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/products/auto-pr-toggle.tsx b/components/products/auto-pr-toggle.tsx
index 285e48a..114f426 100644
--- a/components/products/auto-pr-toggle.tsx
+++ b/components/products/auto-pr-toggle.tsx
@@ -35,6 +35,7 @@ export function AutoPrToggle({ productId, initialValue }: AutoPrToggleProps) {
         aria-checked={enabled}
         onClick={handleToggle}
         disabled={isPending}
+        data-debug-id="auto-pr-toggle__switch"
         className={cn(
           'relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent',
           'transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
@@ -50,7 +51,7 @@ export function AutoPrToggle({ productId, initialValue }: AutoPrToggleProps) {
           )}
         />
       </button>
-      <span className="text-sm text-foreground">Automatisch PR aanmaken na succesvolle agent-job</span>
+      <span className="text-sm text-foreground" data-debug-id="auto-pr-toggle__label">Automatisch PR aanmaken na succesvolle agent-job</span>
     </div>
   )
 }
diff --git a/components/products/pr-strategy-select.tsx b/components/products/pr-strategy-select.tsx
index 198f0f9..de3dd90 100644
--- a/components/products/pr-strategy-select.tsx
+++ b/components/products/pr-strategy-select.tsx
@@ -49,7 +49,7 @@ export function PrStrategySelect({ productId, initialValue }: PrStrategySelectPr
   return (
     <div className="flex flex-col gap-2" {...debugProps('pr-strategy-select', 'PrStrategySelect', 'components/products/pr-strategy-select.tsx')}>
       <Select value={value} onValueChange={handleChange} disabled={isPending}>
-        <SelectTrigger className="w-full max-w-xl">
+        <SelectTrigger className="w-full max-w-xl" data-debug-id="pr-strategy-select__trigger">
           {STRATEGY_LABELS[value]}
         </SelectTrigger>
         <SelectContent>
diff --git a/components/products/product-form.tsx b/components/products/product-form.tsx
index d1b2033..d3fd2a2 100644
--- a/components/products/product-form.tsx
+++ b/components/products/product-form.tsx
@@ -83,6 +83,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
             defaultValue={defaultValues?.name}
             placeholder="bijv. DevPlanner"
             className={fieldError('name') ? 'border-error' : ''}
+            data-debug-id="product-form__name"
           />
           {fieldError('name') && (
             <p className="text-xs text-error">{fieldError('name')}</p>
@@ -118,6 +119,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
           defaultValue={defaultValues?.repo_url ?? ''}
           placeholder="https://github.com/..."
           className={fieldError('repo_url') ? 'border-error' : ''}
+          data-debug-id="product-form__repo"
         />
         {fieldError('repo_url') && (
           <p className="text-xs text-error">{fieldError('repo_url')}</p>
@@ -148,7 +150,7 @@ export function ProductForm({ action, submitLabel, defaultValues }: ProductFormP
         </div>
       )}
 
-      <div className="flex gap-3 pt-1">
+      <div className="flex gap-3 pt-1" data-debug-id="product-form__submit">
         <SubmitButton label={submitLabel} />
       </div>
     </form>
diff --git a/components/products/team-manager.tsx b/components/products/team-manager.tsx
index 2e4db45..5d13a68 100644
--- a/components/products/team-manager.tsx
+++ b/components/products/team-manager.tsx
@@ -34,7 +34,7 @@ export function TeamManager({ productId, members }: TeamManagerProps) {
       {members.length === 0 ? (
         <p className="text-sm text-muted-foreground">Nog geen teamleden toegevoegd.</p>
       ) : (
-        <ul className="space-y-2">
+        <ul className="space-y-2" data-debug-id="team-manager__members">
           {members.map(m => (
             <li key={m.id} className="flex items-center justify-between gap-3 rounded-lg bg-surface-container px-3 py-2">
               <span className="text-sm font-medium text-foreground">{m.username}</span>
@@ -52,7 +52,7 @@ export function TeamManager({ productId, members }: TeamManagerProps) {
         </ul>
       )}
 
-      <form action={formAction} className="flex gap-2">
+      <form action={formAction} className="flex gap-2" data-debug-id="team-manager__invite">
         <input type="hidden" name="productId" value={productId} />
         <Input
           name="username"