create-appraise 0.1.0

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

@@ -0,0 +1,33 @@
+'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

@@ -0,0 +1,78 @@
+'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

@@ -0,0 +1,46 @@
+'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)
+  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

@@ -0,0 +1,98 @@
+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>Reports are the reports of the test runs.</HeaderSubtitle>
+      </div>
+      <ReportTable />
+    </>
+  )
+}
+
+export default Reports

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

@@ -0,0 +1,16 @@
+import { Card, CardTitle, CardContent, CardHeader } from '@/components/ui/card'
+
+const ReportMetricCard = ({ title, value }: { title: string; value: string }) => {
+  return (
+    <Card className="min-w-60 shadow-none dark:border-none">
+      <CardHeader>
+        <CardTitle className="text-lg font-normal text-gray-400">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold text-primary">{value}</div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportMetricCard

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

@@ -0,0 +1,189 @@
+'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

@@ -0,0 +1,72 @@
+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/report-view-table-columns.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import {
+  ReportTestCase,
+  TestRunTestCase,
+  TestCase,
+  Tag,
+  ReportScenario,
+  StepStatus,
+  TestRunTestCaseResult,
+} from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+import { Badge } from '@/components/ui/badge'
+import { ViewLogsButton } from './view-logs-button'
+import { CheckCircle, XCircle, Clock } from 'lucide-react'
+
+type ReportTestCaseWithRelations = ReportTestCase & {
+  testRunTestCase: TestRunTestCase & {
+    testCase: TestCase & { tags?: Tag[] }
+  }
+  reportScenario:
+    | (ReportScenario & {
+        tags: Array<{ tagName: string }>
+        steps: Array<{
+          id: string
+          keyword: string
+          name: string
+          status: StepStatus
+          duration: string
+          errorMessage: string | null
+          errorTrace: string | null
+          order: number
+        }>
+        hooks: Array<{
+          id: string
+          keyword: string
+          status: StepStatus
+          duration: string
+          errorMessage: string | null
+          errorTrace: string | null
+        }>
+      })
+    | null
+}
+
+const testRunTestCaseResultToBadge = (result: TestRunTestCaseResult) => {
+  switch (result) {
+    case TestRunTestCaseResult.PASSED:
+      return (
+        <Badge className="bg-primary">
+          <CheckCircle className="mr-1 h-4 w-4" />
+          Passed
+        </Badge>
+      )
+    case TestRunTestCaseResult.FAILED:
+      return (
+        <Badge className="bg-pink-500 text-white">
+          <XCircle className="mr-1 h-4 w-4" />
+          Failed
+        </Badge>
+      )
+    case TestRunTestCaseResult.UNTESTED:
+      return (
+        <Badge className="bg-yellow-500 text-white">
+          <Clock className="mr-1 h-4 w-4" />
+          Untested
+        </Badge>
+      )
+    default:
+      return (
+        <Badge className="bg-gray-500 text-white">
+          <Clock className="mr-1 h-4 w-4" />
+          Unknown
+        </Badge>
+      )
+  }
+}
+
+export const reportViewTableCols: ColumnDef<ReportTestCaseWithRelations>[] = [
+  {
+    id: 'result',
+    accessorFn: row => row.testRunTestCase.result || '',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Result" />,
+    cell: ({ row }) => {
+      return testRunTestCaseResultToBadge(row.original.testRunTestCase.result)
+    },
+  },
+  {
+    id: 'testCaseTitle',
+    accessorFn: row => row.testRunTestCase.testCase.title || '',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Title" />,
+    cell: ({ row }) => {
+      return <div className="font-medium">{row.original.testRunTestCase.testCase.title}</div>
+    },
+  },
+  {
+    id: 'duration',
+    accessorFn: row => (row.duration ? Number(row.duration) : 0),
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Duration" />,
+    cell: ({ row }) => {
+      if (!row.original.duration) return <div>-</div>
+      const durationMs = Math.round(Number(row.original.duration) / 1000000)
+      const durationSeconds = (durationMs / 1000).toFixed(2)
+      return <div>{durationSeconds}s</div>
+    },
+  },
+  {
+    id: 'tags',
+    accessorFn: row => {
+      const tags = row.testRunTestCase.testCase.tags || []
+      return tags.map(tag => tag.name).join(' ')
+    },
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
+    cell: ({ row }) => {
+      const tags = row.original.testRunTestCase.testCase.tags || []
+      return (
+        <div className="flex flex-wrap gap-1">
+          {tags.length > 0 ? tags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
+        </div>
+      )
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const reportTestCase = row.original
+      return <ViewLogsButton reportScenario={reportTestCase.reportScenario} />
+    },
+  },
+]