create-appraisejs 0.1.10-alpha.8 → 0.2.0-alpha.1

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

@@ -3,7 +3,8 @@ 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 { 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'
@@ -34,7 +35,7 @@ const CreateTestSuite = async () => {
         successTitle="Suite created"
         successMessage="Test suite created successfully"
         onSubmitAction={createTestSuiteAction}
-        testCases={testCases as TestCase[]}
+        testCases={testCases as TestCasePickerRow[]}
         moduleList={moduleList as Module[]}
         tags={tags as Tag[]}
       />

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

@@ -7,6 +7,7 @@ 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',
@@ -45,7 +46,7 @@ const ModifyTestSuite = async ({ params }: { params: Promise<{ id: string }> })
       successMessage="Test suite updated successfully"
       onSubmitAction={updateTestSuiteAction}
       id={id}
-      testCases={testCases as TestCase[]}
+      testCases={testCases as TestCasePickerRow[]}
       moduleList={moduleList as Module[]}
       tags={tags as Tag[]}
     />

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

@@ -5,12 +5,14 @@ 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 { 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',
@@ -24,9 +26,60 @@ const TestSuites = async () => {
     return <div>Error: {testSuitesError}</div>
   }
 
-  const testSuitesData = testSuites as (TestSuite & { testCases: TestCase[] })[]
+  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 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 (
@@ -53,24 +106,7 @@ const TestSuites = async () => {
         <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" />,
-            },
-          ]}
-        />
+        <InfoGrid infoCards={infoCards} />
       </div>
       <Suspense fallback={<DataTableSkeleton />}>
         <TestSuiteTable />

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

@@ -1,6 +1,7 @@
 'use client'
 
 import { Button } from '@/components/ui/button'
+import TestCasePicker from '@/components/test-case/test-case-picker'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -9,8 +10,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Textarea } from '@/components/ui/textarea'
 import { formOpts, TestSuite } from '@/constants/form-opts/test-suite-form-opts'
 import { toast } from '@/hooks/use-toast'
+import { TestCasePickerRow } from '@/types/test-case-picker'
 import { ActionResponse } from '@/types/form/actionHandler'
-import { Module, TestCase, Tag } from '@prisma/client'
+import { Module, Tag } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
 import { Info, Save } from 'lucide-react'
 import { useRouter } from 'next/navigation'
@@ -31,7 +33,7 @@ export const TestSuiteForm = ({
   successMessage: string
   id?: string
   onSubmitAction: (_prev: unknown, value: TestSuite, id?: string) => Promise<ActionResponse>
-  testCases: TestCase[]
+  testCases: TestCasePickerRow[]
   moduleList: Module[]
   tags: Tag[]
 }) => {
@@ -134,28 +136,25 @@ export const TestSuiteForm = ({
             </form.Field>
             <form.Field name="testCases">
               {field => {
-                const testCasesOptions = testCases.map(testCase => ({
-                  value: testCase.id,
-                  label: testCase.title,
-                }))
                 return (
                   <div className="mb-6 flex flex-col gap-2">
                     <Label htmlFor={field.name} className="font-bold">
                       Test Cases
                     </Label>
-                    <MultiSelectWithPreview
-                      id={field.name}
-                      className="w-full"
-                      options={testCasesOptions}
-                      onSelectChange={value => {
-                        field.handleChange(value)
-                      }}
-                      defaultSelectedValues={field.state.value}
-                      placeholder="Select test case(s)"
-                      emptyMessage="No test case(s) found"
+                    <TestCasePicker
+                      testCases={testCases}
+                      selectedIds={field.state.value ?? []}
+                      onSave={value => field.handleChange(value)}
+                      triggerPlaceholder="Select test case(s)"
+                      dialogTitle="Select Test Cases"
+                      dialogDescription="Search and select the test cases to include in this suite."
                       selectedLabel="Selected test case(s)"
-                      searchPlaceholder="Search test cases..."
                     />
+                    {field.state.meta.errors.map((error, index) => (
+                      <p key={index} className="text-xs text-pink-500">
+                        {typeof error === 'string' ? error : error?.message || String(error)}
+                      </p>
+                    ))}
                   </div>
                 )
               }}

package/templates/default/src/app/(base)/test-suites/test-suite-table-columns.tsx

@@ -9,6 +9,7 @@ import TableActions from '@/components/table/table-actions'
 import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
 import { formatDateTime } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
+import { getFilterTags } from '@/lib/tag-utils'
 export const testSuiteTableCols: ColumnDef<TestSuite & { tags?: Tag[]; module: Module; testCases: TestCase[] }>[] = [
   {
     id: 'select',
@@ -60,7 +61,7 @@ export const testSuiteTableCols: ColumnDef<TestSuite & { tags?: Tag[]; module: M
     header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
     cell: ({ row }) => {
       const testSuite = row.original
-      const tags = testSuite.tags || []
+      const tags = getFilterTags(testSuite.tags || [])
       return (
         <div className="flex flex-wrap gap-1">
           {tags.length > 0 ? tags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}

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

@@ -1,29 +1,29 @@
-import { DataTable } from '@/components/ui/data-table'
-import React from 'react'
-import { testSuiteTableCols } from './test-suite-table-columns'
-import { getAllTestSuitesAction, deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
-import { Module, TestCase, TestSuite, Tag } from '@prisma/client'
-
-const TestSuiteTable = async () => {
-  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
-
-  if (testSuitesError) {
-    return <div>Error: {testSuitesError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={testSuiteTableCols}
-        data={testSuites as (TestSuite & { tags?: Tag[]; module: Module; testCases: TestCase[] })[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/test-suites/create"
-        modifyLink="/test-suites/modify"
-        deleteAction={deleteTestSuiteAction}
-      />
-    </>
-  )
-}
-
-export default TestSuiteTable
+import { DataTable } from '@/components/ui/data-table'
+import React from 'react'
+import { testSuiteTableCols } from './test-suite-table-columns'
+import { getAllTestSuitesAction, deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { Module, TestCase, TestSuite, Tag } from '@prisma/client'
+
+const TestSuiteTable = async () => {
+  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
+
+  if (testSuitesError) {
+    return <div>Error: {testSuitesError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={testSuiteTableCols}
+        data={testSuites as (TestSuite & { tags?: Tag[]; module: Module; testCases: TestCase[] })[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/test-suites/create"
+        modifyLink="/test-suites/modify"
+        deleteAction={deleteTestSuiteAction}
+      />
+    </>
+  )
+}
+
+export default TestSuiteTable