create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -0,0 +1,187 @@
+'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/blank/src/app/(dashboard-components)/data-card-grid.tsx

@@ -0,0 +1,13 @@
+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/blank/src/app/(dashboard-components)/data-card.tsx

@@ -0,0 +1,27 @@
+'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/blank/src/app/(dashboard-components)/execution-health-panel.tsx

@@ -0,0 +1,57 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { ChartConfig } from '@/components/ui/chart'
+import FeatureChart from '../(base)/reports/feature-chart'
+import type { TestSuiteExecutionData } from '@/services/dashboard/dashboard-service'
+
+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 counts by test suite across last 10 completed 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/blank/src/app/(dashboard-components)/ongoing-test-runs-card.tsx

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

package/templates/blank/src/app/(dashboard-components)/quick-actions-drawer.tsx

@@ -0,0 +1,45 @@
+'use client'
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Blocks, FileCheck, LayoutTemplate, ListChecks, TestTubeDiagonal, TestTubes } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+export default function QuickActionsDrawer() {
+    const router = useRouter()
+    return (
+        <Card id="container" className="w-fit border-gray-600/10 bg-gray-600/10 h-fit">
+            <CardHeader id="header">
+                <CardTitle className="text-primary">Quick Actions</CardTitle>
+                <CardDescription>Quickly create new entities to get started</CardDescription>
+            </CardHeader>
+            <CardContent id="content">
+                <div className="grid grid-cols-5 gap-4">
+                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/test-suites/create')}>
+                        <TestTubes />
+                        <span className="text-xs font-medium">Create Suite</span>
+                    </Button>
+                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/test-cases/create')}>
+                        <TestTubeDiagonal />
+                        <span className="text-xs font-medium">Create Test</span>
+                    </Button>
+                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/template-steps/create')}>
+                        <LayoutTemplate />
+                        <span className="text-xs font-medium">Create Step</span>
+                    </Button>
+                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/test-runs/create')}>
+                        <ListChecks />
+                        <span className="text-xs font-medium">Create Run</span>
+                    </Button>
+                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/template-test-cases/create')}>
+                        <Blocks />
+                        <span className="text-xs font-medium">Create Template</span>
+                    </Button>
+                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/reports')}>
+                        <FileCheck />
+                        <span className="text-xs font-medium">View Reports</span>
+                    </Button>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}

package/templates/blank/src/app/api/reports/steps/[stepId]/screenshot/route.test.ts

@@ -0,0 +1,83 @@
+import { Readable } from 'stream'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockAccess, mockCreateReadStream, mockFindUnique } = vi.hoisted(() => ({
+  mockAccess: vi.fn(),
+  mockCreateReadStream: vi.fn(),
+  mockFindUnique: vi.fn(),
+}))
+
+vi.mock('fs', () => ({
+  promises: {
+    access: mockAccess,
+  },
+  createReadStream: mockCreateReadStream,
+}))
+
+vi.mock('@/config/db-config', () => ({
+  default: {
+    reportStep: {
+      findUnique: mockFindUnique,
+    },
+  },
+}))
+
+vi.mock('@/lib/automation/automation-path-roots', () => ({
+  resolveStoredPath: vi.fn((storedPath: string) => `/resolved/${storedPath}`),
+}))
+
+import { GET } from './route'
+
+describe('report screenshot route', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('returns 404 when the report step is missing', async () => {
+    mockFindUnique.mockResolvedValue(null)
+
+    const response = await GET(new Request('http://localhost/api/reports/steps/step-1/screenshot'), {
+      params: Promise.resolve({ stepId: 'step-1' }),
+    })
+
+    expect(response.status).toBe(404)
+    await expect(response.json()).resolves.toEqual({ error: 'Report step not found' })
+  })
+
+  it('returns 404 when the step has no screenshot path', async () => {
+    mockFindUnique.mockResolvedValue({ screenshotPath: null })
+
+    const response = await GET(new Request('http://localhost/api/reports/steps/step-1/screenshot'), {
+      params: Promise.resolve({ stepId: 'step-1' }),
+    })
+
+    expect(response.status).toBe(404)
+    await expect(response.json()).resolves.toEqual({ error: 'Screenshot not available for this step' })
+  })
+
+  it('returns 404 when the screenshot file is missing', async () => {
+    mockFindUnique.mockResolvedValue({ screenshotPath: 'shots/step-1.png' })
+    mockAccess.mockRejectedValue(new Error('missing'))
+
+    const response = await GET(new Request('http://localhost/api/reports/steps/step-1/screenshot'), {
+      params: Promise.resolve({ stepId: 'step-1' }),
+    })
+
+    expect(response.status).toBe(404)
+    await expect(response.json()).resolves.toEqual({ error: 'Screenshot file not found' })
+  })
+
+  it('streams the screenshot when the file exists', async () => {
+    mockFindUnique.mockResolvedValue({ screenshotPath: 'shots/step-1.png' })
+    mockAccess.mockResolvedValue(undefined)
+    mockCreateReadStream.mockReturnValue(Readable.from([Buffer.from('png')]))
+
+    const response = await GET(new Request('http://localhost/api/reports/steps/step-1/screenshot'), {
+      params: Promise.resolve({ stepId: 'step-1' }),
+    })
+
+    expect(response.status).toBe(200)
+    expect(response.headers.get('Content-Type')).toBe('image/png')
+    await expect(response.arrayBuffer()).resolves.toBeInstanceOf(ArrayBuffer)
+  })
+})

package/templates/blank/src/app/api/reports/steps/[stepId]/screenshot/route.ts

@@ -0,0 +1,52 @@
+import { NextResponse } from 'next/server'
+import { promises as fs, createReadStream } from 'fs'
+import { Readable } from 'stream'
+import prisma from '@/config/db-config'
+import { resolveStoredPath } from '@/lib/automation/automation-path-roots'
+
+export const runtime = 'nodejs'
+
+export async function GET(_request: Request, { params }: { params: Promise<{ stepId: string }> }) {
+  const { stepId } = await params
+
+  try {
+    const step = await prisma.reportStep.findUnique({
+      where: { id: stepId },
+      select: {
+        screenshotPath: true,
+      },
+    })
+
+    if (!step) {
+      return NextResponse.json({ error: 'Report step not found' }, { status: 404 })
+    }
+
+    if (!step.screenshotPath) {
+      return NextResponse.json({ error: 'Screenshot not available for this step' }, { status: 404 })
+    }
+
+    const screenshotPath = resolveStoredPath(step.screenshotPath)
+
+    try {
+      await fs.access(screenshotPath)
+    } catch {
+      return NextResponse.json({ error: 'Screenshot file not found' }, { status: 404 })
+    }
+
+    return new NextResponse(Readable.toWeb(createReadStream(screenshotPath)) as ReadableStream, {
+      headers: {
+        'Content-Type': 'image/png',
+        'Cache-Control': 'private, max-age=60',
+      },
+    })
+  } catch (error) {
+    console.error(`[ReportScreenshot] Failed to serve screenshot for step ${stepId}:`, error)
+    return NextResponse.json(
+      {
+        error: 'Failed to load screenshot',
+        details: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 500 },
+    )
+  }
+}