create-appraisejs 0.3.0-alpha.0 → 0.3.0

package/templates/starter/src/app/(base)/modules/module-helpers.ts

@@ -0,0 +1,64 @@
+import { ROOT_MODULE_UUID, moduleSchema, type Module as ModuleFormValues } from '@/constants/form-opts/module-form-opts'
+import type { ModuleWithParent } from '@/services/module/module-service'
+import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
+
+export type ModuleTableRow = ModuleWithParent
+
+export type ModuleParentOption = {
+  id: string
+  name: string
+}
+
+export type ModuleFormSubmitAction = (
+  _prev: unknown,
+  value: ModuleFormValues,
+  id?: string,
+) => Promise<ActionResponse>
+
+export const moduleFieldValidators = {
+  name: moduleSchema.shape.name,
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || response.message || 'Unable to save module.'
+}
+
+export function getModuleParentOptions(modules: ModuleTableRow[], excludedId?: string): ModuleParentOption[] {
+  return modules
+    .filter(module => module.id !== excludedId)
+    .map(module => ({
+      id: module.id,
+      name: module.name,
+    }))
+}
+
+export function getModuleFormParentId(parentId: string | null | undefined) {
+  return parentId ?? ROOT_MODULE_UUID
+}
+
+function isModuleParent(value: unknown): value is ModuleTableRow['parent'] {
+  return value === null || (typeof value === 'object' && value !== null && 'name' in value && typeof value.name === 'string')
+}
+
+function isModuleTableRow(value: unknown): value is ModuleTableRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    typeof value.id === 'string' &&
+    'name' in value &&
+    typeof value.name === 'string' &&
+    'parentId' in value &&
+    (typeof value.parentId === 'string' || value.parentId === null) &&
+    'createdAt' in value &&
+    value.createdAt instanceof Date &&
+    'updatedAt' in value &&
+    value.updatedAt instanceof Date &&
+    'parent' in value &&
+    isModuleParent(value.parent)
+  )
+}
+
+export function getModuleTableRows(data: ActionResponseData | undefined): ModuleTableRow[] {
+  return Array.isArray(data) ? data.filter(isModuleTableRow) : []
+}

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

@@ -0,0 +1,81 @@
+'use client'
+
+import TableActions from '@/components/table/table-actions'
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { Checkbox } from '@/components/ui/checkbox'
+import { deleteModuleAction } from '@/actions/modules/module-actions'
+import { buildModulePath } from '@/lib/path-helpers/module-path'
+import { formatDateTime } from '@/lib/utils'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { type ModuleTableRow } from './module-helpers'
+
+export const moduleTableCols: ColumnDef<ModuleTableRow>[] = [
+  {
+    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 path = buildModulePath(table.options.data, row.original)
+      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/starter/src/app/(base)/modules/module-table.tsx

@@ -0,0 +1,25 @@
+import { DataTable } from '@/components/ui/data-table'
+import { getAllModulesAction, deleteModuleAction } from '@/actions/modules/module-actions'
+import { moduleTableCols } from './module-table-columns'
+import { getModuleTableRows } from './module-helpers'
+
+const ModuleTable = async () => {
+  const { data: modules } = await getAllModulesAction()
+  const moduleRows = getModuleTableRows(modules)
+
+  return (
+    <>
+      <DataTable
+        columns={moduleTableCols}
+        data={moduleRows}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/modules/create"
+        modifyLink="/modules/modify"
+        deleteAction={deleteModuleAction}
+      />
+    </>
+  )
+}
+
+export default ModuleTable

package/templates/starter/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 { Metadata } from 'next'
+import { getModuleTableRows } from './module-helpers'
+
+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 = getModuleTableRows(modules)
+
+  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/starter/src/app/(base)/reports/[id]/page.tsx

@@ -0,0 +1,284 @@
+import PageHeader from '@/components/typography/page-header'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import { BrowserEngine, TestRunResult, TestRunStatus } from '@prisma/client'
+import { Calendar, ChartLine, CheckCircle, Clock, 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 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'
+import {
+  browserIcons,
+  durationByFeatureBarChartConfig,
+  formatDateTime,
+  formatDuration,
+  getDurationData,
+  getFeatureData,
+  getOverviewData,
+  getReportMetrics,
+  isValidReportDetail,
+  overViewPieChartConfig,
+  resultByFeatureBarChartConfig,
+  type ReportDetailWithRelations,
+} from '../report-detail-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | View Report',
+  description: 'View report details and live logs',
+}
+
+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 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()
+  }
+
+  if (!isValidReportDetail(reportResponse.data)) {
+    notFound()
+  }
+
+  const report: ReportDetailWithRelations = reportResponse.data
+  const testRun = report.testRun
+
+  const { totalTests, passedTests, failedTests, untestedTests } = getReportMetrics(report)
+  const overviewData = getOverviewData(report)
+  const featureData = getFeatureData(report)
+  const durationData = getDurationData(report)
+
+  return (
+    <>
+
+      <div>
+        <div className="w-fit mb-2">
+          {testRunResultToBadge(testRun.result)}
+        </div>
+        <PageHeader className="mb-2 text-4xl">
+          <div>
+            <span>Test Run Report: </span>
+            <span>{report.testRun.name}</span>
+          </div>
+        </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="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <ReportMetricCard title="Total Tests" value={totalTests.toString()} />
+        <ReportMetricCard title="Passed" value={passedTests.toString()} />
+        <ReportMetricCard title="Failed" value={failedTests.toString()} />
+        <ReportMetricCard title="Untested" value={untestedTests.toString()} />
+      </div>
+      <Separator className="my-4 bg-muted" />
+      <div className="flex gap-6">
+        <Card className="flex h-[420px] min-w-0 flex-1 flex-col shadow-none bg-gray-500/10 border-none">
+          <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 shadow-none bg-gray-500/10 border-none">
+          <CardHeader className="flex-shrink-0 ">
+            <div className="flex items-center gap-2">
+              <ChartLine className="h-6 w-6" />
+              <CardTitle className="text-lg font-semibold">Visualizations</CardTitle>
+            </div>
+          </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 bg-gray-500/15 w-fit mx-auto p-2">
+                <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

package/templates/starter/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/starter/src/app/(base)/reports/feature-chart.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+
+interface FeatureChartProps {
+  config: ChartConfig
+  /** Stacked segments are counts; `total` should equal the sum of the four outcome columns (used for the value axis). */
+  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/starter/src/app/(base)/reports/overview-chart.tsx

@@ -0,0 +1,49 @@
+'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>
+    </>
+  )
+}