create-appraisejs 0.2.0 → 0.3.0-alpha.1

package/templates/default/src/app/(base)/test-suites/test-suite-form.tsx

@@ -1,268 +0,0 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import TestCasePicker from '@/components/test-case/test-case-picker'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import MultiSelectWithPreview from '@/components/ui/multi-select-with-preview'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Textarea } from '@/components/ui/textarea'
-import { formOpts, TestSuite } from '@/constants/form-opts/test-suite-form-opts'
-import { toast } from '@/hooks/use-toast'
-import { TestCasePickerRow } from '@/types/test-case-picker'
-import { ActionResponse } from '@/types/form/actionHandler'
-import { Module, Tag } from '@prisma/client'
-import { useForm } from '@tanstack/react-form'
-import { Info, Save } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import { z } from 'zod'
-
-export const TestSuiteForm = ({
-  defaultValues,
-  successTitle,
-  successMessage,
-  id,
-  onSubmitAction,
-  testCases,
-  moduleList,
-  tags,
-}: {
-  defaultValues?: TestSuite
-  successTitle: string
-  successMessage: string
-  id?: string
-  onSubmitAction: (_prev: unknown, value: TestSuite, id?: string) => Promise<ActionResponse>
-  testCases: TestCasePickerRow[]
-  moduleList: Module[]
-  tags: Tag[]
-}) => {
-  const router = useRouter()
-  const form = useForm({
-    defaultValues: defaultValues ?? formOpts?.defaultValues,
-    validators: formOpts?.validators,
-    onSubmit: async ({ value }) => {
-      const res = await onSubmitAction(undefined, value, id)
-      if (res.status === 200) {
-        toast({
-          title: successTitle,
-          description: successMessage,
-        })
-        router.push('/test-suites')
-      }
-      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 (
-    <div className="flex justify-between gap-20 overflow-x-hidden">
-      <Card className="w-2/3 border-gray-700 bg-gray-500/10">
-        <CardHeader>
-          <CardTitle className="text-xl font-bold text-primary">Test Suite Details</CardTitle>
-          <CardDescription>Enter the details for your test suite</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form
-            onSubmit={e => {
-              e.preventDefault()
-              e.stopPropagation()
-              form.handleSubmit()
-            }}
-          >
-            <form.Field
-              name="name"
-              validators={{
-                onChange: z.string().min(3, { message: 'Name must be at least 3 characters' }),
-              }}
-            >
-              {field => {
-                return (
-                  <div className="mb-6 flex flex-col gap-2">
-                    <Label htmlFor={field.name} className="font-bold">
-                      Name
-                    </Label>
-                    <Input
-                      className="w-full"
-                      id={field.name}
-                      name={field.name}
-                      value={field.state.value}
-                      onChange={e => field.handleChange(e.target.value)}
-                      placeholder="Enter name for your test suite"
-                    />
-                    {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="description">
-              {field => {
-                return (
-                  <div className="mb-6 flex flex-col gap-2">
-                    <Label htmlFor={field.name} className="font-bold">
-                      Description
-                    </Label>
-                    <Textarea
-                      className="h-24 w-full bg-background"
-                      id={field.name}
-                      name={field.name}
-                      value={field.state.value}
-                      onChange={e => field.handleChange(e.target.value)}
-                      placeholder="Enter description for your test suite"
-                    />
-                    {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="testCases">
-              {field => {
-                return (
-                  <div className="mb-6 flex flex-col gap-2">
-                    <Label htmlFor={field.name} className="font-bold">
-                      Test Cases
-                    </Label>
-                    <TestCasePicker
-                      testCases={testCases}
-                      selectedIds={field.state.value ?? []}
-                      onSave={value => field.handleChange(value)}
-                      triggerPlaceholder="Select test case(s)"
-                      dialogTitle="Select Test Cases"
-                      dialogDescription="Search and select the test cases to include in this suite."
-                      selectedLabel="Selected test case(s)"
-                    />
-                    {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="moduleId">
-              {field => {
-                return (
-                  <div className="mb-6 flex flex-col gap-2">
-                    <Label htmlFor={field.name} className="font-bold">
-                      Module
-                    </Label>
-                    <Select value={field.state.value} onValueChange={value => field.handleChange(value)}>
-                      <SelectTrigger className="w-full bg-background">
-                        <SelectValue placeholder="Select a module" />
-                      </SelectTrigger>
-                      <SelectContent className="w-full" isEmpty={moduleList.length === 0}>
-                        {moduleList.map(module => (
-                          <SelectItem key={module.id} value={module.id}>
-                            {module.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                )
-              }}
-            </form.Field>
-            <form.Field name="tagIds">
-              {field => {
-                const tagsOptions = tags.map(tag => ({
-                  value: tag.id,
-                  label: tag.name,
-                }))
-                return (
-                  <div className="mb-6 flex flex-col gap-2">
-                    <Label htmlFor={field.name} className="font-bold">
-                      Tags
-                    </Label>
-                    <MultiSelectWithPreview
-                      id={field.name}
-                      options={tagsOptions}
-                      onSelectChange={value => {
-                        field.handleChange(value)
-                      }}
-                      defaultSelectedValues={field.state.value || []}
-                      placeholder="Select tag(s)"
-                      emptyMessage="No tag(s) found"
-                      selectedLabel="Selected tag(s)"
-                      searchPlaceholder="Search tags..."
-                    />
-                  </div>
-                )
-              }}
-            </form.Field>
-            <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
-              {([canSubmit, isSubmitting]) => (
-                <Button type="submit" disabled={!canSubmit} className="hover:bg-emerald-500">
-                  <Save className="h-4 w-4" />
-                  <span className="font-bold">{isSubmitting ? '...' : 'Save'}</span>
-                </Button>
-              )}
-            </form.Subscribe>
-          </form>
-        </CardContent>
-      </Card>
-      <div className="lg:w-1/3">
-        <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
-                </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">Group related tests</span>
-                <span className="text-sm text-muted-foreground">
-                  Organize tests that validate the same feature together
-                </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">Use meaningful tags</span>
-                <span className="text-sm text-muted-foreground">Tags help filter and categorize effectively</span>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}

package/templates/default/src/app/(base)/test-suites/test-suite-table.tsx

@@ -1,29 +0,0 @@
-import { DataTable } from '@/components/ui/data-table'
-import React from 'react'
-import { testSuiteTableCols } from './test-suite-table-columns'
-import { getAllTestSuitesAction, deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
-import { Module, TestCase, TestSuite, Tag } from '@prisma/client'
-
-const TestSuiteTable = async () => {
-  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
-
-  if (testSuitesError) {
-    return <div>Error: {testSuitesError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={testSuiteTableCols}
-        data={testSuites as (TestSuite & { tags?: Tag[]; module: Module; testCases: TestCase[] })[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/test-suites/create"
-        modifyLink="/test-suites/modify"
-        deleteAction={deleteTestSuiteAction}
-      />
-    </>
-  )
-}
-
-export default TestSuiteTable

package/templates/default/src/app/(dashboard-components)/app-drawer.tsx

@@ -1,187 +0,0 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { AlertCircle, AlertTriangle, Clock, XCircle } from 'lucide-react'
-import { DashboardMetrics } from '@prisma/client'
-import { useRouter } from 'next/navigation'
-
-type AppDrawerItem = {
-  title: string
-  icon: React.ReactNode
-  color: keyof typeof AppDrawerItemColor
-  count: number
-  onClick?: () => void
-}
-
-export const AppDrawerItemColor = {
-  red: {
-    buttonColor: 'bg-red-500/20 hover:bg-red-500/25',
-    iconColor: 'text-red-500',
-    badgeColor: 'bg-red-400 text-red-900',
-  },
-  green: {
-    buttonColor: 'bg-green-500/20 hover:bg-green-500/25',
-    iconColor: 'text-green-500',
-    badgeColor: 'bg-green-400 text-green-800',
-  },
-  yellow: {
-    buttonColor: 'bg-yellow-500/20 hover:bg-yellow-500/25',
-    iconColor: 'text-yellow-500',
-    badgeColor: 'bg-yellow-400 text-yellow-800',
-  },
-  blue: {
-    buttonColor: 'bg-blue-500/20 hover:bg-blue-500/25',
-    iconColor: 'text-blue-500',
-    badgeColor: 'bg-blue-400 text-blue-800',
-  },
-  emerald: {
-    buttonColor: 'bg-emerald-500/20 hover:bg-emerald-500/25',
-    iconColor: 'text-emerald-500',
-    badgeColor: 'bg-emerald-400 text-emerald-800',
-  },
-  indigo: {
-    buttonColor: 'bg-indigo-500/20 hover:bg-indigo-500/25',
-    iconColor: 'text-indigo-500',
-    badgeColor: 'bg-indigo-400 text-indigo-800',
-  },
-  purple: {
-    buttonColor: 'bg-purple-500/20 hover:bg-purple-500/25',
-    iconColor: 'text-purple-500',
-    badgeColor: 'bg-purple-400 text-purple-800',
-  },
-  pink: {
-    buttonColor: 'bg-pink-500/20 hover:bg-pink-500/25',
-    iconColor: 'text-pink-500',
-    badgeColor: 'bg-pink-400 text-pink-800',
-  },
-  rose: {
-    buttonColor: 'bg-rose-500/20 hover:bg-rose-500/25',
-    iconColor: 'text-rose-500',
-    badgeColor: 'bg-rose-400 text-rose-800',
-  },
-  fuchsia: {
-    buttonColor: 'bg-fuchsia-500/20 hover:bg-fuchsia-500/25',
-    iconColor: 'text-fuchsia-500',
-    badgeColor: 'bg-fuchsia-400 text-fuchsia-800',
-  },
-  violet: {
-    buttonColor: 'bg-violet-500/20 hover:bg-violet-500/25',
-    iconColor: 'text-violet-500',
-    badgeColor: 'bg-violet-400 text-violet-800',
-  },
-  sky: {
-    buttonColor: 'bg-sky-500/20 hover:bg-sky-500/25',
-    iconColor: 'text-sky-500',
-    badgeColor: 'bg-sky-400 text-sky-800',
-  },
-  orange: {
-    buttonColor: 'bg-orange-500/20 hover:bg-orange-500/25',
-    iconColor: 'text-orange-500',
-    badgeColor: 'bg-orange-400 text-orange-800',
-  },
-  gray: {
-    buttonColor: 'bg-gray-500/20 hover:bg-gray-500/25',
-    iconColor: 'text-gray-500',
-    badgeColor: 'bg-gray-400 text-gray-800',
-  },
-}
-
-export const AppDrawerItem = ({
-  title,
-  icon,
-  colorKey,
-  count,
-  onClick,
-  isActive,
-}: {
-  title: string
-  icon: React.ReactNode
-  colorKey: keyof typeof AppDrawerItemColor
-  count: number
-  isActive?: boolean
-  onClick?: () => void
-}) => {
-  const color = !isActive ? AppDrawerItemColor.gray : AppDrawerItemColor[colorKey]
-  return (
-    <Button
-      variant="outline"
-      className={`relative flex h-fit w-full flex-col items-center justify-center border-none hover:text-gray-200 ${color.buttonColor} px-2`}
-      onClick={onClick}
-      disabled={!isActive}
-    >
-      <div className={`${color.iconColor} [&_svg]:!h-6 [&_svg]:!w-6`}>{icon}</div>
-      <div className="text-xs font-medium text-gray-200">{title}</div>
-      <div
-        className={`absolute right-[-8px] top-[-8px] flex h-4 w-4 items-center justify-center rounded-full ${color.badgeColor} p-2.5 text-xs`}
-      >
-        {count}
-      </div>
-    </Button>
-  )
-}
-
-export default function AppDrawer({ metrics, title, description }: { metrics: DashboardMetrics | null, title: string, description: string }) {
-  const router = useRouter()
-  const items: AppDrawerItem[] = [
-    {
-      title: 'Failed Runs',
-      icon: <XCircle className="h-4 w-4" />,
-      color: 'orange',
-      count: metrics?.failedRecentRunsCount ?? 0,
-      onClick: () => {
-        router.push('/test-runs?filter=recentFailed')
-      },
-    },
-    {
-      title: 'Failing Tests',
-      icon: <AlertCircle className="h-4 w-4" />,
-      color: 'rose',
-      count: metrics?.repeatedlyFailingTestsCount ?? 0,
-      onClick: () => {
-        router.push('/reports/test-cases?filter=repeatedlyFailing')
-      },
-    },
-    {
-      title: 'Flaky Tests',
-      icon: <AlertTriangle className="h-4 w-4" />,
-      color: 'yellow',
-      count: metrics?.flakyTestsCount ?? 0,
-      onClick: () => {
-        router.push('/reports/test-cases?filter=flaky')
-      },
-    },
-    {
-      title: 'Unexecuted Suites',
-      icon: <Clock className="h-4 w-4" />,
-      color: 'blue',
-      count: metrics?.suitesNotExecutedRecentlyCount ?? 0,
-      onClick: () => {
-        router.push('/reports/test-suites?filter=notExecutedRecently')
-      },
-    },
-  ]
-
-  return (
-    <Card id="container" className="w-fit border-gray-600/10 bg-gray-600/10">
-      <CardHeader id="header">
-        <CardTitle className="text-primary">{title}</CardTitle>
-        <CardDescription>{description}</CardDescription>
-      </CardHeader>
-      <CardContent id="content">
-        <div className="grid grid-cols-2 gap-4 gap-y-6">
-          {items.map(item => (
-            <AppDrawerItem
-              key={item.title}
-              title={item.title}
-              icon={item.icon}
-              colorKey={item.color}
-              count={item.count}
-              onClick={item.onClick}
-              isActive={item.count > 0 ? true : false}
-            />
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

package/templates/default/src/app/(dashboard-components)/data-card-grid.tsx

@@ -1,13 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-
-export const DataCardGrid = ({ children }: { children: React.ReactNode }) => {
-    return <Card className="border-gray-600/10 bg-gray-600/10 w-fit">
-        <CardHeader>
-            <CardTitle className="text-primary">States</CardTitle>
-            <CardDescription>Overview of entity states</CardDescription>
-        </CardHeader>
-        <CardContent className="grid grid-cols-2 gap-4">
-            {children}
-        </CardContent>
-    </Card>
-}

package/templates/default/src/app/(dashboard-components)/data-card.tsx

@@ -1,27 +0,0 @@
-'use client'
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardTitle, CardHeader } from "@/components/ui/card";
-import { ExternalLink } from "lucide-react";
-import { useRouter } from "next/navigation";
-export default function DataCard({ title, value, link }: { title: string, value: number, link: string }) {
-    const router = useRouter()
-    return (
-        <Card className="h-fit border-gray-600/10 bg-gray-600/10 min-w-40">
-            <CardHeader className="flex items-center justify-between flex-row p-2">
-                <CardTitle className={`text-xs font-normal ${value > 0 ? 'text-primary' : 'text-gray-400'}`}>{title}</CardTitle>
-                <div className="flex items-center gap-2">
-                    <Button variant="outline" className="text-primary hover:text-primary/80 px-2 py-1 bg-inherit border-gray-600/15 hover:bg-emerald-400/10"
-                        disabled={value === 0}
-                        onClick={() => router.push(link)}
-                        size="sm"
-                    >
-                        <ExternalLink className="h-4 w-4" />
-                    </Button>
-                </div>
-            </CardHeader>
-            <CardContent className="h-full px-2 py-1">
-                <div className={`text-2xl h-full flex items-center font-bold ${value > 0 ? 'text-primary' : 'text-gray-400'}`}>{value}</div>
-            </CardContent>
-        </Card>
-    )
-}

package/templates/default/src/app/(dashboard-components)/execution-health-panel.tsx

@@ -1,57 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { ChartConfig } from '@/components/ui/chart'
-import FeatureChart from '../(base)/reports/feature-chart'
-import { TestSuiteExecutionData } from '@/actions/dashboard/dashboard-actions'
-
-const colorMap = {
-    passed: 'oklch(59.6% 0.145 163.225)',
-    failed: 'oklch(59.2% 0.249 0.584)',
-    cancelled: 'oklch(55.4% 0.046 257.417)',
-    unknown: 'oklch(79.5% 0.184 86.047)',
-}
-
-const resultByTestSuiteBarChartConfig = {
-    feature: {
-        label: 'Test Suite',
-    },
-    passed: {
-        label: 'Passed',
-        color: colorMap.passed,
-    },
-    failed: {
-        label: 'Failed',
-        color: colorMap.failed,
-    },
-    cancelled: {
-        label: 'Cancelled',
-        color: colorMap.cancelled,
-    },
-    unknown: {
-        label: 'Unknown',
-        color: colorMap.unknown,
-    },
-} satisfies ChartConfig
-
-interface ExecutionHealthPanelProps {
-    featureData: TestSuiteExecutionData
-}
-
-export const ExecutionHealthPanel = ({ featureData }: ExecutionHealthPanelProps) => {
-    return (
-        <Card className="border-gray-600/10 bg-gray-600/10 w-full h-full">
-            <CardHeader>
-                <CardTitle className="text-primary">Execution Health</CardTitle>
-                <CardDescription>Pass/fail rates by test suite across last 10 test runs</CardDescription>
-            </CardHeader>
-            <CardContent>
-                {featureData.length === 0 ? (
-                    <div className="flex h-[300px] items-center justify-center text-sm text-muted-foreground">
-                        No execution data available. Run some test suites to see execution health metrics.
-                    </div>
-                ) : (
-                    <FeatureChart config={resultByTestSuiteBarChartConfig} data={featureData} />
-                )}
-            </CardContent>
-        </Card>
-    )
-}

package/templates/default/src/app/(dashboard-components)/ongoing-test-runs-card.tsx

@@ -1,87 +0,0 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardTitle, CardHeader } from '@/components/ui/card'
-import { ExternalLink } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import { useEffect, useState, useRef } from 'react'
-import { getRunningTestRunsCountAction } from '@/actions/dashboard/dashboard-actions'
-
-interface OngoingTestRunsCardProps {
-  initialCount: number
-  link: string
-}
-
-export default function OngoingTestRunsCard({ initialCount, link }: OngoingTestRunsCardProps) {
-  const router = useRouter()
-  const [count, setCount] = useState(initialCount)
-  const pollingRef = useRef<NodeJS.Timeout | null>(null)
-
-  // Poll for count updates while there are ongoing test runs
-  useEffect(() => {
-    // Clear any existing polling interval
-    if (pollingRef.current) {
-      clearInterval(pollingRef.current)
-      pollingRef.current = null
-    }
-
-    // If no ongoing test runs, don't poll
-    if (count === 0) {
-      return
-    }
-
-    pollingRef.current = setInterval(async () => {
-      try {
-        const { data, error } = await getRunningTestRunsCountAction()
-        if (error) {
-          console.error('Error polling running test runs count:', error)
-          return
-        }
-
-        const newCount = data as number
-        setCount(newCount)
-
-        // If count reaches 0, stop polling
-        if (newCount === 0 && pollingRef.current) {
-          clearInterval(pollingRef.current)
-          pollingRef.current = null
-        }
-      } catch (error) {
-        console.error('Error polling running test runs count:', error)
-      }
-    }, 2000) // Poll every 2 seconds
-
-    return () => {
-      if (pollingRef.current) {
-        clearInterval(pollingRef.current)
-        pollingRef.current = null
-      }
-    }
-  }, [count])
-
-  return (
-    <Card className="h-fit border-gray-600/10 bg-gray-600/10 min-w-40">
-      <CardHeader className="flex items-center justify-between flex-row p-2">
-        <CardTitle className={`text-xs font-normal ${count > 0 ? 'text-primary' : 'text-gray-400'}`}>
-          Ongoing Test Runs
-        </CardTitle>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            className="text-primary hover:text-primary/80 px-2 py-1 bg-inherit border-gray-600/15 hover:bg-emerald-400/10"
-            disabled={count === 0}
-            onClick={() => router.push(link)}
-            size="sm"
-          >
-            <ExternalLink className="h-4 w-4" />
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent className="h-full px-2 py-1">
-        <div className={`text-2xl h-full flex items-center font-bold ${count > 0 ? 'text-primary' : 'text-gray-400'}`}>
-          {count}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}