create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -1,229 +0,0 @@
-'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

@@ -1,127 +0,0 @@
-'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

@@ -1,46 +0,0 @@
-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 { TestCasePickerRow } from '@/types/test-case-picker'
-import { Module, 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 TestCasePickerRow[]}
-        moduleList={moduleList as Module[]}
-        tags={tags as Tag[]}
-      />
-    </>
-  )
-}
-
-export default CreateTestSuite

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

@@ -1,56 +0,0 @@
-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'
-import { TestCasePickerRow } from '@/types/test-case-picker'
-
-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 TestCasePickerRow[]}
-      moduleList={moduleList as Module[]}
-      tags={tags as Tag[]}
-    />
-  )
-}
-
-export default ModifyTestSuite

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

@@ -1,118 +0,0 @@
-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 { Tag, 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'
-import { Tag as TagIcon } from 'lucide-react'
-import { getFilterTags } from '@/lib/tag-utils'
-
-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[]; tags: Tag[] })[]
-  const emptyTestSuites = testSuitesData.filter(testSuite => testSuite.testCases.length === 0)
-  const latestCreatedTestSuite = [...testSuitesData].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())[0]
-  const tagSuiteCountMap = new Map<string, { name: string; suiteCount: number }>()
-
-  for (const testSuite of testSuitesData) {
-    for (const tag of getFilterTags(testSuite.tags)) {
-      const currentTag = tagSuiteCountMap.get(tag.id)
-
-      if (currentTag) {
-        currentTag.suiteCount += 1
-      } else {
-        tagSuiteCountMap.set(tag.id, {
-          name: tag.name,
-          suiteCount: 1,
-        })
-      }
-    }
-  }
-
-  const mostCommonTagWithSuites = [...tagSuiteCountMap.values()].sort((a, b) => {
-    if (b.suiteCount !== a.suiteCount) {
-      return b.suiteCount - a.suiteCount
-    }
-
-    return a.name.localeCompare(b.name)
-  })[0]
-  const 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" />,
-    },
-    ...(mostCommonTagWithSuites
-      ? [
-        {
-          showHighlightGroup: true,
-          highlight: mostCommonTagWithSuites.name,
-          legend: 'Most common tag',
-          defaultText: 'Most common suite tag will appear here when test suites have tags.',
-          icon: <TagIcon className="h-12 w-12 rounded-sm bg-muted p-2" />,
-        },
-      ]
-      : []),
-  ]
-
-  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={infoCards} />
-      </div>
-      <Suspense fallback={<DataTableSkeleton />}>
-        <TestSuiteTable />
-      </Suspense>
-    </>
-  )
-}
-
-export default TestSuites