create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/test-runs/test-run-form.tsx

@@ -1,28 +1,67 @@
 'use client'
 
 import { Button } from '@/components/ui/button'
+import ErrorMessage from '@/components/form/error-message'
 import TestSuitePicker from '@/components/test-suite/test-suite-picker'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { MultiSelect } from '@/components/ui/multi-select'
-import { formOpts, TestRun } from '@/constants/form-opts/test-run-form-opts'
+import { formOpts, type TestRun } from '@/constants/form-opts/test-run-form-opts'
 import { toast } from '@/hooks/use-toast'
-import { ActionResponse } from '@/types/form/actionHandler'
 import { BrowserEngine, Environment, Tag } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
 import { useRouter } from 'next/navigation'
-import { useState, useRef, useEffect, useCallback } from 'react'
-import { z } from 'zod'
+import { useRef, useState } from 'react'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { checkTestRunNameUniqueAction } from '@/actions/test-run/test-run-actions'
 import { Info, Play } from 'lucide-react'
-import { TestSuitePickerRow } from '@/types/test-suite-picker'
+import type { TestSuitePickerRow } from '@/types/test-suite-picker'
+import {
+  buildTestRunSubmitValue,
+  getActionErrorMessage,
+  getBrowserEngineOptions,
+  getFieldErrorMessage,
+  getInitialTestSelectionType,
+  getTestRunSuccessPath,
+  testRunFieldValidators,
+  testRunQuickTips,
+  testSelectionTypes,
+  type TestRunFormSubmitAction,
+  type TestSelectionType,
+  validateTagSelections,
+  validateTestSuiteSelections,
+} from './test-run-form-helpers'
+import { useTestRunNameValidation } from './use-test-run-name-validation'
 
-enum TestSelectionType {
-  TAGS = 'tags',
-  TEST_SUITES = 'testSuites',
+type TestRunFormProps = {
+  defaultValues?: TestRun
+  successTitle: string
+  successMessage: string
+  testSuites: TestSuitePickerRow[]
+  environments: Environment[]
+  tags: Tag[]
+  id?: string
+  onSubmitAction: TestRunFormSubmitAction
+}
+
+type TestRunFieldErrorsProps = {
+  errors: unknown[]
+  isTouched: boolean
+}
+
+function TestRunFieldErrors({ errors, isTouched }: TestRunFieldErrorsProps) {
+  if (!isTouched) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col gap-1" aria-live="polite">
+      {errors.map((error, index) => (
+        <ErrorMessage key={`${String(error)}-${index}`} message={getFieldErrorMessage(error)} visible={true} />
+      ))}
+    </div>
+  )
 }
 
 const TestRunForm = ({
@@ -34,125 +73,58 @@ const TestRunForm = ({
   tags,
   id,
   onSubmitAction,
-}: {
-  defaultValues?: TestRun
-  successTitle: string
-  successMessage: string
-  testSuites: TestSuitePickerRow[]
-  environments: Environment[]
-  tags: Tag[]
-  id?: string
-  onSubmitAction: (_prev: unknown, value: TestRun, id?: string) => Promise<ActionResponse>
-}) => {
+}: TestRunFormProps) => {
   const router = useRouter()
+  const { debouncedNameValidation } = useTestRunNameValidation(id)
   const [testSelectionType, setTestSelectionType] = useState<TestSelectionType>(() =>
-    defaultValues?.testSuites?.length ? TestSelectionType.TEST_SUITES : TestSelectionType.TAGS,
+    getInitialTestSelectionType(defaultValues),
   )
   const testSelectionTypeRef = useRef<TestSelectionType>(testSelectionType)
-  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  // Keep ref in sync with state
-  useEffect(() => {
-    testSelectionTypeRef.current = testSelectionType
-  }, [testSelectionType])
-
-  // Debounced function to check name uniqueness
-  // Returns: { isValid: boolean, error?: string }
-  // isValid: false only if name is confirmed to be duplicate
-  // error: error message to display (only returned when isValid is false to block submission)
-  const checkNameUniqueness = useCallback(
-    async (name: string): Promise<{ isValid: boolean; error?: string }> => {
-      if (!name || name.length < 1) return { isValid: true }
-
-      try {
-        const response = await checkTestRunNameUniqueAction(name, id)
-
-        // Handle server errors - allow submission but log the error
-        if (response.status === 500) {
-          console.error('Server error checking name uniqueness:', response.error)
-          // Return valid to allow submission (server will handle validation)
-          return { isValid: true }
-        }
-
-        // Handle successful response
-        if (response.status === 200) {
-          const isUnique = (response.data as { isUnique: boolean })?.isUnique ?? true
-          if (!isUnique) {
-            return {
-              isValid: false,
-              error: 'A test run with this name already exists. Please choose a different name.',
-            }
-          }
-          return { isValid: true }
-        }
-
-        // Unexpected status code - allow submission
-        console.warn('Unexpected response status when checking name uniqueness:', response.status)
-        return { isValid: true }
-      } catch (error) {
-        console.error('Error checking name uniqueness:', error)
-        // Allow submission if check fails (network error, etc.)
-        // Server will handle validation on submit
-        return { isValid: true }
-      }
-    },
-    [id],
-  )
-
-  // Debounced validation function
-  const debouncedNameValidation = useCallback(
-    (name: string): Promise<{ isValid: boolean; error?: string }> => {
-      return new Promise(resolve => {
-        if (debounceTimeoutRef.current) {
-          clearTimeout(debounceTimeoutRef.current)
-        }
-
-        debounceTimeoutRef.current = setTimeout(async () => {
-          const result = await checkNameUniqueness(name)
-          resolve(result)
-        }, 500) // 500ms debounce
-      })
-    },
-    [checkNameUniqueness],
-  )
 
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts?.defaultValues,
+    defaultValues: defaultValues ?? formOpts.defaultValues,
+    validators: formOpts.validators,
     onSubmit: async ({ value }) => {
-      const submitValue = {
-        ...value,
-        tags: testSelectionType === TestSelectionType.TAGS ? value.tags : [],
-        testSuites: testSelectionType === TestSelectionType.TEST_SUITES ? value.testSuites : [],
-      }
+      const submitValue = buildTestRunSubmitValue(value, testSelectionType)
       const res = await onSubmitAction(undefined, submitValue, id)
       if (res.status === 200) {
         toast({
           title: successTitle,
           description: successMessage,
         })
-        // Redirect to test run detail page if test run ID is available
-        if (res.data && typeof res.data === 'object' && 'id' in res.data) {
-          router.push(`/test-runs/${res.data.id}`)
-        } else {
-          router.push('/test-runs')
-        }
+        router.push(getTestRunSuccessPath(res.data))
       }
       if (res.status === 400) {
         toast({
           title: 'Error',
-          description: res.error,
+          description: getActionErrorMessage(res),
           variant: 'destructive',
         })
       }
       if (res.status === 500) {
         toast({
           title: 'Error',
-          description: res.error,
+          description: getActionErrorMessage(res),
           variant: 'destructive',
         })
       }
     },
   })
+
+  const handleSelectionTypeChange = (nextType: TestSelectionType) => {
+    testSelectionTypeRef.current = nextType
+    setTestSelectionType(nextType)
+
+    if (nextType === testSelectionTypes.TAGS) {
+      form.setFieldValue('testSuites', [])
+    } else {
+      form.setFieldValue('tags', [])
+    }
+
+    form.validateField('tags', 'change')
+    form.validateField('testSuites', 'change')
+  }
+
   return (
     <form
       onSubmit={e => {
@@ -170,55 +142,30 @@ const TestRunForm = ({
             </CardHeader>
             <CardContent>
               <RadioGroup
-                defaultValue={testSelectionType}
-                onValueChange={value => {
-                  const newType = value as TestSelectionType
-                  // Update ref first so validators have the correct value
-                  testSelectionTypeRef.current = newType
-                  setTestSelectionType(newType)
-                  // Clear the other field when switching filter types
-                  if (newType === TestSelectionType.TAGS) {
-                    form.setFieldValue('testSuites', [])
-                    // Validate both fields to clear any errors
-                    form.validateField('tags', 'change')
-                    form.validateField('testSuites', 'change')
-                  } else {
-                    form.setFieldValue('tags', [])
-                    // Validate both fields to clear any errors
-                    form.validateField('tags', 'change')
-                    form.validateField('testSuites', 'change')
-                  }
-                }}
+                value={testSelectionType}
+                onValueChange={value => handleSelectionTypeChange(value as TestSelectionType)}
                 className="mb-4 flex gap-4"
               >
                 <div className="flex items-center space-x-2">
-                  <RadioGroupItem value={TestSelectionType.TAGS} id={TestSelectionType.TAGS} />
-                  <Label htmlFor={TestSelectionType.TAGS}>By Tags</Label>
+                  <RadioGroupItem value={testSelectionTypes.TAGS} id={testSelectionTypes.TAGS} />
+                  <Label htmlFor={testSelectionTypes.TAGS}>By Tags</Label>
                 </div>
                 <div className="flex items-center space-x-2">
-                  <RadioGroupItem value={TestSelectionType.TEST_SUITES} id={TestSelectionType.TEST_SUITES} />
-                  <Label htmlFor={TestSelectionType.TEST_SUITES}>By Test Suites</Label>
+                  <RadioGroupItem value={testSelectionTypes.TEST_SUITES} id={testSelectionTypes.TEST_SUITES} />
+                  <Label htmlFor={testSelectionTypes.TEST_SUITES}>By Test Suites</Label>
                 </div>
               </RadioGroup>
 
               <form.Field
                 name="tags"
                 validators={{
-                  onChange: ({ value }) => {
-                    const currentSelectionType = testSelectionTypeRef.current
-                    if (currentSelectionType === TestSelectionType.TAGS) {
-                      if (!Array.isArray(value) || value.length === 0) {
-                        return 'Tags are required'
-                      }
-                    }
-                    return undefined
-                  },
+                  onChange: ({ value }) => validateTagSelections(value, testSelectionTypeRef.current),
                 }}
               >
                 {field => {
                   return (
                     <div
-                      className={`mb-4 flex flex-col gap-2 ${testSelectionType === TestSelectionType.TAGS ? 'block' : 'hidden'}`}
+                      className={`mb-4 flex flex-col gap-2 ${testSelectionType === testSelectionTypes.TAGS ? 'block' : 'hidden'}`}
                     >
                       <MultiSelect
                         options={tags.map(tag => ({ label: tag.name, value: tag.id }))}
@@ -226,13 +173,9 @@ const TestRunForm = ({
                         onChange={field.handleChange}
                         placeholder="Select tags"
                         emptyMessage="No tags available"
+                        label="Test tags"
                       />
-                      {field.state.meta.isTouched &&
-                        field.state.meta.errors.map((error, index) => (
-                          <p key={index} className="text-xs text-pink-500">
-                            {typeof error === 'string' ? error : String(error)}
-                          </p>
-                        ))}
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
                     </div>
                   )
                 }}
@@ -241,28 +184,13 @@ const TestRunForm = ({
               <form.Field
                 name="testSuites"
                 validators={{
-                  onChange: ({ value }) => {
-                    const currentSelectionType = testSelectionTypeRef.current
-                    if (currentSelectionType === TestSelectionType.TEST_SUITES) {
-                      if (!Array.isArray(value) || value.length === 0) {
-                        return 'At least one test suite is required'
-                      }
-
-                      const invalidSuite = value.find(
-                        suiteSelection => !suiteSelection.runAll && suiteSelection.testCaseIds.length === 0,
-                      )
-                      if (invalidSuite) {
-                        return 'Partial suite selections must include at least one test case'
-                      }
-                    }
-                    return undefined
-                  },
+                  onChange: ({ value }) => validateTestSuiteSelections(value, testSelectionTypeRef.current),
                 }}
               >
                 {field => {
                   return (
                     <div
-                      className={`mb-4 flex flex-col gap-2 ${testSelectionType === TestSelectionType.TEST_SUITES ? 'block' : 'hidden'}`}
+                      className={`mb-4 flex flex-col gap-2 ${testSelectionType === testSelectionTypes.TEST_SUITES ? 'block' : 'hidden'}`}
                     >
                       <TestSuitePicker
                         testSuites={testSuites}
@@ -273,12 +201,7 @@ const TestRunForm = ({
                         dialogDescription="Browse suites, expand child test cases, and save the suite-scoped selection for this test run."
                         selectedLabel="Selected test suite(s)"
                       />
-                      {field.state.meta.isTouched &&
-                        field.state.meta.errors.map((error, index) => (
-                          <p key={index} className="text-xs text-pink-500">
-                            {typeof error === 'string' ? error : String(error)}
-                          </p>
-                        ))}
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
                     </div>
                   )
                 }}
@@ -295,12 +218,10 @@ const TestRunForm = ({
               <form.Field
                 name="name"
                 validators={{
-                  onChange: z.string().min(1, { message: 'Name is required' }),
+                  onChange: testRunFieldValidators.name,
                   onChangeAsync: async ({ value }) => {
                     if (!value || value.length < 1) return undefined
                     const result = await debouncedNameValidation(value)
-                    // Only return error if validation explicitly failed (duplicate name)
-                    // Server errors are handled by allowing submission and letting server validate
                     if (!result.isValid && result.error) {
                       return result.error
                     }
@@ -318,12 +239,7 @@ const TestRunForm = ({
                         onChange={e => field.handleChange(e.target.value)}
                         placeholder="Enter name for your test run"
                       />
-                      {field.state.meta.isTouched &&
-                        field.state.meta.errors.map((error, index) => (
-                          <p key={index} className="text-xs text-pink-500">
-                            {typeof error === 'string' ? error : error?.message || String(error)}
-                          </p>
-                        ))}
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
                     </div>
                   )
                 }}
@@ -331,7 +247,7 @@ const TestRunForm = ({
               <form.Field
                 name="environmentId"
                 validators={{
-                  onChange: z.string().min(1, { message: 'Environment is required' }),
+                  onChange: testRunFieldValidators.environmentId,
                 }}
               >
                 {field => {
@@ -339,7 +255,7 @@ const TestRunForm = ({
                     <div className="mb-4 flex flex-col gap-2">
                       <Label htmlFor={field.name}>Environment</Label>
                       <Select value={field.state.value} onValueChange={value => field.handleChange(value)}>
-                        <SelectTrigger>
+                        <SelectTrigger id={field.name}>
                           <SelectValue placeholder="Select an environment" />
                         </SelectTrigger>
                         <SelectContent isEmpty={environments.length === 0} emptyMessage="No environments available">
@@ -350,12 +266,7 @@ const TestRunForm = ({
                           ))}
                         </SelectContent>
                       </Select>
-                      {field.state.meta.isTouched &&
-                        field.state.meta.errors.map((error, index) => (
-                          <p key={index} className="text-xs text-pink-500">
-                            {typeof error === 'string' ? error : error?.message || String(error)}
-                          </p>
-                        ))}
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
                     </div>
                   )
                 }}
@@ -363,7 +274,7 @@ const TestRunForm = ({
 
               <form.Field
                 name="testWorkersCount"
-                validators={{ onChange: z.number().min(1, { message: 'Test workers count must be at least 1' }) }}
+                validators={{ onChange: testRunFieldValidators.testWorkersCount }}
               >
                 {field => {
                   return (
@@ -374,40 +285,29 @@ const TestRunForm = ({
                         value={field.state.value}
                         onChange={e => field.handleChange(Number(e.target.value))}
                       />
-                      {field.state.meta.isTouched &&
-                        field.state.meta.errors.map((error, index) => (
-                          <p key={index} className="text-xs text-pink-500">
-                            {typeof error === 'string' ? error : String(error)}
-                          </p>
-                        ))}
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
                     </div>
                   )
                 }}
               </form.Field>
-              <form.Field name="browserEngine" validators={{ onChange: z.nativeEnum(BrowserEngine) }}>
+              <form.Field name="browserEngine" validators={{ onChange: testRunFieldValidators.browserEngine }}>
                 {field => {
                   return (
                     <div className="mb-4 flex flex-col gap-2">
                       <Label htmlFor={field.name}>Browser Engine</Label>
-                      <Select
-                        value={field.state.value}
-                        onValueChange={value => field.handleChange(value as unknown as BrowserEngine)}
-                      >
-                        <SelectTrigger>
+                      <Select value={field.state.value} onValueChange={value => field.handleChange(value as BrowserEngine)}>
+                        <SelectTrigger id={field.name}>
                           <SelectValue placeholder="Select a browser engine" />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value={BrowserEngine.CHROMIUM}>Chromium</SelectItem>
-                          <SelectItem value={BrowserEngine.FIREFOX}>Firefox</SelectItem>
-                          <SelectItem value={BrowserEngine.WEBKIT}>WebKit</SelectItem>
+                          {getBrowserEngineOptions().map(option => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
                         </SelectContent>
                       </Select>
-                      {field.state.meta.isTouched &&
-                        field.state.meta.errors.map((error, index) => (
-                          <p key={index} className="text-xs text-pink-500">
-                            {typeof error === 'string' ? error : String(error)}
-                          </p>
-                        ))}
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
                     </div>
                   )
                 }}
@@ -424,69 +324,24 @@ const TestRunForm = ({
               </CardTitle>
             </CardHeader>
             <CardContent className="flex flex-col gap-6">
-              <div className="flex items-start gap-4">
-                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
-                  1
-                </span>
-                <div className="flex flex-col gap-1">
-                  <span className="text-base font-bold">Choose a descriptive name</span>
-                  <span className="text-sm text-muted-foreground">
-                    Use clear, specific names that indicate the purpose for your test run
-                  </span>
-                </div>
-              </div>
-              <div className="flex items-start gap-4">
-                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
-                  2
-                </span>
-                <div className="flex flex-col gap-1">
-                  <span className="text-base font-bold">Select the environment for your test run</span>
-                  <span className="text-sm text-muted-foreground">
-                    Choose the environment that best suits your selected tests
-                  </span>
-                </div>
-              </div>
-              <div className="flex items-start gap-4">
-                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
-                  3
-                </span>
-                <div className="flex flex-col gap-1">
-                  <span className="text-base font-bold">Select the browser engine for your test run</span>
-                  <span className="text-sm text-muted-foreground">
-                    Select the browser engine that is compatible with your selected test cases
-                  </span>
-                </div>
-              </div>
-              <div className="flex items-start gap-4">
-                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
-                  4
-                </span>
-                <div className="flex flex-col gap-1">
-                  <span className="text-base font-bold">Select the test suites or tags for your test run</span>
-                  <span className="text-sm text-muted-foreground">
-                    You can filter by tags or browse suites and choose full suites or child subsets
-                  </span>
-                </div>
-              </div>
-              <div className="flex items-start gap-4">
-                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
-                  5
-                </span>
-                <div className="flex flex-col gap-1">
-                  <span className="text-base font-bold">Select the test workers count for your test run</span>
-                  <span className="text-sm text-muted-foreground">
-                    Parallel workers can be used to run your test cases in parallel to speed up the test execution
+              {testRunQuickTips.map((tip, index) => (
+                <div key={tip.title} className="flex items-start gap-4">
+                  <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+                    {index + 1}
                   </span>
+                  <div className="flex flex-col gap-1">
+                    <span className="text-base font-bold">{tip.title}</span>
+                    <span className="text-sm text-muted-foreground">{tip.description}</span>
+                  </div>
                 </div>
-              </div>
+              ))}
             </CardContent>
           </Card>
         </div>
       </div>
       <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
-        {([canSubmit, isSubmitting, errors]) => (
+        {([canSubmit, isSubmitting]) => (
           <>
-            <span>{errors}</span>
             <Button type="submit" disabled={!canSubmit} className="hover:bg-emerald-500">
               <Play className="h-4 w-4" />
               <span className="font-bold">{isSubmitting ? '...' : 'Start'}</span>