create-appraisejs 0.2.0 → 0.3.0-alpha.1

package/templates/starter/src/components/reports/test-case-logs-modal.tsx

@@ -0,0 +1,310 @@
+'use client'
+
+import { useState } from 'react'
+import Image from 'next/image'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import { StepStatus, ReportScenario } from '@prisma/client'
+import { CheckCircle, XCircle, Clock, AlertCircle } from 'lucide-react'
+import { ScrollArea } from '../ui/scroll-area'
+import { Button } from '@/components/ui/button'
+
+/** Minimal shape so both full Prisma and report-table select types are accepted */
+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
+    matchLocation?: string | null
+  }>
+  hooks: Array<{
+    id: string
+    keyword: string
+    status: StepStatus
+    duration: string
+    errorMessage: string | null
+    errorTrace: string | null
+  }>
+}
+
+interface TestCaseLogsModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  reportScenario: ReportScenarioWithDetails | null
+}
+
+const stepStatusToBadge = (status: StepStatus) => {
+  switch (status) {
+    case StepStatus.PASSED:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-1 rounded-xl border-green-700 bg-green-700/10 py-0.5 text-xs text-green-500"
+        >
+          <CheckCircle className="h-3 w-3" />
+          PASSED
+        </Badge>
+      )
+    case StepStatus.FAILED:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-1 rounded-xl border-red-700 bg-red-700/10 py-0.5 text-xs text-red-500"
+        >
+          <XCircle className="h-3 w-3" />
+          FAILED
+        </Badge>
+      )
+    case StepStatus.SKIPPED:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-1 rounded-xl border-gray-700 bg-gray-700/10 py-0.5 text-xs text-gray-500"
+        >
+          <Clock className="h-3 w-3" />
+          SKIPPED
+        </Badge>
+      )
+    default:
+      return (
+        <Badge
+          variant="outline"
+          className="flex items-center gap-1 rounded-xl border-gray-700 bg-gray-700/10 py-0.5 text-xs text-gray-500"
+        >
+          {status}
+        </Badge>
+      )
+  }
+}
+
+const formatDuration = (duration: string) => {
+  const durationNs = Number(duration)
+  if (isNaN(durationNs)) return '-'
+  const durationMs = Math.round(durationNs / 1000000)
+  if (durationMs < 1000) {
+    return `${durationMs}ms`
+  }
+  const seconds = Math.floor(durationMs / 1000)
+  const milliseconds = durationMs % 1000
+  return `${seconds}.${String(milliseconds).padStart(3, '0')}s`
+}
+
+const formatKeyword = (keyword: string) => {
+  return keyword.charAt(0) + keyword.slice(1).toLowerCase()
+}
+
+export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCaseLogsModalProps) {
+  const [expandedScreenshot, setExpandedScreenshot] = useState<{ stepId: string; stepName: string } | null>(null)
+
+  if (!reportScenario) {
+    return null
+  }
+
+  // Sort steps by order
+  const sortedSteps = [...reportScenario.steps].sort((a, b) => a.order - b.order)
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="flex max-h-[90vh] max-w-4xl flex-col p-0">
+          <DialogHeader className="flex-shrink-0 px-6 pt-6">
+            <DialogTitle className="text-xl font-semibold">{reportScenario.name}</DialogTitle>
+            {reportScenario.description && (
+              <DialogDescription className="text-sm text-muted-foreground">
+                {reportScenario.description}
+              </DialogDescription>
+            )}
+          </DialogHeader>
+
+          <ScrollArea className="h-[calc(90vh-120px)] pr-4">
+            <div className="px-6 pb-6">
+              <div className="space-y-6">
+                {/* Tags */}
+                {reportScenario.tags.length > 0 && (
+                  <div>
+                    <h4 className="mb-2 text-sm font-medium">Tags</h4>
+                    <div className="flex flex-wrap gap-1">
+                      {reportScenario.tags.map(tag => (
+                        <Badge key={tag.tagName} variant="outline">
+                          {tag.tagName}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Steps */}
+                <div>
+                  <h4 className="mb-3 text-sm font-medium">Steps</h4>
+                  <div className="space-y-3">
+                    {sortedSteps.length > 0 ? (
+                      sortedSteps.map(step => (
+                        <div key={step.id} className="space-y-2 rounded-lg border p-3">
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="flex-1">
+                              <div className="mb-1 flex items-center gap-2">
+                                <span className="text-sm font-medium text-muted-foreground">
+                                  {formatKeyword(step.keyword)}
+                                </span>
+                                <span className="text-sm">{step.name}</span>
+                              </div>
+                              {step.matchLocation && (
+                                <div className="mt-1 text-xs text-muted-foreground">{step.matchLocation}</div>
+                              )}
+                            </div>
+                            <div className="flex items-center gap-2">
+                              {stepStatusToBadge(step.status)}
+                              <span className="text-xs text-muted-foreground">{formatDuration(step.duration)}</span>
+                            </div>
+                          </div>
+                          {step.status === StepStatus.FAILED && (
+                            <div className="mt-2 space-y-2">
+                              {step.errorMessage && (
+                                <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
+                                  <div className="mb-1 flex items-center gap-2">
+                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <span className="text-sm font-medium text-red-400">Error Message</span>
+                                  </div>
+                                  <pre className="whitespace-pre-wrap break-words text-xs text-red-300">
+                                    {step.errorMessage}
+                                  </pre>
+                                </div>
+                              )}
+                              {step.errorTrace && (
+                                <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
+                                  <div className="mb-1 flex items-center gap-2">
+                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <span className="text-sm font-medium text-red-400">Error Trace</span>
+                                  </div>
+                                  <pre className="whitespace-pre-wrap break-words font-mono text-xs text-red-300">
+                                    {step.errorTrace}
+                                  </pre>
+                                </div>
+                              )}
+                              {step.screenshotPath && (
+                                <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
+                                  <div className="mb-2 flex items-center justify-between gap-2">
+                                    <span className="text-sm font-medium text-red-400">Failure Screenshot</span>
+                                    <Button
+                                      type="button"
+                                      size="sm"
+                                      variant="secondary"
+                                      onClick={() => setExpandedScreenshot({ stepId: step.id, stepName: step.name })}
+                                    >
+                                      Expand
+                                    </Button>
+                                  </div>
+                                  <button
+                                    type="button"
+                                    className="block w-full overflow-hidden rounded-md border border-red-900/60"
+                                    onClick={() => setExpandedScreenshot({ stepId: step.id, stepName: step.name })}
+                                  >
+                                    <Image
+                                      src={`/api/reports/steps/${step.id}/screenshot`}
+                                      alt={`Failure screenshot for step ${step.name}`}
+                                      width={1280}
+                                      height={720}
+                                      unoptimized
+                                      className="max-h-64 w-full object-cover"
+                                      loading="lazy"
+                                    />
+                                  </button>
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ))
+                    ) : (
+                      <div className="text-sm text-muted-foreground">No steps recorded</div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Hooks */}
+                {reportScenario.hooks.length > 0 && (
+                  <div>
+                    <Separator className="my-4" />
+                    <h4 className="mb-3 text-sm font-medium">Hooks</h4>
+                    <div className="space-y-3">
+                      {reportScenario.hooks.map(hook => (
+                        <div key={hook.id} className="space-y-2 rounded-lg border p-3">
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="flex-1">
+                              <div className="mb-1 flex items-center gap-2">
+                                <span className="text-sm font-medium text-muted-foreground">
+                                  {formatKeyword(hook.keyword)} Hook
+                                </span>
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              {stepStatusToBadge(hook.status)}
+                              <span className="text-xs text-muted-foreground">{formatDuration(hook.duration)}</span>
+                            </div>
+                          </div>
+                          {hook.status === StepStatus.FAILED && (
+                            <div className="mt-2 space-y-2">
+                              {hook.errorMessage && (
+                                <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
+                                  <div className="mb-1 flex items-center gap-2">
+                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <span className="text-sm font-medium text-red-400">Error Message</span>
+                                  </div>
+                                  <pre className="whitespace-pre-wrap break-words text-xs text-red-300">
+                                    {hook.errorMessage}
+                                  </pre>
+                                </div>
+                              )}
+                              {hook.errorTrace && (
+                                <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
+                                  <div className="mb-1 flex items-center gap-2">
+                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <span className="text-sm font-medium text-red-400">Error Trace</span>
+                                  </div>
+                                  <pre className="whitespace-pre-wrap break-words font-mono text-xs text-red-300">
+                                    {hook.errorTrace}
+                                  </pre>
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </ScrollArea>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={!!expandedScreenshot} onOpenChange={nextOpen => !nextOpen && setExpandedScreenshot(null)}>
+        <DialogContent className="max-w-5xl p-4">
+          <DialogHeader>
+            <DialogTitle>{expandedScreenshot?.stepName ?? 'Failure Screenshot'}</DialogTitle>
+            <DialogDescription>Captured from the failed scenario step.</DialogDescription>
+          </DialogHeader>
+          {expandedScreenshot && (
+            <Image
+              src={`/api/reports/steps/${expandedScreenshot.stepId}/screenshot`}
+              alt={`Failure screenshot for step ${expandedScreenshot.stepName}`}
+              width={1600}
+              height={900}
+              unoptimized
+              className="max-h-[75vh] w-full rounded-md border object-contain"
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/templates/starter/src/components/table/table-actions.tsx

@@ -0,0 +1,174 @@
+'use client'
+
+import React, { useState } from 'react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import { MoreHorizontal, Pencil, Trash, Eye, CheckCircleIcon, XCircle } from 'lucide-react'
+import { Button } from '../ui/button'
+import Link from 'next/link'
+
+import { ActionResponse } from '@/types/form/actionHandler'
+import { toast } from '@/hooks/use-toast'
+import DeletePrompt from '../user-prompt/delete-prompt'
+
+const TableActions = ({
+  modifyLink,
+  resolveConflictsHandler,
+  deleteHandler,
+  viewLink,
+  showCancelButton = false,
+  cancelHandler,
+  cancelButtonDisabled = false,
+  deleteButtonDisabled = false,
+  viewActionText = 'View',
+  editActionText = 'Edit',
+  deleteActionText = 'Delete',
+  cancelActionText = 'Cancel',
+  editActionIcon = <Pencil className="h-4 w-4" />,
+  deleteActionIcon = <Trash className="h-4 w-4" />,
+  viewActionIcon = <Eye className="h-4 w-4" />,
+  cancelActionIcon = <XCircle className="h-4 w-4" />,
+}: {
+  modifyLink?: string
+  deleteHandler: () => Promise<ActionResponse>
+  resolveConflictsHandler?: () => Promise<ActionResponse>
+  editActionText?: string
+  deleteActionText?: string
+  editActionIcon?: React.ReactNode
+  deleteActionIcon?: React.ReactNode
+  viewActionText?: string
+  viewActionIcon?: React.ReactNode
+  viewLink?: string
+  showCancelButton?: boolean
+  cancelHandler?: () => Promise<ActionResponse>
+  cancelButtonDisabled?: boolean
+  cancelActionText?: string
+  cancelActionIcon?: React.ReactNode
+  deleteButtonDisabled?: boolean
+}) => {
+  const [isCancelling, setIsCancelling] = useState(false)
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+
+  const handleDelete = async () => {
+    const res = await deleteHandler()
+    if (res.status === 200) {
+      toast({
+        title: 'Item(s) deleted successfully',
+      })
+      return true
+    } else {
+      toast({
+        title: `${res.message}`,
+        description: res.error,
+        variant: 'destructive',
+      })
+    }
+
+    return false
+  }
+
+  return (
+    <>
+      <DeletePrompt
+        dialogTitle="Delete Item"
+        dialogDescription="Please confirm your action"
+        confirmationText="Are you sure you want to delete this item?"
+        deleteHandler={handleDelete}
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">Open menu</span>
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {showCancelButton && (
+            <DropdownMenuItem
+              disabled={cancelButtonDisabled || isCancelling}
+              onClick={async () => {
+                if (!cancelHandler) return
+                setIsCancelling(true)
+                try {
+                  const res = await cancelHandler()
+                  if (res.status === 200) {
+                    toast({
+                      title: 'Test run cancellation requested',
+                      description: res.message || 'The test run is being cancelled.',
+                    })
+                  } else {
+                    toast({
+                      title: 'Error cancelling test run',
+                      description: res.error || res.message,
+                      variant: 'destructive',
+                    })
+                    setIsCancelling(false)
+                  }
+                } catch (error) {
+                  toast({
+                    title: 'Error cancelling test run',
+                    description: error instanceof Error ? error.message : 'An unexpected error occurred',
+                    variant: 'destructive',
+                  })
+                  setIsCancelling(false)
+                }
+              }}
+            >
+              <span className="flex items-center gap-2">
+                {cancelActionIcon} {cancelActionText}
+              </span>
+            </DropdownMenuItem>
+          )}
+          {viewLink && (
+            <DropdownMenuItem>
+              <Link href={viewLink}>
+                <span className="flex items-center gap-2">
+                  {viewActionIcon} {viewActionText}
+                </span>
+              </Link>
+            </DropdownMenuItem>
+          )}
+          {modifyLink && (
+            <DropdownMenuItem>
+              <Link href={modifyLink}>
+                <span className="flex items-center gap-2">
+                  {editActionIcon} {editActionText}
+                </span>
+              </Link>
+            </DropdownMenuItem>
+          )}
+
+          <DropdownMenuItem
+            disabled={deleteButtonDisabled}
+            onClick={() => {
+              setIsDeleteDialogOpen(true)
+            }}
+          >
+            <span className="flex items-center gap-2">
+              {deleteActionIcon} {deleteActionText}
+            </span>
+          </DropdownMenuItem>
+          {resolveConflictsHandler && (
+            <DropdownMenuItem>
+              <span className="flex items-center gap-2" onClick={resolveConflictsHandler}>
+                <CheckCircleIcon className="h-4 w-4" /> Mark conflicts as resolved
+              </span>
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
+
+export default TableActions

package/templates/starter/src/components/test-case/test-case-columns.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import { Checkbox } from '@/components/ui/checkbox'
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { formatDateTime } from '@/lib/utils'
+import { TestCasePickerRow } from '@/types/test-case-picker'
+import { ColumnDef } from '@tanstack/react-table'
+
+export const testCaseDataColumns: ColumnDef<TestCasePickerRow>[] = [
+  {
+    accessorKey: 'title',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Title" />,
+    cell: ({ row }) => <div className="min-w-[14rem] font-medium">{row.original.title}</div>,
+  },
+  {
+    accessorKey: 'description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
+    cell: ({ row }) => (
+      <div className="max-w-xl whitespace-normal text-sm text-muted-foreground">
+        {row.original.description?.trim() || '-'}
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'tags',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Tags" />,
+    cell: ({ row }) => {
+      const tags = row.original.tags || []
+      return (
+        <div className="flex flex-wrap gap-1">
+          {tags.length > 0 ? tags.map(tag => <Badge key={tag.id}>{tag.name}</Badge>) : '-'}
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: 'steps',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Steps" />,
+    cell: ({ row }) => <div>{row.original.steps.length}</div>,
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
+    cell: ({ row }) => formatDateTime(row.original.createdAt),
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
+    cell: ({ row }) => formatDateTime(row.original.updatedAt),
+  },
+]
+
+export const testCaseSelectionColumn: ColumnDef<TestCasePickerRow> = {
+  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,
+}
+
+export const testCasePickerColumns: ColumnDef<TestCasePickerRow>[] = [testCaseSelectionColumn, ...testCaseDataColumns]

package/templates/starter/src/components/test-case/test-case-form-helpers.test.ts

@@ -0,0 +1,100 @@
+import { StepParameterType, TemplateStepIcon } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  buildScenarioPreview,
+  buildScenarioSteps,
+  getNodesWithMissingMandatoryParams,
+} from './test-case-form-helpers'
+
+describe('test-case form helpers', () => {
+  it('builds gherkin preview text from ordered scenario steps', () => {
+    expect(
+      buildScenarioPreview('Login works', 'Smoke path', {
+        'node-1': {
+          order: 1,
+          label: 'Open login page',
+          gherkinStep: 'open login page',
+          parameters: [],
+          templateStepId: 'step-1',
+        },
+        'node-2': {
+          order: 2,
+          label: 'See dashboard',
+          gherkinStep: 'should see dashboard',
+          parameters: [],
+          templateStepId: 'step-2',
+        },
+      }),
+    ).toBe(`Scenario: [Login works] Smoke path\nGiven open login page\nThen should see dashboard`)
+  })
+
+  it('normalizes template default values into schema-ready step values', () => {
+    expect(
+      buildScenarioSteps({
+        'node-1': {
+          order: 1,
+          label: 'Fill email',
+          gherkinStep: 'fill email',
+          icon: 'INPUT',
+          parameters: [
+            {
+              name: 'email',
+              defaultValue: 'qa@appraise.dev',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+          templateStepId: 'step-1',
+        },
+      }),
+    ).toEqual([
+      {
+        gherkinStep: 'fill email',
+        label: 'Fill email',
+        icon: TemplateStepIcon.INPUT,
+        parameters: [
+          {
+            name: 'email',
+            value: 'qa@appraise.dev',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        order: 1,
+        templateStepId: 'step-1',
+      },
+    ])
+  })
+
+  it('identifies non-isolated nodes that are missing mandatory parameters', () => {
+    expect(
+      getNodesWithMissingMandatoryParams(
+        {
+          'node-1': {
+            order: 1,
+            label: 'Click submit',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+          'node-2': {
+            order: -1,
+            label: 'Unused node',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+        },
+        [
+          {
+            id: 'param-1',
+            name: 'target',
+            type: StepParameterType.STRING,
+            order: 1,
+            isMandatory: true,
+            templateStepId: 'step-1',
+          } as never,
+        ],
+      ),
+    ).toEqual(['Click submit'])
+  })
+})