create-appraise 0.1.0

package/templates/default/src/app/(base)/modules/module-table-columns.tsx

@@ -0,0 +1,85 @@
+'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 { Module } from '@prisma/client'
+import { deleteModuleAction } from '@/actions/modules/module-actions'
+import { buildModulePathFromParent } from '@/lib/path-helpers/module-path'
+import { formatDateTime } from '@/lib/utils'
+
+export const moduleTableCols: ColumnDef<Module & { parent: { name: string } }>[] = [
+  {
+    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: 'parent.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Parent" />,
+    cell: ({ row }) => {
+      const parent = row.original.parent
+      return <div>{parent?.name ?? '< root >'}</div>
+    },
+  },
+  {
+    id: 'path',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Path" />,
+    cell: ({ row, table }) => {
+      const modules = table.options.data as (Module & {
+        parent: { name: string }
+      })[]
+      const currentModule = row.original
+      const path = buildModulePathFromParent(modules, currentModule)
+      return <div className="font-mono text-sm">{path}</div>
+    },
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.createdAt)
+    },
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.updatedAt)
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const moduleData = row.original
+      return (
+        <TableActions
+          modifyLink={`/modules/modify/${moduleData.id}`}
+          deleteHandler={() => deleteModuleAction([moduleData.id])}
+        />
+      )
+    },
+  },
+]

package/templates/default/src/app/(base)/modules/module-table.tsx

@@ -0,0 +1,24 @@
+import { DataTable } from '@/components/ui/data-table'
+import { Module } from '@prisma/client'
+import { getAllModulesAction, deleteModuleAction } from '@/actions/modules/module-actions'
+import { moduleTableCols } from './module-table-columns'
+
+const ModuleTable = async () => {
+  const { data: modules } = await getAllModulesAction()
+
+  return (
+    <>
+      <DataTable
+        columns={moduleTableCols}
+        data={modules as (Module & { parent: { name: string } })[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/modules/create"
+        modifyLink="/modules/modify"
+        deleteAction={deleteModuleAction}
+      />
+    </>
+  )
+}
+
+export default ModuleTable

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

@@ -0,0 +1,59 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import React from 'react'
+import { Code } from 'lucide-react'
+import ModuleTable from './module-table'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { Module } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modules',
+  description: 'Manage application modules and their configurations',
+}
+
+const Modules = async () => {
+  const { data: modules, error: modulesError } = await getAllModulesAction()
+
+  if (modulesError) {
+    return <div>Error: {modulesError}</div>
+  }
+
+  const modulesData = modules as (Module & { parent: { name: string } })[]
+
+  if (!modulesData || modulesData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<Code className="h-8 w-8" />}
+          title="No modules found"
+          description="Get started by creating a module to organize your application components"
+          createRoute="/modules/create"
+          createText="Create Module"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Code className="mr-2 h-8 w-8" />
+            Modules
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Modules are the components that are used to build the application</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <ModuleTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default Modules

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

@@ -0,0 +1,517 @@
+import PageHeader from '@/components/typography/page-header'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import {
+  BrowserEngine,
+  TestRunResult,
+  TestRunStatus,
+  StepStatus,
+  Prisma,
+} from '@prisma/client'
+import { Calendar, CheckCircle, Clock, Compass, Flame, Info, XCircle } from 'lucide-react'
+import { Metadata } from 'next'
+import ReportMetricCard from '../report-metric-card'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { ChartConfig } from '@/components/ui/chart'
+import OverviewChart from '../overview-chart'
+import FeatureChart from '../feature-chart'
+import DurationChart from '../duration-chart'
+import ReportViewTable from '../report-view-table'
+import { getReportByIdAction } from '@/actions/reports/report-actions'
+import { notFound } from 'next/navigation'
+
+/**
+ * Type for report detail with all relations from getReportByIdAction
+ */
+type ReportDetailWithRelations = Prisma.ReportGetPayload<{
+  include: {
+    testRun: {
+      include: {
+        environment: true
+        tags: true
+      }
+    }
+    features: {
+      include: {
+        tags: true
+        scenarios: {
+          include: {
+            tags: true
+            steps: true
+            hooks: true
+          }
+        }
+      }
+    }
+    testCases: {
+      include: {
+        testRunTestCase: {
+          include: {
+            testCase: {
+              include: {
+                tags: true
+              }
+            }
+          }
+        }
+        reportScenario: {
+          include: {
+            reportFeature: true
+            tags: true
+            steps: {
+              orderBy: {
+                order: 'asc'
+              }
+            }
+            hooks: true
+          }
+        }
+      }
+    }
+  }
+}>
+
+export const metadata: Metadata = {
+  title: 'Appraise | View Report',
+  description: 'View report details and live logs',
+}
+
+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)',
+  default: 'oklch(54.6% 0.245 262.881)',
+}
+
+const overViewPieChartConfig = {
+  value: {
+    label: 'Value',
+  },
+  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
+
+const resultByFeatureBarChartConfig = {
+  feature: {
+    label: 'Feature',
+  },
+  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
+
+const durationByFeatureBarChartConfig = {
+  feature: {
+    label: 'Feature',
+  },
+  duration: {
+    label: 'Duration',
+  },
+} satisfies ChartConfig
+
+const testRunResultToBadge = (result: TestRunResult) => {
+  switch (result) {
+    case TestRunResult.PASSED:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-green-700 bg-green-700/10 py-1 text-sm text-green-500"
+        >
+          <CheckCircle className="h-4 w-4" />
+          PASSED
+        </Badge>
+      )
+    case TestRunResult.FAILED:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-red-700 bg-red-700/10 py-1 text-sm text-red-500"
+        >
+          <XCircle className="h-4 w-4" />
+          FAILED
+        </Badge>
+      )
+    case TestRunResult.CANCELLED:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-gray-700 bg-gray-700/35 py-1 text-sm text-gray-300"
+        >
+          <XCircle className="h-4 w-4" />
+          CANCELLED
+        </Badge>
+      )
+    default:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-gray-700 bg-gray-700/10 py-1 text-sm text-gray-500"
+        >
+          <Clock className="h-4 w-4" />
+          UNKNOWN
+        </Badge>
+      )
+  }
+}
+
+const formatDateTime = (date: Date) => {
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+const formatDuration = (startDate: Date, endDate: Date) => {
+  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 browserIcons = {
+  [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" />,
+}
+
+const browserEngineToBadge = (browserEngine: BrowserEngine) => {
+  switch (browserEngine) {
+    case BrowserEngine.CHROMIUM:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-blue-700 bg-blue-700/10 py-1 text-sm text-blue-500"
+        >
+          {browserIcons[BrowserEngine.CHROMIUM]}
+          Chromium
+        </Badge>
+      )
+    case BrowserEngine.FIREFOX:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-red-700 bg-red-700/10 py-1 text-sm text-red-500"
+        >
+          {browserIcons[BrowserEngine.FIREFOX]}
+          Firefox
+        </Badge>
+      )
+    case BrowserEngine.WEBKIT:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-purple-700 bg-purple-700/10 py-1 text-sm text-purple-500"
+        >
+          {browserIcons[BrowserEngine.WEBKIT]}
+          WebKit
+        </Badge>
+      )
+    default:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-gray-700 bg-gray-700/10 py-1 text-sm text-gray-500"
+        >
+          Unknown
+        </Badge>
+      )
+  }
+}
+
+const testRunStatusToBadge = (status: TestRunStatus) => {
+  switch (status) {
+    case TestRunStatus.COMPLETED:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-green-700 bg-green-700/10 py-1 text-sm text-green-500"
+        >
+          <CheckCircle className="h-4 w-4" />
+          Completed
+        </Badge>
+      )
+    case TestRunStatus.CANCELLED:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-gray-700 bg-gray-700/10 py-1 text-sm text-gray-500"
+        >
+          <XCircle className="h-4 w-4" />
+          Cancelled
+        </Badge>
+      )
+    default:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-2 rounded-xl border-gray-700 bg-gray-700/10 py-1 text-sm text-gray-500"
+        >
+          <Clock className="h-4 w-4" />
+          Unknown
+        </Badge>
+      )
+  }
+}
+
+const ViewReport = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+
+  // Fetch report data
+  const reportResponse = await getReportByIdAction(id)
+  if (reportResponse.status !== 200 || !reportResponse.data) {
+    notFound()
+  }
+
+  // Type guard to validate the data structure
+  const isValidReportDetail = (data: unknown): data is ReportDetailWithRelations => {
+    if (!data || typeof data !== 'object') return false
+    const report = data as Record<string, unknown>
+    return (
+      'id' in report &&
+      'testRun' in report &&
+      'testCases' in report &&
+      'features' in report &&
+      Array.isArray(report.testCases) &&
+      Array.isArray(report.features) &&
+      report.testRun !== null &&
+      typeof report.testRun === 'object'
+    )
+  }
+
+  if (!isValidReportDetail(reportResponse.data)) {
+    notFound()
+  }
+
+  const report: ReportDetailWithRelations = reportResponse.data
+  const testRun = report.testRun
+
+  // Calculate metrics from report data
+  const totalTests = report.testCases.length
+  const passedTests = report.testCases.filter(rtc => rtc.testRunTestCase.result === 'PASSED').length
+  const failedTests = report.testCases.filter(rtc => rtc.testRunTestCase.result === 'FAILED').length
+
+  // Calculate overview chart data
+  const overviewData = [
+    {
+      result: 'passed',
+      value: passedTests,
+      fill: colorMap.passed,
+    },
+    {
+      result: 'failed',
+      value: failedTests,
+      fill: colorMap.failed,
+    },
+    {
+      result: 'cancelled',
+      value: report.testCases.filter(rtc => rtc.testRunTestCase.result === 'UNTESTED').length,
+      fill: colorMap.cancelled,
+    },
+    {
+      result: 'unknown',
+      value: 0,
+      fill: colorMap.unknown,
+    },
+  ]
+
+  // Calculate feature chart data
+  const featureData = report.features.map(feature => {
+    const scenarios = feature.scenarios
+    const passed = scenarios.filter(
+      s =>
+        s.steps.every(step => step.status === StepStatus.PASSED) &&
+        s.hooks.every(hook => hook.status === StepStatus.PASSED),
+    ).length
+    const failed = scenarios.filter(
+      s =>
+        s.steps.some(step => step.status === StepStatus.FAILED) ||
+        s.hooks.some(hook => hook.status === StepStatus.FAILED),
+    ).length
+    const cancelled = scenarios.filter(
+      s =>
+        s.steps.some(step => step.status === StepStatus.SKIPPED) ||
+        s.hooks.some(hook => hook.status === StepStatus.SKIPPED),
+    ).length
+    const unknown = scenarios.length - passed - failed - cancelled
+
+    return {
+      feature: feature.name,
+      passed,
+      failed,
+      cancelled,
+      unknown,
+      total: scenarios.length,
+    }
+  })
+
+  const nanoSecondsToSeconds = (nanoSeconds: number) => {
+    return (nanoSeconds / 1000000000).toFixed(2)
+  }
+
+  // Calculate duration chart data
+  const durationData = report.features.map(feature => {
+    const totalDuration = feature.scenarios.reduce((total, scenario) => {
+      const scenarioDuration =
+        scenario.steps.reduce((stepTotal, step) => stepTotal + Number(step.duration), 0) +
+        scenario.hooks.reduce((hookTotal, hook) => hookTotal + Number(hook.duration), 0)
+      return total + scenarioDuration
+    }, 0)
+    return {
+      feature: feature.name,
+      duration: Number(nanoSecondsToSeconds(totalDuration)), // Convert nanoseconds to seconds
+    }
+  })
+
+  return (
+    <>
+      <div className="flex justify-between">
+        <div>
+          <PageHeader className="mb-2 flex items-center gap-2 text-3xl">
+            <div>
+              <span>Test Run Report: </span>
+              <span>{report.testRun.name}</span>
+            </div>
+            {testRunResultToBadge(testRun.result)}
+          </PageHeader>
+          <div className="flex gap-2">
+            {testRun.completedAt && (
+              <div className="flex items-center gap-1 text-sm text-gray-400">
+                <Calendar className="h-4 w-4" />
+                {formatDateTime(testRun.completedAt)}
+              </div>
+            )}
+            {testRun.completedAt && testRun.startedAt && (
+              <div className="flex items-center gap-1 text-sm text-gray-400">
+                <Clock className="h-4 w-4" />
+                {formatDuration(testRun.startedAt, testRun.completedAt)}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex w-1/2 justify-between gap-1">
+          <ReportMetricCard title="Total Tests" value={totalTests.toString()} />
+          <ReportMetricCard title="Passed" value={passedTests.toString()} />
+          <ReportMetricCard title="Failed" value={failedTests.toString()} />
+        </div>
+      </div>
+      <Separator className="my-4 bg-muted" />
+      <div className="flex gap-6">
+        <Card className="flex h-[420px] min-w-0 flex-1 flex-col">
+          <CardHeader className="flex-shrink-0">
+            <div className="flex items-center gap-2">
+              <Info className="h-6 w-6" />
+              <CardTitle className="text-lg font-semibold">Configuration</CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent className="flex flex-1 flex-col gap-6 overflow-y-auto overflow-x-hidden text-gray-200">
+            <div className="flex items-center justify-between gap-2 text-sm">
+              <span>Environment Name</span>
+              <span className="font-medium">{testRun.environment.name}</span>
+            </div>
+            <div className="flex items-center justify-between gap-2 text-sm">
+              <span>Environment Base URL</span>
+              <span className="font-medium">{testRun.environment.baseUrl}</span>
+            </div>
+            <div className="flex items-center justify-between gap-2 text-sm">
+              <span>Environment API Base URL</span>
+              <span className="font-medium">{testRun.environment.apiBaseUrl || '-'}</span>
+            </div>
+            <div className="flex items-center justify-between gap-2 text-sm">
+              <span>Test Workers Count</span>
+              <span className="font-medium">{testRun.testWorkersCount || 1}</span>
+            </div>
+            <div className="flex items-center justify-between gap-2 text-sm">
+              <span>Browser Engine</span>
+              <span className="font-medium">{browserEngineToBadge(testRun.browserEngine)}</span>
+            </div>
+            <div className="flex items-center justify-between gap-2 text-sm">
+              <span>Test Run Status</span>
+              <span className="font-medium">{testRunStatusToBadge(testRun.status)}</span>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="flex h-[420px] min-w-0 flex-1 flex-col">
+          <CardHeader className="flex-shrink-0">
+            <CardTitle>Visualizations</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-1 flex-col overflow-hidden">
+            <Tabs defaultValue="overview" className="flex min-w-0 flex-1 flex-col overflow-hidden">
+              <TabsList className="flex-shrink-0">
+                <TabsTrigger value="overview">Overview</TabsTrigger>
+                <TabsTrigger value="feature">Feature</TabsTrigger>
+                <TabsTrigger value="duration">Duration</TabsTrigger>
+              </TabsList>
+              <TabsContent value="overview" className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
+                <OverviewChart config={overViewPieChartConfig} data={overviewData} />
+              </TabsContent>
+              <TabsContent value="feature" className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
+                <FeatureChart config={resultByFeatureBarChartConfig} data={featureData} />
+              </TabsContent>
+              <TabsContent value="duration" className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
+                <DurationChart config={durationByFeatureBarChartConfig} data={durationData} />
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+      </div>
+      <Separator className="my-4 bg-muted" />
+      <ReportViewTable report={report} />
+    </>
+  )
+}
+
+export default ViewReport