create-appraisejs 0.3.0 → 0.3.1-alpha.0

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

@@ -5,7 +5,14 @@ import type React from 'react'
 import { useState, useEffect } from 'react'
 import { PlusCircle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
@@ -116,41 +123,40 @@ export default function ParamChip({
     e.preventDefault()
 
     if (validateForm()) {
-      // Create a new item with the form values
       const newItem = {
         id: crypto.randomUUID(),
         ...formValues,
       }
 
-      // Add the new item to the items array
-      setItems([...items, newItem])
+      setItems(prev => {
+        const next = [...prev, newItem]
+        onSubmit(next.map(stripItemId))
+        return next
+      })
 
-      // Reset the form
       setFormValues({
         name: '',
         type: '',
         order: 1,
       })
 
-      // Call the onSubmit callback with the new item
-      onSubmit([...items, newItem].map(stripItemId))
-
-      // Close the modal
       setIsOpen(false)
     }
   }
 
   // Handle removing an item
   const removeItem = (id: string) => {
-    const nextItems = items.filter(item => item.id !== id)
-    setItems(nextItems)
-    onSubmit(nextItems.map(stripItemId))
+    setItems(prev => {
+      const nextItems = prev.filter(item => item.id !== id)
+      onSubmit(nextItems.map(stripItemId))
+      return nextItems
+    })
   }
 
   return (
     <div className="space-y-6">
       <Button type="button" onClick={() => setIsOpen(true)} variant="outline" size="icon">
-        <PlusCircle className="h-4 w-4" />
+        <PlusCircle className="size-4" />
       </Button>
 
       {/* Display the added items as chips */}
@@ -175,6 +181,7 @@ export default function ParamChip({
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Add New Item</DialogTitle>
+            <DialogDescription>Add a parameter name, type, and display order.</DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">

package/templates/starter/src/app/(base)/template-steps/template-step-form-helpers.ts

@@ -0,0 +1,65 @@
+import { TemplateStepType } from '@prisma/client'
+
+import {
+  templateStepSchema,
+  type TemplateStep as TemplateStepFormValues,
+} from '@/constants/form-opts/template-test-step-form-opts'
+import type { ActionResponse } from '@/types/form/actionHandler'
+
+export const templateStepFieldValidators = {
+  name: templateStepSchema.shape.name,
+  templateStepGroupId: templateStepSchema.shape.templateStepGroupId,
+  type: templateStepSchema.shape.type,
+  signature: templateStepSchema.shape.signature,
+}
+
+export function getInitialFunctionDefinition() {
+  return `When('', async function(this:CustomWorld){});`
+}
+
+export function getFieldErrorMessage(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)
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || 'An error occurred'
+}
+
+export function buildFunctionDefinitionPreview(
+  currentDefinition: string,
+  signature: string,
+  type: TemplateStepType,
+  params: Array<{ name: string; type: string }>,
+  quoteType: `'` | `"` | '`' = `'`,
+) {
+  const updatedSignature = currentDefinition.replace(/(When|Then)\((['"`])(.*?)\2/, () => {
+    const keyword = type === TemplateStepType.ASSERTION ? 'Then' : 'When'
+    return `${keyword}(${quoteType}${signature}${quoteType}`
+  })
+
+  const paramsString = params
+    .map(param => `${param.name}: ${param.type.toLowerCase() === 'locator' ? 'SelectorName' : param.type.toLowerCase()}`)
+    .join(', ')
+
+  return updatedSignature.replace(
+    /async function\s*\(\s*this:CustomWorld(?:,\s*.*?)?\s*\)/,
+    `async function(this:CustomWorld${params.length > 0 ? ', ' : ''}${paramsString})`,
+  )
+}
+
+export function getTemplateStepFormDefaults(defaultValues?: TemplateStepFormValues) {
+  return {
+    signature: defaultValues?.signature ?? '',
+    functionDefinition: defaultValues?.functionDefinition ?? getInitialFunctionDefinition(),
+    type: (defaultValues?.type as TemplateStepType) ?? TemplateStepType.ACTION,
+    params: defaultValues?.params ?? [],
+  }
+}

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

@@ -5,10 +5,11 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 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 TemplateStep } from '@/constants/form-opts/template-test-step-form-opts'
+import { templateStepFormOpts, type TemplateStep } from '@/constants/form-opts/template-test-step-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { TemplateStepType } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 import CodeMirror, { EditorView } from '@uiw/react-codemirror'
 import { langs } from '@uiw/codemirror-extensions-langs'
 import { githubDark } from '@uiw/codemirror-theme-github'
@@ -46,7 +47,7 @@ export const TemplateStepForm = ({
   onSubmitAction: TemplateStepFormSubmitAction
   templateStepGroups: Array<{ id: string; name: string }>
 }) => {
-  const router = useRouter()
+  const { push } = useRouter()
   const initialState = getTemplateStepFormDefaults(defaultValues)
   const [signature, setSignature] = useState(initialState.signature)
   const [baseFunctionDefinition, setBaseFunctionDefinition] = useState(initialState.functionDefinition)
@@ -58,8 +59,8 @@ export const TemplateStepForm = ({
   )
 
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts?.defaultValues,
-    validators: formOpts?.validators,
+    defaultValues: defaultValues ?? templateStepFormOpts.defaultValues,
+    validators: templateStepFormOpts.validators,
     onSubmit: async ({ value }) => {
       value.functionDefinition = functionDefinition
       const res = await onSubmitAction(undefined, value, id)
@@ -72,7 +73,7 @@ export const TemplateStepForm = ({
         setBaseFunctionDefinition(getInitialFunctionDefinition())
         setType(TemplateStepType.ACTION)
         setParams([])
-        router.push(`/template-steps`)
+        push(`/template-steps`)
       }
       if (res.status === 400) {
         toast({
@@ -91,8 +92,8 @@ export const TemplateStepForm = ({
     },
   })
 
-  const renderError = (error: unknown, index: number) => (
-    <p key={index} className="text-xs text-pink-500">
+  const renderError = (error: unknown) => (
+    <p key={getFieldErrorMessage(error)} className="text-xs text-pink-500">
       {getFieldErrorMessage(error)}
     </p>
   )
@@ -114,15 +115,9 @@ export const TemplateStepForm = ({
           </p>
         </AlertDescription>
       </Alert>
-      <form
-        onSubmit={e => {
-          e.preventDefault()
-          e.stopPropagation()
-          form.handleSubmit()
-        }}
-      >
+      <TanStackForm onSubmit={() => form.handleSubmit()}>
         <div className="flex gap-4">
-          <Card className="w-full bg-gray-500/10">
+          <Card className="w-full bg-zinc-500/10">
             <CardHeader>
               <CardTitle>Template Step Details</CardTitle>
               <CardDescription>Configure your template step function details</CardDescription>
@@ -285,14 +280,14 @@ export const TemplateStepForm = ({
                   return (
                     <div className="mb-4 flex flex-col gap-2">
                       <Label htmlFor={field.name}>Parameters</Label>
-                        <ParamChip
-                          defaultValues={params}
-                          types={parameterTypes}
-                          onSubmit={value => {
-                            field.handleChange(value)
-                            setParams(value)
-                          }}
-                        />
+                      <ParamChip
+                        defaultValues={params}
+                        types={parameterTypes}
+                        onSubmit={value => {
+                          field.handleChange(value)
+                          setParams(value)
+                        }}
+                      />
                     </div>
                   )
                 }}
@@ -300,7 +295,7 @@ export const TemplateStepForm = ({
               <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
                 {([canSubmit, isSubmitting]) => (
                   <Button type="submit" disabled={!canSubmit}>
-                    <Save className="h-4 w-4" />
+                    <Save className="size-4" />
                     {isSubmitting ? '...' : 'Save'}
                   </Button>
                 )}
@@ -308,7 +303,7 @@ export const TemplateStepForm = ({
             </CardContent>
           </Card>
           <div className="w-full">
-            <Card className="bg-gray-500/10">
+            <Card className="bg-zinc-500/10">
               <CardHeader>
                 <CardTitle>Template Step Function Definition (Preview)</CardTitle>
                 <CardDescription>
@@ -336,7 +331,7 @@ export const TemplateStepForm = ({
             </Card>
           </div>
         </div>
-      </form>
+      </TanStackForm>
     </>
   )
 }

package/templates/starter/src/app/(base)/template-steps/template-step-helpers.ts

@@ -1,176 +1,25 @@
-import {
-  StepParameterType,
-  TemplateStepIcon,
-  TemplateStepType,
-  type TemplateStep as PrismaTemplateStep,
-  type TemplateStepGroup,
-  type TemplateStepParameter,
-} from '@prisma/client'
-
-import {
-  templateStepSchema,
-  type TemplateStep as TemplateStepFormValues,
-} from '@/constants/form-opts/template-test-step-form-opts'
-import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
-
-export type TemplateStepGroupOption = {
-  id: string
-  name: string
-}
-
-export type EditableTemplateStep = PrismaTemplateStep & {
-  parameters: TemplateStepParameter[]
-  templateStepGroup: TemplateStepGroup
-}
-
-export type TemplateStepParameterSummary = Pick<TemplateStepParameter, 'id' | 'name'>
-
-export type TemplateStepTableRow = PrismaTemplateStep & {
-  parameters: TemplateStepParameterSummary[]
-  templateStepGroup: TemplateStepGroup
-}
-
-export type TemplateStepFormSubmitAction = (
-  _prev: unknown,
-  value: TemplateStepFormValues,
-  id?: string,
-) => Promise<ActionResponse>
-
-export const templateStepFieldValidators = {
-  name: templateStepSchema.shape.name,
-  templateStepGroupId: templateStepSchema.shape.templateStepGroupId,
-  type: templateStepSchema.shape.type,
-  signature: templateStepSchema.shape.signature,
-}
-
-export function getInitialFunctionDefinition() {
-  return `When('', async function(this:CustomWorld){});`
-}
-
-export function getFieldErrorMessage(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)
-}
-
-export function getActionErrorMessage(response: ActionResponse) {
-  return response.error || 'An error occurred'
-}
-
-export function buildFunctionDefinitionPreview(
-  currentDefinition: string,
-  signature: string,
-  type: TemplateStepType,
-  params: Array<{ name: string; type: string }>,
-  quoteType: `'` | `"` | '`' = `'`,
-) {
-  const updatedSignature = currentDefinition.replace(/(When|Then)\((['"`])(.*?)\2/, () => {
-    const keyword = type === TemplateStepType.ASSERTION ? 'Then' : 'When'
-    return `${keyword}(${quoteType}${signature}${quoteType}`
-  })
-
-  const paramsString = params
-    .map(param => `${param.name}: ${param.type.toLowerCase() === 'locator' ? 'SelectorName' : param.type.toLowerCase()}`)
-    .join(', ')
-
-  return updatedSignature.replace(
-    /async function\s*\(\s*this:CustomWorld(?:,\s*.*?)?\s*\)/,
-    `async function(this:CustomWorld${params.length > 0 ? ', ' : ''}${paramsString})`,
-  )
-}
-
-export function getTemplateStepFormDefaults(defaultValues?: TemplateStepFormValues) {
-  return {
-    signature: defaultValues?.signature ?? '',
-    functionDefinition: defaultValues?.functionDefinition ?? getInitialFunctionDefinition(),
-    type: (defaultValues?.type as TemplateStepType) ?? TemplateStepType.ACTION,
-    params: defaultValues?.params ?? [],
-  }
-}
-
-function isNamedRow(value: unknown): value is TemplateStepGroupOption {
-  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
-}
-
-function isTemplateStepParameterRow(value: unknown): value is TemplateStepParameter {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    'name' in value &&
-    'type' in value &&
-    'order' in value
-  )
-}
-
-function isTemplateStepParameterSummary(value: unknown): value is TemplateStepParameterSummary {
-  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
-}
-
-function isEditableTemplateStep(value: unknown): value is EditableTemplateStep {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    'name' in value &&
-    'createdAt' in value &&
-    'updatedAt' in value &&
-    'type' in value &&
-    'signature' in value &&
-    'icon' in value &&
-    'templateStepGroupId' in value &&
-    'templateStepGroup' in value &&
-    'parameters' in value &&
-    Array.isArray(value.parameters) &&
-    value.parameters.every(isTemplateStepParameterRow)
-  )
-}
-
-function isTemplateStepTableRow(value: unknown): value is TemplateStepTableRow {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    'name' in value &&
-    'createdAt' in value &&
-    'updatedAt' in value &&
-    'type' in value &&
-    'signature' in value &&
-    'icon' in value &&
-    'templateStepGroupId' in value &&
-    'templateStepGroup' in value &&
-    'parameters' in value &&
-    Array.isArray(value.parameters) &&
-    value.parameters.every(isTemplateStepParameterSummary)
-  )
-}
-
-export function getTemplateStepGroupRows(data: ActionResponseData | undefined): TemplateStepGroupOption[] {
-  return Array.isArray(data) ? data.filter(isNamedRow) : []
-}
-
-export function getEditableTemplateStep(data: ActionResponseData | undefined) {
-  return isEditableTemplateStep(data) ? data : null
-}
-
-export function getTemplateStepRows(data: ActionResponseData | undefined): TemplateStepTableRow[] {
-  return Array.isArray(data) ? data.filter(isTemplateStepTableRow) : []
-}
-
-export function getTemplateStepIconOptions() {
-  return Object.values(TemplateStepIcon)
-}
-
-export function getTemplateStepTypeOptions() {
-  return Object.values(TemplateStepType)
-}
-
-export function getTemplateStepParameterTypes() {
-  return Object.values(StepParameterType)
-}
+export {
+  buildFunctionDefinitionPreview,
+  getActionErrorMessage,
+  getFieldErrorMessage,
+  getInitialFunctionDefinition,
+  getTemplateStepFormDefaults,
+  templateStepFieldValidators,
+} from './template-step-form-helpers'
+export {
+  getEditableTemplateStep,
+  getTemplateStepGroupRows,
+  getTemplateStepRows,
+} from './template-step-row-guards'
+export {
+  getTemplateStepIconOptions,
+  getTemplateStepParameterTypes,
+  getTemplateStepTypeOptions,
+} from './template-step-option-helpers'
+export type {
+  EditableTemplateStep,
+  TemplateStepFormSubmitAction,
+  TemplateStepGroupOption,
+  TemplateStepParameterSummary,
+  TemplateStepTableRow,
+} from './template-step-types'

package/templates/starter/src/app/(base)/template-steps/template-step-option-helpers.ts

@@ -0,0 +1,13 @@
+import { StepParameterType, TemplateStepIcon, TemplateStepType } from '@prisma/client'
+
+export function getTemplateStepIconOptions() {
+  return Object.values(TemplateStepIcon)
+}
+
+export function getTemplateStepTypeOptions() {
+  return Object.values(TemplateStepType)
+}
+
+export function getTemplateStepParameterTypes() {
+  return Object.values(StepParameterType)
+}

package/templates/starter/src/app/(base)/template-steps/template-step-row-guards.ts

@@ -0,0 +1,69 @@
+import type { TemplateStepParameter } from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+import type {
+  EditableTemplateStep,
+  TemplateStepGroupOption,
+  TemplateStepParameterSummary,
+  TemplateStepTableRow,
+} from './template-step-types'
+
+type UnknownRecord = Record<string, unknown>
+
+function isRecord(value: unknown): value is UnknownRecord {
+  return typeof value === 'object' && value !== null
+}
+
+function isNamedRow(value: unknown): value is TemplateStepGroupOption {
+  return isRecord(value) && 'id' in value && 'name' in value
+}
+
+function isTemplateStepParameterRow(value: unknown): value is TemplateStepParameter {
+  return isRecord(value) && 'id' in value && 'name' in value && 'type' in value && 'order' in value
+}
+
+function isTemplateStepParameterSummary(value: unknown): value is TemplateStepParameterSummary {
+  return isRecord(value) && 'id' in value && 'name' in value
+}
+
+function hasTemplateStepShape(value: unknown): value is UnknownRecord & { parameters: unknown[] } {
+  const requiredFields = [
+    'id',
+    'name',
+    'createdAt',
+    'updatedAt',
+    'type',
+    'signature',
+    'icon',
+    'templateStepGroupId',
+    'templateStepGroup',
+    'parameters',
+  ] as const
+
+  return (
+    isRecord(value) &&
+    requiredFields.every(field => field in value) &&
+    Array.isArray(value.parameters)
+  )
+}
+
+function isEditableTemplateStep(value: unknown): value is EditableTemplateStep {
+  return hasTemplateStepShape(value) && value.parameters.every(isTemplateStepParameterRow)
+}
+
+function isTemplateStepTableRow(value: unknown): value is TemplateStepTableRow {
+  return hasTemplateStepShape(value) && value.parameters.every(isTemplateStepParameterSummary)
+}
+
+export function getTemplateStepGroupRows(data: ActionResponseData | undefined): TemplateStepGroupOption[] {
+  return Array.isArray(data) ? data.filter(isNamedRow) : []
+}
+
+export function getEditableTemplateStep(data: ActionResponseData | undefined) {
+  return isEditableTemplateStep(data) ? data : null
+}
+
+export function getTemplateStepRows(data: ActionResponseData | undefined): TemplateStepTableRow[] {
+  return Array.isArray(data) ? data.filter(isTemplateStepTableRow) : []
+}

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

@@ -51,7 +51,7 @@ export const templateStepTableCols: ColumnDef<TemplateStepTableRow>[] = [
       const templateStep = row.original
       return (
         <Badge variant="outline" className="flex w-fit items-center gap-1">
-          {KeyToIconTransformer(templateStep.icon, 'h-4 w-4')}
+          {KeyToIconTransformer(templateStep.icon, 'size-4')}
           {templateStep.icon.charAt(0).toUpperCase() + templateStep.icon.slice(1).toLowerCase()}
         </Badge>
       )
@@ -64,9 +64,9 @@ export const templateStepTableCols: ColumnDef<TemplateStepTableRow>[] = [
       const templateStep = row.original
       const icon =
         templateStep.type === TemplateStepType.ACTION ? (
-          <MousePointer2 className="h-4 w-4" />
+          <MousePointer2 className="size-4" />
         ) : (
-          <CheckCheck className="h-4 w-4" />
+          <CheckCheck className="size-4" />
         )
       return (
         <Badge variant="outline" className="flex w-fit items-center gap-1">
@@ -82,7 +82,10 @@ export const templateStepTableCols: ColumnDef<TemplateStepTableRow>[] = [
       return (
         <KbdGroup className="flex flex-wrap gap-1">
           {row.original.parameters.map(parameter => (
-            <Kbd key={parameter.id} className="bg-gray-200 px-2 text-xs text-gray-600 dark:bg-gray-700/55 dark:text-gray-400">
+            <Kbd
+              key={parameter.id}
+              className="bg-zinc-200 px-2 text-xs text-zinc-600 dark:bg-zinc-700/55 dark:text-zinc-400"
+            >
               {parameter.name}
             </Kbd>
           ))}

package/templates/starter/src/app/(base)/template-steps/template-step-types.ts

@@ -0,0 +1,31 @@
+import type {
+  TemplateStep as PrismaTemplateStep,
+  TemplateStepGroup,
+  TemplateStepParameter,
+} from '@prisma/client'
+
+import type { TemplateStep as TemplateStepFormValues } from '@/constants/form-opts/template-test-step-form-opts'
+import type { ActionResponse } from '@/types/form/actionHandler'
+
+export type TemplateStepGroupOption = {
+  id: string
+  name: string
+}
+
+export type EditableTemplateStep = PrismaTemplateStep & {
+  parameters: TemplateStepParameter[]
+  templateStepGroup: TemplateStepGroup
+}
+
+export type TemplateStepParameterSummary = Pick<TemplateStepParameter, 'id' | 'name'>
+
+export type TemplateStepTableRow = PrismaTemplateStep & {
+  parameters: TemplateStepParameterSummary[]
+  templateStepGroup: TemplateStepGroup
+}
+
+export type TemplateStepFormSubmitAction = (
+  _prev: unknown,
+  value: TemplateStepFormValues,
+  id?: string,
+) => Promise<ActionResponse>

package/templates/starter/src/app/(base)/template-test-cases/create/page.tsx

@@ -3,30 +3,21 @@ import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 import { Blocks } from 'lucide-react'
 import React from 'react'
 import TemplateTestCaseForm from '../template-test-case-form'
-import { Locator, TemplateStep, TemplateStepParameter, LocatorGroup } from '@prisma/client'
-import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { getAllTemplateStepParamsAction } from '@/actions/template-step/template-step-actions'
-import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
 import { createTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
 import { Metadata } from 'next'
 
+import { loadCreateTemplateTestCasePageData } from '../create-template-test-case-page-data'
+
 export const metadata: Metadata = {
   title: 'Appraise | Create Template Test Case',
   description: 'Create a new template test case to quickly create test cases',
 }
 
 const CreateTemplateTestCase = async () => {
-  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
-
-  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
-
-  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
-
-  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
+  const pageData = await loadCreateTemplateTestCasePageData()
 
-  if (templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError) {
-    return <div>Error: {templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError}</div>
+  if (pageData.status === 'error') {
+    return <div>Error: {pageData.message}</div>
   }
 
   return (
@@ -34,7 +25,7 @@ const CreateTemplateTestCase = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <Blocks className="mr-2 h-8 w-8" />
+            <Blocks className="mr-2 size-8" />
             Create Template Test Case
           </span>
         </PageHeader>
@@ -42,10 +33,12 @@ const CreateTemplateTestCase = async () => {
       </div>
       <TemplateTestCaseForm
         defaultNodesOrder={{}}
-        templateStepParams={templateStepParams as TemplateStepParameter[]}
-        templateSteps={templateSteps as TemplateStep[]}
-        locators={locators as Locator[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
+        templateStepParams={pageData.templateStepParams}
+        templateSteps={pageData.templateSteps}
+        locators={pageData.locators}
+        locatorGroups={pageData.locatorGroups}
+        environments={pageData.environments}
+        modules={pageData.modules}
         onSubmitAction={createTemplateTestCaseAction}
         defaultValueInput={true}
       />