create-appraisejs 0.3.0 → 0.3.1-alpha.1

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

@@ -1,11 +1,15 @@
 import {
   Locator,
   LocatorGroup,
+  Environment,
+  Module,
   TemplateStep,
   TemplateStepParameter,
   TemplateTestCase,
   TemplateTestCaseStep,
   TemplateTestCaseStepParameter,
+  TemplateTestCaseFlowBlock,
+  TemplateTestCaseFlowBlockNode,
 } from '@prisma/client'
 import React from 'react'
 import TemplateTestCaseForm from '../../template-test-case-form'
@@ -16,6 +20,8 @@ import {
   getAllTemplateStepsAction,
 } from '@/actions/template-step/template-step-actions'
 import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
 import { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
 import {
   getTemplateTestCaseByIdAction,
@@ -31,22 +37,63 @@ export const metadata: Metadata = {
 
 const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params
-  const { data, error } = await getTemplateTestCaseByIdAction(id)
+  if (!id?.trim()) {
+    return <div>Error: Invalid template test case id.</div>
+  }
+
+  const [
+    templateCaseResponse,
+    { data: templateStepParams, error: templateStepParamsError },
+    { data: templateSteps, error: templateStepsError },
+    { data: locators, error: locatorsError },
+    { data: locatorGroups, error: locatorGroupsError },
+    { data: environments, error: environmentsError },
+    { data: modules, error: modulesError },
+  ] = await Promise.all([
+    getTemplateTestCaseByIdAction(id),
+    getAllTemplateStepParamsAction(),
+    getAllTemplateStepsAction(),
+    getAllLocatorsAction(),
+    getAllLocatorGroupsAction(),
+    getAllEnvironmentsAction(),
+    getAllModulesAction(),
+  ])
+
+  const { data, error } = templateCaseResponse
 
   if (error) {
     return <div>Error: {error}</div>
   }
+
+  if (!data) {
+    return <div>Error: Template test case not found.</div>
+  }
+
   const templateTestCase = data as TemplateTestCase & {
     steps: (TemplateTestCaseStep & {
       parameters: TemplateTestCaseStepParameter[]
     })[]
+    flowBlocks: (TemplateTestCaseFlowBlock & { nodes: TemplateTestCaseFlowBlockNode[] })[]
   }
-  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>
+  if (
+    templateStepParamsError ||
+    templateStepsError ||
+    locatorsError ||
+    locatorGroupsError ||
+    environmentsError ||
+    modulesError
+  ) {
+    return (
+      <div>
+        Error:{' '}
+        {templateStepParamsError ||
+          templateStepsError ||
+          locatorsError ||
+          locatorGroupsError ||
+          environmentsError ||
+          modulesError}
+      </div>
+    )
   }
   return (
     <>
@@ -63,8 +110,12 @@ const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string
         templateSteps={templateSteps as TemplateStep[]}
         locators={locators as Locator[]}
         locatorGroups={locatorGroups as LocatorGroup[]}
+        environments={environments as Environment[]}
+        modules={modules as Module[]}
         defaultNodesOrder={templateTestCase.steps.reduce((acc, step) => {
-          acc[step.id] = {
+          const nodeId = step.flowNodeId ?? step.id
+          acc[nodeId] = {
+            nodeId,
             order: step.order,
             label: step.label,
             gherkinStep: step.gherkinStep,
@@ -81,6 +132,15 @@ const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string
           }
           return acc
         }, {} as TemplateTestCaseNodeOrderMap)}
+        defaultFlowBlocks={templateTestCase.flowBlocks
+          .slice()
+          .sort((left, right) => left.order - right.order)
+          .map(block => ({
+            id: block.id,
+            name: block.name,
+            nodeIds: block.nodes.map(node => node.flowNodeId),
+          }))}
+        defaultValueInput={true}
       />
     </>
   )

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

@@ -27,7 +27,7 @@ const TemplateTestCasesPage = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<Blocks className="h-8 w-8" />}
+          icon={<Blocks className="size-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"
@@ -42,7 +42,7 @@ const TemplateTestCasesPage = 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" />
             Template Test Cases
           </span>
         </PageHeader>

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

@@ -77,6 +77,8 @@ describe('TemplateTestCaseFlow', () => {
         templateSteps={[]}
         locators={[]}
         locatorGroups={[]}
+        environments={[]}
+        modules={[]}
         onNodeOrderChange={onNodeOrderChange}
         defaultValueInput
       />,
@@ -105,5 +107,4 @@ describe('TemplateTestCaseFlow', () => {
     })
     expect(screen.getByTestId('default-value-input')).toHaveTextContent('true')
   })
-
 })

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

@@ -1,26 +1,36 @@
 import FlowDiagram from '@/components/diagram/flow-diagram'
 import { toTemplateTestCaseNodeOrderMap } from '@/components/diagram/flow-host-helpers'
 import { useFlowNodeOrder } from '@/components/diagram/use-flow-node-order'
-import type { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
-import type { Locator, LocatorGroup, TemplateStep, TemplateStepParameter } from '@prisma/client'
+import type { FlowBlock, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import type { Environment, Locator, LocatorGroup, Module, TemplateStep, TemplateStepParameter } from '@prisma/client'
 
 type TemplateTestCaseFlowProps = {
   initialNodesOrder: TemplateTestCaseNodeOrderMap
   templateStepParams: TemplateStepParameter[]
   templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
+  locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>
+  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name' | 'route' | 'moduleId'>>
+  environments: Array<Pick<Environment, 'id' | 'name'>>
+  modules: Array<Pick<Module, 'id' | 'name' | 'parentId'>>
   onNodeOrderChange: (nodesOrder: TemplateTestCaseNodeOrderMap) => void
+  flowBlocks?: FlowBlock[]
+  onFlowBlocksChange?: (flowBlocks: FlowBlock[]) => void
   defaultValueInput?: boolean
 }
 
+const EMPTY_FLOW_BLOCKS: FlowBlock[] = []
+
 const TemplateTestCaseFlow = ({
   initialNodesOrder,
   templateStepParams,
   templateSteps,
   locators,
   locatorGroups,
+  environments,
+  modules,
   onNodeOrderChange,
+  flowBlocks = EMPTY_FLOW_BLOCKS,
+  onFlowBlocksChange,
   defaultValueInput = false,
 }: TemplateTestCaseFlowProps) => {
   const { nodesOrder, handleNodeOrderChange } = useFlowNodeOrder({
@@ -37,7 +47,12 @@ const TemplateTestCaseFlow = ({
       templateSteps={templateSteps}
       locators={locators}
       locatorGroups={locatorGroups}
+      environments={environments}
+      modules={modules}
       defaultValueInput={defaultValueInput}
+      enableNodeGrouping
+      flowBlocks={flowBlocks}
+      onFlowBlocksChange={onFlowBlocksChange}
     />
   )
 }

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

@@ -73,6 +73,8 @@ describe('TemplateTestCaseForm', () => {
         templateSteps={[]}
         locators={[]}
         locatorGroups={[]}
+        environments={[]}
+        modules={[]}
         onSubmitAction={onSubmitAction}
       />,
     )
@@ -86,11 +88,13 @@ describe('TemplateTestCaseForm', () => {
         {
           title: 'Reusable login',
           description: 'Uses default credentials',
+          flowBlocks: [],
           steps: [
             {
               gherkinStep: 'fill email',
               label: 'Fill email',
               icon: 'INPUT',
+              nodeId: 'node-1',
               parameters: [
                 {
                   name: 'email',
@@ -127,6 +131,8 @@ describe('TemplateTestCaseForm', () => {
         templateSteps={[]}
         locators={[]}
         locatorGroups={[]}
+        environments={[]}
+        modules={[]}
         onSubmitAction={onSubmitAction}
       />,
     )

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

@@ -2,14 +2,17 @@
 import React, { useCallback, useState } from 'react'
 
 import TemplateTestCaseFlow from './template-test-case-flow'
-import type { TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import type { FlowBlock, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
 import {
   type Locator,
   type LocatorGroup,
+  type Environment,
+  type Module,
   type TemplateStep,
   type TemplateStepParameter,
 } from '@prisma/client'
 import { useRouter } from 'next/navigation'
+import { Save } from 'lucide-react'
 import { z } from 'zod'
 
 import ErrorMessage from '@/components/form/error-message'
@@ -17,7 +20,7 @@ import { TestScenarioPreview } from '@/components/test-case/test-scenario-previe
 import {
   buildScenarioPreview,
   buildScenarioSteps,
-  getActionErrorMessage,
+  handleTestCaseSaveResponse,
   templateTestCaseSubmitSchema,
 } from '@/components/test-case/test-case-form-helpers'
 import { Button } from '@/components/ui/button'
@@ -28,33 +31,46 @@ import { templateTestCaseSchema } from '@/constants/form-opts/template-test-case
 import { toast } from '@/hooks/use-toast'
 import type { ActionResponse } from '@/types/form/actionHandler'
 
+function TemplateTestCaseFormFieldError({ message }: { message?: string[] }) {
+  return <ErrorMessage message={message?.[0] || ''} visible={!!message} />
+}
+
 type TemplateTestCaseFormProps = {
   defaultNodesOrder: TemplateTestCaseNodeOrderMap
   templateStepParams: TemplateStepParameter[]
   templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
+  locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>
+  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name' | 'route' | 'moduleId'>>
+  environments: Array<Pick<Environment, 'id' | 'name'>>
+  modules: Array<Pick<Module, 'id' | 'name' | 'parentId'>>
   onSubmitAction: (value: z.infer<typeof templateTestCaseSchema>, id?: string) => Promise<ActionResponse>
   id?: string
   defaultTitle?: string
   defaultDescription?: string
   defaultValueInput?: boolean
+  defaultFlowBlocks?: FlowBlock[]
 }
 
+const EMPTY_FLOW_BLOCKS: FlowBlock[] = []
+
 const TemplateTestCaseForm = ({
   defaultNodesOrder,
   templateStepParams,
   templateSteps,
   locators,
   locatorGroups,
+  environments,
+  modules,
   id,
   defaultTitle,
   defaultDescription,
   defaultValueInput = false,
+  defaultFlowBlocks = EMPTY_FLOW_BLOCKS,
   onSubmitAction,
 }: TemplateTestCaseFormProps) => {
-  const router = useRouter()
+  const { push } = useRouter()
   const [nodesOrder, setNodesOrder] = useState<TemplateTestCaseNodeOrderMap>(defaultNodesOrder)
+  const [flowBlocks, setFlowBlocks] = useState<FlowBlock[]>(defaultFlowBlocks)
   const [title, setTitle] = useState(defaultTitle || '')
   const [description, setDescription] = useState(defaultDescription || '')
   const [errors, setErrors] = useState<{
@@ -64,7 +80,6 @@ const TemplateTestCaseForm = ({
   }>({})
 
   const scenarioPreview = buildScenarioPreview(title, description, nodesOrder)
-  const renderError = (message?: string[]) => <ErrorMessage message={message?.[0] || ''} visible={!!message} />
 
   const onNodeOrderChange = useCallback((nodesOrder: TemplateTestCaseNodeOrderMap) => {
     setNodesOrder(nodesOrder)
@@ -83,6 +98,7 @@ const TemplateTestCaseForm = ({
       title,
       description,
       steps: buildScenarioSteps(nodesOrder),
+      flowBlocks,
     })
 
     if (!result.success) {
@@ -91,22 +107,8 @@ const TemplateTestCaseForm = ({
     }
     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: getActionErrorMessage(response),
-        variant: 'destructive',
-      })
-    }
-  }, [description, nodesOrder, title, router, onSubmitAction, id])
+    handleTestCaseSaveResponse({ response, redirectPath: '/template-test-cases', push, toast })
+  }, [description, nodesOrder, title, push, onSubmitAction, id, flowBlocks])
 
   return (
     <div className="flex flex-col gap-4">
@@ -115,12 +117,12 @@ const TemplateTestCaseForm = ({
           <div className="mb-4 flex flex-col gap-2">
             <Label htmlFor="title">Title</Label>
             <Input id="title" name="title" value={title} onChange={onTitleChange} />
-            {renderError(errors.title)}
+            <TemplateTestCaseFormFieldError message={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} />
-            {renderError(errors.description)}
+            <TemplateTestCaseFormFieldError message={errors.description} />
           </div>
         </div>
         <div className="w-1/2">
@@ -130,7 +132,6 @@ const TemplateTestCaseForm = ({
         </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}
@@ -138,13 +139,18 @@ const TemplateTestCaseForm = ({
           onNodeOrderChange={onNodeOrderChange}
           locators={locators}
           locatorGroups={locatorGroups}
+          environments={environments}
+          modules={modules}
           defaultValueInput={defaultValueInput}
+          flowBlocks={flowBlocks}
+          onFlowBlocksChange={setFlowBlocks}
         />
       </div>
-      {renderError(errors.steps)}
+      <TemplateTestCaseFormFieldError message={errors.steps} />
       <div className="mb-4 flex flex-col gap-2">
         <Button onClick={handleSubmit} className="w-fit px-6">
-          Save
+          <Save className="size-4" aria-hidden />
+          <span className="font-bold">Save</span>
         </Button>
       </div>
     </div>

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

@@ -0,0 +1,121 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+const {
+  createTestCaseAction,
+  createTestSuiteAction,
+  createTagAction,
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+  getAllLocatorsAction,
+  getAllTestSuitesAction,
+  getAllLocatorGroupsAction,
+  getAllTagsAction,
+  getAllTestCasesAction,
+  getAllModulesAction,
+  getAllEnvironmentsAction,
+  testCaseFormSpy,
+} = vi.hoisted(() => ({
+  createTestCaseAction: vi.fn(),
+  createTestSuiteAction: vi.fn(),
+  createTagAction: vi.fn(),
+  getAllTemplateStepParamsAction: vi.fn(),
+  getAllTemplateStepsAction: vi.fn(),
+  getAllLocatorsAction: vi.fn(),
+  getAllTestSuitesAction: vi.fn(),
+  getAllLocatorGroupsAction: vi.fn(),
+  getAllTagsAction: vi.fn(),
+  getAllTestCasesAction: vi.fn(),
+  getAllModulesAction: vi.fn(),
+  getAllEnvironmentsAction: vi.fn(),
+  testCaseFormSpy: vi.fn(() => <div>Mock Test Case Form</div>),
+}))
+
+vi.mock('@/actions/template-step/template-step-actions', () => ({
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+}))
+
+vi.mock('@/actions/locator/locator-actions', () => ({
+  getAllLocatorsAction,
+}))
+
+vi.mock('@/actions/test-suite/test-suite-actions', () => ({
+  getAllTestSuitesAction,
+  createTestSuiteAction,
+}))
+
+vi.mock('@/actions/test-case/test-case-actions', () => ({
+  createTestCaseAction,
+  getAllTestCasesAction,
+}))
+
+vi.mock('@/actions/locator-groups/locator-group-actions', () => ({
+  getAllLocatorGroupsAction,
+}))
+
+vi.mock('@/actions/tags/tag-actions', () => ({
+  createTagAction,
+  getAllTagsAction,
+}))
+
+vi.mock('@/actions/modules/module-actions', () => ({
+  getAllModulesAction,
+}))
+
+vi.mock('@/actions/environments/environment-actions', () => ({
+  getAllEnvironmentsAction,
+}))
+
+vi.mock('../test-case-form', () => ({
+  __esModule: true,
+  default: testCaseFormSpy,
+}))
+
+vi.mock('../test-case-resource-rows', () => ({
+  getTemplateStepParamRows: vi.fn(() => [{ id: 'param-1' }]),
+  getTemplateStepRows: vi.fn(() => [{ id: 'template-step-1', name: 'Click' }]),
+  getTestSuiteRows: vi.fn(() => [{ id: 'suite-1', name: 'Smoke' }]),
+  getLocatorRows: vi.fn(() => [{ id: 'locator-1', name: 'Submit button' }]),
+  getLocatorGroupRows: vi.fn(() => [{ id: 'group-1', name: 'Checkout' }]),
+  getTagRows: vi.fn(() => [{ id: 'tag-1', name: 'Regression' }]),
+  getModuleRows: vi.fn(() => [{ id: 'module-1', name: 'Payments' }]),
+  getEnvironmentRows: vi.fn(() => [{ id: 'env-1', name: 'Staging' }]),
+}))
+
+vi.mock('../test-case-row-helpers', () => ({
+  getTestCaseRows: vi.fn(() => [{ id: 'case-1', title: 'Checkout case', steps: [], tags: [] }]),
+}))
+
+describe('Create Test Case page', () => {
+  it('passes test cases and modules into the shared test case form', async () => {
+    getAllTemplateStepParamsAction.mockResolvedValue({ data: [] })
+    getAllTemplateStepsAction.mockResolvedValue({ data: [] })
+    getAllTestSuitesAction.mockResolvedValue({ data: [] })
+    getAllLocatorsAction.mockResolvedValue({ data: [] })
+    getAllLocatorGroupsAction.mockResolvedValue({ data: [] })
+    getAllTagsAction.mockResolvedValue({ data: [] })
+    getAllTestCasesAction.mockResolvedValue({ data: [] })
+    getAllModulesAction.mockResolvedValue({ data: [] })
+    getAllEnvironmentsAction.mockResolvedValue({ data: [] })
+
+    const { default: CreateTestCase } = await import('./page')
+
+    render(await CreateTestCase())
+
+    expect(screen.getByText('Mock Test Case Form')).toBeInTheDocument()
+    expect(testCaseFormSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        testCases: [{ id: 'case-1', title: 'Checkout case', steps: [], tags: [] }],
+        moduleList: [{ id: 'module-1', name: 'Payments' }],
+        environments: [{ id: 'env-1', name: 'Staging' }],
+        onSubmitAction: createTestCaseAction,
+        onCreateTestSuiteAction: createTestSuiteAction,
+        onCreateTagAction: createTagAction,
+      }),
+      undefined,
+    )
+  })
+})

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

@@ -7,20 +7,25 @@ import {
   getAllTemplateStepsAction,
 } from '@/actions/template-step/template-step-actions'
 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 { createTestCaseAction, getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
 import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { createTagAction, getAllTagsAction } from '@/actions/tags/tag-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { createTestSuiteAction, getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
 import { Metadata } from 'next'
 
 import {
   getLocatorGroupRows,
+  getEnvironmentRows,
   getLocatorRows,
+  getModuleRows,
   getTagRows,
   getTemplateStepParamRows,
   getTemplateStepRows,
   getTestSuiteRows,
-} from '../test-case-route-helpers'
+} from '../test-case-resource-rows'
+import { getTestCaseRows } from '../test-case-row-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Create Test Case',
@@ -35,6 +40,9 @@ const CreateTestCase = async () => {
     locatorsResponse,
     locatorGroupsResponse,
     tagsResponse,
+    testCasesResponse,
+    moduleListResponse,
+    environmentsResponse,
   ] = await Promise.all([
     getAllTemplateStepParamsAction(),
     getAllTemplateStepsAction(),
@@ -42,6 +50,9 @@ const CreateTestCase = async () => {
     getAllLocatorsAction(),
     getAllLocatorGroupsAction(),
     getAllTagsAction(),
+    getAllTestCasesAction(),
+    getAllModulesAction(),
+    getAllEnvironmentsAction(),
   ])
 
   const loadError =
@@ -50,14 +61,13 @@ const CreateTestCase = async () => {
     locatorsResponse.error ||
     testSuitesResponse.error ||
     locatorGroupsResponse.error ||
-    tagsResponse.error
+    tagsResponse.error ||
+    testCasesResponse.error ||
+    moduleListResponse.error ||
+    environmentsResponse.error
 
   if (loadError) {
-    return (
-      <div>
-        Error: {loadError}
-      </div>
-    )
+    return <div>Error: {loadError}</div>
   }
 
   const templateStepParams = getTemplateStepParamRows(templateStepParamsResponse.data)
@@ -66,6 +76,9 @@ const CreateTestCase = async () => {
   const locators = getLocatorRows(locatorsResponse.data)
   const locatorGroups = getLocatorGroupRows(locatorGroupsResponse.data)
   const tags = getTagRows(tagsResponse.data)
+  const testCases = getTestCaseRows(testCasesResponse.data)
+  const moduleList = getModuleRows(moduleListResponse.data)
+  const environments = getEnvironmentRows(environmentsResponse.data)
 
   return (
     <div>
@@ -79,9 +92,14 @@ const CreateTestCase = async () => {
         templateSteps={templateSteps}
         locators={locators}
         locatorGroups={locatorGroups}
+        environments={environments}
         testSuites={testSuites}
+        testCases={testCases}
+        moduleList={moduleList}
         tags={tags}
         onSubmitAction={createTestCaseAction}
+        onCreateTestSuiteAction={createTestSuiteAction}
+        onCreateTagAction={createTagAction}
       />
     </div>
   )

package/templates/blank/src/app/(base)/test-cases/create-from-template/create-from-template-conversion-helpers.ts

@@ -0,0 +1,27 @@
+import {
+  templateTestCaseToTestCaseConverter,
+  validateConvertedTestCaseData,
+  type ConvertedTestCaseData,
+} from '@/lib/transformers/template-test-case-converter'
+
+import type { TemplateTestCaseWithSteps } from './create-from-template-types'
+
+export function getConvertedTemplateTestCaseData(templateTestCase: TemplateTestCaseWithSteps): {
+  convertedData: ConvertedTestCaseData | null
+  error: string | null
+} {
+  const convertedData = templateTestCaseToTestCaseConverter(templateTestCase)
+  const validation = validateConvertedTestCaseData(convertedData)
+
+  if (!validation.isValid) {
+    return {
+      convertedData: null,
+      error: validation.errors[0] || 'Invalid test case',
+    }
+  }
+
+  return {
+    convertedData,
+    error: null,
+  }
+}

package/templates/blank/src/app/(base)/test-cases/create-from-template/create-from-template-helpers.test.ts

@@ -59,8 +59,10 @@ describe('create-from-template helpers', () => {
       title: 'Login flow',
       description: 'Reusable login flow',
       testSuiteIds: [],
+      flowBlocks: [],
       nodesOrder: {
         'node-0': {
+          nodeId: 'node-0',
           order: 1,
           label: 'Fill email',
           gherkinStep: 'fill email',