create-appraise 0.1.0

package/templates/default/src/app/(base)/test-runs/test-run-table-columns.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import {
+  BrowserEngine,
+  Environment,
+  Tag,
+  TagType,
+  TestRun,
+  TestRunResult,
+  TestRunStatus,
+  TestRunTestCase,
+} from '@prisma/client'
+import { cancelTestRunAction, deleteTestRunAction } from '@/actions/test-run/test-run-actions'
+import { formatDateTime } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { CheckCircle, Compass, Flame, ListEnd, LoaderCircle, XCircle } from 'lucide-react'
+
+const BrowserEngineIcon = {
+  [BrowserEngine.CHROMIUM]: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+    >
+      <path d="M10.88 21.94 15.46 14" />
+      <path d="M21.17 8H12" />
+      <path d="M3.95 6.06 8.54 14" />
+      <circle cx="12" cy="12" r="10" />
+      <circle cx="12" cy="12" r="4" />
+    </svg>
+  ),
+  [BrowserEngine.FIREFOX]: <Flame className="h-4 w-4" />,
+  [BrowserEngine.WEBKIT]: <Compass className="h-4 w-4" />,
+}
+
+export const testRunTableCols: ColumnDef<
+  TestRun & { testCases: TestRunTestCase[]; tags: Tag[]; environment: Environment }
+>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'runId',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Run ID" />,
+  },
+  {
+    accessorKey: 'status',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => {
+      const status = row.original.status
+      const statusColorMap = {
+        [TestRunStatus.QUEUED]: 'bg-gray-500 text-white',
+        [TestRunStatus.RUNNING]: 'bg-blue-500 text-white',
+        [TestRunStatus.CANCELLING]: 'bg-orange-500 text-white',
+        [TestRunStatus.COMPLETED]: 'bg-primary',
+        [TestRunStatus.CANCELLED]: 'bg-pink-500 text-white',
+      }
+      const statusIconMap = {
+        [TestRunStatus.QUEUED]: <ListEnd className="h-4 w-4" />,
+        [TestRunStatus.RUNNING]: <LoaderCircle className="h-4 w-4 animate-spin" />,
+        [TestRunStatus.CANCELLING]: <LoaderCircle className="h-4 w-4 animate-spin" />,
+        [TestRunStatus.COMPLETED]: <CheckCircle className="h-4 w-4" />,
+        [TestRunStatus.CANCELLED]: <XCircle className="h-4 w-4" />,
+      }
+      const statusTextMap = {
+        [TestRunStatus.QUEUED]: 'Queued',
+        [TestRunStatus.RUNNING]: 'Running',
+        [TestRunStatus.CANCELLING]: 'Cancelling',
+        [TestRunStatus.COMPLETED]: 'Completed',
+        [TestRunStatus.CANCELLED]: 'Cancelled',
+      }
+      return (
+        <Badge className={`${statusColorMap[status]} w-full text-center`}>
+          <span className="mr-1">{statusIconMap[status]}</span>
+          <span>{statusTextMap[status]}</span>
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'result',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Result" />,
+    cell: ({ row }) => {
+      const result = row.original.result
+      const resultColorMap = {
+        [TestRunResult.PASSED]: 'bg-primary',
+        [TestRunResult.FAILED]: 'bg-pink-500 text-white',
+        [TestRunResult.CANCELLED]: 'bg-gray-500 text-white',
+        [TestRunResult.PENDING]: 'bg-yellow-500 text-white',
+      }
+      const resultIconMap = {
+        [TestRunResult.PASSED]: <CheckCircle className="h-4 w-4" />,
+        [TestRunResult.FAILED]: <XCircle className="h-4 w-4" />,
+        [TestRunResult.CANCELLED]: <XCircle className="h-4 w-4" />,
+        [TestRunResult.PENDING]: <LoaderCircle className="h-4 w-4 animate-spin" />,
+      }
+      const resultTextMap = {
+        [TestRunResult.PASSED]: 'Passed',
+        [TestRunResult.FAILED]: 'Failed',
+        [TestRunResult.CANCELLED]: 'Cancelled',
+        [TestRunResult.PENDING]: 'Pending',
+      }
+      return (
+        <Badge className={`${resultColorMap[result]} w-full text-center`}>
+          <span className="mr-1">{resultIconMap[result]}</span>
+          <span>{resultTextMap[result]}</span>
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'testCases',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Cases" />,
+    cell: ({ row }) => {
+      const testCases = row.original.testCases
+      return <div>{testCases.length}</div>
+    },
+  },
+  {
+    accessorKey: 'testWorkersCount',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Workers Count" />,
+  },
+  {
+    accessorKey: 'browserEngine',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Browser Engine" />,
+    cell: ({ row }) => {
+      const browserEngine = row.original.browserEngine
+      const browserEngineColorMap = {
+        [BrowserEngine.CHROMIUM]: 'bg-blue-500 text-white',
+        [BrowserEngine.FIREFOX]: 'bg-red-500 text-white',
+        [BrowserEngine.WEBKIT]: 'bg-purple-500 text-white',
+      }
+      return (
+        <Badge className={`${browserEngineColorMap[browserEngine]} w-fit`}>
+          <span className="mr-2">{BrowserEngineIcon[browserEngine]}</span>
+          <span>{browserEngine.charAt(0).toUpperCase() + browserEngine.slice(1).toLowerCase()}</span>
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'environment.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Environment" />,
+  },
+  {
+    accessorKey: 'tags',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
+    cell: ({ row }) => {
+      const tags = row.original.tags
+      const filterTags = tags.filter(tag => tag.type === TagType.FILTER)
+      return (
+        <div className="flex flex-wrap gap-1">
+          {filterTags.length > 0 ? filterTags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: 'startedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Started At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.startedAt)
+    },
+  },
+  {
+    accessorKey: 'completedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Completed At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.completedAt)
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const testRunData = row.original
+      return (
+        <div>
+          <TableActions
+            viewLink={`/test-runs/${testRunData.id}`}
+            deleteHandler={() => deleteTestRunAction([testRunData.id])}
+            cancelHandler={() => cancelTestRunAction(testRunData.runId)}
+            showCancelButton={
+              testRunData.status === TestRunStatus.RUNNING ||
+              testRunData.status === TestRunStatus.QUEUED ||
+              testRunData.status === TestRunStatus.CANCELLING
+            }
+            cancelButtonDisabled={testRunData.status === TestRunStatus.CANCELLING}
+            deleteButtonDisabled={
+              testRunData.status === TestRunStatus.CANCELLING || testRunData.status === TestRunStatus.RUNNING
+            }
+          />
+        </div>
+      )
+    },
+  },
+]

package/templates/default/src/app/(base)/test-runs/test-run-table.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import { deleteTestRunAction, getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { Environment, Tag, TestRun, TestRunTestCase, TestRunStatus } from '@prisma/client'
+import React, { useEffect, useState, useRef, useMemo } from 'react'
+import { testRunTableCols } from './test-run-table-columns'
+
+type TestRunData = TestRun & { testCases: TestRunTestCase[]; tags: Tag[]; environment: Environment }
+
+interface TestRunTableProps {
+  initialData: TestRunData[]
+  filter: 'recentFailed' | 'all'
+}
+
+const TestRunTable = ({ initialData, filter = 'all' }: TestRunTableProps) => {
+  const [testRuns, setTestRuns] = useState<TestRunData[]>(initialData)
+  const pollingRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Memoize running test run IDs to avoid unnecessary effect re-runs
+  // Include RUNNING, QUEUED, and CANCELLING statuses for polling
+  const runningTestRunIds = useMemo(() => {
+    return testRuns
+      .filter(
+        tr =>
+          tr.status === TestRunStatus.RUNNING ||
+          tr.status === TestRunStatus.QUEUED ||
+          tr.status === TestRunStatus.CANCELLING,
+      )
+      .map(tr => tr.id)
+  }, [testRuns])
+
+  // Create a stable dependency string for useEffect
+  const runningTestRunIdsKey = useMemo(() => runningTestRunIds.join(','), [runningTestRunIds])
+
+  // Poll for status updates while test runs are running
+  useEffect(() => {
+    // Clear any existing polling interval
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current)
+      pollingRef.current = null
+    }
+
+    // If no running test runs, don't poll
+    if (runningTestRunIds.length === 0) {
+      return
+    }
+
+    pollingRef.current = setInterval(async () => {
+      try {
+        // Poll only running test runs in parallel
+        const updatePromises = runningTestRunIds.map(async id => {
+          const { data, error } = await getTestRunByIdAction(id)
+          if (error || !data) {
+            return null
+          }
+          // getTestRunByIdAction returns testCases with nested testCase, but we need to flatten it
+          const testRun = data as TestRun & {
+            testCases: (TestRunTestCase & { testCase: { title: string } })[]
+            tags: Tag[]
+            environment: Environment
+          }
+          // Convert to the format expected by the table (flatten testCases)
+          return {
+            ...testRun,
+            testCases: testRun.testCases.map(tc => ({
+              id: tc.id,
+              testRunId: tc.testRunId,
+              testCaseId: tc.testCaseId,
+              status: tc.status,
+              result: tc.result,
+            })) as TestRunTestCase[],
+          } as TestRunData
+        })
+
+        const updates = await Promise.all(updatePromises)
+        const validUpdates = updates.filter((u): u is TestRunData => u !== null)
+
+        // Update only the changed test runs
+        setTestRuns(prev =>
+          prev.map(tr => {
+            const update = validUpdates.find(u => u.id === tr.id)
+            return update || tr
+          }),
+        )
+
+        // Check if any are still running (including CANCELLING)
+        const stillRunning = validUpdates.filter(
+          u =>
+            u.status === TestRunStatus.RUNNING ||
+            u.status === TestRunStatus.QUEUED ||
+            u.status === TestRunStatus.CANCELLING,
+        )
+
+        // If no test runs are running anymore, stop polling
+        if (stillRunning.length === 0 && pollingRef.current) {
+          clearInterval(pollingRef.current)
+          pollingRef.current = null
+        }
+      } catch (error) {
+        console.error('Error polling test runs status:', error)
+      }
+    }, 2000) // Poll every 2 seconds
+
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current)
+        pollingRef.current = null
+      }
+    }
+  }, [runningTestRunIdsKey, runningTestRunIds])
+
+  return (
+    <>
+      <DataTable
+        columns={testRunTableCols}
+        data={testRuns}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        deleteAction={deleteTestRunAction}
+        createLink={filter === 'all' ? '/test-runs/create' : undefined}
+      />
+    </>
+  )
+}
+
+export default TestRunTable

package/templates/default/src/app/(base)/test-suites/create/page.tsx

@@ -0,0 +1,45 @@
+import { createTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { TestSuiteForm } from '../test-suite-form'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+import { Module, TestCase, Tag } from '@prisma/client'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Test Suite',
+  description: 'Create a new test suite to run your tests against',
+}
+
+const CreateTestSuite = async () => {
+  const { data: testCases, error: testCasesError } = await getAllTestCasesAction()
+
+  const { data: moduleList, error: moduleListError } = await getAllModulesAction()
+
+  const { data: tags, error: tagsError } = await getAllTagsAction()
+
+  if (testCasesError || moduleListError || tagsError) {
+    return <div>Error: {testCasesError || moduleListError || tagsError}</div>
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Test Suite</PageHeader>
+        <HeaderSubtitle>Create a new test suite to run your tests against</HeaderSubtitle>
+      </div>
+      <TestSuiteForm
+        successTitle="Suite created"
+        successMessage="Test suite created successfully"
+        onSubmitAction={createTestSuiteAction}
+        testCases={testCases as TestCase[]}
+        moduleList={moduleList as Module[]}
+        tags={tags as Tag[]}
+      />
+    </>
+  )
+}
+
+export default CreateTestSuite

package/templates/default/src/app/(base)/test-suites/modify/[id]/page.tsx

@@ -0,0 +1,55 @@
+import { getTestSuiteByIdAction, updateTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { TestSuiteForm } from '../../test-suite-form'
+import React from 'react'
+import { TestSuite, Tag } from '@prisma/client'
+import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+import { Module, TestCase } from '@prisma/client'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Test Suite',
+  description: 'Update test suite configuration',
+}
+
+const ModifyTestSuite = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data: testSuite, error } = await getTestSuiteByIdAction(id)
+  const { data: testCases } = await getAllTestCasesAction()
+
+  const { data: moduleList, error: moduleListError } = await getAllModulesAction()
+
+  const { data: tags, error: tagsError } = await getAllTagsAction()
+
+  if (error || moduleListError || tagsError) {
+    return <div>Error: {error || moduleListError || tagsError}</div>
+  }
+
+  const testSuiteData = testSuite as TestSuite & {
+    testCases: TestCase[]
+    module: Module
+    tags: Tag[]
+  }
+
+  return (
+    <TestSuiteForm
+      defaultValues={{
+        name: testSuiteData.name ?? '',
+        description: testSuiteData.description ?? '',
+        testCases: testSuiteData.testCases.map(testCase => testCase.id),
+        moduleId: testSuiteData.moduleId ?? '',
+        tagIds: testSuiteData.tags?.map(tag => tag.id) || [],
+      }}
+      successTitle="Suite updated"
+      successMessage="Test suite updated successfully"
+      onSubmitAction={updateTestSuiteAction}
+      id={id}
+      testCases={testCases as TestCase[]}
+      moduleList={moduleList as Module[]}
+      tags={tags as Tag[]}
+    />
+  )
+}
+
+export default ModifyTestSuite

package/templates/default/src/app/(base)/test-suites/page.tsx

@@ -0,0 +1,82 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { TestTubes } from 'lucide-react'
+import TestSuiteTable from './test-suite-table'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
+import { TestCase, TestSuite } from '@prisma/client'
+import InfoGrid from '@/components/data-visualization/info-grid'
+import EmptyState from '@/components/data-state/empty-state'
+import { Metadata } from 'next'
+import { TubePlus } from '@/assets/icons/tube-plus'
+import EmptyTube from '@/assets/icons/empty-tube'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Test Suites',
+  description: 'Manage test suites and their configurations',
+}
+
+const TestSuites = async () => {
+  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
+
+  if (testSuitesError) {
+    return <div>Error: {testSuitesError}</div>
+  }
+
+  const testSuitesData = testSuites as (TestSuite & { testCases: TestCase[] })[]
+  const emptyTestSuites = testSuitesData.filter(testSuite => testSuite.testCases.length === 0)
+  const latestCreatedTestSuite = testSuitesData.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())[0]
+
+  if (testSuitesData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<TestTubes className="h-8 w-8" />}
+          title="No test suites found"
+          description="Get started by creating a test suite and grouping tests together"
+          createRoute="/test-suites/create"
+          createText="Create Test Suite"
+        />
+      </div>
+    )
+  }
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <TestTubes className="mr-2 h-8 w-8" />
+            Test Suites
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>
+          Test suites are collections of tests that are used to test a specific feature or functionality
+        </HeaderSubtitle>
+        <InfoGrid
+          infoCards={[
+            {
+              showHighlightGroup: testSuitesData.length > 0,
+              highlight: emptyTestSuites.length.toString(),
+              legend: 'Empty test suite(s)',
+              defaultText: 'Empty test suites count. Will update when test suites are created.',
+              icon: <EmptyTube className="h-12 w-12 rounded-sm bg-muted p-2" />,
+            },
+            {
+              showHighlightGroup: testSuitesData.length > 0,
+              highlight: latestCreatedTestSuite ? latestCreatedTestSuite.name : 'N/A',
+              legend: 'Latest test suite',
+              defaultText: 'Latest created test suite. Will update when test suites are created.',
+              icon: <TubePlus className="h-12 w-12 rounded-sm bg-muted p-2" />,
+            },
+          ]}
+        />
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TestSuiteTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default TestSuites