create-appraise 0.1.0

package/templates/default/src/app/(base)/template-test-cases/modify/[id]/page.tsx

@@ -0,0 +1,89 @@
+import {
+  Locator,
+  LocatorGroup,
+  TemplateStep,
+  TemplateStepParameter,
+  TemplateTestCase,
+  TemplateTestCaseStep,
+  TemplateTestCaseStepParameter,
+} from '@prisma/client'
+import React from 'react'
+import TemplateTestCaseForm from '../../template-test-case-form'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import PageHeader from '@/components/typography/page-header'
+import {
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+} from '@/actions/template-step/template-step-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import {
+  getTemplateTestCaseByIdAction,
+  updateTemplateTestCaseAction,
+} from '@/actions/template-test-case/template-test-case-actions'
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Template Test Case',
+  description: 'Modify a template test case',
+}
+
+const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data, error } = await getTemplateTestCaseByIdAction(id)
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+  const templateTestCase = data as TemplateTestCase & {
+    steps: (TemplateTestCaseStep & {
+      parameters: TemplateTestCaseStepParameter[]
+    })[]
+  }
+  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()
+  if (templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError) {
+    return <div>Error: {templateStepParamsError || templateStepsError || locatorsError || locatorGroupsError}</div>
+  }
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Modify Template Test Case</PageHeader>
+        <HeaderSubtitle>Modify a template test case</HeaderSubtitle>
+      </div>
+      <TemplateTestCaseForm
+        onSubmitAction={updateTemplateTestCaseAction}
+        id={id}
+        defaultTitle={templateTestCase.name}
+        defaultDescription={templateTestCase.description || ''}
+        templateStepParams={templateStepParams as TemplateStepParameter[]}
+        templateSteps={templateSteps as TemplateStep[]}
+        locators={locators as Locator[]}
+        locatorGroups={locatorGroups as LocatorGroup[]}
+        defaultNodesOrder={templateTestCase.steps.reduce((acc, step) => {
+          acc[step.id] = {
+            order: step.order,
+            label: step.label,
+            gherkinStep: step.gherkinStep,
+            icon: step.icon,
+            parameters: ((step.parameters || []) as TemplateTestCaseStepParameter[]).map(
+              (param: TemplateTestCaseStepParameter) => ({
+                name: param.name,
+                defaultValue: param.defaultValue,
+                type: param.type,
+                order: param.order,
+              }),
+            ),
+            templateStepId: step.templateStepId,
+          }
+          return acc
+        }, {} as TemplateTestCaseNodeOrderMap)}
+      />
+    </>
+  )
+}
+
+export default ModifyTemplateTestCase

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

@@ -0,0 +1,58 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Blocks } from 'lucide-react'
+import React, { Suspense } from 'react'
+import TemplateTestCaseTable from './template-test-case-table'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllTemplateTestCasesAction } from '@/actions/template-test-case/template-test-case-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Template Test Cases',
+  description: 'Manage template test cases for quickly creating test cases',
+}
+
+const TemplateTestCasesPage = async () => {
+  const { data: templateTestCases, error: templateTestCasesError } = await getAllTemplateTestCasesAction()
+
+  if (templateTestCasesError) {
+    return <div>Error: {templateTestCasesError}</div>
+  }
+
+  const templateTestCasesData = templateTestCases as (TemplateTestCase & { steps: TemplateTestCaseStep[] })[]
+
+  if (!templateTestCasesData || templateTestCasesData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<Blocks className="h-8 w-8" />}
+          title="No template test cases found"
+          description="Get started by creating a template test case to quickly create test cases"
+          createRoute="/template-test-cases/create"
+          createText="Create Template Test Case"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Blocks className="mr-2 h-8 w-8" />
+            Template Test Cases
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>A collection of templates to quickly create test cases</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TemplateTestCaseTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default TemplateTestCasesPage

package/templates/default/src/app/(base)/template-test-cases/template-test-case-flow.tsx

@@ -0,0 +1,84 @@
+import FlowDiagram from '@/components/diagram/flow-diagram'
+import { TemplateTestCaseNodeOrderMap, NodeOrderMap } from '@/types/diagram/diagram'
+import { Locator, TemplateStep, TemplateStepParameter, StepParameterType, LocatorGroup } from '@prisma/client'
+import React, { useCallback, useState, useEffect, useRef } from 'react'
+
+function useDebouncedCallback<T extends unknown[]>(callback: (...args: T) => void, delay: number) {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  return (...args: T) => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    timeoutRef.current = setTimeout(() => {
+      callback(...args)
+    }, delay)
+  }
+}
+
+const TemplateTestCaseFlow = ({
+  initialNodesOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  onNodeOrderChange,
+  defaultValueInput = false,
+}: {
+  initialNodesOrder: TemplateTestCaseNodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Locator[]
+  locatorGroups: LocatorGroup[]
+  onNodeOrderChange: (nodesOrder: TemplateTestCaseNodeOrderMap) => void
+  defaultValueInput?: boolean
+}) => {
+  const [nodesOrder, setNodesOrder] = useState<TemplateTestCaseNodeOrderMap>(initialNodesOrder)
+
+  const handleNodeOrderChange = useCallback(
+    (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => {
+      // Convert NodeOrderMap to TemplateTestCaseNodeOrderMap if needed
+      const convertedNodeOrder: TemplateTestCaseNodeOrderMap = {}
+      Object.entries(nodeOrder).forEach(([key, nodeData]) => {
+        convertedNodeOrder[key] = {
+          ...nodeData,
+          parameters: nodeData.parameters.map(
+            (param: {
+              name: string
+              value?: string
+              defaultValue?: string
+              type: StepParameterType
+              order: number
+            }) => ({
+              ...param,
+              defaultValue: 'value' in param ? param.value : param.defaultValue,
+            }),
+          ),
+        }
+      })
+      setNodesOrder(convertedNodeOrder)
+    },
+    [setNodesOrder],
+  )
+
+  const debouncedSaveNodesOrder = useDebouncedCallback(onNodeOrderChange, 200)
+
+  useEffect(() => {
+    debouncedSaveNodesOrder(nodesOrder)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodesOrder])
+
+  return (
+    <>
+      <FlowDiagram
+        nodeOrder={nodesOrder}
+        templateStepParams={templateStepParams}
+        onNodeOrderChange={handleNodeOrderChange}
+        templateSteps={templateSteps}
+        locators={locators}
+        locatorGroups={locatorGroups}
+        defaultValueInput={defaultValueInput}
+      />
+    </>
+  )
+}
+
+export default TemplateTestCaseFlow

package/templates/default/src/app/(base)/template-test-cases/template-test-case-form.tsx

@@ -0,0 +1,262 @@
+'use client'
+import React, { useCallback, useState } from 'react'
+import TemplateTestCaseFlow from './template-test-case-flow'
+import { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import {
+  Locator,
+  LocatorGroup,
+  StepParameterType,
+  TemplateStep,
+  TemplateStepIcon,
+  TemplateStepParameter,
+} from '@prisma/client'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import ErrorMessage from '@/components/form/error-message'
+import { z } from 'zod'
+import { toast } from '@/hooks/use-toast'
+import { useRouter } from 'next/navigation'
+import { IconToKeyTransformer } from '@/lib/transformers/key-to-icon-transformer'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import CodeMirror, { EditorView } from '@uiw/react-codemirror'
+import { langs } from '@uiw/codemirror-extensions-langs'
+import { githubDark } from '@uiw/codemirror-theme-github'
+import { ActionResponse } from '@/types/form/actionHandler'
+import { templateTestCaseSchema } from '@/constants/form-opts/template-test-case-form-opts'
+
+const errorSchema = z.object({
+  title: z.string().min(3, { message: 'Title must be at least 3 characters' }),
+  description: z.string().optional(),
+  steps: z
+    .array(
+      z.object({
+        gherkinStep: z.string(),
+        label: z.string(),
+        icon: z.nativeEnum(TemplateStepIcon),
+        parameters: z.array(
+          z.object({
+            name: z.string(),
+            value: z.string(),
+            type: z.nativeEnum(StepParameterType),
+            order: z.number(),
+          }),
+        ),
+        order: z.number(),
+        templateStepId: z.string(),
+      }),
+    )
+    .min(1, { message: 'At least one step is required' }),
+})
+
+const TemplateTestCaseForm = ({
+  defaultNodesOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  id,
+  defaultTitle,
+  defaultDescription,
+  defaultValueInput = false,
+  onSubmitAction,
+}: {
+  defaultNodesOrder: TemplateTestCaseNodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Locator[]
+  locatorGroups: LocatorGroup[]
+  onSubmitAction: (value: z.infer<typeof templateTestCaseSchema>, id?: string) => Promise<ActionResponse>
+  id?: string
+  defaultTitle?: string
+  defaultDescription?: string
+  defaultValueInput?: boolean
+}) => {
+  const router = useRouter()
+  // states
+  const [nodesOrder, setNodesOrder] = useState<TemplateTestCaseNodeOrderMap>(defaultNodesOrder)
+  const [title, setTitle] = useState<string>(defaultTitle || '')
+  const [description, setDescription] = useState<string>(defaultDescription || '')
+  const [errors, setErrors] = useState<{
+    title?: string[]
+    description?: string[]
+    steps?: string[]
+  }>({})
+
+  const generateGherkinSyntax = useCallback(() => {
+    if (!title) return ''
+
+    const scenarioHeader = `Scenario: [${title}] ${description || ''}`
+
+    // Filter out nodes with order -1 and sort the remaining nodes
+    const validSteps = Object.entries(nodesOrder)
+      .map(([, value]) => value)
+      .filter(step => step.order !== -1)
+      .sort((a, b) => a.order - b.order)
+
+    // Generate Gherkin steps with proper keywords
+    let hasThenInPrevious = false
+    let hasWhenInPrevious = false
+
+    const gherkinSteps = validSteps.map((step, index) => {
+      const gherkinStep = step.gherkinStep?.trim() || ''
+      const firstWord = gherkinStep.split(' ')[0].toLowerCase()
+      const hasGherkinKeyword = ['given', 'when', 'then', 'and', 'but'].includes(firstWord)
+      const stepWithoutKeyword = hasGherkinKeyword ? gherkinStep.split(' ').slice(1).join(' ') : gherkinStep
+
+      // First step always starts with Given
+      if (index === 0) {
+        return `Given ${stepWithoutKeyword}`
+      }
+
+      // Check if this step should be a Then statement
+      const isThenStatement =
+        firstWord === 'then' ||
+        stepWithoutKeyword.toLowerCase().startsWith('should') ||
+        stepWithoutKeyword.toLowerCase().startsWith('must') ||
+        stepWithoutKeyword.toLowerCase().startsWith('will')
+
+      // If we haven't seen a Then yet
+      if (!hasThenInPrevious) {
+        // If this is a Then statement
+        if (isThenStatement) {
+          hasThenInPrevious = true
+          return `Then ${stepWithoutKeyword}`
+        }
+
+        // If we haven't seen a When yet, use When
+        if (!hasWhenInPrevious) {
+          hasWhenInPrevious = true
+          return `When ${stepWithoutKeyword}`
+        }
+        // After When, use And
+        return `And ${stepWithoutKeyword}`
+      }
+
+      // After Then
+      if (isThenStatement) {
+        // If it's another Then statement, use And
+        return `And ${stepWithoutKeyword}`
+      }
+      // After Then, use When for new actions
+      hasThenInPrevious = false
+      hasWhenInPrevious = false
+      return `When ${stepWithoutKeyword}`
+    })
+
+    // Update the flags after processing all steps
+    hasThenInPrevious = gherkinSteps.some(step => step.toLowerCase().startsWith('then'))
+    hasWhenInPrevious = gherkinSteps.some(step => step.toLowerCase().startsWith('when'))
+
+    return [scenarioHeader, ...gherkinSteps].join('\n')
+  }, [title, description, nodesOrder])
+
+  // handlers
+  const onNodeOrderChange = useCallback((nodesOrder: TemplateTestCaseNodeOrderMap) => {
+    setNodesOrder(nodesOrder)
+  }, [])
+
+  const onTitleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value)
+  }, [])
+
+  const onDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setDescription(e.target.value)
+  }, [])
+
+  const handleSubmit = useCallback(async () => {
+    const result = errorSchema.safeParse({
+      title,
+      description,
+      steps: Object.entries(nodesOrder).map(([, value]) => ({
+        gherkinStep: value.gherkinStep || '',
+        label: value.label,
+        icon: IconToKeyTransformer(value.icon),
+        parameters: value.parameters,
+        order: value.order,
+        templateStepId: value.templateStepId,
+      })),
+    })
+
+    if (!result.success) {
+      setErrors(result.error.flatten().fieldErrors)
+      return
+    }
+    setErrors({})
+    const response = await onSubmitAction(result.data, id)
+    if (response.status === 200) {
+      toast({
+        title: 'Success',
+        description: 'Test case saved successfully',
+        variant: 'default',
+      })
+      router.push(`/template-test-cases`)
+    }
+    if (response.status === 500) {
+      toast({
+        title: 'Error',
+        description: response.error || 'An error occurred',
+        variant: 'destructive',
+      })
+    }
+  }, [description, nodesOrder, title, router, onSubmitAction, id])
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex justify-between gap-8" id="meta">
+        <div className="w-1/2">
+          <div className="mb-4 flex flex-col gap-2">
+            <Label htmlFor="title">Title</Label>
+            <Input id="title" name="title" value={title} onChange={onTitleChange} />
+            <ErrorMessage message={errors.title?.[0] || ''} visible={!!errors.title} />
+          </div>
+          <div className="mb-4 flex flex-col gap-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea id="description" name="description" value={description} onChange={onDescriptionChange} />
+            <ErrorMessage message={errors.description?.[0] || ''} visible={!!errors.description} />
+          </div>
+        </div>
+        <div className="w-1/2">
+          <div className="mb-4 flex flex-col gap-2">
+            <Card>
+              <CardHeader>
+                <CardTitle>Test Scenario(Preview)</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CodeMirror
+                  editable={false}
+                  value={generateGherkinSyntax()}
+                  onChange={() => {}}
+                  height="200px"
+                  extensions={[langs.gherkin(), EditorView.lineWrapping]}
+                  theme={githubDark}
+                />
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+      <div className="mb-4 flex h-[500px] flex-col gap-2">
+        <Label htmlFor="test-case-flow">Test Case Flow</Label>
+        <TemplateTestCaseFlow
+          initialNodesOrder={nodesOrder}
+          templateStepParams={templateStepParams}
+          templateSteps={templateSteps}
+          onNodeOrderChange={onNodeOrderChange}
+          locators={locators}
+          locatorGroups={locatorGroups}
+          defaultValueInput={defaultValueInput}
+        />
+      </div>
+      <ErrorMessage message={errors.steps?.[0] || ''} visible={!!errors.steps} />
+      <div className="mb-4 flex flex-col gap-2">
+        <Button onClick={handleSubmit} className="w-fit px-6">
+          Save
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default TemplateTestCaseForm

package/templates/default/src/app/(base)/template-test-cases/template-test-case-table-columns.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { deleteTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
+import { formatDateTime } from '@/lib/utils'
+
+export const templateTestCaseTableCols: ColumnDef<TemplateTestCase & { steps: TemplateTestCaseStep[] }>[] = [
+  {
+    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: 'description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
+  },
+  {
+    accessorKey: 'steps',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Steps" />,
+    cell: ({ row }) => {
+      const templateTestCase = row.original
+      return <div>{templateTestCase.steps.length}</div>
+    },
+  },
+  {
+    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 templateTestCase = row.original
+      return (
+        <TableActions
+          modifyLink={`/template-test-cases/modify/${templateTestCase.id}`}
+          deleteHandler={() => deleteTemplateTestCaseAction([templateTestCase.id])}
+        />
+      )
+    },
+  },
+]

package/templates/default/src/app/(base)/template-test-cases/template-test-case-table.tsx

@@ -0,0 +1,32 @@
+import { DataTable } from '@/components/ui/data-table'
+import React from 'react'
+import { templateTestCaseTableCols } from './template-test-case-table-columns'
+import {
+  getAllTemplateTestCasesAction,
+  deleteTemplateTestCaseAction,
+} from '@/actions/template-test-case/template-test-case-actions'
+import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
+
+type TemplateTestCaseWithSteps = TemplateTestCase & {
+  steps: TemplateTestCaseStep[]
+}
+
+const TemplateTestCaseTable = async () => {
+  const { data: templateTestCases } = await getAllTemplateTestCasesAction()
+
+  return (
+    <>
+      <DataTable
+        columns={templateTestCaseTableCols}
+        data={templateTestCases as TemplateTestCaseWithSteps[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/template-test-cases/create"
+        modifyLink="/template-test-cases/modify"
+        deleteAction={deleteTemplateTestCaseAction}
+      />
+    </>
+  )
+}
+
+export default TemplateTestCaseTable

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

@@ -0,0 +1,76 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import React from 'react'
+import TestCaseForm from '../test-case-form'
+import {
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+} from '@/actions/template-step/template-step-actions'
+import { Locator, LocatorGroup, TemplateStep, TemplateStepParameter, TestSuite, Tag } from '@prisma/client'
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
+import { createTestCaseAction } from '@/actions/test-case/test-case-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Test Case',
+  description: 'Create a new test from scratch to execute against your application',
+}
+
+const CreateTestCase = async () => {
+  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
+
+  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
+
+  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
+
+  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
+
+  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
+
+  const { data: tags, error: tagsError } = await getAllTagsAction()
+
+  if (
+    templateStepParamsError ||
+    templateStepsError ||
+    locatorsError ||
+    testSuitesError ||
+    locatorGroupsError ||
+    tagsError
+  ) {
+    return (
+      <div>
+        Error:{' '}
+        {templateStepParamsError ||
+          templateStepsError ||
+          locatorsError ||
+          testSuitesError ||
+          locatorGroupsError ||
+          tagsError}
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <PageHeader>Create New Test Case</PageHeader>
+        <HeaderSubtitle>Create a new test from scratch to execute against your application</HeaderSubtitle>
+      </div>
+      <TestCaseForm
+        defaultNodesOrder={{}}
+        templateStepParams={templateStepParams as TemplateStepParameter[]}
+        templateSteps={templateSteps as TemplateStep[]}
+        locators={locators as Locator[]}
+        locatorGroups={locatorGroups as LocatorGroup[]}
+        testSuites={testSuites as TestSuite[]}
+        tags={tags as Tag[]}
+        onSubmitAction={createTestCaseAction}
+      />
+    </div>
+  )
+}
+
+export default CreateTestCase