create-appraisejs 0.2.0 → 0.3.0-alpha.1

package/templates/default/src/app/(base)/test-runs/[id]/page.tsx

@@ -1,59 +0,0 @@
-import { getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
-import { TestRunDetails } from '@/components/test-run/test-run-details'
-import { TestRunHeader } from '@/components/test-run/test-run-header'
-import { LogViewer } from '@/components/test-run/log-viewer'
-import { Separator } from '@/components/ui/separator'
-import { TestRun, TestRunTestCase, Tag, Environment, Report } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Test Run Details',
-  description: 'View test run execution details and live logs',
-}
-
-interface TestRunDetailPageProps {
-  params: Promise<{ id: string }>
-}
-
-export default async function TestRunDetailPage({ params }: TestRunDetailPageProps) {
-  const { id } = await params
-  const response = await getTestRunByIdAction(id)
-
-  if (response.error || !response.data) {
-    return (
-      <div className="flex items-center justify-center p-8">
-        <div className="text-center">
-          <h2 className="text-2xl font-bold">Test Run Not Found</h2>
-          <p className="mt-2 text-muted-foreground">
-            {response.error || 'The test run you are looking for does not exist.'}
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  // TypeScript now knows response.data is defined
-  const testRun = response.data as TestRun & {
-    testCases: (TestRunTestCase & {
-      testCase: { title: string; description: string }
-      testSuite: { id: string; name: string } | null
-    })[]
-    tags: Tag[]
-    environment: Environment
-    reports: Report[]
-  }
-
-  return (
-    <>
-      <TestRunHeader initialTestRun={testRun} />
-
-      <div className="space-y-6">
-        <TestRunDetails testRun={testRun} />
-
-        <Separator />
-
-        <LogViewer testRunId={testRun.runId} status={testRun.status} />
-      </div>
-    </>
-  )
-}

package/templates/default/src/app/(base)/test-runs/create/page.tsx

@@ -1,49 +0,0 @@
-import { createTestRunAction } from '@/actions/test-run/test-run-actions'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Environment, Tag } from '@prisma/client'
-import React from 'react'
-import TestRunForm from '../test-run-form'
-import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
-import { getAllTagsAction } from '@/actions/tags/tag-actions'
-import { Metadata } from 'next'
-import { getAllTestSuiteTestCasesAction } from '@/actions/test-run/test-run-actions'
-import { TestSuitePickerRow } from '@/types/test-suite-picker'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Create Test Run',
-  description: 'Create a new test run to execute your selected suites or tagged tests',
-}
-
-const CreateTestRun = async () => {
-  const { data: testSuites, error: testSuitesError } = await getAllTestSuiteTestCasesAction()
-  const { data: environments, error: environmentsError } = await getAllEnvironmentsAction()
-  const { data: tags, error: tagsError } = await getAllTagsAction()
-
-  if (testSuitesError || environmentsError || tagsError) {
-    return <div>Error: {testSuitesError || environmentsError || tagsError}</div>
-  }
-
-  const testSuitesData = testSuites as TestSuitePickerRow[]
-  const environmentsData = environments as Environment[]
-  const tagsData = tags as Tag[]
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Create Test Run</PageHeader>
-        <HeaderSubtitle>Create a new test run to execute selected suites or tagged tests</HeaderSubtitle>
-      </div>
-      <TestRunForm
-        testSuites={testSuitesData}
-        environments={environmentsData}
-        tags={tagsData}
-        onSubmitAction={createTestRunAction}
-        successTitle="Test Run Created"
-        successMessage="The test run has been created successfully"
-      />
-    </>
-  )
-}
-
-export default CreateTestRun

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

@@ -1,60 +0,0 @@
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { ListChecks } from 'lucide-react'
-import React, { Suspense } from 'react'
-import TestRunTable from './test-run-table'
-import { getAllTestRunsAction } from '@/actions/test-run/test-run-actions'
-import EmptyState from '@/components/data-state/empty-state'
-import { Environment, Tag, TestRun, TestRunTestCase } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Test Runs',
-  description: 'Manage test runs and their execution results',
-}
-
-const TestRuns = async ({ searchParams }: { searchParams: Promise<{ filter?: string }> }) => {
-  const resolvedSearchParams = await searchParams
-  const filter = resolvedSearchParams?.filter
-  const { data: testRuns, error: testRunsError } = await getAllTestRunsAction(filter)
-
-  if (testRunsError) {
-    return <div>Error: {testRunsError}</div>
-  }
-
-  const testRunsData = testRuns as (TestRun & { testCases: TestRunTestCase[]; tags: Tag[]; environment: Environment })[]
-
-  if (!testRunsData || testRunsData.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<ListChecks className="h-8 w-8" />}
-          title="No test runs found"
-          description="Get started by creating a test run to execute your test cases"
-          createRoute="/test-runs/create"
-          createText="Create Test Run"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <ListChecks className="mr-2 h-8 w-8" />
-            Test Runs
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Orchestrate tests and track the execution progress with detailed results</HeaderSubtitle>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TestRunTable initialData={testRunsData} filter={filter as 'recentFailed' | 'all'} />
-      </Suspense>
-    </>
-  )
-}
-
-export default TestRuns

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

@@ -1,501 +0,0 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-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 { 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 { 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'
-
-enum TestSelectionType {
-  TAGS = 'tags',
-  TEST_SUITES = 'testSuites',
-}
-
-const TestRunForm = ({
-  defaultValues,
-  successTitle,
-  successMessage,
-  testSuites,
-  environments,
-  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>
-}) => {
-  const router = useRouter()
-  const [testSelectionType, setTestSelectionType] = useState<TestSelectionType>(() =>
-    defaultValues?.testSuites?.length ? TestSelectionType.TEST_SUITES : TestSelectionType.TAGS,
-  )
-  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,
-    onSubmit: async ({ value }) => {
-      const submitValue = {
-        ...value,
-        tags: testSelectionType === TestSelectionType.TAGS ? value.tags : [],
-        testSuites: testSelectionType === TestSelectionType.TEST_SUITES ? value.testSuites : [],
-      }
-      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')
-        }
-      }
-      if (res.status === 400) {
-        toast({
-          title: 'Error',
-          description: res.error,
-          variant: 'destructive',
-        })
-      }
-      if (res.status === 500) {
-        toast({
-          title: 'Error',
-          description: res.error,
-          variant: 'destructive',
-        })
-      }
-    },
-  })
-  return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
-      <div className="flex justify-between gap-5 overflow-x-hidden">
-        <div className="lg:w-1/2">
-          <Card className="mb-4 h-fit">
-            <CardHeader>
-              <CardTitle>Filter Tests</CardTitle>
-              <CardDescription>Select how would you like to filter your tests</CardDescription>
-            </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')
-                  }
-                }}
-                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>
-                </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>
-                </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
-                  },
-                }}
-              >
-                {field => {
-                  return (
-                    <div
-                      className={`mb-4 flex flex-col gap-2 ${testSelectionType === TestSelectionType.TAGS ? 'block' : 'hidden'}`}
-                    >
-                      <MultiSelect
-                        options={tags.map(tag => ({ label: tag.name, value: tag.id }))}
-                        selected={field.state.value}
-                        onChange={field.handleChange}
-                        placeholder="Select tags"
-                        emptyMessage="No tags available"
-                      />
-                      {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>
-                        ))}
-                    </div>
-                  )
-                }}
-              </form.Field>
-
-              <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
-                  },
-                }}
-              >
-                {field => {
-                  return (
-                    <div
-                      className={`mb-4 flex flex-col gap-2 ${testSelectionType === TestSelectionType.TEST_SUITES ? 'block' : 'hidden'}`}
-                    >
-                      <TestSuitePicker
-                        testSuites={testSuites}
-                        selectedSuites={field.state.value}
-                        onSave={value => field.handleChange(value)}
-                        triggerPlaceholder="Select test suite(s)"
-                        dialogTitle="Select Test Suites"
-                        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>
-                        ))}
-                    </div>
-                  )
-                }}
-              </form.Field>
-            </CardContent>
-          </Card>
-
-          <Card className="mb-4">
-            <CardHeader>
-              <CardTitle>Test Configuration</CardTitle>
-              <CardDescription>Set the configuration for your test run</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <form.Field
-                name="name"
-                validators={{
-                  onChange: z.string().min(1, { message: 'Name is required' }),
-                  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
-                    }
-                    return undefined
-                  },
-                }}
-              >
-                {field => {
-                  return (
-                    <div className="mb-4 flex flex-col gap-2">
-                      <Label htmlFor={field.name}>Name</Label>
-                      <Input
-                        id={field.name}
-                        value={field.state.value}
-                        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>
-                        ))}
-                    </div>
-                  )
-                }}
-              </form.Field>
-              <form.Field
-                name="environmentId"
-                validators={{
-                  onChange: z.string().min(1, { message: 'Environment is required' }),
-                }}
-              >
-                {field => {
-                  return (
-                    <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>
-                          <SelectValue placeholder="Select an environment" />
-                        </SelectTrigger>
-                        <SelectContent isEmpty={environments.length === 0} emptyMessage="No environments available">
-                          {environments.map(environment => (
-                            <SelectItem key={environment.id} value={environment.id}>
-                              {environment.name}
-                            </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 : error?.message || String(error)}
-                          </p>
-                        ))}
-                    </div>
-                  )
-                }}
-              </form.Field>
-
-              <form.Field
-                name="testWorkersCount"
-                validators={{ onChange: z.number().min(1, { message: 'Test workers count must be at least 1' }) }}
-              >
-                {field => {
-                  return (
-                    <div className="mb-4 flex flex-col gap-2">
-                      <Label htmlFor={field.name}>Test Workers Count</Label>
-                      <Input
-                        type="number"
-                        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>
-                        ))}
-                    </div>
-                  )
-                }}
-              </form.Field>
-              <form.Field name="browserEngine" validators={{ onChange: z.nativeEnum(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>
-                          <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>
-                        </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>
-                        ))}
-                    </div>
-                  )
-                }}
-              </form.Field>
-            </CardContent>
-          </Card>
-        </div>
-        <div className="lg:w-3/7">
-          <Card className="border-gray-700 bg-gray-500/10">
-            <CardHeader className="mb-2">
-              <CardTitle className="flex items-center gap-2 text-xl text-primary">
-                <Info className="h-5 w-5" />
-                <span className="font-bold">Quick Tips</span>
-              </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
-                  </span>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-      <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
-        {([canSubmit, isSubmitting, errors]) => (
-          <>
-            <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>
-            </Button>
-          </>
-        )}
-      </form.Subscribe>
-    </form>
-  )
-}
-
-export default TestRunForm