create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/locators/locator-helpers.ts

@@ -0,0 +1,59 @@
+import type { ActionResponseData } from '@/types/form/actionHandler'
+import type { ConflictResolution, Locator } from '@prisma/client'
+
+export type LocatorTableRow = Locator & {
+  locatorGroup: LocatorGroupSummary | null
+  conflicts: ConflictResolutionSummary[]
+}
+
+export type LocatorGroupSummary = {
+  name: string
+}
+
+export type ConflictResolutionSummary = Pick<ConflictResolution, 'id'>
+
+function isLocatorGroupRow(value: unknown): value is LocatorGroupSummary {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'name' in value &&
+    typeof value.name === 'string'
+  )
+}
+
+function isConflictRow(value: unknown): value is ConflictResolutionSummary {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    typeof value.id === 'string'
+  )
+}
+
+function isLocatorTableRow(value: unknown): value is LocatorTableRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    typeof value.id === 'string' &&
+    'name' in value &&
+    typeof value.name === 'string' &&
+    'value' in value &&
+    typeof value.value === 'string' &&
+    'locatorGroupId' in value &&
+    (typeof value.locatorGroupId === 'string' || value.locatorGroupId === null) &&
+    'createdAt' in value &&
+    value.createdAt instanceof Date &&
+    'updatedAt' in value &&
+    value.updatedAt instanceof Date &&
+    'locatorGroup' in value &&
+    (value.locatorGroup === null || isLocatorGroupRow(value.locatorGroup)) &&
+    'conflicts' in value &&
+    Array.isArray(value.conflicts) &&
+    value.conflicts.every(isConflictRow)
+  )
+}
+
+export function getLocatorTableRows(data: ActionResponseData | undefined): LocatorTableRow[] {
+  return Array.isArray(data) ? data.filter(isLocatorTableRow) : []
+}

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

@@ -1,73 +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 { Locator, LocatorGroup, ConflictResolution } from '@prisma/client'
-import { deleteLocatorAction } from '@/actions/locator/locator-actions'
-import { formatDateTime } from '@/lib/utils'
-
-export const locatorTableCols: ColumnDef<Locator & { locatorGroup: LocatorGroup; conflicts: ConflictResolution[] }>[] =
-  [
-    {
-      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" />,
-    },
-    {
-      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])}
-          />
-        )
-      },
-    },
-  ]
+'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/default/src/app/(base)/locators/locator-table.tsx

@@ -1,28 +1,30 @@
-import { deleteLocatorAction, getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { DataTable } from '@/components/ui/data-table'
-import { locatorTableCols } from './locator-table-columns'
-import { Locator, LocatorGroup, ConflictResolution } from '@prisma/client'
-
-const LocatorTable = async () => {
-  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
-
-  if (locatorsError) {
-    return <div>Error: {locatorsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={locatorTableCols}
-        data={locators as (Locator & { locatorGroup: LocatorGroup; conflicts: ConflictResolution[] })[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/locators/create"
-        modifyLink="/locators/modify"
-        deleteAction={deleteLocatorAction}
-      />
-    </>
-  )
-}
-
-export default LocatorTable
+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/default/src/app/(base)/locators/modify/[id]/page.tsx

@@ -4,10 +4,15 @@ 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 { Environment, Locator, LocatorGroup, Module } from '@prisma/client'
 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 = {
@@ -19,9 +24,9 @@ const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) =>
   const { id } = await params
   const [
     { data: locatorData, error: locatorError },
-    { data: environments, error: environmentsError },
-    { data: locatorGroupList, error: locatorGroupListError },
-    { data: modules, error: modulesError },
+    { data: environmentData, error: environmentsError },
+    { data: locatorGroupData, error: locatorGroupListError },
+    { data: moduleData, error: modulesError },
   ] = await Promise.all([
     getLocatorByIdAction(id),
     getAllEnvironmentsAction(),
@@ -34,8 +39,15 @@ const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) =>
     return <div>Error: {loadError}</div>
   }
 
-  const locator = locatorData as Locator & { locatorGroup: LocatorGroup | null }
-  const locatorGroups = locatorGroupList as LocatorGroup[]
+  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 (
@@ -53,9 +65,9 @@ const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) =>
         </HeaderSubtitle>
       </div>
       <CreateLocatorWorkspace
-        environments={environments as Environment[]}
+        environments={environments}
         locatorGroups={locatorGroups}
-        modules={modules as Module[]}
+        modules={modules}
         mode="modify"
         locatorId={id}
         initialValues={{

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

@@ -1,16 +1,13 @@
 import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import React from 'react'
-import { Code, Plus } from 'lucide-react'
+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 { Locator, LocatorGroup } from '@prisma/client'
 import { Metadata } from 'next'
-import { Button } from '@/components/ui/button'
-import Link from 'next/link'
+import { getLocatorTableRows } from './locator-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Locators',
@@ -24,7 +21,7 @@ const Locators = async () => {
     return <div>Error: {locatorsError}</div>
   }
 
-  const locatorsData = locators as (Locator & { locatorGroup: LocatorGroup })[]
+  const locatorsData = getLocatorTableRows(locators)
 
   if (!locatorsData || locatorsData.length === 0) {
     return (

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

@@ -1,66 +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 { synced, conflicts, errors } = result.data as {
-          synced: number
-          conflicts: number
-          errors: string[]
-        }
-
-        if (errors.length > 0) {
-          toast({
-            variant: 'destructive',
-            title: 'Sync completed with errors',
-            description: `Synced ${synced} locators, ${conflicts} conflicts detected. ${errors.length} error(s) occurred.`,
-          })
-        } else {
-          toast({
-            title: 'Sync completed successfully',
-            description: `Synced ${synced} locators, ${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>
-  )
-}
-
+'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/default/src/app/(base)/modules/create/page.tsx

@@ -1,34 +1,33 @@
-import { createModuleAction, getAllModulesAction } from '@/actions/modules/module-actions'
-import ModuleForm from '../module-form'
-import { Module } from '@prisma/client'
-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 Module',
-  description: 'Create a new module to be used in your test cases',
-}
-
-const CreateModule = async () => {
-  const { data: modules } = await getAllModulesAction()
-
-  const parentOptions = (Array.isArray(modules) ? modules : []) as (Module & { parent: { name: string } })[]
-
-  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
+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/default/src/app/(base)/modules/modify/[id]/page.tsx

@@ -1,46 +1,43 @@
-import { getAllModulesAction, getModuleByIdAction, updateModuleAction } from '@/actions/modules/module-actions'
-import { Module } from '@prisma/client'
-import ModuleForm from '../../module-form'
-import { ROOT_MODULE_UUID } from '@/constants/form-opts/module-form-opts'
-import { Metadata } from 'next'
-
-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 = moduleToBeEditedData as Module & {
-    parent: { name: string }
-  }
-
-  const modulesList = Array.isArray(modulesData) ? modulesData : []
-  const parentOptions = (modulesList as (Module & { parent: { name: string } })[]).filter(
-    (module: Module & { parent: { name: string } }) => module.id !== moduleData.id,
-  ) as (Module & { parent: { name: string } })[]
-
-  return (
-    <ModuleForm
-      id={id}
-      defaultValues={{
-        name: moduleData.name,
-        parentId: moduleData.parentId ?? ROOT_MODULE_UUID,
-      }}
-      successTitle="Module updated"
-      successMessage="Module updated successfully"
-      parentOptions={parentOptions}
-      onSubmitAction={updateModuleAction}
-    />
-  )
-}
-
-export default ModifyModule
+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