create-appraisejs 0.1.10-alpha.8 → 0.2.0-alpha.1

package/templates/default/src/components/test-run/download-logs-button.tsx

@@ -1,99 +1,92 @@
-'use client'
-
-import { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { Download, LoaderCircle } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
-import { toast } from '@/hooks/use-toast'
-
-interface DownloadLogsButtonProps {
-  testRunId: string
-  className?: string
-}
-
-export function DownloadLogsButton({ testRunId, className }: DownloadLogsButtonProps) {
-  const [isDownloading, setIsDownloading] = useState(false)
-
-  const handleDownload = async () => {
-    setIsDownloading(true)
-    try {
-      const response = await fetch(`/api/test-runs/${testRunId}/download`)
-      
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
-        throw new Error(errorData.error || `Failed to download: ${response.statusText}`)
-      }
-
-      // Get the filename from Content-Disposition header or use a default
-      const contentDisposition = response.headers.get('Content-Disposition')
-      let filename = `test-run-${testRunId}.zip`
-      if (contentDisposition) {
-        const filenameMatch = contentDisposition.match(/filename="?(.+?)"?$/)
-        if (filenameMatch) {
-          filename = filenameMatch[1]
-        }
-      }
-
-      // Create a blob from the response
-      const blob = await response.blob()
-      
-      // Create a download link and trigger it
-      const url = window.URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = filename
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      window.URL.revokeObjectURL(url)
-
-      toast({
-        title: 'Download started',
-        description: 'Logs and traces are being downloaded',
-      })
-    } catch (error) {
-      console.error('[DownloadLogsButton] Error downloading logs:', error)
-      toast({
-        title: 'Download failed',
-        description: error instanceof Error ? error.message : 'Failed to download logs and traces',
-        variant: 'destructive',
-      })
-    } finally {
-      setIsDownloading(false)
-    }
-  }
-
-  return (
-    <Button
-      onClick={handleDownload}
-      disabled={isDownloading}
-      variant="outline"
-      size="sm"
-      className={className}
-    >
-      <AnimatePresence mode="wait" initial={false}>
-        <motion.div
-          key={isDownloading ? 'downloading' : 'idle'}
-          initial={{ opacity: 0, y: 4 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -4 }}
-          transition={{ duration: 0.15 }}
-          className="flex items-center gap-2"
-        >
-          {isDownloading ? (
-            <>
-              <LoaderCircle className="h-4 w-4 animate-spin" />
-              Downloading...
-            </>
-          ) : (
-            <>
-              <Download className="h-4 w-4" />
-              Download Logs & Traces
-            </>
-          )}
-        </motion.div>
-      </AnimatePresence>
-    </Button>
-  )
-}
-
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Download, LoaderCircle } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
+import { toast } from '@/hooks/use-toast'
+
+interface DownloadLogsButtonProps {
+  testRunId: string
+  className?: string
+}
+
+export function DownloadLogsButton({ testRunId, className }: DownloadLogsButtonProps) {
+  const [isDownloading, setIsDownloading] = useState(false)
+
+  const handleDownload = async () => {
+    setIsDownloading(true)
+    try {
+      const response = await fetch(`/api/test-runs/${testRunId}/download`)
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
+        throw new Error(errorData.error || `Failed to download: ${response.statusText}`)
+      }
+
+      // Get the filename from Content-Disposition header or use a default
+      const contentDisposition = response.headers.get('Content-Disposition')
+      let filename = `test-run-${testRunId}.zip`
+      if (contentDisposition) {
+        const filenameMatch = contentDisposition.match(/filename="?(.+?)"?$/)
+        if (filenameMatch) {
+          filename = filenameMatch[1]
+        }
+      }
+
+      // Create a blob from the response
+      const blob = await response.blob()
+
+      // Create a download link and trigger it
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      window.URL.revokeObjectURL(url)
+
+      toast({
+        title: 'Download started',
+        description: 'Run artifacts are being downloaded',
+      })
+    } catch (error) {
+      console.error('[DownloadLogsButton] Error downloading logs:', error)
+      toast({
+        title: 'Download failed',
+        description: error instanceof Error ? error.message : 'Failed to download run artifacts',
+        variant: 'destructive',
+      })
+    } finally {
+      setIsDownloading(false)
+    }
+  }
+
+  return (
+    <Button onClick={handleDownload} disabled={isDownloading} variant="outline" size="sm" className={className}>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div
+          key={isDownloading ? 'downloading' : 'idle'}
+          initial={{ opacity: 0, y: 4 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -4 }}
+          transition={{ duration: 0.15 }}
+          className="flex items-center gap-2"
+        >
+          {isDownloading ? (
+            <>
+              <LoaderCircle className="h-4 w-4 animate-spin" />
+              Downloading...
+            </>
+          ) : (
+            <>
+              <Download className="h-4 w-4" />
+              Download Run Artifacts
+            </>
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </Button>
+  )
+}

package/templates/default/src/components/test-run/log-viewer.tsx

@@ -6,7 +6,7 @@ import { Badge } from '@/components/ui/badge'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { LoaderCircle, Wifi, WifiOff, CheckCircle, XCircle, Logs } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { getTestRunLogsAction, updateTestRunTestCaseStatusAction } from '@/actions/test-run/test-run-actions'
+import { getTestRunLogsAction } from '@/actions/test-run/test-run-actions'
 import { TestRunStatus } from '@prisma/client'
 import { DownloadLogsButton } from './download-logs-button'
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
@@ -278,19 +278,6 @@ export function LogViewer({ testRunId, status, className }: LogViewerProps) {
           `[LogViewer] Scenario ended: ${scenarioName} with status: ${status}${tracePath ? `, tracePath: ${tracePath}` : ''}`,
         )
 
-        // Update test case status in database
-        // This will gracefully handle test runs filtered by tags (no test cases)
-        const response = await updateTestRunTestCaseStatusAction(testRunId, scenarioName, status, tracePath)
-        if (response.error && response.status !== 200) {
-          // Only log as error if it's not a 200 status (which means it was skipped gracefully)
-          console.error('[LogViewer] Error updating test case status:', response.error)
-        } else if (response.status === 200) {
-          // Log success or graceful skip (200 status means it was handled correctly)
-          console.log(
-            `[LogViewer] ${response.message || `Successfully updated test case status for scenario: ${scenarioName}`}`,
-          )
-        }
-
         // Also add to logs for visibility
         setLogs(prev => [
           ...prev,

package/templates/default/src/components/test-run/test-run-details.tsx

@@ -46,7 +46,10 @@ import { toast } from '@/hooks/use-toast'
 
 interface TestRunDetailsProps {
   testRun: TestRun & {
-    testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+    testCases: (TestRunTestCase & {
+      testCase: { title: string; description: string }
+      testSuite: { id: string; name: string } | null
+    })[]
     tags: Tag[]
     environment: Environment
     reports: Report[]
@@ -81,7 +84,10 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
         }
         // TypeScript now knows updatedTestRun is defined - cast to proper type
         const typedTestRun = updatedTestRun as TestRun & {
-          testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+          testCases: (TestRunTestCase & {
+            testCase: { title: string; description: string }
+            testSuite: { id: string; name: string } | null
+          })[]
           tags: Tag[]
           environment: Environment
           reports: Report[]
@@ -544,6 +550,13 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
                       <div className="flex flex-col gap-1">
                         <span className="text-sm font-semibold">{testCase.testCase.title}</span>
                         <span className="text-xs text-muted-foreground">{testCase.testCase.description}</span>
+                        {testCase.testSuite && (
+                          <div className="pt-1">
+                            <Badge variant="outline" className="w-fit text-[11px]">
+                              Suite: {testCase.testSuite.name}
+                            </Badge>
+                          </div>
+                        )}
                       </div>
                     </div>
                     <div className="flex items-center gap-2">

package/templates/default/src/components/test-run/test-run-header.tsx

@@ -1,149 +1,149 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { ViewReportButton } from '@/components/test-run/view-report-button'
-import { TestRun, TestRunTestCase, Tag, Environment, TestRunStatus, Report } from '@prisma/client'
-
-interface TestRunHeaderProps {
-  initialTestRun: TestRun & {
-    testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
-    tags: Tag[]
-    environment: Environment
-    reports: Report[]
-  }
-}
-
-export function TestRunHeader({ initialTestRun }: TestRunHeaderProps) {
-  const [testRun, setTestRun] = useState(initialTestRun)
-
-  // Poll for status updates while test run is running or queued
-  useEffect(() => {
-    // Only poll if test run is not completed/cancelled
-    if (testRun.status === TestRunStatus.COMPLETED || testRun.status === TestRunStatus.CANCELLED) {
-      return
-    }
-
-    const pollInterval = setInterval(async () => {
-      try {
-        const { data: updatedTestRun, error } = await getTestRunByIdAction(testRun.id)
-        if (error || !updatedTestRun) {
-          console.error('Error polling test run status:', error)
-          return
-        }
-
-        const typedTestRun = updatedTestRun as TestRun & {
-          testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
-          tags: Tag[]
-          environment: Environment
-          reports: Report[]
-        }
-
-        // Update state with latest test run data
-        setTestRun(typedTestRun)
-
-        // Stop polling if test run is completed or cancelled
-        if (typedTestRun.status === TestRunStatus.COMPLETED || typedTestRun.status === TestRunStatus.CANCELLED) {
-          clearInterval(pollInterval)
-        }
-      } catch (error) {
-        console.error('Error polling test run status:', error)
-      }
-    }, 2000) // Poll every 2 seconds
-
-    return () => clearInterval(pollInterval)
-  }, [testRun.id, testRun.status])
-
-  // Listen for SSE exit events from LogViewer as a backup signal
-  useEffect(() => {
-    const handleTestRunExit = (event: CustomEvent<{ testRunId: string }>) => {
-      // Only handle events for this test run
-      if (event.detail.testRunId === testRun.runId) {
-        // Trigger a status refresh
-        getTestRunByIdAction(testRun.id)
-          .then(response => {
-            if (response.data && !response.error) {
-              const typedTestRun = response.data as TestRun & {
-                testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
-                tags: Tag[]
-                environment: Environment
-                reports: Report[]
-              }
-              setTestRun(typedTestRun)
-            }
-          })
-          .catch(error => {
-            console.error('Error refreshing test run status after exit event:', error)
-          })
-      }
-    }
-
-    // Listen for custom event dispatched by LogViewer
-    window.addEventListener('testrun:exit', handleTestRunExit as EventListener)
-
-    return () => {
-      window.removeEventListener('testrun:exit', handleTestRunExit as EventListener)
-    }
-  }, [testRun.id, testRun.runId])
-
-  // Poll for report updates after test run completes
-  useEffect(() => {
-    // Only poll if test run is completed (not cancelled) but no report exists yet
-    // Cancelled runs won't generate reports, so we don't poll for them
-    const shouldPoll = testRun.status === TestRunStatus.COMPLETED && testRun.reports.length === 0
-
-    if (!shouldPoll) {
-      return
-    }
-
-    // Poll for reports (they might be created asynchronously after test run completes)
-    const pollInterval = setInterval(async () => {
-      try {
-        const { data: updatedTestRun, error } = await getTestRunByIdAction(testRun.id)
-        if (error || !updatedTestRun) {
-          console.error('Error polling for report:', error)
-          return
-        }
-
-        const typedTestRun = updatedTestRun as TestRun & {
-          testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
-          tags: Tag[]
-          environment: Environment
-          reports: Report[]
-        }
-
-        // Update if reports are now available
-        if (typedTestRun.reports.length > 0) {
-          setTestRun(typedTestRun)
-          clearInterval(pollInterval)
-        }
-      } catch (error) {
-        console.error('Error polling for report:', error)
-      }
-    }, 2000) // Poll every 2 seconds
-
-    // Stop polling after 30 seconds to avoid infinite polling
-    const timeout = setTimeout(() => {
-      clearInterval(pollInterval)
-    }, 30000)
-
-    return () => {
-      clearInterval(pollInterval)
-      clearTimeout(timeout)
-    }
-  }, [testRun.id, testRun.status, testRun.reports.length])
-
-  return (
-    <div className="mb-8">
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex-1">
-          <PageHeader>Test Run Details</PageHeader>
-          <HeaderSubtitle>View test run execution details and live logs</HeaderSubtitle>
-        </div>
-        <ViewReportButton testRunStatus={testRun.status} reports={testRun.reports} className="mt-2" />
-      </div>
-    </div>
-  )
-}
+'use client'
+
+import { useEffect, useState } from 'react'
+import { getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { ViewReportButton } from '@/components/test-run/view-report-button'
+import { TestRun, TestRunTestCase, Tag, Environment, TestRunStatus, Report } from '@prisma/client'
+
+interface TestRunHeaderProps {
+  initialTestRun: TestRun & {
+    testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+    tags: Tag[]
+    environment: Environment
+    reports: Report[]
+  }
+}
+
+export function TestRunHeader({ initialTestRun }: TestRunHeaderProps) {
+  const [testRun, setTestRun] = useState(initialTestRun)
+
+  // Poll for status updates while test run is running or queued
+  useEffect(() => {
+    // Only poll if test run is not completed/cancelled
+    if (testRun.status === TestRunStatus.COMPLETED || testRun.status === TestRunStatus.CANCELLED) {
+      return
+    }
+
+    const pollInterval = setInterval(async () => {
+      try {
+        const { data: updatedTestRun, error } = await getTestRunByIdAction(testRun.id)
+        if (error || !updatedTestRun) {
+          console.error('Error polling test run status:', error)
+          return
+        }
+
+        const typedTestRun = updatedTestRun as TestRun & {
+          testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+          tags: Tag[]
+          environment: Environment
+          reports: Report[]
+        }
+
+        // Update state with latest test run data
+        setTestRun(typedTestRun)
+
+        // Stop polling if test run is completed or cancelled
+        if (typedTestRun.status === TestRunStatus.COMPLETED || typedTestRun.status === TestRunStatus.CANCELLED) {
+          clearInterval(pollInterval)
+        }
+      } catch (error) {
+        console.error('Error polling test run status:', error)
+      }
+    }, 2000) // Poll every 2 seconds
+
+    return () => clearInterval(pollInterval)
+  }, [testRun.id, testRun.status])
+
+  // Listen for SSE exit events from LogViewer as a backup signal
+  useEffect(() => {
+    const handleTestRunExit = (event: CustomEvent<{ testRunId: string }>) => {
+      // Only handle events for this test run
+      if (event.detail.testRunId === testRun.runId) {
+        // Trigger a status refresh
+        getTestRunByIdAction(testRun.id)
+          .then(response => {
+            if (response.data && !response.error) {
+              const typedTestRun = response.data as TestRun & {
+                testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+                tags: Tag[]
+                environment: Environment
+                reports: Report[]
+              }
+              setTestRun(typedTestRun)
+            }
+          })
+          .catch(error => {
+            console.error('Error refreshing test run status after exit event:', error)
+          })
+      }
+    }
+
+    // Listen for custom event dispatched by LogViewer
+    window.addEventListener('testrun:exit', handleTestRunExit as EventListener)
+
+    return () => {
+      window.removeEventListener('testrun:exit', handleTestRunExit as EventListener)
+    }
+  }, [testRun.id, testRun.runId])
+
+  // Poll for report updates after test run completes
+  useEffect(() => {
+    // Only poll if test run is completed (not cancelled) but no report exists yet
+    // Cancelled runs won't generate reports, so we don't poll for them
+    const shouldPoll = testRun.status === TestRunStatus.COMPLETED && testRun.reports.length === 0
+
+    if (!shouldPoll) {
+      return
+    }
+
+    // Poll for reports (they might be created asynchronously after test run completes)
+    const pollInterval = setInterval(async () => {
+      try {
+        const { data: updatedTestRun, error } = await getTestRunByIdAction(testRun.id)
+        if (error || !updatedTestRun) {
+          console.error('Error polling for report:', error)
+          return
+        }
+
+        const typedTestRun = updatedTestRun as TestRun & {
+          testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+          tags: Tag[]
+          environment: Environment
+          reports: Report[]
+        }
+
+        // Update if reports are now available
+        if (typedTestRun.reports.length > 0) {
+          setTestRun(typedTestRun)
+          clearInterval(pollInterval)
+        }
+      } catch (error) {
+        console.error('Error polling for report:', error)
+      }
+    }, 2000) // Poll every 2 seconds
+
+    // Stop polling after 30 seconds to avoid infinite polling
+    const timeout = setTimeout(() => {
+      clearInterval(pollInterval)
+    }, 30000)
+
+    return () => {
+      clearInterval(pollInterval)
+      clearTimeout(timeout)
+    }
+  }, [testRun.id, testRun.status, testRun.reports.length])
+
+  return (
+    <div className="mb-8">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1">
+          <PageHeader>Test Run Details</PageHeader>
+          <HeaderSubtitle>View test run execution details and live logs</HeaderSubtitle>
+        </div>
+        <ViewReportButton testRunStatus={testRun.status} reports={testRun.reports} className="mt-2" />
+      </div>
+    </div>
+  )
+}