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

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

@@ -1,44 +1,73 @@
-import { getLocatorByIdAction, updateLocatorAction } from '@/actions/locator/locator-actions'
-import { Locator, LocatorGroup } from '@prisma/client'
-import React from 'react'
-import LocatorForm from '../../locator-form'
+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 { Environment, Locator, LocatorGroup, Module } from '@prisma/client'
+import { Crosshair } from 'lucide-react'
+import React from 'react'
 import { Metadata } from 'next'
+import CreateLocatorWorkspace from '../../create/create-locator-workspace'
 
 export const metadata: Metadata = {
   title: 'Appraise | Modify Locator',
-  description: 'Update locator configuration',
+  description: 'Update locator configuration with the Chromium picker workspace',
 }
 
 const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params
-  const { data, error } = await getLocatorByIdAction(id)
+  const [
+    { data: locatorData, error: locatorError },
+    { data: environments, error: environmentsError },
+    { data: locatorGroupList, error: locatorGroupListError },
+    { data: modules, error: modulesError },
+  ] = await Promise.all([
+    getLocatorByIdAction(id),
+    getAllEnvironmentsAction(),
+    getAllLocatorGroupsAction(),
+    getAllModulesAction(),
+  ])
 
-  if (error) {
-    return <div>Error: {error}</div>
+  const loadError = locatorError || environmentsError || locatorGroupListError || modulesError
+  if (loadError) {
+    return <div>Error: {loadError}</div>
   }
 
-  const locator = data as Locator & { locatorGroup: LocatorGroup }
-
-  const { data: locatorGroupList, error: locatorGroupListError } = await getAllLocatorGroupsAction()
-
-  if (locatorGroupListError) {
-    return <div>Error: {locatorGroupListError}</div>
-  }
+  const locator = locatorData as Locator & { locatorGroup: LocatorGroup | null }
+  const locatorGroups = locatorGroupList as LocatorGroup[]
+  const currentLocatorGroup = locatorGroups.find(locatorGroup => locatorGroup.id === locator.locatorGroupId)
 
   return (
-    <LocatorForm
-      defaultValues={{
-        name: locator.name ?? '',
-        value: locator.value ?? '',
-        locatorGroupId: locator.locatorGroupId ?? '',
-      }}
-      successTitle="Locator updated"
-      successMessage="Locator updated successfully"
-      onSubmitAction={updateLocatorAction}
-      id={id}
-      locatorGroupList={locatorGroupList as LocatorGroup[]}
-    />
+    <>
+      <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 as Environment[]}
+        locatorGroups={locatorGroups}
+        modules={modules as Module[]}
+        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 ?? '',
+        }}
+      />
+    </>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 import React from 'react'
-import { Code } from 'lucide-react'
+import { Code, Plus } from 'lucide-react'
 import LocatorTable from './locator-table'
 import { Suspense } from 'react'
 import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
@@ -9,6 +9,8 @@ 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'
 
 export const metadata: Metadata = {
   title: 'Appraise | Locators',
@@ -41,18 +43,16 @@ const Locators = async () => {
   return (
     <>
       <div className="mb-8">
-        <div className="flex items-center justify-between">
-          <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>
+          <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 />}>

package/templates/default/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/default/src/app/(base)/locators/sync-locators-button.tsx

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

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

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

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

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