Add Suite Live View, Add Test Duplication

Author: maticzav

eslint.config.mjs

@@ -69,6 +69,15 @@ const eslintConfig = [
           caughtErrorsIgnorePattern: '^_$',
         },
       ],
+
+      'eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_$',
+          varsIgnorePattern: '^_$',
+          caughtErrorsIgnorePattern: '^_$',
+        },
+      ],
     },
   },
 ]

src/app/page.tsx

@@ -87,7 +87,7 @@ function CreateSuiteDialog() {
     <Dialog>
       <DialogTrigger asChild>
         <Button variant="outline" className="ml-auto">
-          <Plus className="w-4 h-4" />
+          <Plus className="size-4" />
           Create Suite
         </Button>
       </DialogTrigger>
@@ -130,7 +130,7 @@ function ImportSuiteDialog() {
     <Dialog>
       <DialogTrigger asChild>
         <Button variant="outline" className="ml-auto">
-          <Plus className="w-4 h-4" />
+          <Plus className="size-4" />
           Import Suite
         </Button>
       </DialogTrigger>

src/app/suite/[suiteId]/actions.tsx

@@ -193,3 +193,39 @@ export async function setNotificationsEmailAddressAction(suiteId: number, formDa
   revalidatePath(`/suite/${data.suiteId}`)
   redirect(`/suite/${data.suiteId}`, RedirectType.push)
 }
+
+export async function duplicateTestAction(suiteId: number, testId: number, _form: FormData) {
+  const test = await db.query.test.findFirst({
+    where: eq(schema.test.id, testId),
+    with: {
+      steps: true,
+    },
+  })
+
+  if (!test) {
+    throw new Error(`Test not found: ${testId}`)
+  }
+
+  const _ = await db.transaction(async (tx) => {
+    const [newTest] = await tx
+      .insert(schema.test)
+      .values({
+        label: `${test.label} (Copy)`,
+        evaluation: test.evaluation,
+        suiteId: suiteId,
+      })
+      .returning()
+
+    await tx.insert(schema.testStep).values(
+      test.steps.map((step) => ({
+        testId: newTest.id,
+        description: step.description,
+        order: step.order,
+      })),
+    )
+
+    return newTest
+  })
+
+  revalidatePath(`/suite/${suiteId}`)
+}

src/app/suite/[suiteId]/page.tsx

@@ -5,6 +5,7 @@ import { SuiteDetails } from '@/components/suite/SuiteDetails'
 import {
   createTestAction,
   deleteSuiteAction,
+  duplicateTestAction,
   runSuiteAction,
   setCronCadenceAction,
   setNotificationsEmailAddressAction,
@@ -31,6 +32,7 @@ export default async function SuitePage({ params }: { params: Promise<{ suiteId:
   const createTest = createTestAction.bind(null, suiteIdNum)
   const setCronCadence = setCronCadenceAction.bind(null, suiteIdNum)
   const setNotificationsEmailAddress = setNotificationsEmailAddressAction.bind(null, suiteIdNum)
+  const duplicateTest = duplicateTestAction.bind(null, suiteIdNum)
 
   return (
     <SuiteDetails
@@ -40,6 +42,7 @@ export default async function SuitePage({ params }: { params: Promise<{ suiteId:
       createTest={createTest}
       setCronCadence={setCronCadence}
       setNotificationsEmailAddress={setNotificationsEmailAddress}
+      duplicateTest={duplicateTest}
     />
   )
 }

src/components/suite/SuiteDetails.tsx

@@ -33,13 +33,15 @@ export function SuiteDetails({
   createTest,
   setCronCadence,
   setNotificationsEmailAddress,
+  duplicateTest,
 }: {
   suite: TSuite
   runSuite: (formData: FormData) => Promise<void>
   deleteSuite: (formData: FormData) => Promise<void>
   createTest: (formData: FormData) => Promise<void>
   setCronCadence: (cadence: 'hourly' | 'daily' | null, formData: FormData) => Promise<void>
   setNotificationsEmailAddress: (formData: FormData) => Promise<void>
+  duplicateTest: (testId: number, formData: FormData) => Promise<void>
 }) {
   const [_cadence, _setCadence] = useState<'hourly' | 'daily' | null>(suite.cronCadence)
 
@@ -90,7 +92,7 @@ export function SuiteDetails({
             actions={[<CreateTestDialog key="create-test-dialog" suiteId={suite.id} createTest={createTest} />]}
           />
 
-          <TestsTab suite={suite} suiteId={suite.id} />
+          <TestsTab suite={suite} suiteId={suite.id} duplicate={duplicateTest} />
         </div>
 
         <div className="col-span-1">
@@ -99,7 +101,7 @@ export function SuiteDetails({
             actions={[
               <form key="run-suite-form" action={runSuite}>
                 <Button type="submit" variant="outline">
-                  <Play className="w-4 h-4" />
+                  <Play className="size-4" />
                   Run Suite
                 </Button>
                 ,
@@ -181,7 +183,7 @@ function CreateTestDialog({ createTest }: { suiteId: number; createTest: (formDa
     <Dialog>
       <DialogTrigger asChild>
         <Button className="ml-auto" variant="outline">
-          <Plus className="w-4 h-4" />
+          <Plus className="size-4" />
           Create Test
         </Button>
       </DialogTrigger>

src/components/suite/TestsTab.tsx

@@ -1,22 +1,32 @@
 'use client'
 
+import { CopyPlus } from 'lucide-react'
 import Link from 'next/link'
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 
 import type { TSuite } from '../../app/suite/[suiteId]/loader'
-import { formatDate } from '../shared/utils'
+import { Button } from '../ui/button'
 
 /**
  * Shows a list of tests in a suite.
  */
-export function TestsTab({ suite, suiteId }: { suite: TSuite; suiteId: number }) {
+export function TestsTab({
+  suite,
+  suiteId,
+
+  duplicate,
+}: {
+  suite: TSuite
+  suiteId: number
+
+  duplicate: (testId: number, formData: FormData) => void
+}) {
   return (
     <Table>
       <TableHeader>
         <TableRow>
           <TableHead>Test</TableHead>
-          <TableHead>Created At</TableHead>
           <TableHead>{/* Actions */}</TableHead>
         </TableRow>
       </TableHeader>
@@ -30,15 +40,35 @@ export function TestsTab({ suite, suiteId }: { suite: TSuite; suiteId: number })
         )}
 
         {suite.tests.map((test) => (
-          <TableRow key={test.id}>
-            <TableCell>{test.label}</TableCell>
-            <TableCell suppressHydrationWarning>{formatDate(test.createdAt)}</TableCell>
-            <TableCell className="text-right">
-              <Link href={`/suite/${suiteId}/test/${test.id}`}>View</Link>
-            </TableCell>
-          </TableRow>
+          <TestRow key={test.id} test={test} suiteId={suiteId} duplicate={duplicate} />
         ))}
       </TableBody>
     </Table>
   )
 }
+
+const TestRow = ({
+  test,
+  suiteId,
+  duplicate,
+}: {
+  test: TSuite['tests'][number]
+  suiteId: number
+  duplicate: (testId: number, formData: FormData) => void
+}) => {
+  const action = duplicate.bind(null, test.id)
+
+  return (
+    <TableRow key={test.id}>
+      <TableCell>{test.label}</TableCell>
+      <TableCell className="text-right flex justify-end gap-1">
+        <form action={action}>
+          <Button variant="ghost" type="submit" className="-my-2">
+            <CopyPlus className="size-3.5" />
+          </Button>
+        </form>
+        <Link href={`/suite/${suiteId}/test/${test.id}`}>View</Link>
+      </TableCell>
+    </TableRow>
+  )
+}

src/components/suite/run/SuiteRunDetails.tsx

@@ -9,6 +9,7 @@ import { RunStatusIcon } from '@/components/shared/RunStatusIcon'
 import { SectionHeader } from '@/components/shared/SectionHeader'
 import { formatDate } from '@/components/shared/utils'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { DeepRequired } from '@/lib/types'
 
 export function SuiteRunDetails({ run }: { run: TSuiteRun }) {
   const { nOfPassingTests, nOfFailedTests } = useMemo(() => {
@@ -22,6 +23,19 @@ export function SuiteRunDetails({ run }: { run: TSuiteRun }) {
     )
   }, [run.testRuns])
 
+  const liveViews = useMemo(
+    () =>
+      run.testRuns
+        .map((testRun) => ({
+          id: testRun.id,
+          label: testRun.test.label,
+          status: testRun.status,
+          liveUrl: testRun.liveUrl,
+        }))
+        .filter((testRun): testRun is DeepRequired<typeof testRun> => testRun.liveUrl != null),
+    [run.testRuns],
+  )
+
   return (
     <Fragment>
       <PageHeader
@@ -71,6 +85,25 @@ export function SuiteRunDetails({ run }: { run: TSuiteRun }) {
         </TableBody>
       </Table>
 
+      <SectionHeader title="Live View" actions={[]} />
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {liveViews.map((liveView) => (
+          <Link
+            key={liveView.id}
+            href={`/suite/${run.suite.id}/test/${liveView.id}/run/${liveView.id}`}
+            className="block col-span-1 w-full relative border border-gray-300 rounded-xs overflow-hidden"
+          >
+            <iframe src={liveView.liveUrl} className="w-full h-auto" style={{ aspectRatio: '1280/1050' }} />
+
+            <div className="absolute bottom-0 right-0 p-2 bg-white flex items-center gap-2 rounded-tl-xs">
+              <RunStatusIcon status={liveView.status} />
+              <span className="text-sm font-medium">{liveView.label}</span>
+            </div>
+          </Link>
+        ))}
+      </div>
+
       <Polling poll={run.status === 'running' || run.status === 'pending'} />
     </Fragment>
   )