Add Import & Export Functionality

Author: maticzav

src/app/actions.ts

@@ -7,6 +7,8 @@ import z from 'zod/v4'
 import { db } from '@/lib/db/db'
 import * as schema from '@/lib/db/schema'
 
+import { zImportSuiteFileSchema } from './types'
+
 const zCreateSuite = z.object({
   name: z.string().min(1),
 })
@@ -27,3 +29,63 @@ export async function createSuiteAction(form: FormData): Promise<void> {
   revalidatePath('/')
   redirect(`/suite/${newSuite.id}`)
 }
+
+const MAX_BYTES = 1024 * 1024 * 10 // 10MB
+
+export async function importSuiteAction(form: FormData): Promise<void> {
+  const file = form.get('file')
+  if (!(file instanceof File)) {
+    throw new Error('No file uploaded.')
+  }
+  if (file.size === 0) {
+    throw new Error('File is empty.')
+  }
+  if (file.size > MAX_BYTES) {
+    throw new Error(`File too large. Limit is ${MAX_BYTES} bytes.`)
+  }
+
+  let raw: unknown
+  try {
+    const text = await file.text()
+    raw = JSON.parse(text)
+  } catch {
+    throw new Error('Invalid JSON.')
+  }
+
+  const importedSuiteData = zImportSuiteFileSchema.parse(raw)
+
+  const dbImportedSuite = await db.transaction(async (tx) => {
+    const [newSuite] = await tx
+      .insert(schema.suite)
+      .values({
+        name: importedSuiteData.name,
+        cronCadence: importedSuiteData.cronCadence,
+        notificationsEmailAddress: importedSuiteData.notificationsEmailAddress,
+      })
+      .returning()
+
+    for (const test of importedSuiteData.tests) {
+      const [newTest] = await tx
+        .insert(schema.test)
+        .values({
+          evaluation: test.evaluation,
+          label: test.label,
+          suiteId: newSuite.id,
+        })
+        .returning()
+
+      for (const step of test.steps) {
+        await tx.insert(schema.testStep).values({
+          description: step.description,
+          order: step.order,
+          testId: newTest.id,
+        })
+      }
+    }
+
+    return newSuite
+  })
+
+  revalidatePath('/')
+  redirect(`/suite/${dbImportedSuite.id}`)
+}

src/app/api/export/[suiteId]/route.ts

@@ -0,0 +1,50 @@
+import { eq } from 'drizzle-orm'
+
+import type { TImportSuiteFile } from '@/app/types'
+import { zImportSuiteFileSchema } from '@/app/types'
+import { db } from '@/lib/db/db'
+import * as schema from '@/lib/db/schema'
+
+// https://nextjs.org/docs/app/api-reference/file-conventions/route
+export async function GET(request: Request, { params }: { params: Promise<{ suiteId: string }> }) {
+  const { suiteId } = await params
+
+  const suiteIdNum = parseInt(suiteId, 10)
+  if (isNaN(suiteIdNum)) {
+    throw new Error(`Invalid suite ID: ${suiteId}`)
+  }
+
+  const suite = await db.query.suite.findFirst({
+    where: eq(schema.suite.id, suiteIdNum),
+    with: {
+      tests: {
+        with: {
+          steps: true,
+        },
+      },
+    },
+  })
+
+  if (!suite) {
+    throw new Error(`Suite not found: ${suiteId}`)
+  }
+
+  // NOTE: We use this to check the type of the suite.
+  const json: TImportSuiteFile = suite
+
+  // Assuming you have a Zod schema for the suite export, e.g. import { suiteExportSchema } from '@/lib/validation/suiteExportSchema'
+  // You can use .parse() or .safeParse() to filter out unwanted fields.
+  // This will strip out fields not defined in the Zod schema (e.g. id, createdAt).
+
+  const filtered = zImportSuiteFileSchema.parse(json)
+  const raw = JSON.stringify(filtered, null, 2)
+
+  const blob = new Blob([raw], { type: 'application/json' })
+
+  return new Response(blob, {
+    headers: {
+      'Content-Disposition': `attachment; filename="${suite.name}.json"`,
+      'Content-Type': 'application/json',
+    },
+  })
+}

src/app/loader.ts

@@ -10,7 +10,13 @@ const MOCK_SUITE: TestSuiteDefinition = BROWSERUSE_DOCS_TEST_SUITE
 export async function loader() {
   const suites = await db.query.suite.findMany({
     orderBy: [desc(schema.suite.createdAt)],
-    with: { tests: true },
+    with: {
+      tests: true,
+      runs: {
+        orderBy: [desc(schema.suiteRun.createdAt)],
+        limit: 1,
+      },
+    },
   })
 
   // NOTE: We always seed the mock suite to make sure you can see something!
@@ -51,7 +57,13 @@ export async function loader() {
 
     return await db.query.suite.findMany({
       orderBy: [desc(schema.suite.createdAt)],
-      with: { tests: true },
+      with: {
+        tests: true,
+        runs: {
+          orderBy: [desc(schema.suiteRun.createdAt)],
+          limit: 1,
+        },
+      },
     })
   }
 

src/app/page.tsx

@@ -17,7 +17,7 @@ import {
 import { Input } from '@/components/ui/input'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 
-import { createSuiteAction } from './actions'
+import { createSuiteAction, importSuiteAction } from './actions'
 import { loader, type TSuite } from './loader'
 
 export const dynamic = 'force-dynamic'
@@ -36,14 +36,21 @@ export default async function Page() {
 
       {/* Suites List */}
 
-      <SectionHeader title="Test Suites" actions={[<CreateSuiteDialog key="create-suite-dialog" />]} />
+      <SectionHeader
+        title="Test Suites"
+        actions={[
+          //
+          <CreateSuiteDialog key="create-suite-dialog" />,
+          <ImportSuiteDialog key="import-suite-dialog" />,
+        ]}
+      />
 
       <Table>
         <TableHeader>
           <TableRow>
             <TableHead>Name</TableHead>
             <TableHead>Tests</TableHead>
-            <TableHead>Created</TableHead>
+            <TableHead>Created At</TableHead>
             <TableHead>Cron</TableHead>
             <TableHead>Last Run</TableHead>
             <TableHead>{/* Actions */}</TableHead>
@@ -63,7 +70,7 @@ export default async function Page() {
               <TableCell>{suite.tests.length} tests</TableCell>
               <TableCell>{formatDate(suite.createdAt)}</TableCell>
               <TableCell>{getCronLabel(suite.cronCadence)}</TableCell>
-              <TableCell>{suite.lastCronRunAt ? formatDate(suite.lastCronRunAt) : 'Never'}</TableCell>
+              <TableCell>{getLastRunLabel(suite)}</TableCell>
               <TableCell className="text-right">
                 <Link href={`/suite/${suite.id}`}>View</Link>
               </TableCell>
@@ -117,3 +124,43 @@ function getCronLabel(cronCadence: TSuite['cronCadence']) {
       return 'Never'
   }
 }
+
+function ImportSuiteDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" className="ml-auto">
+          <Plus className="w-4 h-4" />
+          Import Suite
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Import a test suite</DialogTitle>
+          <DialogDescription>Import a test suite from a JSON file.</DialogDescription>
+
+          <form action={importSuiteAction} className="space-y-4">
+            <div>
+              <label htmlFor="file" className="block text-sm font-medium text-gray-700 mb-1">
+                Suite File
+              </label>
+              <Input type="file" id="file" name="file" accept=".json" required />
+            </div>
+
+            <div className="flex justify-end gap-2">
+              <Button type="submit">Import</Button>
+            </div>
+          </form>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function getLastRunLabel(suite: { runs: { createdAt: Date }[] }) {
+  if (suite.runs.length === 0) {
+    return 'Never'
+  }
+
+  return formatDate(suite.runs[0].createdAt)
+}

src/app/types.ts

@@ -0,0 +1,21 @@
+import { z } from 'zod'
+
+const zImportSuiteStepSchema = z.object({
+  description: z.string(),
+  order: z.number(),
+})
+
+const zImportSuiteTestSchema = z.object({
+  label: z.string(),
+  evaluation: z.string(),
+  steps: zImportSuiteStepSchema.array(),
+})
+
+export const zImportSuiteFileSchema = z.object({
+  name: z.string(),
+  cronCadence: z.enum(['hourly', 'daily']).nullable(),
+  notificationsEmailAddress: z.string().nullable(),
+  tests: zImportSuiteTestSchema.array(),
+})
+
+export type TImportSuiteFile = z.infer<typeof zImportSuiteFileSchema>

src/components/shared/SectionHeader.tsx

@@ -11,7 +11,7 @@ export function SectionHeader({
   actions: React.ReactNode[]
 }) {
   return (
-    <div className="flex items-center justify-between gap-3 py-3">
+    <div className="flex items-center gap-3 py-3">
       <div className="flex flex-col gap-1 mr-auto">
         <SectionHeaderTitle title={title} />
         {subtitle && <SectionHeaderSubtitle subtitle={subtitle} />}

src/components/suite/HistoryTab.tsx

@@ -15,7 +15,7 @@ export function HistoryTab({ suite }: { suite: TSuite }) {
         <TableRow>
           <TableHead>Status</TableHead>
           <TableHead>Run</TableHead>
-          <TableHead>Created At</TableHead>
+          <TableHead>Performed At</TableHead>
           <TableHead>{/* Actions */}</TableHead>
         </TableRow>
       </TableHeader>

src/components/suite/SuiteDetails.tsx

@@ -73,8 +73,13 @@ export function SuiteDetails({
     <Fragment>
       <PageHeader
         title={suite.name}
-        subtitle={`${suite.tests.length} tests`}
         back={{ href: '/', label: 'All Suites' }}
+        actions={[
+          {
+            label: 'Export Suite',
+            link: `/api/export/${suite.id}`,
+          },
+        ]}
       />
 
       {/* Body with Tabs */}
@@ -97,14 +102,15 @@ export function SuiteDetails({
                   <Play className="w-4 h-4" />
                   Run Suite
                 </Button>
+                ,
               </form>,
             ]}
           />
           <HistoryTab suite={suite} />
         </div>
       </div>
 
-      <div className="mt-9" />
+      <div className="my-9 h-px bg-gray-200 w-full" />
 
       <SectionHeader
         title="Settings"

src/components/suite/TestsTab.tsx

@@ -7,6 +7,9 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@
 import type { TSuite } from '../../app/suite/[suiteId]/loader'
 import { formatDate } from '../shared/utils'
 
+/**
+ * Shows a list of tests in a suite.
+ */
 export function TestsTab({ suite, suiteId }: { suite: TSuite; suiteId: number }) {
   return (
     <Table>

src/components/suite/run/SuiteRunDetails.tsx

@@ -44,7 +44,7 @@ export function SuiteRunDetails({ run }: { run: TSuiteRun }) {
         <TableHeader>
           <TableRow>
             <TableHead>Test</TableHead>
-            <TableHead>Created At</TableHead>
+            <TableHead>Ran At</TableHead>
             <TableHead>{/* Actions */}</TableHead>
           </TableRow>
         </TableHeader>