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

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

@@ -1,172 +1,172 @@
-'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
+'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-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/default/src/components/test-case/test-case-picker.tsx

@@ -0,0 +1,244 @@
+'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