create-appraisejs 0.1.6 → 0.1.8-alpha

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

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

@@ -1,55 +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
+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

@@ -1,82 +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
+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