create-appraise 0.1.0

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

@@ -0,0 +1,611 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import {
+  TestRun,
+  TestRunStatus,
+  TestRunResult,
+  Environment,
+  Tag,
+  TestRunTestCase,
+  TestRunTestCaseStatus,
+  TestRunTestCaseResult,
+  Report,
+} from '@prisma/client'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Progress } from '@/components/ui/progress'
+import { cn, formatDateTime } from '@/lib/utils'
+import {
+  CheckCircle,
+  XCircle,
+  LoaderCircle,
+  Clock,
+  ListEnd,
+  ClipboardCheck,
+  ClipboardX,
+  TestTubeDiagonal,
+  TestTubes,
+  Tag as TagIcon,
+  Tags,
+  Info,
+  Timer,
+  Binoculars,
+  ExternalLink,
+  Trash,
+} from 'lucide-react'
+import {
+  getTestRunByIdAction,
+  spawnTraceViewerAction,
+  checkTraceViewerStatusAction,
+  cancelTestRunAction,
+} from '@/actions/test-run/test-run-actions'
+import { Button } from '@/components/ui/button'
+import { AnimatePresence, motion } from 'motion/react'
+import { toast } from '@/hooks/use-toast'
+
+interface TestRunDetailsProps {
+  testRun: TestRun & {
+    testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+    tags: Tag[]
+    environment: Environment
+    reports: Report[]
+  }
+}
+
+export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps) {
+  const [testRun, setTestRun] = useState(initialTestRun)
+  const [loadingTraceViewer, setLoadingTraceViewer] = useState<string | null>(null)
+  const [runningTraceViewers, setRunningTraceViewers] = useState<Set<string>>(new Set())
+  const [isCancelling, setIsCancelling] = useState(false)
+  const runningTraceViewersRef = useRef<Set<string>>(new Set())
+
+  // Keep ref in sync with state
+  useEffect(() => {
+    runningTraceViewersRef.current = runningTraceViewers
+  }, [runningTraceViewers])
+
+  // Poll for status updates while test run is running
+  useEffect(() => {
+    // Only poll if test run is not completed
+    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
+        }
+        // TypeScript now knows updatedTestRun is defined - cast to proper type
+        const typedTestRun = updatedTestRun as TestRun & {
+          testCases: (TestRunTestCase & { testCase: { title: string; description: string } })[]
+          tags: Tag[]
+          environment: Environment
+          reports: Report[]
+        }
+        setTestRun(typedTestRun)
+        // Stop polling if test run is completed
+        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])
+  const getStatusIcon = () => {
+    switch (testRun.status) {
+      case TestRunStatus.QUEUED:
+        return <ListEnd className="h-4 w-4" />
+      case TestRunStatus.RUNNING:
+        return <LoaderCircle className="h-4 w-4 animate-spin" />
+      case TestRunStatus.COMPLETED:
+        return testRun.result === TestRunResult.PASSED ? (
+          <CheckCircle className="h-4 w-4" />
+        ) : (
+          <XCircle className="h-4 w-4" />
+        )
+      case TestRunStatus.CANCELLED:
+        return <XCircle className="h-4 w-4" />
+      default:
+        return <Clock className="h-4 w-4" />
+    }
+  }
+
+  const getStatusColor = () => {
+    switch (testRun.status) {
+      case TestRunStatus.QUEUED:
+        return 'bg-gray-500'
+      case TestRunStatus.RUNNING:
+        return 'bg-blue-500'
+      case TestRunStatus.COMPLETED:
+        return testRun.result === TestRunResult.PASSED ? 'bg-green-700' : 'bg-red-500'
+      case TestRunStatus.CANCELLED:
+        return 'bg-red-500'
+      default:
+        return 'bg-gray-500'
+    }
+  }
+
+  const getStatusText = () => {
+    switch (testRun.status) {
+      case TestRunStatus.QUEUED:
+        return 'Queued'
+      case TestRunStatus.RUNNING:
+        return 'Running'
+      case TestRunStatus.COMPLETED:
+        return 'Completed'
+      case TestRunStatus.CANCELLED:
+        return 'Cancelled'
+      default:
+        return 'Unknown'
+    }
+  }
+
+  const getResultText = () => {
+    switch (testRun.result) {
+      case TestRunResult.PENDING:
+        return 'Pending'
+      case TestRunResult.PASSED:
+        return 'Passed'
+      case TestRunResult.FAILED:
+        return 'Failed'
+      case TestRunResult.CANCELLED:
+        return 'Cancelled'
+      default:
+        return 'Unknown'
+    }
+  }
+
+  const getFormattedTestRunTestCaseStatus = (status: TestRunTestCaseStatus) => {
+    switch (status) {
+      case TestRunTestCaseStatus.PENDING:
+        return (
+          <div className="flex min-w-20 items-center gap-2 p-1.5">
+            <LoaderCircle className="h-4 w-4 animate-spin" />
+            <span>Pending</span>
+          </div>
+        )
+      case TestRunTestCaseStatus.RUNNING:
+        return (
+          <div className="flex min-w-20 items-center gap-2 p-1.5">
+            <LoaderCircle className="h-4 w-4 animate-spin" />
+            <span>Running</span>
+          </div>
+        )
+      case TestRunTestCaseStatus.COMPLETED:
+        return (
+          <div className="flex min-w-20 items-center gap-2 p-1.5">
+            <CheckCircle className="h-4 w-4 text-green-500" />
+            <span>Completed</span>
+          </div>
+        )
+      case TestRunTestCaseStatus.CANCELLED:
+        return (
+          <div className="flex min-w-20 items-center gap-2 p-1.5">
+            <XCircle className="h-4 w-4" />
+            <span>Cancelled</span>
+          </div>
+        )
+      default:
+        return (
+          <div className="flex min-w-20 items-center gap-2 p-1.5">
+            <Clock className="h-4 w-4" />
+            <span>Unknown</span>
+          </div>
+        )
+    }
+  }
+
+  const getFormattedTestRunTestCaseResult = (result: TestRunTestCaseResult) => {
+    switch (result) {
+      case TestRunTestCaseResult.PASSED:
+        return (
+          <div className="flex min-w-20 items-center gap-2 p-1.5">
+            <ClipboardCheck className="h-4 w-4 text-green-500" />
+            <span>Passed</span>
+          </div>
+        )
+      case TestRunTestCaseResult.FAILED:
+        return (
+          <div className="flex min-w-20 items-center gap-2 p-1.5">
+            <ClipboardX className="h-4 w-4 text-red-500" />
+            <span>Failed</span>
+          </div>
+        )
+      case TestRunTestCaseResult.UNTESTED:
+        return (
+          <div className="flex min-w-20 items-center gap-2 p-1.5">
+            <Clock className="h-4 w-4" />
+            <span>Untested</span>
+          </div>
+        )
+      default:
+        return (
+          <div className="flex min-w-20 items-center gap-2 p-1.5">
+            <Clock className="h-4 w-4" />
+            <span>Unknown</span>
+          </div>
+        )
+    }
+  }
+
+  // Calculate progress
+  const totalTests = testRun.testCases.length
+  const completedTests = testRun.testCases.filter(
+    testCase =>
+      testCase.status === TestRunTestCaseStatus.COMPLETED || testCase.status === TestRunTestCaseStatus.CANCELLED,
+  ).length
+  const progressPercentage = totalTests > 0 ? (completedTests / totalTests) * 100 : 0
+
+  const handleViewTrace = async (testCaseId: string) => {
+    setLoadingTraceViewer(testCaseId)
+    try {
+      const response = await spawnTraceViewerAction(testRun.runId, testCaseId)
+      if (response.error) {
+        console.error('Error spawning trace viewer:', response.error)
+        // TODO: Show error toast/notification to user
+        setLoadingTraceViewer(null)
+      } else {
+        // Trace viewer spawned successfully, mark it as running
+        setRunningTraceViewers(prev => new Set(prev).add(testCaseId))
+        setLoadingTraceViewer(null)
+      }
+    } catch (error) {
+      console.error('Error spawning trace viewer:', error)
+      // TODO: Show error toast/notification to user
+      setLoadingTraceViewer(null)
+    }
+  }
+
+  // Poll for trace viewer status for test cases that have trace viewers
+  useEffect(() => {
+    const failedTestCasesWithTraces = testRun.testCases.filter(
+      tc => tc.result === TestRunTestCaseResult.FAILED && tc.tracePath,
+    )
+
+    if (failedTestCasesWithTraces.length === 0) {
+      return
+    }
+
+    let isMounted = true
+
+    const checkTraceViewers = async () => {
+      // Get current running trace viewers from ref
+      const currentRunning = runningTraceViewersRef.current
+
+      if (!currentRunning || currentRunning.size === 0) {
+        return
+      }
+
+      // Check each test case asynchronously
+      const checkPromises = Array.from(currentRunning).map(async testCaseId => {
+        const testCase = failedTestCasesWithTraces.find(tc => tc.id === testCaseId)
+        if (!testCase) {
+          return { testCaseId, isRunning: false }
+        }
+
+        try {
+          const response = await checkTraceViewerStatusAction(testRun.runId, testCase.id)
+          const isRunning = response.data && (response.data as { isRunning: boolean }).isRunning
+          return { testCaseId, isRunning: isRunning ?? false }
+        } catch (error) {
+          console.error(`Error checking trace viewer status for test case ${testCase.id}:`, error)
+          // If we can't check, assume it's still running if we thought it was
+          return { testCaseId, isRunning: true }
+        }
+      })
+
+      const results = await Promise.all(checkPromises)
+      if (!isMounted) return
+
+      const actuallyRunning = new Set<string>()
+      results.forEach(({ testCaseId, isRunning }) => {
+        if (isRunning) {
+          actuallyRunning.add(testCaseId)
+        }
+      })
+
+      setRunningTraceViewers(prev => {
+        // Only update if there's a change
+        if (actuallyRunning.size === prev.size && Array.from(actuallyRunning).every(id => prev.has(id))) {
+          return prev
+        }
+        return actuallyRunning
+      })
+    }
+
+    // Only start polling if we have running trace viewers
+    if (runningTraceViewers.size === 0) {
+      return
+    }
+
+    // Check immediately
+    checkTraceViewers()
+
+    // Then poll every 2 seconds
+    const interval = setInterval(() => {
+      if (isMounted) {
+        checkTraceViewers()
+      }
+    }, 2000)
+
+    return () => {
+      isMounted = false
+      clearInterval(interval)
+    }
+  }, [testRun.runId, testRun.testCases, runningTraceViewers.size])
+
+  const handleCancelRun = async () => {
+    setIsCancelling(true)
+    try {
+      const response = await cancelTestRunAction(testRun.runId)
+      if (response.error) {
+        throw new Error(response.error)
+      } else {
+        toast({
+          title: 'Test run cancelled',
+          description: response.message,
+        })
+        await new Promise(resolve => setTimeout(resolve, 2000))
+        setIsCancelling(false)
+      }
+    } catch (error) {
+      toast({
+        title: 'Error canceling test run',
+        description: error instanceof Error ? error.message : 'An unexpected error occurred',
+        variant: 'destructive',
+      })
+      setIsCancelling(false)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            {testRun.status === TestRunStatus.RUNNING && (
+              <div className="flex items-center gap-2">
+                <LoaderCircle className="h-6 w-6 animate-spin text-blue-500" />
+                <span>Executing</span>
+              </div>
+            )}
+            {testRun.status === TestRunStatus.COMPLETED && (
+              <div className="flex items-center gap-2 duration-300 animate-in fade-in-0">
+                <CheckCircle className="h-6 w-6 text-green-500" />
+                <span>Finished</span>
+              </div>
+            )}
+            {testRun.status === TestRunStatus.CANCELLED && (
+              <div className="flex items-center gap-2 duration-300 animate-in fade-in-0">
+                <XCircle className="h-6 w-6 text-red-500 duration-300 animate-in fade-in-0" />
+                <span>Interrupted</span>
+              </div>
+            )}
+            {testRun.status === TestRunStatus.RUNNING && (
+              <Button
+                onClick={handleCancelRun}
+                disabled={isCancelling}
+                className="bg-red-500 font-bold text-white hover:bg-red-600"
+                size="sm"
+              >
+                {isCancelling ? (
+                  <>
+                    <LoaderCircle className="h-4 w-4 animate-spin" />
+                    Cancelling...
+                  </>
+                ) : (
+                  <>
+                    <Trash className="h-4 w-4" />
+                    <span>Cancel Run</span>
+                  </>
+                )}
+              </Button>
+            )}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-4">
+            <div className="flex-1">
+              <Progress value={progressPercentage} />
+            </div>
+            <div className="whitespace-nowrap text-sm font-medium">
+              {completedTests} of {totalTests} tests finished
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <Info className="mr-2 h-6 w-6" />
+              <h3 className="text-lg font-semibold">Test Run Information</h3>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Status</span>
+              <Badge variant="outline" className={`${getStatusColor()} py-1`}>
+                <span className="mr-1 text-white">{getStatusIcon()}</span>
+                <span className="text-white">{getStatusText()}</span>
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Result</span>
+              <Badge variant="outline">{getResultText()}</Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Run ID</span>
+              <span className="font-mono text-sm">{testRun.runId}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Environment</span>
+              <span className="text-sm">{testRun.environment.name}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Browser</span>
+              <span className="text-sm">{testRun.browserEngine}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Workers</span>
+              <span className="text-sm">{testRun.testWorkersCount || 1}</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <Timer className="mr-2 h-6 w-6" />
+              <h3 className="text-lg font-semibold">Timing</h3>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Started At</span>
+              <span className="text-sm">{formatDateTime(testRun.startedAt)}</span>
+            </div>
+            {testRun.completedAt && (
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">Completed At</span>
+                <span className="text-sm">{formatDateTime(testRun.completedAt)}</span>
+              </div>
+            )}
+            {testRun.completedAt && (
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">Duration</span>
+                <span className="text-sm">
+                  {Math.round((testRun.completedAt.getTime() - testRun.startedAt.getTime()) / 1000)}s
+                </span>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="md:col-span-2">
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <Tags className="mr-2 h-6 w-6" />
+              <h3 className="text-lg font-semibold">Tags</h3>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {testRun.tags.length > 0 ? (
+              <div className="flex flex-wrap gap-2">
+                {testRun.tags.map(tag => (
+                  <Badge key={tag.id} variant="outline" className="bg-gray-700 text-white">
+                    <TagIcon className="mr-2 h-4 w-4 text-white" />
+                    <span className="text-sm">{tag.name}</span>
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <span className="text-sm text-muted-foreground">No tags</span>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="md:col-span-2">
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <TestTubes className="mr-2 h-6 w-6" />
+              <h3 className="text-lg font-semibold">Test Cases ({testRun.testCases.length})</h3>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {testRun.testCases.length > 0 ? (
+              <div className="space-y-2">
+                {testRun.testCases.map(testCase => (
+                  <div
+                    key={testCase.id}
+                    className="flex items-center justify-between rounded-md bg-muted p-2 shadow-md"
+                  >
+                    <div className="flex items-center gap-2">
+                      <TestTubeDiagonal
+                        className={cn(
+                          'mr-2 h-6 w-6 text-white',
+                          testCase.result === TestRunTestCaseResult.PASSED
+                            ? 'text-green-500'
+                            : testCase.result === TestRunTestCaseResult.FAILED
+                              ? 'text-red-500'
+                              : testCase.result === TestRunTestCaseResult.UNTESTED
+                                ? 'text-blue-500'
+                                : 'text-gray-500',
+                        )}
+                      />
+                      <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>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline" className="bg-gray-700 text-xs text-white">
+                        {getFormattedTestRunTestCaseStatus(testCase.status)}
+                      </Badge>
+                      <Badge variant="outline" className="bg-gray-700 text-xs text-white">
+                        {getFormattedTestRunTestCaseResult(testCase.result)}
+                      </Badge>
+                      {testCase.result === TestRunTestCaseResult.FAILED && testCase.tracePath && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleViewTrace(testCase.id)}
+                          disabled={loadingTraceViewer === testCase.id || runningTraceViewers.has(testCase.id)}
+                          className="w-28 bg-transparent text-xs"
+                        >
+                          <AnimatePresence mode="wait" initial={false}>
+                            <motion.div
+                              key={
+                                loadingTraceViewer === testCase.id
+                                  ? 'opening'
+                                  : runningTraceViewers.has(testCase.id)
+                                    ? 'running'
+                                    : 'idle'
+                              }
+                              initial={{ opacity: 0, y: 4 }}
+                              animate={{ opacity: 1, y: 0 }}
+                              exit={{ opacity: 0, y: -4 }}
+                              transition={{ duration: 0.15 }}
+                              className="flex w-full items-center justify-center gap-1"
+                            >
+                              {loadingTraceViewer === testCase.id ? (
+                                <>
+                                  <ExternalLink className="h-3 w-3 animate-pulse text-gray-500" />
+                                  Opening
+                                </>
+                              ) : runningTraceViewers.has(testCase.id) ? (
+                                <>
+                                  <LoaderCircle className="text-white-500 h-3 w-3 animate-spin" />
+                                  Running
+                                </>
+                              ) : (
+                                <>
+                                  <Binoculars className="h-3 w-3 text-blue-500" />
+                                  View Trace
+                                </>
+                              )}
+                            </motion.div>
+                          </AnimatePresence>
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <span className="text-sm text-muted-foreground">No test cases</span>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}