create-appraisejs 0.3.0 → 0.3.1-alpha.0

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

@@ -27,7 +27,7 @@ const Tags = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<Tag className="h-8 w-8" />}
+          icon={<Tag className="size-8" />}
           title="No tags found"
           description="Get started by creating a tag to categorize your test cases and test runs"
           createRoute="/tags/create"
@@ -42,7 +42,7 @@ const Tags = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <Tag className="mr-2 h-8 w-8" />
+            <Tag className="mr-2 size-8" />
             Tags
           </span>
         </PageHeader>

package/templates/starter/src/app/(base)/tags/tag-form-helpers.ts

@@ -1,5 +1,6 @@
 import { tagSchema, type Tag } from '@/constants/form-opts/tag-form-opts'
 import { type ActionResponse } from '@/types/form/actionHandler'
+import type { Tag as PrismaTag } from '@prisma/client'
 
 export type TagFormSubmitAction = (_prev: unknown, value: Tag, id?: string) => Promise<ActionResponse>
 
@@ -11,3 +12,11 @@ export const tagFieldValidators = {
 export function getActionErrorMessage(response: ActionResponse) {
   return response.error || response.message || 'Unable to save tag.'
 }
+
+export function getCreatedTag(data: ActionResponse['data']) {
+  if (typeof data === 'object' && data !== null && 'id' in data && 'name' in data && 'tagExpression' in data) {
+    return data as PrismaTag
+  }
+
+  return null
+}

package/templates/starter/src/app/(base)/tags/tag-form.test.tsx

@@ -2,7 +2,7 @@
 
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import TagForm from './tag-form'
 
@@ -22,6 +22,11 @@ vi.mock('@/hooks/use-toast', () => ({
 }))
 
 describe('TagForm', () => {
+  beforeEach(() => {
+    push.mockReset()
+    toast.mockReset()
+  })
+
   it('submits valid values, shows a toast, and navigates back to the tags list', async () => {
     const user = userEvent.setup()
     const onSubmitAction = vi.fn().mockResolvedValue({
@@ -58,6 +63,43 @@ describe('TagForm', () => {
     expect(push).toHaveBeenCalledWith('/tags')
   })
 
+  it('does not redirect and calls onSuccess with created tag data in dialog mode', async () => {
+    const user = userEvent.setup()
+    const onSuccess = vi.fn()
+    const onSubmitAction = vi.fn().mockResolvedValue({
+      status: 200,
+      data: {
+        id: 'tag-2',
+        name: 'Inline Tag',
+        tagExpression: '@inline',
+      },
+    })
+
+    render(
+      <TagForm
+        successTitle="Tag created"
+        successMessage="Tag created successfully"
+        onSubmitAction={onSubmitAction}
+        onSuccess={onSuccess}
+        redirectPath={null}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Name'), 'Inline Tag')
+    await user.type(screen.getByLabelText('Tag Expression'), '@inline')
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalledWith({
+        id: 'tag-2',
+        name: 'Inline Tag',
+        tagExpression: '@inline',
+      })
+    })
+
+    expect(push).not.toHaveBeenCalled()
+  })
+
   it('shows validation feedback for an invalid tag expression and does not submit', async () => {
     const user = userEvent.setup()
     const onSubmitAction = vi.fn()

package/templates/starter/src/app/(base)/tags/tag-form.tsx

@@ -4,12 +4,14 @@ import { Button } from '@/components/ui/button'
 import ErrorMessage from '@/components/form/error-message'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { formOpts, type Tag } from '@/constants/form-opts/tag-form-opts'
+import { tagFormOpts, type Tag } from '@/constants/form-opts/tag-form-opts'
 import { toast } from '@/hooks/use-toast'
-import { getActionErrorMessage, tagFieldValidators, type TagFormSubmitAction } from './tag-form-helpers'
+import { getActionErrorMessage, getCreatedTag, tagFieldValidators, type TagFormSubmitAction } from './tag-form-helpers'
 
+import type { Tag as PrismaTag } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
 import { useRouter } from 'next/navigation'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 
 type TagFormProps = {
   defaultValues?: Tag
@@ -17,6 +19,8 @@ type TagFormProps = {
   successMessage: string
   id?: string
   onSubmitAction: TagFormSubmitAction
+  onSuccess?: (tag: PrismaTag) => void | Promise<void>
+  redirectPath?: string | null
 }
 
 type TagFieldErrorsProps = {
@@ -43,30 +47,51 @@ function TagFieldErrors({ errors, isTouched }: TagFieldErrorsProps) {
 
   return (
     <div className="flex flex-col gap-1" aria-live="polite">
-      {errors.map((error, index) => (
-        <ErrorMessage
-          key={`${String(error)}-${index}`}
-          message={getErrorMessage(error)}
-          visible={true}
-        />
+      {errors.map(error => (
+        <ErrorMessage key={getErrorMessage(error)} message={getErrorMessage(error)} visible={true} />
       ))}
     </div>
   )
 }
 
-const TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitAction }: TagFormProps) => {
-  const router = useRouter()
+const TagForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  id,
+  onSubmitAction,
+  onSuccess,
+  redirectPath = '/tags',
+}: TagFormProps) => {
+  const { push } = useRouter()
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts?.defaultValues,
-    validators: formOpts?.validators,
+    defaultValues: defaultValues ?? tagFormOpts.defaultValues,
+    validators: tagFormOpts.validators,
     onSubmit: async ({ value }) => {
       const res = await onSubmitAction(undefined, value, id)
       if (res.status === 200) {
+        if (onSuccess) {
+          const createdTag = getCreatedTag(res.data)
+          if (!createdTag) {
+            toast({
+              title: 'Error',
+              description: 'Created tag data was not returned.',
+              variant: 'destructive',
+            })
+            return
+          }
+
+          await onSuccess(createdTag)
+        }
+
         toast({
           title: successTitle,
           description: successMessage,
         })
-        router.push('/tags')
+
+        if (redirectPath) {
+          push(redirectPath)
+        }
       }
       if (res.status === 400) {
         toast({
@@ -85,13 +110,7 @@ const TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitActi
     },
   })
   return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
+    <TanStackForm onSubmit={() => form.handleSubmit()}>
       <form.Field
         name="name"
         validators={{
@@ -100,7 +119,7 @@ const TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitActi
       >
         {field => {
           return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+            <div className="mb-4 flex w-full flex-col gap-2">
               <Label htmlFor={field.name}>Name</Label>
               <Input id={field.name} value={field.state.value} onChange={e => field.handleChange(e.target.value)} />
               <TagFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
@@ -116,7 +135,7 @@ const TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitActi
       >
         {field => {
           return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+            <div className="mb-4 flex w-full flex-col gap-2">
               <Label htmlFor={field.name}>Tag Expression</Label>
               <Input
                 id={field.name}
@@ -136,7 +155,7 @@ const TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitActi
           </Button>
         )}
       </form.Subscribe>
-    </form>
+    </TanStackForm>
   )
 }
 

package/templates/starter/src/app/(base)/tags/tag-table-columns.tsx

@@ -1,63 +1,63 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { Tag } from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { deleteTagAction } from '@/actions/tags/tag-actions'
-import { formatDateTime } from '@/lib/utils'
-
-export const tagTableCols: ColumnDef<Tag>[] = [
-  {
-    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: 'tagExpression',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Tag Expression" />,
-  },
-  {
-    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 tag = row.original
-      return <TableActions modifyLink={`/tags/modify/${tag.id}`} deleteHandler={() => deleteTagAction([tag.id])} />
-    },
-  },
-]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { Tag } from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { deleteTagAction } from '@/actions/tags/tag-actions'
+import { formatDateTime } from '@/lib/utils'
+
+export const tagTableCols: ColumnDef<Tag>[] = [
+  {
+    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: 'tagExpression',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Tag Expression" />,
+  },
+  {
+    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 tag = row.original
+      return <TableActions modifyLink={`/tags/modify/${tag.id}`} deleteHandler={() => deleteTagAction([tag.id])} />
+    },
+  },
+]

package/templates/starter/src/app/(base)/tags/tag-table.tsx

@@ -1,29 +1,29 @@
-import { DataTable } from '@/components/ui/data-table'
-import { deleteTagAction, getAllTagsAction } from '@/actions/tags/tag-actions'
-import { Tag } from '@prisma/client'
-import React from 'react'
-import { tagTableCols } from './tag-table-columns'
-
-const TagTable = async () => {
-  const { data: tags, error: tagsError } = await getAllTagsAction()
-
-  if (tagsError) {
-    return <div>Error: {tagsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={tagTableCols}
-        data={tags as Tag[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/tags/create"
-        modifyLink="/tags/modify"
-        deleteAction={deleteTagAction}
-      />
-    </>
-  )
-}
-
-export default TagTable
+import { DataTable } from '@/components/ui/data-table'
+import { deleteTagAction, getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Tag } from '@prisma/client'
+import React from 'react'
+import { tagTableCols } from './tag-table-columns'
+
+const TagTable = async () => {
+  const { data: tags, error: tagsError } = await getAllTagsAction()
+
+  if (tagsError) {
+    return <div>Error: {tagsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={tagTableCols}
+        data={tags as Tag[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/tags/create"
+        modifyLink="/tags/modify"
+        deleteAction={deleteTagAction}
+      />
+    </>
+  )
+}
+
+export default TagTable

package/templates/starter/src/app/(base)/template-step-groups/create/page.tsx

@@ -1,28 +1,28 @@
-import { createTemplateStepGroupAction } from '@/actions/template-step-group/template-step-group-actions'
-import { TemplateStepGroupForm } from '../template-step-group-form'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Create Template Step Group',
-  description: 'Create a new template step group to organize related template steps',
-}
-
-const CreateTemplateStepGroup = async () => {
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Create Template Step Group</PageHeader>
-        <HeaderSubtitle>Create a new template step group to organize related template steps</HeaderSubtitle>
-      </div>
-      <TemplateStepGroupForm
-        successTitle="Group created"
-        successMessage="Template step group created successfully"
-        onSubmitAction={createTemplateStepGroupAction}
-      />
-    </>
-  )
-}
-
-export default CreateTemplateStepGroup
+import { createTemplateStepGroupAction } from '@/actions/template-step-group/template-step-group-actions'
+import { TemplateStepGroupForm } from '../template-step-group-form'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Template Step Group',
+  description: 'Create a new template step group to organize related template steps',
+}
+
+const CreateTemplateStepGroup = async () => {
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Template Step Group</PageHeader>
+        <HeaderSubtitle>Create a new template step group to organize related template steps</HeaderSubtitle>
+      </div>
+      <TemplateStepGroupForm
+        successTitle="Group created"
+        successMessage="Template step group created successfully"
+        onSubmitAction={createTemplateStepGroupAction}
+      />
+    </>
+  )
+}
+
+export default CreateTemplateStepGroup

package/templates/starter/src/app/(base)/template-step-groups/page.tsx

@@ -27,7 +27,7 @@ const TemplateStepGroups = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<Component className="h-8 w-8" />}
+          icon={<Component className="size-8" />}
           title="No template step groups found"
           description="Get started by creating a template step group to organize related template steps"
           createRoute="/template-step-groups/create"
@@ -42,7 +42,7 @@ const TemplateStepGroups = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <Component className="mr-2 h-8 w-8" />
+            <Component className="mr-2 size-8" />
             Template Step Groups
           </span>
         </PageHeader>

package/templates/starter/src/app/(base)/template-step-groups/template-step-group-form.tsx

@@ -5,9 +5,10 @@ import ErrorMessage from '@/components/form/error-message'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { formOpts, type TemplateStepGroup } from '@/constants/form-opts/template-step-group-form-opts'
+import { templateStepGroupFormOpts, type TemplateStepGroup } from '@/constants/form-opts/template-step-group-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { useForm } from '@tanstack/react-form'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 import { useRouter } from 'next/navigation'
 import {
   getActionErrorMessage,
@@ -49,8 +50,8 @@ function TemplateStepGroupFieldErrors({ errors, isTouched }: TemplateStepGroupFi
 
   return (
     <div className="flex flex-col gap-1" aria-live="polite">
-      {errors.map((error, index) => (
-        <ErrorMessage key={`${String(error)}-${index}`} message={getErrorMessage(error)} visible={true} />
+      {errors.map(error => (
+        <ErrorMessage key={getErrorMessage(error)} message={getErrorMessage(error)} visible={true} />
       ))}
     </div>
   )
@@ -63,10 +64,10 @@ export const TemplateStepGroupForm = ({
   id,
   onSubmitAction,
 }: TemplateStepGroupFormProps) => {
-  const router = useRouter()
+  const { push } = useRouter()
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts.defaultValues,
-    validators: formOpts.validators,
+    defaultValues: defaultValues ?? templateStepGroupFormOpts.defaultValues,
+    validators: templateStepGroupFormOpts.validators,
     onSubmit: async ({ value }) => {
       const res = await onSubmitAction(undefined, value, id)
       if (res.status === 200) {
@@ -74,7 +75,7 @@ export const TemplateStepGroupForm = ({
           title: successTitle,
           description: successMessage,
         })
-        router.push('/template-step-groups')
+        push('/template-step-groups')
       }
       if (res.status === 400) {
         toast({
@@ -93,13 +94,7 @@ export const TemplateStepGroupForm = ({
     },
   })
   return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
+    <TanStackForm onSubmit={() => form.handleSubmit()}>
       <form.Field
         name="name"
         validators={{
@@ -176,6 +171,6 @@ export const TemplateStepGroupForm = ({
           </Button>
         )}
       </form.Subscribe>
-    </form>
+    </TanStackForm>
   )
 }

package/templates/starter/src/app/(base)/template-step-groups/template-step-group-table-columns.tsx

@@ -47,11 +47,7 @@ export const templateStepGroupTableCols: ColumnDef<TemplateStepGroupTableRow>[]
     cell: ({ row }) => {
       const templateStepGroup = row.original
       const icon =
-        templateStepGroup.type === 'ACTION' ? (
-          <MousePointer2 className="h-4 w-4" />
-        ) : (
-          <CheckCheck className="h-4 w-4" />
-        )
+        templateStepGroup.type === 'ACTION' ? <MousePointer2 className="size-4" /> : <CheckCheck className="size-4" />
       return (
         <Badge variant="outline" className="flex w-fit items-center gap-1">
           {icon}

package/templates/starter/src/app/(base)/template-steps/modify/[id]/page.tsx

@@ -13,20 +13,26 @@ export const metadata: Metadata = {
 
 export default async function ModifyTemplateStepPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
-  const [templateStepResponse, templateStepGroupsResponse] = await Promise.all([
-    getTemplateStepByIdAction(id),
-    getAllTemplateStepGroupsAction(),
-  ])
+  if (!id?.trim()) {
+    return <div>Error: Invalid template step id.</div>
+  }
 
-  if (templateStepResponse.error || templateStepGroupsResponse.error) {
-    return <div>Error: {templateStepResponse.error || templateStepGroupsResponse.error}</div>
+  const templateStepResponse = await getTemplateStepByIdAction(id)
+  if (templateStepResponse.error) {
+    return <div>Error: {templateStepResponse.error}</div>
   }
 
   const templateStep = getEditableTemplateStep(templateStepResponse.data)
-  const templateStepGroups = getTemplateStepGroupRows(templateStepGroupsResponse.data)
   if (!templateStep) {
     return <div>Error: Invalid template step</div>
   }
+
+  const templateStepGroupsResponse = await getAllTemplateStepGroupsAction()
+  if (templateStepGroupsResponse.error) {
+    return <div>Error: {templateStepGroupsResponse.error}</div>
+  }
+
+  const templateStepGroups = getTemplateStepGroupRows(templateStepGroupsResponse.data)
   return (
     <TemplateStepForm
       successTitle="Template step modified"

package/templates/starter/src/app/(base)/template-steps/page.tsx

@@ -28,7 +28,7 @@ const TemplateSteps = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<LayoutTemplate className="h-8 w-8" />}
+          icon={<LayoutTemplate className="size-8" />}
           title="No template steps found"
           description="Get started by creating a template step to define reusable test steps"
           createRoute="/template-steps/create"
@@ -43,7 +43,7 @@ const TemplateSteps = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <LayoutTemplate className="mr-2 h-8 w-8" />
+            <LayoutTemplate className="mr-2 size-8" />
             Template Steps
           </span>
         </PageHeader>