create-appraisejs 0.3.0-alpha.0 → 0.3.0-alpha.1

package/templates/starter/src/app/(base)/locators/locator-table-columns.tsx

@@ -0,0 +1,74 @@
+'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 { deleteLocatorAction } from '@/actions/locator/locator-actions'
+import { formatDateTime } from '@/lib/utils'
+import type { LocatorTableRow } from './locator-helpers'
+
+export const locatorTableCols: ColumnDef<LocatorTableRow>[] =
+  [
+    {
+      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: 'value',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Value" />,
+    },
+    {
+      accessorKey: 'locatorGroup.name',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Locator Group" />,
+      cell: ({ row }) => row.original.locatorGroup?.name ?? '-',
+    },
+    {
+      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 locator = row.original
+        return (
+          <TableActions
+            modifyLink={`/locators/modify/${locator.id}`}
+            deleteHandler={() => deleteLocatorAction([locator.id])}
+          />
+        )
+      },
+    },
+  ]

package/templates/starter/src/app/(base)/locators/locator-table.tsx

@@ -0,0 +1,30 @@
+import { deleteLocatorAction, getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { locatorTableCols } from './locator-table-columns'
+import { getLocatorTableRows } from './locator-helpers'
+
+const LocatorTable = async () => {
+  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
+
+  if (locatorsError) {
+    return <div>Error: {locatorsError}</div>
+  }
+
+  const locatorRows = getLocatorTableRows(locators)
+
+  return (
+    <>
+      <DataTable
+        columns={locatorTableCols}
+        data={locatorRows}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/locators/create"
+        modifyLink="/locators/modify"
+        deleteAction={deleteLocatorAction}
+      />
+    </>
+  )
+}
+
+export default LocatorTable

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

@@ -0,0 +1,86 @@
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { getLocatorByIdAction } from '@/actions/locator/locator-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Crosshair } from 'lucide-react'
+import React from 'react'
+import { Metadata } from 'next'
+import {
+  getEnvironmentRows,
+  getLocatorGroupRows,
+  getLocatorRow,
+  getModuleRows,
+} from '../../create/create-locator-workspace-helpers'
+import CreateLocatorWorkspace from '../../create/create-locator-workspace'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Locator',
+  description: 'Update locator configuration with the Chromium picker workspace',
+}
+
+const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const [
+    { data: locatorData, error: locatorError },
+    { data: environmentData, error: environmentsError },
+    { data: locatorGroupData, error: locatorGroupListError },
+    { data: moduleData, error: modulesError },
+  ] = await Promise.all([
+    getLocatorByIdAction(id),
+    getAllEnvironmentsAction(),
+    getAllLocatorGroupsAction(),
+    getAllModulesAction(),
+  ])
+
+  const loadError = locatorError || environmentsError || locatorGroupListError || modulesError
+  if (loadError) {
+    return <div>Error: {loadError}</div>
+  }
+
+  const locator = getLocatorRow(locatorData)
+  const environments = getEnvironmentRows(environmentData)
+  const locatorGroups = getLocatorGroupRows(locatorGroupData)
+  const modules = getModuleRows(moduleData)
+
+  if (!locator) {
+    return <div>Error: Locator not found.</div>
+  }
+
+  const currentLocatorGroup = locatorGroups.find(locatorGroup => locatorGroup.id === locator.locatorGroupId)
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Crosshair className="mr-2 h-8 w-8" />
+            Modify Locator
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>
+          Reuse the Chromium picker workspace to repick the selector, change the locator group, or move this locator
+          into a newly created group.
+        </HeaderSubtitle>
+      </div>
+      <CreateLocatorWorkspace
+        environments={environments}
+        locatorGroups={locatorGroups}
+        modules={modules}
+        mode="modify"
+        locatorId={id}
+        initialValues={{
+          locatorName: locator.name ?? '',
+          selector: locator.value ?? '',
+          resolutionMode: locator.locatorGroupId ? 'existing' : 'create',
+          existingLocatorGroupId: locator.locatorGroupId ?? '',
+          route: currentLocatorGroup?.route ?? '/',
+          moduleId: currentLocatorGroup?.moduleId ?? '',
+        }}
+      />
+    </>
+  )
+}
+
+export default ModifyLocator

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

@@ -0,0 +1,62 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Code } from 'lucide-react'
+import LocatorTable from './locator-table'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { Metadata } from 'next'
+import { getLocatorTableRows } from './locator-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Locators',
+  description: 'Manage locators for identifying elements on pages',
+}
+
+const Locators = async () => {
+  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
+
+  if (locatorsError) {
+    return <div>Error: {locatorsError}</div>
+  }
+
+  const locatorsData = getLocatorTableRows(locators)
+
+  if (!locatorsData || locatorsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<Code className="h-8 w-8" />}
+          title="No locators found"
+          description="Get started by creating a locator to identify elements on your pages"
+          createRoute="/locators/create"
+          createText="Create Locator"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <div>
+          <PageHeader>
+            <span className="flex items-center">
+              <Code className="mr-2 h-8 w-8" />
+              Locators
+            </span>
+          </PageHeader>
+          <HeaderSubtitle>
+            Locators are the elements that are used to identify the elements on the page
+          </HeaderSubtitle>
+        </div>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <LocatorTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default Locators

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

@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation'
+
+const LocatorPickerPage = () => {
+  redirect('/locators/create')
+}
+
+export default LocatorPickerPage

package/templates/starter/src/app/(base)/locators/sync-locators-button.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { RefreshCw } from 'lucide-react'
+import { useState } from 'react'
+import { syncLocatorsFromFilesAction } from '@/actions/locator/locator-actions'
+import { toast } from '@/hooks/use-toast'
+import { useRouter } from 'next/navigation'
+
+export function SyncLocatorsButton() {
+  const [isLoading, setIsLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSync = async () => {
+    setIsLoading(true)
+    try {
+      const result = await syncLocatorsFromFilesAction()
+
+      if (result.status === 200 && result.data) {
+        const { locatorsCreated, locatorsMergedToFile, conflicts, errors } = result.data as {
+          locatorsCreated: number
+          locatorsMergedToFile: number
+          conflicts: number
+          errors: string[]
+        }
+
+        if (errors.length > 0) {
+          toast({
+            variant: 'destructive',
+            title: 'Sync completed with errors',
+            description: `Created ${locatorsCreated} locators, merged ${locatorsMergedToFile} into files, ${conflicts} conflicts detected. ${errors.length} error(s) occurred.`,
+          })
+        } else {
+          toast({
+            title: 'Sync completed successfully',
+            description: `Created ${locatorsCreated} locators, merged ${locatorsMergedToFile} into files, ${conflicts} conflicts detected.`,
+          })
+        }
+
+        // Refresh the page to show updated data
+        router.refresh()
+      } else {
+        toast({
+          variant: 'destructive',
+          title: 'Sync failed',
+          description: result.error || 'An error occurred during sync',
+        })
+      }
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Sync failed',
+        description: `An error occurred: ${error}`,
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Button onClick={handleSync} disabled={isLoading} variant="outline">
+      <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+      {isLoading ? 'Syncing...' : 'Sync Locators'}
+    </Button>
+  )
+}
+

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

@@ -0,0 +1,33 @@
+import { createModuleAction, getAllModulesAction } from '@/actions/modules/module-actions'
+import ModuleForm from '../module-form'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Metadata } from 'next'
+import { getModuleParentOptions, getModuleTableRows } from '../module-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Module',
+  description: 'Create a new module to be used in your test cases',
+}
+
+const CreateModule = async () => {
+  const { data: modules } = await getAllModulesAction()
+  const parentOptions = getModuleParentOptions(getModuleTableRows(modules))
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Module</PageHeader>
+        <HeaderSubtitle>Create a new module to be used in your test cases.</HeaderSubtitle>
+      </div>
+      <ModuleForm
+        parentOptions={parentOptions}
+        successTitle="Module created"
+        successMessage="Module created successfully"
+        onSubmitAction={createModuleAction}
+      />
+    </>
+  )
+}
+
+export default CreateModule

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

@@ -0,0 +1,43 @@
+import { getAllModulesAction, getModuleByIdAction, updateModuleAction } from '@/actions/modules/module-actions'
+import ModuleForm from '../../module-form'
+import { Metadata } from 'next'
+import { getModuleFormParentId, getModuleParentOptions, getModuleTableRows } from '../../module-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Module',
+  description: 'Update module configuration',
+}
+
+const ModifyModule = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data: moduleToBeEditedData, error: moduleToBeEditedError } = await getModuleByIdAction(id)
+
+  const { data: modulesData, error: modulesError } = await getAllModulesAction()
+
+  if (moduleToBeEditedError || modulesError) {
+    return <div>Error: {moduleToBeEditedError || modulesError}</div>
+  }
+
+  const [moduleData] = getModuleTableRows([moduleToBeEditedData])
+  if (!moduleData) {
+    return <div>Error: Module data is unavailable.</div>
+  }
+
+  const parentOptions = getModuleParentOptions(getModuleTableRows(modulesData), moduleData.id)
+
+  return (
+    <ModuleForm
+      id={id}
+      defaultValues={{
+        name: moduleData.name,
+        parentId: getModuleFormParentId(moduleData.parentId),
+      }}
+      successTitle="Module updated"
+      successMessage="Module updated successfully"
+      parentOptions={parentOptions}
+      onSubmitAction={updateModuleAction}
+    />
+  )
+}
+
+export default ModifyModule

package/templates/starter/src/app/(base)/modules/module-form.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import ModuleForm from './module-form'
+
+const { push, toast } = vi.hoisted(() => ({
+  push: vi.fn(),
+  toast: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+describe('ModuleForm', () => {
+  it('submits the selected parent module and navigates back to the modules list', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn().mockResolvedValue({
+      status: 200,
+    })
+
+    render(
+      <ModuleForm
+        successTitle="Module created"
+        successMessage="Module created successfully"
+        parentOptions={[{ id: 'parent-1', name: 'Shared UI' }]}
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Name'), 'Checkout')
+    await user.click(screen.getByRole('combobox', { name: 'Parent' }))
+    await user.click(screen.getByRole('option', { name: 'Shared UI' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith(
+        undefined,
+        {
+          name: 'Checkout',
+          parentId: 'parent-1',
+        },
+        undefined,
+      )
+    })
+
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Module created',
+      description: 'Module created successfully',
+    })
+    expect(push).toHaveBeenCalledWith('/modules')
+  })
+
+  it('shows validation feedback when the name is cleared and does not submit', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+
+    render(
+      <ModuleForm
+        successTitle="Module created"
+        successMessage="Module created successfully"
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    const nameInput = screen.getByLabelText('Name')
+
+    await user.type(nameInput, 'Checkout')
+    await user.clear(nameInput)
+
+    expect(screen.getByText('Name is required')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+    expect(onSubmitAction).not.toHaveBeenCalled()
+  })
+})

package/templates/starter/src/app/(base)/modules/module-form.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { formOpts, type Module, ROOT_MODULE_UUID } from '@/constants/form-opts/module-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { useForm } from '@tanstack/react-form'
+import { useRouter } from 'next/navigation'
+import {
+  getActionErrorMessage,
+  moduleFieldValidators,
+  type ModuleFormSubmitAction,
+  type ModuleParentOption,
+} from './module-helpers'
+
+type ModuleFormProps = {
+  defaultValues?: Module
+  successTitle: string
+  successMessage: string
+  parentOptions?: ModuleParentOption[]
+  id?: string
+  onSubmitAction: ModuleFormSubmitAction
+}
+
+type ModuleFieldErrorsProps = {
+  errors: unknown[]
+  isTouched: boolean
+}
+
+function getErrorMessage(error: unknown) {
+  if (typeof error === 'string') {
+    return error
+  }
+
+  if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
+    return error.message
+  }
+
+  return String(error)
+}
+
+function ModuleFieldErrors({ errors, isTouched }: ModuleFieldErrorsProps) {
+  if (!isTouched) {
+    return null
+  }
+
+  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} />
+      ))}
+    </div>
+  )
+}
+
+const ModuleForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  parentOptions = [],
+  id,
+  onSubmitAction,
+}: ModuleFormProps) => {
+  const router = useRouter()
+  const form = useForm({
+    defaultValues: defaultValues ?? formOpts.defaultValues,
+    validators: formOpts.validators,
+    onSubmit: async ({ value }) => {
+      const res = await onSubmitAction(undefined, value, id)
+      if (res.status === 200) {
+        toast({
+          title: successTitle,
+          description: successMessage,
+        })
+        router.push('/modules')
+      }
+      if (res.status === 400) {
+        toast({
+          title: 'Error',
+          description: getActionErrorMessage(res),
+          variant: 'destructive',
+        })
+      }
+      if (res.status === 500) {
+        toast({
+          title: 'Error',
+          description: getActionErrorMessage(res),
+          variant: 'destructive',
+        })
+      }
+    },
+  })
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="name"
+        validators={{
+          onChange: moduleFieldValidators.name,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Name</Label>
+              <Input id={field.name} value={field.state.value} onChange={e => field.handleChange(e.target.value)} />
+              <ModuleFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field name="parentId">
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Parent</Label>
+              <Select value={field.state.value || ROOT_MODULE_UUID} onValueChange={value => field.handleChange(value)}>
+                <SelectTrigger id={field.name}>
+                  <SelectValue
+                    placeholder={
+                      parentOptions.length === 0 ? 'No parent modules available' : 'Select a parent or Root'
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ROOT_MODULE_UUID}>Root (No Parent)</SelectItem>
+                  {parentOptions.length > 0
+                    ? parentOptions.map(option => (
+                        <SelectItem key={option.id} value={option.id}>
+                          {option.name}
+                        </SelectItem>
+                      ))
+                    : null}
+                </SelectContent>
+              </Select>
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
+        {([canSubmit, isSubmitting]) => (
+          <Button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Save'}
+          </Button>
+        )}
+      </form.Subscribe>
+    </form>
+  )
+}
+
+export default ModuleForm