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

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

@@ -1,38 +1,51 @@
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
 import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import React from 'react'
-import LocatorForm from '../locator-form'
-import { createLocatorAction } from '@/actions/locator/locator-actions'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { LocatorGroup } from '@prisma/client'
-import { Metadata } from 'next'
+import { Environment, LocatorGroup, Module } from '@prisma/client'
+import { Crosshair } from 'lucide-react'
+import type { Metadata } from 'next'
+import CreateLocatorWorkspace from './create-locator-workspace'
 
 export const metadata: Metadata = {
   title: 'Appraise | Create Locator',
-  description: 'Create a new locator to be used in your test cases',
+  description: 'Create a new locator manually or by picking a single selector from Chromium with the local companion.',
 }
 
-const CreateLocator = async () => {
-  const { data: locatorGroupList, error: locatorGroupListError } = await getAllLocatorGroupsAction()
+const CreateLocatorPage = async () => {
+  const [
+    { data: environments, error: environmentsError },
+    { data: locatorGroups, error: locatorGroupsError },
+    { data: modules, error: modulesError },
+  ] = await Promise.all([getAllEnvironmentsAction(), getAllLocatorGroupsAction(), getAllModulesAction()])
 
-  if (locatorGroupListError) {
-    return <div>Error: {locatorGroupListError}</div>
+  const loadError = environmentsError || locatorGroupsError || modulesError
+  if (loadError) {
+    return <div>Error: {loadError}</div>
   }
 
   return (
     <>
       <div className="mb-8">
-        <PageHeader>Create Locator</PageHeader>
-        <HeaderSubtitle>Create a new locator to be used in your test cases.</HeaderSubtitle>
+        <PageHeader>
+          <span className="flex items-center">
+            <Crosshair className="mr-2 h-8 w-8" />
+            Create Locator
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>
+          Launch Chromium, use the built-in picker overlay to capture one live selector, then finalize the locator
+          name and group details here.
+        </HeaderSubtitle>
       </div>
-      <LocatorForm
-        successTitle="Locator created"
-        successMessage="Locator created successfully"
-        onSubmitAction={createLocatorAction}
-        locatorGroupList={locatorGroupList as LocatorGroup[]}
+      <CreateLocatorWorkspace
+        environments={environments as Environment[]}
+        locatorGroups={locatorGroups as LocatorGroup[]}
+        modules={modules as Module[]}
       />
     </>
   )
 }
 
-export default CreateLocator
+export default CreateLocatorPage

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

@@ -1,163 +1,163 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { formOpts, Locator } from '@/constants/form-opts/locator-form-opts'
-import { toast } from '@/hooks/use-toast'
-import { ActionResponse } from '@/types/form/actionHandler'
-import { useForm } from '@tanstack/react-form'
-import React from 'react'
-import { z } from 'zod'
-import { LocatorGroup } from '@prisma/client'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { useRouter } from 'next/navigation'
-
-const LocatorForm = ({
-  defaultValues,
-  successTitle,
-  successMessage,
-  id,
-  locatorGroupList,
-  onSubmitAction,
-}: {
-  defaultValues?: Locator
-  successTitle: string
-  successMessage: string
-  locatorGroupList: LocatorGroup[]
-  id?: string
-  onSubmitAction: (_prev: unknown, value: Locator, id?: string) => Promise<ActionResponse>
-}) => {
-  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('/locators')
-      }
-      if (res.status === 400) {
-        toast({
-          title: 'Error',
-          description: res.error,
-          variant: 'destructive',
-        })
-      }
-      if (res.status === 500) {
-        toast({
-          title: 'Error',
-          description: res.error,
-          variant: 'destructive',
-        })
-      }
-    },
-  })
-  return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
-      <form.Field
-        name="name"
-        validators={{
-          onChange: z.string().min(1, { message: 'Name is required' }),
-        }}
-      >
-        {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)}
-                placeholder="Enter locator name"
-              />
-              {field.state.meta.isTouched &&
-                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="value"
-        validators={{
-          onChange: z.string().min(1, { message: 'Value is required' }),
-        }}
-      >
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Selector</Label>
-              <Input
-                id={field.name}
-                value={field.state.value}
-                onChange={e => field.handleChange(e.target.value)}
-                placeholder="CSS or XPath Selector"
-              />
-              {field.state.meta.isTouched &&
-                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="locatorGroupId"
-        validators={{
-          onChange: z.string().min(1, { message: 'Locator group is required' }),
-        }}
-      >
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Locator Group</Label>
-              <Select value={field.state.value} onValueChange={value => field.handleChange(value)}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a locator group" />
-                </SelectTrigger>
-                <SelectContent isEmpty={locatorGroupList.length === 0}>
-                  {locatorGroupList.map(locatorGroup => (
-                    <SelectItem key={locatorGroup.id} value={locatorGroup.id}>
-                      {locatorGroup.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {field.state.meta.isTouched &&
-                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.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
-        {([canSubmit, isSubmitting]) => (
-          <Button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Save'}
-          </Button>
-        )}
-      </form.Subscribe>
-    </form>
-  )
-}
-
-export default LocatorForm
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { formOpts, Locator } from '@/constants/form-opts/locator-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { ActionResponse } from '@/types/form/actionHandler'
+import { useForm } from '@tanstack/react-form'
+import React from 'react'
+import { z } from 'zod'
+import { LocatorGroup } from '@prisma/client'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { useRouter } from 'next/navigation'
+
+const LocatorForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  id,
+  locatorGroupList,
+  onSubmitAction,
+}: {
+  defaultValues?: Locator
+  successTitle: string
+  successMessage: string
+  locatorGroupList: LocatorGroup[]
+  id?: string
+  onSubmitAction: (_prev: unknown, value: Locator, id?: string) => Promise<ActionResponse>
+}) => {
+  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('/locators')
+      }
+      if (res.status === 400) {
+        toast({
+          title: 'Error',
+          description: res.error,
+          variant: 'destructive',
+        })
+      }
+      if (res.status === 500) {
+        toast({
+          title: 'Error',
+          description: res.error,
+          variant: 'destructive',
+        })
+      }
+    },
+  })
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="name"
+        validators={{
+          onChange: z.string().min(1, { message: 'Name is required' }),
+        }}
+      >
+        {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)}
+                placeholder="Enter locator name"
+              />
+              {field.state.meta.isTouched &&
+                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="value"
+        validators={{
+          onChange: z.string().min(1, { message: 'Value is required' }),
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Selector</Label>
+              <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+                placeholder="CSS or XPath Selector"
+              />
+              {field.state.meta.isTouched &&
+                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="locatorGroupId"
+        validators={{
+          onChange: z.string().min(1, { message: 'Locator group is required' }),
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Locator Group</Label>
+              <Select value={field.state.value} onValueChange={value => field.handleChange(value)}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a locator group" />
+                </SelectTrigger>
+                <SelectContent isEmpty={locatorGroupList.length === 0}>
+                  {locatorGroupList.map(locatorGroup => (
+                    <SelectItem key={locatorGroup.id} value={locatorGroup.id}>
+                      {locatorGroup.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {field.state.meta.isTouched &&
+                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.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
+        {([canSubmit, isSubmitting]) => (
+          <Button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Save'}
+          </Button>
+        )}
+      </form.Subscribe>
+    </form>
+  )
+}
+
+export default LocatorForm

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

@@ -1,73 +1,73 @@
-'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 { 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])}
+          />
+        )
+      },
+    },
+  ]

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

@@ -1,28 +1,28 @@
-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 { 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