create-appraisejs 0.3.0-alpha.0 → 0.3.0-alpha.1

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

@@ -0,0 +1,42 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { TestTubes } from 'lucide-react'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { Metadata } from 'next'
+import TestSuitesMetricTable from './test-suites-metric-table'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Test Suites Metrics Report',
+  description: 'Manage test suites report for identifying test suites that are not executed recently',
+}
+
+const TestSuitesMetricsReport = async ({searchParams}: {searchParams: Promise<{filter?: string}>}) => {
+  const resolvedSearchParams = await searchParams
+  const filter = resolvedSearchParams?.filter as 'notExecutedRecently' | undefined
+
+  return (
+    <>
+      <div className="mb-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <PageHeader>
+              <span className="flex items-center">
+                <TestTubes className="mr-2 h-8 w-8" />
+                Test Suites Report
+              </span>
+            </PageHeader>
+            <HeaderSubtitle>
+              Test suites are collections of tests that are used to test a specific feature or functionality
+            </HeaderSubtitle>
+          </div>
+        </div>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TestSuitesMetricTable filter={filter || 'notExecutedRecently'} />
+      </Suspense>
+    </>
+  )
+}
+
+export default TestSuitesMetricsReport

package/templates/starter/src/app/(base)/reports/test-suites/test-suites-metric-table-columns.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+import TableActions from '@/components/table/table-actions'
+import { Tag, TestCase, TestSuite, TestSuiteMetrics } from '@prisma/client'
+import { formatDateTime } from '@/lib/utils'
+import { Checkbox } from '@/components/ui/checkbox'
+import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+
+export const testSuitesMetricTableCols: ColumnDef<TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } }>[] =
+  [
+    {
+      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,
+    },
+    {
+      id: 'testSuite.name',
+      accessorKey: 'testSuite.name',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Name" />,
+      cell: ({ row }) => {
+        const testSuite = row.original.testSuite
+        return <div>{testSuite.name}</div>
+      },
+    },
+    {
+      accessorKey: 'testSuite.description',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Suite Description" />,
+      cell: ({ row }) => {
+        const testSuite = row.original.testSuite
+        return <div>{testSuite.description}</div>
+      },
+    },
+    {
+      accessorKey: 'testSuite.testCases.length',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Total Test Cases" />,
+      cell: ({ row }) => {
+        const testSuite = row.original.testSuite
+        return <div>{testSuite.testCases.length}</div>
+      },
+    },
+    {
+      accessorKey: 'lastExecutedAt',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
+      cell: ({ row }) => {
+        const testSuiteMetrics = row.original
+        return <div>{formatDateTime(testSuiteMetrics.lastExecutedAt)}</div>
+      },
+    },
+    {
+      id: 'actions',
+      cell: ({ row }) => {
+        const testSuite = row.original.testSuite
+        return (
+          <TableActions
+            modifyLink={`/test-suites/modify/${testSuite.id}`}
+            deleteHandler={() => deleteTestSuiteAction([testSuite.id])}
+          />
+        )
+      },
+    },
+  ]

package/templates/starter/src/app/(base)/reports/test-suites/test-suites-metric-table.tsx

@@ -0,0 +1,27 @@
+import { deleteTestSuiteAction } from '@/actions/test-suite/test-suite-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { TestCase, Tag, TestSuiteMetrics, TestSuite } from '@prisma/client'
+import { getAllTestSuiteMetricsAction } from '@/actions/reports/report-actions'
+import { testSuitesMetricTableCols } from './test-suites-metric-table-columns'
+
+const TestSuitesMetricTable = async ({ filter }: { filter: 'notExecutedRecently' }) => {
+  const { data: testSuiteMetrics, error: testSuiteMetricsError } = await getAllTestSuiteMetricsAction(filter)
+
+  if (testSuiteMetricsError) {
+    return <div>Error: {testSuiteMetricsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={testSuitesMetricTableCols}
+        data={testSuiteMetrics as (TestSuiteMetrics & { testSuite: TestSuite & { tags: Tag[]; testCases: TestCase[] } })[]}
+        filterColumn="testSuite.name"
+        filterPlaceholder="Filter by name..."
+        deleteAction={deleteTestSuiteAction}
+      />
+    </>
+  )
+}
+
+export default TestSuitesMetricTable

package/templates/starter/src/app/(base)/reports/view-logs-button.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Eye } from 'lucide-react'
+import { TestCaseLogsModal } from '@/components/reports/test-case-logs-modal'
+import { ReportScenario, StepStatus } from '@prisma/client'
+
+type ReportScenarioWithDetails =
+  | (ReportScenario & {
+      tags: Array<{ tagName: string }>
+      steps: Array<{
+        id: string
+        keyword: string
+        name: string
+        status: StepStatus
+        duration: string
+        errorMessage: string | null
+        errorTrace: string | null
+        screenshotPath?: string | null
+        order: number
+      }>
+      hooks: Array<{
+        id: string
+        keyword: string
+        status: StepStatus
+        duration: string
+        errorMessage: string | null
+        errorTrace: string | null
+      }>
+    })
+  | null
+
+interface ViewLogsButtonProps {
+  reportScenario: ReportScenarioWithDetails
+}
+
+export function ViewLogsButton({ reportScenario }: ViewLogsButtonProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="sm"
+        className="flex items-center gap-2"
+        onClick={() => setIsModalOpen(true)}
+        disabled={!reportScenario}
+      >
+        <Eye className="h-4 w-4" />
+        View Logs
+      </Button>
+      {reportScenario && (
+        <TestCaseLogsModal open={isModalOpen} onOpenChange={setIsModalOpen} reportScenario={reportScenario} />
+      )}
+    </>
+  )
+}

package/templates/starter/src/app/(base)/settings/page.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from 'next'
+import { Settings2 } from 'lucide-react'
+import PageHeader from '@/components/typography/page-header'
+import { SettingsSyncPanel } from './settings-sync-panel'
+import { getSyncPendingCounts } from '@/lib/sync/sync-pending-counts'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Settings',
+  description: 'Manage sync operations and other application settings.',
+}
+
+export default async function SettingsPage() {
+  const pendingCounts = await getSyncPendingCounts()
+
+  return (
+    <div className="space-y-8">
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Settings2 className="mr-2 h-8 w-8" />
+            Settings
+          </span>
+        </PageHeader>
+      </div>
+      <section className="max-w-6xl">
+        <SettingsSyncPanel pendingCounts={pendingCounts} />
+      </section>
+    </div>
+  )
+}

package/templates/starter/src/app/(base)/settings/settings-sync-panel-helpers.test.tsx

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it } from 'vitest'
+
+import {
+  formatExecutionSummary,
+  formatFailureSummary,
+  formatExecutionOrder,
+} from './settings-sync-panel-helpers'
+
+describe('settings-sync-panel helpers', () => {
+  it('formats the sync-all execution summary', () => {
+    expect(
+      formatExecutionSummary({
+        requestedScriptId: 'sync-all',
+        executedScriptIds: ['sync-modules', 'sync-tags'],
+        success: true,
+        durationMs: 12,
+      }),
+    ).toBe('Completed 2 sync scripts successfully.')
+  })
+
+  it('formats a failed script summary with the failed script id and exit code', () => {
+    expect(
+      formatFailureSummary({
+        requestedScriptId: 'sync-test-cases',
+        executedScriptIds: ['sync-modules', 'sync-test-cases'],
+        success: false,
+        durationMs: 12,
+        failedScriptId: 'sync-test-cases',
+        exitCode: 1,
+        cause: 'Step parsing failed',
+      }),
+    ).toBe('sync-test-cases (exit code 1) failed: Step parsing failed')
+  })
+
+  it('formats the requested execution order labels', () => {
+    expect(formatExecutionOrder('sync-test-cases')).toBe('Modules -> Tags -> Test Suites -> Template Step Groups -> Template Steps -> Test Cases')
+  })
+})

package/templates/starter/src/app/(base)/settings/settings-sync-panel-helpers.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from 'react'
+import {
+  CircleHelp,
+  Code,
+  Component,
+  Group,
+  LayoutTemplate,
+  Puzzle,
+  Server,
+  Tag,
+  TestTubeDiagonal,
+  TestTubes,
+} from 'lucide-react'
+
+import { AppDrawerItemColor } from '@/app/(dashboard-components)/app-drawer'
+import {
+  SYNC_ALL_REQUEST_ID,
+  getSyncScriptDefinition,
+  resolveRequestedSyncExecutionOrder,
+  type SyncRequestId,
+  type SyncScriptId,
+} from '@/lib/sync/sync-registry'
+
+type SyncTileColor = keyof typeof AppDrawerItemColor
+
+export type SyncRunResult = {
+  requestedScriptId: string
+  executedScriptIds: string[]
+  success: boolean
+  durationMs: number
+  cause?: string
+  exitCode?: number
+  failedScriptId?: string
+}
+
+export const syncPresentation: Record<SyncScriptId, { icon: ReactNode; colorKey: SyncTileColor }> = {
+  'sync-modules': {
+    icon: <Puzzle />,
+    colorKey: 'indigo',
+  },
+  'sync-environments': {
+    icon: <Server />,
+    colorKey: 'sky',
+  },
+  'sync-tags': {
+    icon: <Tag />,
+    colorKey: 'yellow',
+  },
+  'sync-template-step-groups': {
+    icon: <Component />,
+    colorKey: 'violet',
+  },
+  'sync-template-steps': {
+    icon: <LayoutTemplate />,
+    colorKey: 'purple',
+  },
+  'sync-locator-groups': {
+    icon: <Group />,
+    colorKey: 'blue',
+  },
+  'sync-locators': {
+    icon: <Code />,
+    colorKey: 'emerald',
+  },
+  'sync-test-suites': {
+    icon: <TestTubes />,
+    colorKey: 'orange',
+  },
+  'sync-test-cases': {
+    icon: <TestTubeDiagonal />,
+    colorKey: 'rose',
+  },
+}
+
+export function formatExecutionSummary(result: SyncRunResult): string {
+  if (result.requestedScriptId === SYNC_ALL_REQUEST_ID) {
+    return `Completed ${result.executedScriptIds.length} sync scripts successfully.`
+  }
+
+  if (result.executedScriptIds.length <= 1) {
+    return `${result.requestedScriptId} completed successfully.`
+  }
+
+  return `${result.requestedScriptId} completed after running ${result.executedScriptIds.join(' -> ')}.`
+}
+
+export function formatFailureSummary(result: SyncRunResult): string {
+  if (result.failedScriptId) {
+    const exitCode = typeof result.exitCode === 'number' ? ` (exit code ${result.exitCode})` : ''
+    const cause = result.cause ?? 'No cause was reported.'
+    return `${result.failedScriptId}${exitCode} failed: ${cause}`
+  }
+
+  return result.cause ?? `Unable to run ${result.requestedScriptId}.`
+}
+
+export function formatExecutionOrder(requestId: SyncRequestId): string {
+  return resolveRequestedSyncExecutionOrder(requestId)
+    .map(scriptId => getSyncScriptDefinition(scriptId).orderLabel)
+    .join(' -> ')
+}
+
+export function getSyncTooltipCopy(requestId: SyncRequestId) {
+  const prefix = requestId === SYNC_ALL_REQUEST_ID ? 'Runs synchronization in order:' : 'Runs synchronization in order:'
+  return `${prefix} ${formatExecutionOrder(requestId)}`
+}
+
+export const syncPanelInfo = {
+  helpIcon: <CircleHelp className="h-4 w-4" />,
+}

package/templates/starter/src/app/(base)/settings/settings-sync-panel.test.tsx

@@ -0,0 +1,127 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { SettingsSyncPanel } from './settings-sync-panel'
+
+const { refresh, toast, runSyncAction, getSyncPendingCountsAction } = vi.hoisted(() => ({
+  refresh: vi.fn(),
+  toast: vi.fn(),
+  runSyncAction: vi.fn(),
+  getSyncPendingCountsAction: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    refresh,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+vi.mock('@/actions/settings/sync-actions', () => ({
+  runSyncAction,
+  getSyncPendingCountsAction,
+}))
+
+describe('SettingsSyncPanel', () => {
+  it('runs sync all, refreshes pending counts, and shows a success toast', async () => {
+    const user = userEvent.setup()
+
+    runSyncAction.mockResolvedValue({
+      requestedScriptId: 'sync-all',
+      executedScriptIds: ['sync-modules', 'sync-tags'],
+      success: true,
+      durationMs: 12,
+    })
+    getSyncPendingCountsAction.mockResolvedValue({
+      'sync-all': 0,
+      'sync-modules': 0,
+      'sync-environments': 0,
+      'sync-tags': 0,
+      'sync-template-step-groups': 0,
+      'sync-template-steps': 0,
+      'sync-locator-groups': 0,
+      'sync-locators': 0,
+      'sync-test-suites': 0,
+      'sync-test-cases': 0,
+    })
+
+    render(
+      <SettingsSyncPanel
+        pendingCounts={{
+          'sync-all': 2,
+          'sync-modules': 1,
+          'sync-environments': 0,
+          'sync-tags': 1,
+          'sync-template-step-groups': 0,
+          'sync-template-steps': 0,
+          'sync-locator-groups': 0,
+          'sync-locators': 0,
+          'sync-test-suites': 0,
+          'sync-test-cases': 0,
+        }}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Sync All' }))
+
+    await waitFor(() => {
+      expect(runSyncAction).toHaveBeenCalledWith('sync-all')
+    })
+
+    expect(getSyncPendingCountsAction).toHaveBeenCalled()
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Sync completed',
+      description: 'Completed 2 sync scripts successfully.',
+    })
+    expect(refresh).toHaveBeenCalled()
+  })
+
+  it('shows a destructive toast when sync fails', async () => {
+    const user = userEvent.setup()
+
+    runSyncAction.mockResolvedValue({
+      requestedScriptId: 'sync-tags',
+      executedScriptIds: [],
+      success: false,
+      durationMs: 12,
+      cause: 'Sync failed at runtime',
+    })
+
+    render(
+      <SettingsSyncPanel
+        pendingCounts={{
+          'sync-all': 1,
+          'sync-modules': 0,
+          'sync-environments': 0,
+          'sync-tags': 1,
+          'sync-template-step-groups': 0,
+          'sync-template-steps': 0,
+          'sync-locator-groups': 0,
+          'sync-locators': 0,
+          'sync-test-suites': 0,
+          'sync-test-cases': 0,
+        }}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Sync Tags' }))
+
+    await waitFor(() => {
+      expect(runSyncAction).toHaveBeenCalledWith('sync-tags')
+    })
+
+    expect(getSyncPendingCountsAction).not.toHaveBeenCalled()
+    expect(toast).toHaveBeenCalledWith({
+      variant: 'destructive',
+      title: 'Sync failed',
+      description: 'Sync failed at runtime',
+    })
+    expect(refresh).toHaveBeenCalled()
+  })
+})

package/templates/starter/src/app/(base)/settings/settings-sync-panel.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import { useEffect } from 'react'
+import {
+  RefreshCw,
+} from 'lucide-react'
+import { AppDrawerItemColor } from '@/app/(dashboard-components)/app-drawer'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import {
+  SYNC_ALL_REQUEST_ID,
+  type SyncRequestId,
+  type SyncScriptDefinition,
+  syncScriptDefinitions,
+} from '@/lib/sync/sync-registry'
+import type { SyncPendingCounts } from '@/lib/sync/sync-pending-counts'
+import {
+  getSyncTooltipCopy,
+  syncPanelInfo,
+  syncPresentation,
+} from './settings-sync-panel-helpers'
+import { useSettingsSync } from './use-settings-sync'
+
+function SyncRow({
+  definition,
+  disabled,
+  isActive,
+  pendingCount,
+  onRun,
+}: {
+  definition: SyncScriptDefinition
+  disabled: boolean
+  isActive: boolean
+  pendingCount: number
+  onRun: (requestId: SyncRequestId) => void
+}) {
+  const { icon, colorKey } = syncPresentation[definition.id]
+  const color = AppDrawerItemColor[colorKey]
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="outline"
+          disabled={disabled}
+          aria-label={definition.label}
+          onClick={() => onRun(definition.id)}
+          className={`inline-flex h-24 w-44 flex-none flex-col items-start justify-start whitespace-normal rounded-2xl border-none px-3 py-2.5 text-left hover:text-gray-200 ${color.buttonColor}`}
+        >
+          <div className="flex w-full items-center justify-between gap-3">
+            <div className={`${color.iconColor} shrink-0 [&_svg]:!h-5 [&_svg]:!w-5`}>
+              {isActive ? <RefreshCw className="animate-spin" /> : icon}
+            </div>
+            {pendingCount > 0 ? (
+              <div
+                className={`flex min-w-7 shrink-0 items-center justify-center rounded-full px-2 py-1 text-[10px] font-semibold ${color.badgeColor}`}
+              >
+                {pendingCount}
+              </div>
+            ) : null}
+          </div>
+          <div className="mt-3 min-w-0">
+            <p className="break-words text-xs font-medium leading-4 text-gray-100">{definition.label}</p>
+          </div>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs">
+        <p>{definition.description}</p>
+        <p className="mt-1 text-primary-foreground/80">{getSyncTooltipCopy(definition.id)}</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+export function SettingsSyncPanel({ pendingCounts }: { pendingCounts: SyncPendingCounts }) {
+  const { activeRequestId, isRunning, pendingCounts: currentPendingCounts, runSync, setPendingCounts } =
+    useSettingsSync({
+      initialPendingCounts: pendingCounts,
+    })
+
+  useEffect(() => {
+    setPendingCounts(pendingCounts)
+  }, [pendingCounts, setPendingCounts])
+
+  return (
+    <TooltipProvider>
+      <Card className="border-gray-600/10 bg-gray-600/10 shadow-none">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <CardTitle className="text-primary">Sync</CardTitle>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="cursor-help text-muted-foreground">
+                  {syncPanelInfo.helpIcon}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-xs">
+                Runs all sync targets with prerequisites.
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                disabled={isRunning}
+                aria-label="Sync All"
+                onClick={() => runSync(SYNC_ALL_REQUEST_ID)}
+                className="inline-flex h-24 w-44 flex-none flex-col items-start justify-start whitespace-normal rounded-2xl border-none bg-emerald-500/10 px-3 py-2.5 text-left text-gray-100 hover:bg-emerald-500/20 hover:text-gray-100"
+              >
+                <div className="flex w-full items-center justify-between gap-3">
+                  <div className="text-emerald-500 [&_svg]:!h-5 [&_svg]:!w-5">
+                    {activeRequestId === SYNC_ALL_REQUEST_ID ? <RefreshCw className="animate-spin" /> : <RefreshCw />}
+                  </div>
+                  {currentPendingCounts[SYNC_ALL_REQUEST_ID] > 0 ? (
+                    <div className="rounded-full bg-emerald-400 px-2 py-1 text-[10px] font-semibold text-emerald-900">
+                      {currentPendingCounts[SYNC_ALL_REQUEST_ID]}
+                    </div>
+                  ) : null}
+                </div>
+                <p className="mt-3 text-xs font-medium leading-4">Sync All</p>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-xs">
+              {getSyncTooltipCopy(SYNC_ALL_REQUEST_ID)}
+            </TooltipContent>
+          </Tooltip>
+          <div className="flex flex-wrap items-start gap-4">
+            {syncScriptDefinitions.map(definition => (
+              <SyncRow
+                key={definition.id}
+                definition={definition}
+                disabled={isRunning}
+                isActive={activeRequestId === definition.id}
+                pendingCount={currentPendingCounts[definition.id]}
+                onRun={runSync}
+              />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </TooltipProvider>
+  )
+}