create-appraise 0.1.0

package/templates/default/src/app/(base)/template-steps/template-step-form.tsx

@@ -0,0 +1,384 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { formOpts, TemplateStep } from '@/constants/form-opts/template-test-step-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { ActionResponse } from '@/types/form/actionHandler'
+import { StepParameterType, TemplateStepType, TemplateStepParameter, TemplateStepIcon } from '@prisma/client'
+import { useForm } from '@tanstack/react-form'
+import { z } from 'zod'
+import CodeMirror, { EditorView } from '@uiw/react-codemirror'
+import { langs } from '@uiw/codemirror-extensions-langs'
+import { githubDark } from '@uiw/codemirror-theme-github'
+import { useEffect, useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import ParamChip from './paramChip'
+import { useRouter } from 'next/navigation'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { AlertCircleIcon, Save } from 'lucide-react'
+
+const getInitialFunctionDefinition = () => `When('', async function(this:CustomWorld){});`
+
+export const TemplateStepForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  id,
+  onSubmitAction,
+  templateStepGroups,
+}: {
+  defaultValues?: TemplateStep
+  successTitle: string
+  successMessage: string
+  id?: string
+  onSubmitAction: (_prev: unknown, value: TemplateStep, id?: string) => Promise<ActionResponse>
+  templateStepGroups: Array<{ id: string; name: string }>
+}) => {
+  const router = useRouter()
+  const [signature, setSignature] = useState(defaultValues?.signature ?? '')
+  const [functionDefinition, setFunctionDefinition] = useState(
+    defaultValues?.functionDefinition ?? getInitialFunctionDefinition(),
+  )
+  const [type, setType] = useState<TemplateStepType>(
+    (defaultValues?.type as TemplateStepType) ?? TemplateStepType.ACTION,
+  )
+  const [params, setParams] = useState<TemplateStepParameter[]>(
+    (defaultValues?.params as TemplateStepParameter[]) ?? [],
+  )
+
+  const form = useForm({
+    defaultValues: defaultValues ?? formOpts?.defaultValues,
+    validators: formOpts?.validators,
+    onSubmit: async ({ value }) => {
+      value.functionDefinition = functionDefinition
+      const res = await onSubmitAction(undefined, value, id)
+      if (res.status === 200) {
+        toast({
+          title: successTitle,
+          description: successMessage,
+        })
+        setSignature('')
+        setFunctionDefinition(getInitialFunctionDefinition())
+        setType(TemplateStepType.ACTION)
+        setParams([])
+        router.push(`/template-steps`)
+      }
+      if (res.status === 400) {
+        toast({
+          title: 'Error',
+          description: res.error,
+          variant: 'destructive',
+        })
+      }
+      if (res.status === 500) {
+        toast({
+          title: 'Error',
+          description: res.error,
+          variant: 'destructive',
+        })
+      }
+    },
+  })
+
+  // Sync state with defaultValues when it changes (for update operation)
+  useEffect(() => {
+    if (defaultValues) {
+      setSignature(defaultValues.signature ?? '')
+      setFunctionDefinition(defaultValues.functionDefinition ?? getInitialFunctionDefinition())
+      setType((defaultValues.type as TemplateStepType) ?? TemplateStepType.ACTION)
+      setParams((defaultValues.params as TemplateStepParameter[]) ?? [])
+    }
+  }, [defaultValues])
+
+  useEffect(() => {
+    function updateStepSignature(
+      code: string,
+      newSignature: string,
+      type: TemplateStepType,
+      quoteType: `'` | `"` | '`' = `'`,
+    ): string {
+      if (type === TemplateStepType.ASSERTION) {
+        return code.replace(/(When|Then)\((['"`])(.*?)\2/, () => `Then(${quoteType}${newSignature}${quoteType}`)
+      }
+      return code.replace(/(When|Then)\((['"`])(.*?)\2/, () => `When(${quoteType}${newSignature}${quoteType}`)
+    }
+
+    const paramsString = params
+      .map(
+        param => `${param.name}: ${param.type.toLowerCase() === 'locator' ? 'SelectorName' : param.type.toLowerCase()}`,
+      )
+      .join(', ')
+    let updatedFunctionDefinition = updateStepSignature(functionDefinition, signature, type)
+    updatedFunctionDefinition = updatedFunctionDefinition.replace(
+      /async function\s*\(\s*this:CustomWorld(?:,\s*.*?)?\s*\)/,
+      `async function(this:CustomWorld${params.length > 0 ? ', ' : ''}${paramsString})`,
+    )
+    setFunctionDefinition(updatedFunctionDefinition)
+  }, [signature, type, params, functionDefinition])
+
+  return (
+    <>
+      <Alert variant="destructive" className="mb-4 max-w-fit">
+        <AlertCircleIcon />
+        <AlertTitle className="text-xl font-bold">
+          Please take precaution before updating function signature or parameters.
+        </AlertTitle>
+        <AlertDescription className="text-xs">
+          <p>
+            If you update the function signature or parameters, the function body will be updated in the file
+            automatically and your changes will be lost.
+          </p>
+        </AlertDescription>
+      </Alert>
+      <form
+        onSubmit={e => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <div className="flex gap-4">
+          <Card className="w-full bg-gray-500/10">
+            <CardHeader>
+              <CardTitle>Template Step Details</CardTitle>
+              <CardDescription>Configure your template step function details</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form.Field
+                name="name"
+                validators={{
+                  onChange: z.string().min(3, { message: 'Name must be at least 3 characters' }),
+                }}
+              >
+                {field => {
+                  return (
+                    <div className="mb-4 flex flex-col gap-2">
+                      <Label htmlFor={field.name}>Name</Label>
+                      <Input
+                        id={field.name}
+                        name={field.name}
+                        value={field.state.value}
+                        onChange={e => field.handleChange(e.target.value)}
+                      />
+                      {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>
+                  )
+                }}
+              </form.Field>
+              <form.Field name="description">
+                {field => {
+                  return (
+                    <div className="mb-4 flex flex-col gap-2">
+                      <Label htmlFor={field.name}>Description</Label>
+                      <Input
+                        id={field.name}
+                        name={field.name}
+                        value={field.state.value}
+                        onChange={e => field.handleChange(e.target.value)}
+                      />
+                      {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>
+                  )
+                }}
+              </form.Field>
+              <form.Field name="icon">
+                {field => {
+                  return (
+                    <div className="mb-4 flex flex-col gap-2">
+                      <Label htmlFor={field.name}>Icon</Label>
+                      <Select
+                        onValueChange={value => {
+                          field.handleChange(value)
+                        }}
+                        value={field.state.value}
+                      >
+                        <SelectTrigger id={field.name}>
+                          <SelectValue placeholder="Select an icon" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {Object.values(TemplateStepIcon).map(icon => (
+                            <SelectItem key={icon} value={icon}>
+                              {icon}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )
+                }}
+              </form.Field>
+              <form.Field
+                name="templateStepGroupId"
+                validators={{
+                  onChange: z.string().min(1, { message: 'Template step group is required' }),
+                }}
+              >
+                {field => {
+                  return (
+                    <div className="mb-4 flex flex-col gap-2">
+                      <Label htmlFor={field.name}>Template Step Group</Label>
+                      <Select
+                        onValueChange={value => {
+                          field.handleChange(value)
+                        }}
+                        value={field.state.value}
+                      >
+                        <SelectTrigger id={field.name}>
+                          <SelectValue placeholder="Select a template step group" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {templateStepGroups?.map(group => (
+                            <SelectItem key={group.id} value={group.id}>
+                              {group.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      {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>
+                  )
+                }}
+              </form.Field>
+              <form.Field
+                name="type"
+                validators={{
+                  onChange: z.string().min(1, { message: 'Type is required' }),
+                }}
+              >
+                {field => {
+                  return (
+                    <div className="mb-4 flex flex-col gap-2">
+                      <Label htmlFor={field.name}>Type</Label>
+                      <Select
+                        onValueChange={value => {
+                          field.handleChange(value)
+                          setType(value as TemplateStepType)
+                        }}
+                        value={field.state.value}
+                      >
+                        <SelectTrigger id={field.name}>
+                          <SelectValue placeholder="Select a type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {Object.values(TemplateStepType).map(type => (
+                            <SelectItem key={type} value={type}>
+                              {type}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      {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>
+                  )
+                }}
+              </form.Field>
+              <form.Field
+                name="signature"
+                validators={{
+                  onChange: z.string().min(3, { message: 'Signature is required' }),
+                }}
+              >
+                {field => {
+                  return (
+                    <div className="mb-4 flex flex-col gap-2">
+                      <Label htmlFor={field.name}>Signature</Label>
+                      <Input
+                        id={field.name}
+                        name={field.name}
+                        value={signature}
+                        onChange={e => {
+                          field.handleChange(e.target.value)
+                          setSignature(e.target.value)
+                        }}
+                      />
+                      {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>
+                  )
+                }}
+              </form.Field>
+              <form.Field name="params">
+                {field => {
+                  return (
+                    <div className="mb-4 flex flex-col gap-2">
+                      <Label htmlFor={field.name}>Parameters</Label>
+                      <ParamChip
+                        defaultValues={params}
+                        types={Object.values(StepParameterType)}
+                        onSubmit={value => {
+                          field.handleChange(value)
+                          setParams(value as TemplateStepParameter[])
+                        }}
+                      />
+                    </div>
+                  )
+                }}
+              </form.Field>
+              <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
+                {([canSubmit, isSubmitting]) => (
+                  <Button type="submit" disabled={!canSubmit}>
+                    <Save className="h-4 w-4" />
+                    {isSubmitting ? '...' : 'Save'}
+                  </Button>
+                )}
+              </form.Subscribe>
+            </CardContent>
+          </Card>
+          <div className="w-full">
+            <Card className="bg-gray-500/10">
+              <CardHeader>
+                <CardTitle>Template Step Function Definition (Preview)</CardTitle>
+                <CardDescription>
+                  Preview of your template step function definition that will be generated
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <form.Field name="functionDefinition">
+                  {field => {
+                    return (
+                      <div className="mb-4 flex w-full flex-col gap-2">
+                        <CodeMirror
+                          editable={false}
+                          value={functionDefinition}
+                          onChange={value => {
+                            field.handleChange(value)
+                            setFunctionDefinition(value)
+                          }}
+                          height="200px"
+                          extensions={[langs.typescript(), EditorView.lineWrapping]}
+                          theme={githubDark}
+                        />
+                      </div>
+                    )
+                  }}
+                </form.Field>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </form>
+    </>
+  )
+}

package/templates/default/src/app/(base)/template-steps/template-step-table-columns.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { deleteTemplateStepAction } from '@/actions/template-step/template-step-actions'
+import { TemplateStep, TemplateStepParameter, TemplateStepType } from '@prisma/client'
+import { formatDateTime } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { CheckCheck, MousePointer2 } from 'lucide-react'
+import { KeyToIconTransformer } from '@/lib/transformers/key-to-icon-transformer'
+import { Kbd, KbdGroup } from '@/components/ui/kbd'
+
+export const templateStepTableCols: ColumnDef<TemplateStep>[] = [
+  {
+    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,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
+  },
+  {
+    accessorKey: 'icon',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Icon" />,
+    cell: ({ row }) => {
+      const templateStep = row.original
+      return (
+        <Badge variant="outline" className="flex w-fit items-center gap-1">
+          {KeyToIconTransformer(templateStep.icon, 'h-4 w-4')}
+          {templateStep.icon.charAt(0).toUpperCase() + templateStep.icon.slice(1).toLowerCase()}
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'type',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
+    cell: ({ row }) => {
+      const templateStep = row.original
+      const icon =
+        templateStep.type === TemplateStepType.ACTION ? (
+          <MousePointer2 className="h-4 w-4" />
+        ) : (
+          <CheckCheck className="h-4 w-4" />
+        )
+      return (
+        <Badge variant="outline" className="flex w-fit items-center gap-1">
+          {icon} {templateStep.type.charAt(0).toUpperCase() + templateStep.type.slice(1).toLowerCase()}
+        </Badge>
+      )
+    },
+  },
+  {
+    accessorKey: 'parameters',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Parameters" />,
+    cell: ({ row }) => {
+      const parameters = row.original as TemplateStep & {
+        parameters: TemplateStepParameter[]
+      }
+      return (
+        <KbdGroup className="flex flex-wrap gap-1">
+          {parameters.parameters.map((parameter: TemplateStepParameter) => (
+            <Kbd
+              key={parameter.id}
+              className="bg-gray-200 px-2 text-xs text-gray-600 dark:bg-gray-700/55 dark:text-gray-400"
+            >
+              {parameter.name}
+            </Kbd>
+          ))}
+        </KbdGroup>
+      )
+    },
+  },
+  {
+    accessorKey: 'signature',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Signature" />,
+    cell: ({ row }) => {
+      const templateStep = row.original
+      const signature = templateStep.signature || ''
+      const parts: (string | React.ReactElement)[] = []
+      const regex = /\{(string|int)\}/g
+      let lastIndex = 0
+      let match
+
+      while ((match = regex.exec(signature)) !== null) {
+        if (match.index > lastIndex) {
+          parts.push(signature.slice(lastIndex, match.index))
+        }
+
+        parts.push(
+          <Badge key={match.index} variant="outline" className="mx-1 px-1.5">
+            {match[0]}
+          </Badge>,
+        )
+
+        lastIndex = regex.lastIndex
+      }
+
+      if (lastIndex < signature.length) {
+        parts.push(signature.slice(lastIndex))
+      }
+
+      return (
+        <div className="inline-flex flex-wrap items-center gap-0 text-sm">{parts.length > 0 ? parts : signature}</div>
+      )
+    },
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.createdAt)
+    },
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.updatedAt)
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const templateStep = row.original
+      return (
+        <TableActions
+          modifyLink={`/template-steps/modify/${templateStep.id}`}
+          deleteHandler={() => deleteTemplateStepAction([templateStep.id])}
+        />
+      )
+    },
+  },
+]

package/templates/default/src/app/(base)/template-steps/template-step-table.tsx

@@ -0,0 +1,24 @@
+import { deleteTemplateStepAction, getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { templateStepTableCols } from './template-step-table-columns'
+import { TemplateStep } from '@prisma/client'
+
+const TemplateStepTable = async () => {
+  const { data: templateSteps } = await getAllTemplateStepsAction()
+
+  return (
+    <>
+      <DataTable
+        columns={templateStepTableCols}
+        data={templateSteps as TemplateStep[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/template-steps/create"
+        modifyLink="/template-steps/modify"
+        deleteAction={deleteTemplateStepAction}
+      />
+    </>
+  )
+}
+
+export default TemplateStepTable

package/templates/default/src/app/(base)/template-test-cases/create/page.tsx

@@ -0,0 +1,56 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Blocks } from 'lucide-react'
+import React from 'react'
+import TemplateTestCaseForm from '../template-test-case-form'
+import { Locator, TemplateStep, TemplateStepParameter, LocatorGroup } from '@prisma/client'
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { getAllTemplateStepParamsAction } from '@/actions/template-step/template-step-actions'
+import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import { createTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Template Test Case',
+  description: 'Create a new template test case to quickly create test cases',
+}
+
+const CreateTemplateTestCase = async () => {
+  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
+
+  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
+
+  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
+
+  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
+
+  if (templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError) {
+    return <div>Error: {templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError}</div>
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Blocks className="mr-2 h-8 w-8" />
+            Create Template Test Case
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Create a new template test case to quickly create test cases</HeaderSubtitle>
+      </div>
+      <TemplateTestCaseForm
+        defaultNodesOrder={{}}
+        templateStepParams={templateStepParams as TemplateStepParameter[]}
+        templateSteps={templateSteps as TemplateStep[]}
+        locators={locators as Locator[]}
+        locatorGroups={locatorGroups as LocatorGroup[]}
+        onSubmitAction={createTemplateTestCaseAction}
+        defaultValueInput={true}
+      />
+    </>
+  )
+}
+
+export default CreateTemplateTestCase