create-appraisejs 0.1.6 → 0.1.8-alpha

package/templates/default/src/app/(dashboard-components)/data-card.tsx

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

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

@@ -1,87 +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>
-  )
-}
+'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/default/src/app/(dashboard-components)/quick-actions-drawer.tsx

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