create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -1,172 +0,0 @@
-'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',
-      })
-      setIsDeleteDialogOpen(false)
-    } else {
-      toast({
-        title: `${res.message}`,
-        description: res.error,
-        variant: 'destructive',
-      })
-    }
-  }
-  
-  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/default/src/components/test-case/test-case-picker.tsx

@@ -1,244 +0,0 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { DataTablePagination } from '@/components/ui/data-table-pagination'
-import { testCasePickerColumns } from '@/components/test-case/test-case-columns'
-import { Badge } from '@/components/ui/badge'
-import { TestCasePickerRow } from '@/types/test-case-picker'
-import {
-  ColumnFiltersState,
-  PaginationState,
-  RowSelectionState,
-  SortingState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table'
-import { Search } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { cn } from '@/lib/utils'
-
-type TestCasePickerProps = {
-  testCases: TestCasePickerRow[]
-  selectedIds: string[]
-  onSave: (selectedIds: string[]) => void
-  triggerPlaceholder: string
-  dialogTitle: string
-  dialogDescription: string
-  selectedLabel: string
-}
-
-const createSelectionState = (selectedIds: string[]): RowSelectionState =>
-  selectedIds.reduce<RowSelectionState>((acc, id) => {
-    acc[id] = true
-    return acc
-  }, {})
-
-export function TestCasePicker({
-  testCases,
-  selectedIds,
-  onSave,
-  triggerPlaceholder,
-  dialogTitle,
-  dialogDescription,
-  selectedLabel,
-}: TestCasePickerProps) {
-  const [open, setOpen] = useState(false)
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-  const [globalFilter, setGlobalFilter] = useState('')
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>(() => createSelectionState(selectedIds))
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  })
-
-  useEffect(() => {
-    if (!open) {
-      return
-    }
-
-    setRowSelection(createSelectionState(selectedIds))
-    setColumnFilters([])
-    setGlobalFilter('')
-    setPagination(current => ({
-      ...current,
-      pageIndex: 0,
-    }))
-  }, [open, selectedIds])
-
-  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table's useReactTable returns unstable refs; React Compiler skips memoization
-  const table = useReactTable({
-    data: testCases,
-    columns: testCasePickerColumns,
-    getCoreRowModel: getCoreRowModel(),
-    onSortingChange: setSorting,
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    onGlobalFilterChange: setGlobalFilter,
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-    enableRowSelection: true,
-    getRowId: row => row.id,
-    state: {
-      sorting,
-      columnFilters,
-      globalFilter,
-      rowSelection,
-      pagination,
-    },
-    globalFilterFn: (row, _columnId, filterValue) => {
-      const query = String(filterValue).trim().toLowerCase()
-      if (!query) {
-        return true
-      }
-
-      const searchableText = [
-        row.original.title,
-        row.original.description ?? '',
-        ...row.original.tags.map(tag => tag.name),
-      ]
-        .join(' ')
-        .toLowerCase()
-
-      return searchableText.includes(query)
-    },
-  })
-
-  const savedTestCases = selectedIds
-    .map(selectedId => testCases.find(testCase => testCase.id === selectedId))
-    .filter((testCase): testCase is TestCasePickerRow => Boolean(testCase))
-  const selectionSummaryLabel = selectedLabel.replace(/^selected\s+/i, '')
-  const shouldConstrainSavedListHeight = savedTestCases.length > 3
-
-  const saveDraftSelection = () => {
-    const nextSelectedIds = testCases.filter(testCase => rowSelection[testCase.id]).map(testCase => testCase.id)
-
-    onSave(nextSelectedIds)
-    setOpen(false)
-  }
-
-  return (
-    <div className="flex flex-col gap-3">
-      <Button type="button" variant="outline" className="justify-between" onClick={() => setOpen(true)}>
-        <span className={selectedIds.length > 0 ? 'text-foreground' : 'text-muted-foreground'}>
-          {selectedIds.length > 0 ? `${selectedIds.length} ${selectionSummaryLabel.toLowerCase()} selected` : triggerPlaceholder}
-        </span>
-        <span className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Browse</span>
-      </Button>
-
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="max-h-[90vh] max-w-6xl gap-0 overflow-hidden p-0">
-          <DialogHeader className="border-b px-6 py-4">
-            <DialogTitle>{dialogTitle}</DialogTitle>
-            <DialogDescription>{dialogDescription}</DialogDescription>
-          </DialogHeader>
-
-          <div className="flex flex-col gap-4 px-6 py-4">
-            <div className="flex items-center gap-3">
-              <div className="relative flex-1">
-                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  value={globalFilter}
-                  onChange={event => table.setGlobalFilter(event.target.value)}
-                  placeholder="Search by title, description, or tag..."
-                  className="pl-9"
-                />
-              </div>
-              <div className="text-sm text-muted-foreground">{table.getSelectedRowModel().rows.length} selected</div>
-            </div>
-
-            <ScrollArea className="h-[420px] rounded-md border">
-              <Table>
-                <TableHeader className="sticky top-0 z-10 bg-background">
-                  {table.getHeaderGroups().map(headerGroup => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map(header => (
-                        <TableHead key={header.id}>
-                          {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {table.getRowModel().rows.length > 0 ? (
-                    table.getRowModel().rows.map(row => (
-                      <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                        {row.getVisibleCells().map(cell => (
-                          <TableCell key={cell.id}>
-                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                          </TableCell>
-                        ))}
-                      </TableRow>
-                    ))
-                  ) : (
-                    <TableRow>
-                      <TableCell colSpan={testCasePickerColumns.length} className="h-24 text-center">
-                        No test cases found.
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </TableBody>
-              </Table>
-            </ScrollArea>
-
-            <DataTablePagination table={table} showSelectedRows={false} />
-          </div>
-
-          <DialogFooter className="border-t px-6 py-4">
-            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="button" onClick={saveDraftSelection}>
-              Save
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {savedTestCases.length > 0 && (
-        <div className="rounded-md border bg-muted/20">
-          <div className="border-b px-4 py-3 text-sm font-medium">{selectedLabel}</div>
-          <ScrollArea className={cn(shouldConstrainSavedListHeight && 'h-56')}>
-            <div className="space-y-3 p-4">
-              {savedTestCases.map(testCase => (
-                <div key={testCase.id} className="rounded-md border bg-background p-3">
-                  <div className="mb-1 text-sm font-semibold">{testCase.title}</div>
-                  <p className="text-xs text-muted-foreground">{testCase.description?.trim() || 'No description provided.'}</p>
-                  <div className="mt-3 flex flex-wrap gap-2">
-                    <Badge variant="secondary">{testCase.steps.length} steps</Badge>
-                    {testCase.tags.slice(0, 3).map(tag => (
-                      <Badge key={tag.id} variant="outline">
-                        {tag.name}
-                      </Badge>
-                    ))}
-                    {testCase.tags.length > 3 && <Badge variant="outline">+{testCase.tags.length - 3} more</Badge>}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </ScrollArea>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default TestCasePicker

package/templates/default/src/components/test-run/download-logs-button.tsx

@@ -1,92 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { Download, LoaderCircle } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
-import { toast } from '@/hooks/use-toast'
-
-interface DownloadLogsButtonProps {
-  testRunId: string
-  className?: string
-}
-
-export function DownloadLogsButton({ testRunId, className }: DownloadLogsButtonProps) {
-  const [isDownloading, setIsDownloading] = useState(false)
-
-  const handleDownload = async () => {
-    setIsDownloading(true)
-    try {
-      const response = await fetch(`/api/test-runs/${testRunId}/download`)
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
-        throw new Error(errorData.error || `Failed to download: ${response.statusText}`)
-      }
-
-      // Get the filename from Content-Disposition header or use a default
-      const contentDisposition = response.headers.get('Content-Disposition')
-      let filename = `test-run-${testRunId}.zip`
-      if (contentDisposition) {
-        const filenameMatch = contentDisposition.match(/filename="?(.+?)"?$/)
-        if (filenameMatch) {
-          filename = filenameMatch[1]
-        }
-      }
-
-      // Create a blob from the response
-      const blob = await response.blob()
-
-      // Create a download link and trigger it
-      const url = window.URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = filename
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      window.URL.revokeObjectURL(url)
-
-      toast({
-        title: 'Download started',
-        description: 'Run artifacts are being downloaded',
-      })
-    } catch (error) {
-      console.error('[DownloadLogsButton] Error downloading logs:', error)
-      toast({
-        title: 'Download failed',
-        description: error instanceof Error ? error.message : 'Failed to download run artifacts',
-        variant: 'destructive',
-      })
-    } finally {
-      setIsDownloading(false)
-    }
-  }
-
-  return (
-    <Button onClick={handleDownload} disabled={isDownloading} variant="outline" size="sm" className={className}>
-      <AnimatePresence mode="wait" initial={false}>
-        <motion.div
-          key={isDownloading ? 'downloading' : 'idle'}
-          initial={{ opacity: 0, y: 4 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -4 }}
-          transition={{ duration: 0.15 }}
-          className="flex items-center gap-2"
-        >
-          {isDownloading ? (
-            <>
-              <LoaderCircle className="h-4 w-4 animate-spin" />
-              Downloading...
-            </>
-          ) : (
-            <>
-              <Download className="h-4 w-4" />
-              Download Run Artifacts
-            </>
-          )}
-        </motion.div>
-      </AnimatePresence>
-    </Button>
-  )
-}