create-appraisejs 0.2.0 → 0.3.0-alpha.1

package/templates/default/src/app/(base)/reports/duration-chart.tsx

@@ -1,33 +0,0 @@
-'use client'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
-
-export default function DurationChart({
-  config,
-  data,
-}: {
-  config: ChartConfig
-  data: Array<{ feature: string; duration: number }>
-}) {
-  return (
-    <>
-      <p className="mb-6 mt-2 text-center text-xs text-muted-foreground">Duration by Feature(Seconds)</p>
-      <ChartContainer config={config} className="min-h-[300px] w-full">
-        <BarChart
-          accessibilityLayer
-          data={data}
-          layout="vertical"
-          margin={{
-            left: 5,
-          }}
-        >
-          <YAxis dataKey="feature" type="category" tickLine={false} tickMargin={10} axisLine={false} width={100} />
-          <XAxis dataKey="duration" type="number" hide />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          <Bar dataKey="duration" fill="oklch(54.6% 0.245 262.881)" />
-        </BarChart>
-      </ChartContainer>
-    </>
-  )
-}

package/templates/default/src/app/(base)/reports/feature-chart.tsx

@@ -1,78 +0,0 @@
-'use client'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
-
-interface FeatureChartProps {
-  config: ChartConfig
-  data: Array<{
-    feature: string
-    passed: number
-    failed: number
-    cancelled: number
-    unknown: number
-    total: number
-  }>
-}
-
-export default function FeatureChart({ config, data }: FeatureChartProps) {
-  // Calculate height based on number of items (each bar needs ~40px)
-  // Set a maximum height to prevent bars from becoming too thick when there are few items
-  const barHeight = 40
-  const maxHeight = 300 // Maximum height to prevent bars from becoming too thick
-  const calculatedHeight = data.length * barHeight
-  const minHeight = Math.min(Math.max(calculatedHeight, 200), maxHeight) // Cap at maxHeight
-
-  return (
-    <>
-      <p className="mb-6 mt-2 text-center text-xs text-muted-foreground">Results by Feature</p>
-      <ChartContainer
-        config={config}
-        className="min-h-[200px] w-full"
-        style={{ minHeight: `${minHeight}px`, maxHeight: `${maxHeight}px` }}
-      >
-        <BarChart
-          accessibilityLayer
-          data={data}
-          layout="vertical"
-          barCategoryGap="20%"
-          margin={{
-            left: 5,
-          }}
-        >
-          <YAxis dataKey="feature" type="category" tickLine={false} tickMargin={10} axisLine={false} width={100} />
-          <XAxis dataKey="total" type="number" hide />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          <Bar
-            dataKey="passed"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['passed']?.color as string}
-            stroke="none"
-          />
-          <Bar
-            dataKey="failed"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['failed']?.color as string}
-            stroke="none"
-          />
-          <Bar
-            dataKey="cancelled"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['cancelled']?.color as string}
-            stroke="none"
-          />
-          <Bar
-            dataKey="unknown"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['unknown']?.color as string}
-            stroke="none"
-          />
-        </BarChart>
-      </ChartContainer>
-    </>
-  )
-}

package/templates/default/src/app/(base)/reports/overview-chart.tsx

@@ -1,49 +0,0 @@
-'use client'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { Pie, PieChart, Label } from 'recharts'
-
-interface OverviewChartProps {
-  config: ChartConfig
-  data: Array<{ result: string; value: number; fill: string }>
-}
-
-const calculatePassRate = (data: Array<{ result: string; value: number; fill: string }>) => {
-  const total = data.reduce((acc, curr) => acc + curr.value, 0)
-  if (total === 0) {
-    return 0
-  }
-  const passed = data.find(item => item.result === 'passed')?.value || 0
-  return Math.round((passed / total) * 100)
-}
-
-export default function OverviewChart({ config, data }: OverviewChartProps) {
-  return (
-    <>
-      <p className="mt-2 text-center text-xs text-muted-foreground">Status(%) by Feature</p>
-      <ChartContainer config={config} className="mx-auto aspect-square max-h-[250px]">
-        <PieChart>
-          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          <Pie data={data} dataKey="value" nameKey="result" innerRadius={60} strokeWidth={5}>
-            <Label
-              content={({ viewBox }) => {
-                if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                  return (
-                    <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
-                      <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
-                        {calculatePassRate(data)}%
-                      </tspan>
-                      <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
-                        Pass Rate
-                      </tspan>
-                    </text>
-                  )
-                }
-              }}
-            />
-          </Pie>
-        </PieChart>
-      </ChartContainer>
-    </>
-  )
-}

package/templates/default/src/app/(base)/reports/page.tsx

@@ -1,98 +0,0 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { FileCheck } from 'lucide-react'
-import { Metadata } from 'next'
-import ReportTable from './report-table'
-import EmptyState from '@/components/data-state/empty-state'
-import { getAllReportsAction } from '@/actions/reports/report-actions'
-import { Prisma } from '@prisma/client'
-
-type ReportWithRelations = Prisma.ReportGetPayload<{
-  include: {
-    testRun: {
-      include: {
-        environment: true
-        tags: true
-      }
-    }
-    testCases: {
-      include: {
-        testRunTestCase: {
-          include: {
-            testCase: {
-              include: {
-                tags: true
-              }
-            }
-          }
-        }
-        reportScenario: {
-          include: {
-            reportFeature: true
-          }
-        }
-      }
-    }
-  }
-}>
-
-export const metadata: Metadata = {
-  title: 'Appraise | Reports',
-  description: 'Manage reports for test runs',
-}
-
-const Reports = async () => {
-  const { data: reports, error: reportsError } = await getAllReportsAction()
-
-  if (reportsError) {
-    return <div>Error: {reportsError}</div>
-  }
-
-  // Type guard to validate the data structure
-  const isValidReportData = (data: unknown): data is ReportWithRelations[] => {
-    if (!Array.isArray(data)) return false
-    return data.every(
-      item =>
-        item &&
-        typeof item === 'object' &&
-        'id' in item &&
-        'testRun' in item &&
-        'testCases' in item &&
-        Array.isArray(item.testCases),
-    )
-  }
-
-  if (!reports || !isValidReportData(reports)) {
-    return <div>Error: Invalid report data format</div>
-  }
-
-  if (!reports || reports.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<FileCheck className="h-8 w-8" />}
-          title="No reports found"
-          description="Get started by creating a test run to generate reports"
-          createRoute="/test-runs/create"
-          createText="Create Test Run"
-        />
-      </div>
-    )
-  }
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <FileCheck className="mr-2 h-8 w-8" />
-            Reports
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Review test execution details, identify patterns, and optimize performance</HeaderSubtitle>
-      </div>
-      <ReportTable />
-    </>
-  )
-}
-
-export default Reports

package/templates/default/src/app/(base)/reports/report-metric-card.tsx

@@ -1,78 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
-
-const metricStyles: Record<
-  string,
-  {
-    card: string
-    glow: string
-    dot: string
-    value: string
-  }
-> = {
-  'Total Tests': {
-    card: 'bg-gradient-to-br from-card via-card to-primary/5',
-    glow: 'bg-primary/20',
-    dot: 'bg-primary',
-    value: 'text-primary',
-  },
-  Passed: {
-    card: 'bg-gradient-to-br from-card via-card to-primary/10',
-    glow: 'bg-primary/25',
-    dot: 'bg-green-500',
-    value: 'text-green-500',
-  },
-  Failed: {
-    card: 'bg-gradient-to-br from-card via-card to-destructive/10',
-    glow: 'bg-destructive/20',
-    dot: 'bg-destructive',
-    value: 'text-destructive',
-  },
-  Untested: {
-    card: 'bg-gradient-to-br from-card via-card to-secondary/70',
-    glow: 'bg-muted-foreground/15',
-    dot: 'bg-muted-foreground',
-    value: 'text-foreground',
-  },
-}
-
-const ReportMetricCard = ({ title, value }: { title: string; value: string }) => {
-  const styles = metricStyles[title] ?? {
-    card: 'bg-gradient-to-br from-card to-muted/40',
-    glow: 'bg-primary/15',
-    dot: 'bg-primary',
-    value: 'text-foreground',
-  }
-
-  return (
-    <Card
-      className={cn(
-        'group relative min-w-0 overflow-hidden rounded-2xl shadow-sm transition-colors bg-transparent border-gray-500/10',
-        styles.card,
-      )}
-    >
-      <div
-        className={cn(
-          'pointer-events-none absolute -right-10 -top-10 h-28 w-28 rounded-full blur-3xl transition-opacity group-hover:opacity-90',
-          styles.glow,
-        )}
-      />
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/70 to-transparent dark:via-white/20" />
-
-      <CardHeader className="space-y-3 p-5 pb-3">
-        <div className="flex items-center gap-3">
-          <span className={cn('h-2.5 w-2.5 rounded-full shadow-sm', styles.dot)} />
-          <CardTitle className="text-sm font-medium tracking-[0.18em] text-muted-foreground uppercase">
-            {title}
-          </CardTitle>
-        </div>
-      </CardHeader>
-
-      <CardContent className="p-5 pt-0">
-        <div className={cn('text-4xl font-bold tracking-tight sm:text-[2.75rem]', styles.value)}>{value}</div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default ReportMetricCard

package/templates/default/src/app/(base)/reports/report-table-columns.tsx

@@ -1,189 +0,0 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import {
-  Report,
-  Tag,
-  ReportTestCase,
-  TestRun,
-  TestRunTestCase,
-  TestCase,
-  TestRunStatus,
-  TestRunResult,
-  Environment,
-  TagType,
-} from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { CheckCircle, Clock, XCircle, Eye } from 'lucide-react'
-import Link from 'next/link'
-
-type ReportWithRelations = Report & {
-  testRun: TestRun & {
-    environment: Environment
-    tags: Tag[]
-  }
-  testCases: (ReportTestCase & {
-    testRunTestCase: TestRunTestCase & {
-      testCase: TestCase & { tags?: Tag[] }
-    }
-  })[]
-}
-
-const formatDuration = (startDate: Date, endDate: Date | null) => {
-  if (!endDate) return '-'
-  const diffInMs = endDate.getTime() - startDate.getTime()
-  const totalSeconds = Math.floor(diffInMs / 1000)
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const seconds = totalSeconds % 60
-
-  return `${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m ${String(seconds).padStart(2, '0')}s`
-}
-
-const testRunStatusToBadge = (status: TestRunStatus) => {
-  switch (status) {
-    case TestRunStatus.COMPLETED:
-      return (
-        <Badge className="bg-primary">
-          <CheckCircle className="mr-1 h-4 w-4" />
-          Completed
-        </Badge>
-      )
-    case TestRunStatus.CANCELLED:
-      return (
-        <Badge className="bg-pink-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
-          Cancelled
-        </Badge>
-      )
-    default:
-      return (
-        <Badge className="bg-gray-500 text-white">
-          <Clock className="mr-1 h-4 w-4" />
-          Unknown
-        </Badge>
-      )
-  }
-}
-
-const testRunResultToBadge = (result: TestRunResult) => {
-  switch (result) {
-    case TestRunResult.PASSED:
-      return (
-        <Badge className="bg-primary">
-          <CheckCircle className="mr-1 h-4 w-4" />
-          Passed
-        </Badge>
-      )
-    case TestRunResult.FAILED:
-      return (
-        <Badge className="bg-pink-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
-          Failed
-        </Badge>
-      )
-    case TestRunResult.CANCELLED:
-      return (
-        <Badge className="bg-gray-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
-          Cancelled
-        </Badge>
-      )
-    default:
-      return (
-        <Badge className="bg-gray-500 text-white">
-          <Clock className="mr-1 h-4 w-4" />
-          Unknown
-        </Badge>
-      )
-  }
-}
-
-export const reportTableCols: ColumnDef<ReportWithRelations>[] = [
-  {
-    id: 'testRunName',
-    accessorFn: row => row.testRun.name || '',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Run Name" />,
-    cell: ({ row }) => {
-      return <div className="font-medium">{row.original.testRun.name}</div>
-    },
-  },
-  {
-    id: 'testRunStatus',
-    accessorFn: row => row.testRun.status || '',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Run Status" />,
-    cell: ({ row }) => {
-      return testRunStatusToBadge(row.original.testRun.status)
-    },
-  },
-  {
-    id: 'tags',
-    accessorFn: row => {
-      const tags = row.testRun.tags || []
-      return tags.map(tag => tag.name).join(' ')
-    },
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
-    cell: ({ row }) => {
-      const tags = row.original.testRun.tags.filter(tag => tag.type === TagType.FILTER) || []
-      return (
-        <div className="flex flex-wrap gap-1">
-          {tags.length > 0 ? tags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
-        </div>
-      )
-    },
-  },
-  {
-    id: 'environment',
-    accessorFn: row => row.testRun.environment?.name || '',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Environment" />,
-    cell: ({ row }) => {
-      return <div>{row.original.testRun.environment.name}</div>
-    },
-  },
-  {
-    id: 'duration',
-    accessorFn: row => {
-      const testRun = row.testRun
-      if (!testRun.completedAt) return 0
-      return testRun.completedAt.getTime() - testRun.startedAt.getTime()
-    },
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Duration" />,
-    cell: ({ row }) => {
-      const testRun = row.original.testRun
-      return <div>{formatDuration(testRun.startedAt, testRun.completedAt)}</div>
-    },
-  },
-  {
-    id: 'totalTestCases',
-    accessorFn: row => row.testCases.length,
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases Executed" />,
-    cell: ({ row }) => {
-      return <div>{row.original.testCases.length}</div>
-    },
-  },
-  {
-    id: 'testRunResult',
-    accessorFn: row => row.testRun.result || '',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Run Result" />,
-    cell: ({ row }) => {
-      return testRunResultToBadge(row.original.testRun.result)
-    },
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      const report = row.original
-      return (
-        <Link href={`/reports/${report.id}`}>
-          <Button variant="outline" size="sm" className="flex items-center gap-2">
-            <Eye className="h-4 w-4" />
-            View
-          </Button>
-        </Link>
-      )
-    },
-  },
-]

package/templates/default/src/app/(base)/reports/report-table.tsx

@@ -1,72 +0,0 @@
-import { DataTable } from '@/components/ui/data-table'
-import { reportTableCols } from './report-table-columns'
-import { getAllReportsAction } from '@/actions/reports/report-actions'
-import { Prisma } from '@prisma/client'
-
-type ReportWithRelations = Prisma.ReportGetPayload<{
-  include: {
-    testRun: {
-      include: {
-        environment: true
-        tags: true
-      }
-    }
-    testCases: {
-      include: {
-        testRunTestCase: {
-          include: {
-            testCase: {
-              include: {
-                tags: true
-              }
-            }
-          }
-        }
-        reportScenario: {
-          include: {
-            reportFeature: true
-          }
-        }
-      }
-    }
-  }
-}>
-
-const ReportTable = async () => {
-  const { data: reports, error: reportsError } = await getAllReportsAction()
-
-  if (reportsError) {
-    return <div>Error: {reportsError}</div>
-  }
-
-  // Type guard to validate the data structure
-  const isValidReportData = (data: unknown): data is ReportWithRelations[] => {
-    if (!Array.isArray(data)) return false
-    return data.every(
-      item =>
-        item &&
-        typeof item === 'object' &&
-        'id' in item &&
-        'testRun' in item &&
-        'testCases' in item &&
-        Array.isArray(item.testCases),
-    )
-  }
-
-  if (!reports || !isValidReportData(reports)) {
-    return <div>Error: Invalid report data format</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={reportTableCols}
-        data={reports}
-        filterColumn="testRunName"
-        filterPlaceholder="Filter by test run name..."
-      />
-    </>
-  )
-}
-
-export default ReportTable

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

@@ -1,40 +0,0 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Code } from 'lucide-react'
-import { Suspense } from 'react'
-import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
-import { Metadata } from 'next'
-import TestCasesMetricTable from './test-cases-metric-table'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Failing Test Cases Report',
-  description: 'Manage failing test cases report for identifying elements on pages',
-}
-
-const TestCasesMetricsReport = async ({ searchParams }: { searchParams: Promise<{ filter?: string }> }) => {
-  const resolvedSearchParams = await searchParams
-  const filter = resolvedSearchParams?.filter as 'repeatedlyFailing' | 'flaky' | undefined
-
-  return (
-    <>
-      <div className="mb-8">
-        <div className="flex items-center justify-between">
-          <div>
-            <PageHeader>
-              <span className="flex items-center">
-                <Code className="mr-2 h-8 w-8" />
-                Failing Test Cases Report
-              </span>
-            </PageHeader>
-            <HeaderSubtitle>Report of test cases that have been failing repeatedly or are flaky</HeaderSubtitle>
-          </div>
-        </div>
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TestCasesMetricTable filter={filter || 'repeatedlyFailing'} />
-      </Suspense>
-    </>
-  )
-}
-
-export default TestCasesMetricsReport