create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -0,0 +1,356 @@
+'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, type TestRun } from '@/constants/form-opts/test-run-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { BrowserEngine, Environment, Tag } from '@prisma/client'
+import { useForm } from '@tanstack/react-form'
+import { useRouter } from 'next/navigation'
+import { useRef, useState } from 'react'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Info, Play } from 'lucide-react'
+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'
+
+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 = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  testSuites,
+  environments,
+  tags,
+  id,
+  onSubmitAction,
+}: TestRunFormProps) => {
+  const router = useRouter()
+  const { debouncedNameValidation } = useTestRunNameValidation(id)
+  const [testSelectionType, setTestSelectionType] = useState<TestSelectionType>(() =>
+    getInitialTestSelectionType(defaultValues),
+  )
+  const testSelectionTypeRef = useRef<TestSelectionType>(testSelectionType)
+
+  const form = useForm({
+    defaultValues: defaultValues ?? formOpts.defaultValues,
+    validators: formOpts.validators,
+    onSubmit: async ({ value }) => {
+      const submitValue = buildTestRunSubmitValue(value, testSelectionType)
+      const res = await onSubmitAction(undefined, submitValue, id)
+      if (res.status === 200) {
+        toast({
+          title: successTitle,
+          description: successMessage,
+        })
+        router.push(getTestRunSuccessPath(res.data))
+      }
+      if (res.status === 400) {
+        toast({
+          title: 'Error',
+          description: getActionErrorMessage(res),
+          variant: 'destructive',
+        })
+      }
+      if (res.status === 500) {
+        toast({
+          title: '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 => {
+        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
+                value={testSelectionType}
+                onValueChange={value => handleSelectionTypeChange(value as TestSelectionType)}
+                className="mb-4 flex gap-4"
+              >
+                <div className="flex items-center space-x-2">
+                  <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={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 }) => validateTagSelections(value, testSelectionTypeRef.current),
+                }}
+              >
+                {field => {
+                  return (
+                    <div
+                      className={`mb-4 flex flex-col gap-2 ${testSelectionType === testSelectionTypes.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"
+                        label="Test tags"
+                      />
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+                    </div>
+                  )
+                }}
+              </form.Field>
+
+              <form.Field
+                name="testSuites"
+                validators={{
+                  onChange: ({ value }) => validateTestSuiteSelections(value, testSelectionTypeRef.current),
+                }}
+              >
+                {field => {
+                  return (
+                    <div
+                      className={`mb-4 flex flex-col gap-2 ${testSelectionType === testSelectionTypes.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)"
+                      />
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+                    </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: testRunFieldValidators.name,
+                  onChangeAsync: async ({ value }) => {
+                    if (!value || value.length < 1) return undefined
+                    const result = await debouncedNameValidation(value)
+                    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"
+                      />
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+                    </div>
+                  )
+                }}
+              </form.Field>
+              <form.Field
+                name="environmentId"
+                validators={{
+                  onChange: testRunFieldValidators.environmentId,
+                }}
+              >
+                {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 id={field.name}>
+                          <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>
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+                    </div>
+                  )
+                }}
+              </form.Field>
+
+              <form.Field
+                name="testWorkersCount"
+                validators={{ onChange: testRunFieldValidators.testWorkersCount }}
+              >
+                {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))}
+                      />
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+                    </div>
+                  )
+                }}
+              </form.Field>
+              <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 BrowserEngine)}>
+                        <SelectTrigger id={field.name}>
+                          <SelectValue placeholder="Select a browser engine" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {getBrowserEngineOptions().map(option => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <TestRunFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+                    </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">
+              {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>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
+        {([canSubmit, isSubmitting]) => (
+          <>
+            <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

package/templates/starter/src/app/(base)/test-runs/test-run-table-columns.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import {
+  BrowserEngine,
+  Environment,
+  Tag,
+  TagType,
+  TestRun,
+  TestRunResult,
+  TestRunStatus,
+  TestRunTestCase,
+} from '@prisma/client'
+import { cancelTestRunAction, deleteTestRunAction } from '@/actions/test-run/test-run-actions'
+import { formatDateTime } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { CheckCircle, Compass, Flame, ListEnd, LoaderCircle, XCircle } from 'lucide-react'
+
+const BrowserEngineIcon = {
+  [BrowserEngine.CHROMIUM]: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+    >
+      <path d="M10.88 21.94 15.46 14" />
+      <path d="M21.17 8H12" />
+      <path d="M3.95 6.06 8.54 14" />
+      <circle cx="12" cy="12" r="10" />
+      <circle cx="12" cy="12" r="4" />
+    </svg>
+  ),
+  [BrowserEngine.FIREFOX]: <Flame className="h-4 w-4" />,
+  [BrowserEngine.WEBKIT]: <Compass className="h-4 w-4" />,
+}
+
+export const testRunTableCols: ColumnDef<
+  TestRun & { testCases: TestRunTestCase[]; tags: Tag[]; environment: Environment }
+>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'runId',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Run ID" />,
+  },
+  {
+    accessorKey: 'status',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => {
+      const status = row.original.status
+      const statusColorMap = {
+        [TestRunStatus.QUEUED]: 'bg-gray-500 text-white',
+        [TestRunStatus.RUNNING]: 'bg-blue-500 text-white',
+        [TestRunStatus.CANCELLING]: 'bg-orange-500 text-white',
+        [TestRunStatus.COMPLETED]: 'bg-primary',
+        [TestRunStatus.CANCELLED]: 'bg-pink-500 text-white',
+      }
+      const statusIconMap = {
+        [TestRunStatus.QUEUED]: <ListEnd className="h-4 w-4" />,
+        [TestRunStatus.RUNNING]: <LoaderCircle className="h-4 w-4 animate-spin" />,
+        [TestRunStatus.CANCELLING]: <LoaderCircle className="h-4 w-4 animate-spin" />,
+        [TestRunStatus.COMPLETED]: <CheckCircle className="h-4 w-4" />,
+        [TestRunStatus.CANCELLED]: <XCircle className="h-4 w-4" />,
+      }
+      const statusTextMap = {
+        [TestRunStatus.QUEUED]: 'Queued',
+        [TestRunStatus.RUNNING]: 'Running',
+        [TestRunStatus.CANCELLING]: 'Cancelling',
+        [TestRunStatus.COMPLETED]: 'Completed',
+        [TestRunStatus.CANCELLED]: 'Cancelled',
+      }
+      return (
+        <Badge className={`${statusColorMap[status]} w-full text-center`}>
+          <span className="mr-1">{statusIconMap[status]}</span>
+          <span>{statusTextMap[status]}</span>
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'result',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Result" />,
+    cell: ({ row }) => {
+      const result = row.original.result
+      const resultColorMap = {
+        [TestRunResult.PASSED]: 'bg-primary',
+        [TestRunResult.FAILED]: 'bg-pink-500 text-white',
+        [TestRunResult.CANCELLED]: 'bg-gray-500 text-white',
+        [TestRunResult.PENDING]: 'bg-yellow-500 text-white',
+      }
+      const resultIconMap = {
+        [TestRunResult.PASSED]: <CheckCircle className="h-4 w-4" />,
+        [TestRunResult.FAILED]: <XCircle className="h-4 w-4" />,
+        [TestRunResult.CANCELLED]: <XCircle className="h-4 w-4" />,
+        [TestRunResult.PENDING]: <LoaderCircle className="h-4 w-4 animate-spin" />,
+      }
+      const resultTextMap = {
+        [TestRunResult.PASSED]: 'Passed',
+        [TestRunResult.FAILED]: 'Failed',
+        [TestRunResult.CANCELLED]: 'Cancelled',
+        [TestRunResult.PENDING]: 'Pending',
+      }
+      return (
+        <Badge className={`${resultColorMap[result]} w-full text-center`}>
+          <span className="mr-1">{resultIconMap[result]}</span>
+          <span>{resultTextMap[result]}</span>
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'testCases',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Cases" />,
+    cell: ({ row }) => {
+      const testCases = row.original.testCases
+      return <div>{testCases.length}</div>
+    },
+  },
+  {
+    accessorKey: 'testWorkersCount',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Workers Count" />,
+  },
+  {
+    accessorKey: 'browserEngine',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Browser Engine" />,
+    cell: ({ row }) => {
+      const browserEngine = row.original.browserEngine
+      const browserEngineColorMap = {
+        [BrowserEngine.CHROMIUM]: 'bg-blue-500 text-white',
+        [BrowserEngine.FIREFOX]: 'bg-red-500 text-white',
+        [BrowserEngine.WEBKIT]: 'bg-purple-500 text-white',
+      }
+      return (
+        <Badge className={`${browserEngineColorMap[browserEngine]} w-fit`}>
+          <span className="mr-2">{BrowserEngineIcon[browserEngine]}</span>
+          <span>{browserEngine.charAt(0).toUpperCase() + browserEngine.slice(1).toLowerCase()}</span>
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'environment.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Environment" />,
+  },
+  {
+    accessorKey: 'tags',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
+    cell: ({ row }) => {
+      const tags = row.original.tags
+      const filterTags = tags.filter(tag => tag.type === TagType.FILTER)
+      return (
+        <div className="flex flex-wrap gap-1">
+          {filterTags.length > 0 ? filterTags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: 'startedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Started At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.startedAt)
+    },
+  },
+  {
+    accessorKey: 'completedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Completed At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.completedAt)
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const testRunData = row.original
+      return (
+        <div>
+          <TableActions
+            viewLink={`/test-runs/${testRunData.id}`}
+            deleteHandler={() => deleteTestRunAction([testRunData.id])}
+            cancelHandler={() => cancelTestRunAction(testRunData.runId)}
+            showCancelButton={
+              testRunData.status === TestRunStatus.RUNNING ||
+              testRunData.status === TestRunStatus.QUEUED ||
+              testRunData.status === TestRunStatus.CANCELLING
+            }
+            cancelButtonDisabled={testRunData.status === TestRunStatus.CANCELLING}
+            deleteButtonDisabled={
+              testRunData.status === TestRunStatus.CANCELLING || testRunData.status === TestRunStatus.RUNNING
+            }
+          />
+        </div>
+      )
+    },
+  },
+]