create-appraisejs 0.3.0 → 0.3.1-alpha.0

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

@@ -0,0 +1,74 @@
+import { templateSelectionSchema } from '@/constants/form-opts/template-selection-form-opts'
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+import type { TemplateSelectionRow, TemplateTestCaseWithSteps } from './create-from-template-types'
+
+export const templateSelectionFieldValidator = templateSelectionSchema.shape.templateTestCaseId
+
+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 isNamedRow(value: unknown): value is TemplateSelectionRow {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isTemplateTestCaseStepParameter(value: unknown): boolean {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'name' in value &&
+    'defaultValue' in value &&
+    'type' in value &&
+    'order' in value
+  )
+}
+
+function isTemplateTestCaseStepRow(value: unknown) {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'label' in value &&
+    'templateStepId' in value &&
+    'parameters' in value &&
+    Array.isArray(value.parameters) &&
+    value.parameters.every(isTemplateTestCaseStepParameter)
+  )
+}
+
+function isTemplateTestCaseWithSteps(value: unknown): value is TemplateTestCaseWithSteps {
+  return (
+    isNamedRow(value) &&
+    'steps' in value &&
+    Array.isArray(value.steps) &&
+    value.steps.every(isTemplateTestCaseStepRow)
+  )
+}
+
+export function getTemplateSelectionRows(data: ActionResponseData | undefined): TemplateSelectionRow[] {
+  return Array.isArray(data) ? data.filter(isNamedRow) : []
+}
+
+export function getTemplateTestCasesWithSteps(data: ActionResponseData | undefined): TemplateTestCaseWithSteps[] {
+  return Array.isArray(data) ? data.filter(isTemplateTestCaseWithSteps) : []
+}
+
+export function getTemplateSelectionOptions(templateTestCases: TemplateSelectionRow[]) {
+  return templateTestCases.map(templateTestCase => ({
+    label: templateTestCase.name,
+    value: templateTestCase.id,
+  }))
+}
+
+export function getTemplateTestCaseWithSteps(data: ActionResponseData | undefined) {
+  return isTemplateTestCaseWithSteps(data) ? data : null
+}

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

@@ -0,0 +1,24 @@
+import type {
+  TemplateTestCase,
+  TemplateTestCaseFlowBlock,
+  TemplateTestCaseFlowBlockNode,
+  TemplateTestCaseStep,
+  TemplateTestCaseStepParameter,
+} from '@prisma/client'
+
+export type TemplateSelectionOption = {
+  label: string
+  value: string
+}
+
+export type TemplateSelectionRow = {
+  id: string
+  name: string
+}
+
+export type TemplateTestCaseWithSteps = TemplateTestCase & {
+  steps: (TemplateTestCaseStep & {
+    parameters: TemplateTestCaseStepParameter[]
+  })[]
+  flowBlocks?: (TemplateTestCaseFlowBlock & { nodes: TemplateTestCaseFlowBlockNode[] })[]
+}

package/templates/starter/src/app/(base)/test-cases/create-from-template/generate/[id]/page.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, it, vi } from 'vitest'
+
+const { redirect } = vi.hoisted(() => ({
+  redirect: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  redirect,
+}))
+
+describe('Generate Test Case From Template page', () => {
+  it('redirects legacy generate routes into the merged template wizard', async () => {
+    const { default: GenerateTestCaseFromTemplate } = await import('./page')
+
+    await GenerateTestCaseFromTemplate({ params: Promise.resolve({ id: 'template-1' }) })
+
+    expect(redirect).toHaveBeenCalledWith('/test-cases/create-from-template?templateTestCaseId=template-1')
+  })
+})

package/templates/starter/src/app/(base)/test-cases/create-from-template/generate/[id]/page.tsx

@@ -1,29 +1,5 @@
-import { getTemplateTestCaseByIdAction } from '@/actions/template-test-case/template-test-case-actions'
-import React from 'react'
-import TestCaseForm from '../../../test-case-form'
-import { createTestCaseAction } from '@/actions/test-case/test-case-actions'
-import {
-  getAllTemplateStepParamsAction,
-  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 HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import PageHeader from '@/components/typography/page-header'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { getAllTagsAction } from '@/actions/tags/tag-actions'
 import { Metadata } from 'next'
-
-import {
-  getConvertedTemplateTestCaseData,
-  getLocatorGroupRows,
-  getLocatorRows,
-  getTagRows,
-  getTemplateStepParamRows,
-  getTemplateStepRows,
-  getTemplateTestCaseWithSteps,
-  getTestSuiteRows,
-} from '../../create-from-template-helpers'
+import { redirect } from 'next/navigation'
 
 export const metadata: Metadata = {
   title: 'Appraise | Create Test Case From Template',
@@ -32,74 +8,7 @@ export const metadata: Metadata = {
 
 const GenerateTestCaseFromTemplate = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params
-  const [
-    templateTestCaseResponse,
-    templateStepParamsResponse,
-    templateStepsResponse,
-    locatorsResponse,
-    testSuitesResponse,
-    locatorGroupsResponse,
-    tagsResponse,
-  ] = await Promise.all([
-    getTemplateTestCaseByIdAction(id),
-    getAllTemplateStepParamsAction(),
-    getAllTemplateStepsAction(),
-    getAllLocatorsAction(),
-    getAllTestSuitesAction(),
-    getAllLocatorGroupsAction(),
-    getAllTagsAction(),
-  ])
-
-  const loadError =
-    templateTestCaseResponse.error ||
-    templateStepParamsResponse.error ||
-    templateStepsResponse.error ||
-    locatorsResponse.error ||
-    testSuitesResponse.error ||
-    locatorGroupsResponse.error ||
-    tagsResponse.error
-
-  if (loadError) {
-    return <div>Error: {loadError}</div>
-  }
-
-  const templateTestCaseData = getTemplateTestCaseWithSteps(templateTestCaseResponse.data)
-  if (!templateTestCaseData) {
-    return <div>Error: Invalid template test case</div>
-  }
-
-  const { convertedData, error } = getConvertedTemplateTestCaseData(templateTestCaseData)
-  if (!convertedData || error) {
-    return <div>{error || 'Invalid test case'}</div>
-  }
-
-  const templateStepParams = getTemplateStepParamRows(templateStepParamsResponse.data)
-  const templateSteps = getTemplateStepRows(templateStepsResponse.data)
-  const locators = getLocatorRows(locatorsResponse.data)
-  const testSuites = getTestSuiteRows(testSuitesResponse.data)
-  const locatorGroups = getLocatorGroupRows(locatorGroupsResponse.data)
-  const tags = getTagRows(tagsResponse.data)
-
-  return (
-    <div>
-      <PageHeader>Create New Test Case</PageHeader>
-      <HeaderSubtitle>Create a new test from a template to execute against your application</HeaderSubtitle>
-
-      <TestCaseForm
-        onSubmitAction={createTestCaseAction}
-        defaultNodesOrder={convertedData.nodesOrder}
-        templateStepParams={templateStepParams}
-        templateSteps={templateSteps}
-        locators={locators}
-        testSuites={testSuites}
-        tags={tags}
-        defaultTitle={templateTestCaseData.name || ''}
-        defaultDescription={templateTestCaseData.description || ''}
-        defaultTestSuiteIds={convertedData.testSuiteIds}
-        locatorGroups={locatorGroups}
-      />
-    </div>
-  )
+  redirect(`/test-cases/create-from-template?templateTestCaseId=${encodeURIComponent(id)}`)
 }
 
 export default GenerateTestCaseFromTemplate

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

@@ -0,0 +1,157 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+const {
+  getAllTemplateTestCasesAction,
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+  getAllTestSuitesAction,
+  getAllLocatorsAction,
+  getAllLocatorGroupsAction,
+  getAllTagsAction,
+  getAllTestCasesAction,
+  getAllModulesAction,
+  getAllEnvironmentsAction,
+  createTestCaseAction,
+  createTestSuiteAction,
+  createTagAction,
+  testCaseFormSpy,
+} = vi.hoisted(() => ({
+  getAllTemplateTestCasesAction: vi.fn(),
+  getAllTemplateStepParamsAction: vi.fn(),
+  getAllTemplateStepsAction: vi.fn(),
+  getAllTestSuitesAction: vi.fn(),
+  getAllLocatorsAction: vi.fn(),
+  getAllLocatorGroupsAction: vi.fn(),
+  getAllTagsAction: vi.fn(),
+  getAllTestCasesAction: vi.fn(),
+  getAllModulesAction: vi.fn(),
+  getAllEnvironmentsAction: vi.fn(),
+  createTestCaseAction: vi.fn(),
+  createTestSuiteAction: vi.fn(),
+  createTagAction: vi.fn(),
+  testCaseFormSpy: vi.fn(() => <div>Mock Test Case Form</div>),
+}))
+
+vi.mock('@/actions/template-test-case/template-test-case-actions', () => ({
+  getAllTemplateTestCasesAction,
+}))
+
+vi.mock('@/actions/template-step/template-step-actions', () => ({
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+}))
+
+vi.mock('@/actions/locator/locator-actions', () => ({
+  getAllLocatorsAction,
+}))
+
+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('@/actions/test-suite/test-suite-actions', () => ({
+  createTestSuiteAction,
+  getAllTestSuitesAction,
+}))
+
+vi.mock('../test-case-form', () => ({
+  __esModule: true,
+  default: testCaseFormSpy,
+}))
+
+describe('Create Test Case From Template page', () => {
+  it('passes template options and the selected template defaults into the shared test case form', async () => {
+    getAllTemplateTestCasesAction.mockResolvedValue({
+      data: [
+        {
+          id: 'template-1',
+          name: 'Login template',
+          description: 'Reusable login flow',
+          steps: [
+            {
+              id: 'step-row-1',
+              order: 1,
+              label: 'Fill email',
+              gherkinStep: 'fill email',
+              icon: 'INPUT',
+              templateStepId: 'step-1',
+              parameters: [
+                {
+                  id: 'param-1',
+                  name: 'email',
+                  defaultValue: 'qa@appraise.dev',
+                  type: 'STRING',
+                  order: 1,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    })
+    getAllTemplateStepParamsAction.mockResolvedValue({ data: [{ id: 'template-param-1', templateStepId: 'step-1' }] })
+    getAllTemplateStepsAction.mockResolvedValue({ data: [{ id: 'step-1', name: 'Input' }] })
+    getAllTestSuitesAction.mockResolvedValue({ data: [{ id: 'suite-1', name: 'Smoke' }] })
+    getAllLocatorsAction.mockResolvedValue({ data: [{ id: 'locator-1', name: 'Email field' }] })
+    getAllLocatorGroupsAction.mockResolvedValue({ data: [{ id: 'group-1', name: 'Auth' }] })
+    getAllTagsAction.mockResolvedValue({ data: [{ id: 'tag-1', name: 'Regression' }] })
+    getAllTestCasesAction.mockResolvedValue({ data: [{ id: 'case-1', title: 'Checkout case', steps: [], tags: [] }] })
+    getAllModulesAction.mockResolvedValue({ data: [{ id: 'module-1', name: 'Auth' }] })
+    getAllEnvironmentsAction.mockResolvedValue({ data: [{ id: 'env-1', name: 'Staging' }] })
+
+    const { default: CreateTestCaseFromTemplate } = await import('./page')
+
+    render(
+      await CreateTestCaseFromTemplate({
+        searchParams: Promise.resolve({ templateTestCaseId: 'template-1' }),
+      }),
+    )
+
+    expect(screen.getByText('Mock Test Case Form')).toBeInTheDocument()
+    expect(testCaseFormSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        templateTestCases: [
+          expect.objectContaining({
+            id: 'template-1',
+            name: 'Login template',
+          }),
+        ],
+        defaultTemplateTestCaseId: 'template-1',
+        defaultTitle: 'Login template',
+        defaultDescription: 'Reusable login flow',
+        environments: [{ id: 'env-1', name: 'Staging' }],
+        defaultNodesOrder: {
+          'node-0': expect.objectContaining({
+            label: 'Fill email',
+            templateStepId: 'step-1',
+          }),
+        },
+        onSubmitAction: createTestCaseAction,
+        onCreateTestSuiteAction: createTestSuiteAction,
+        onCreateTagAction: createTagAction,
+      }),
+      undefined,
+    )
+  })
+})

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

@@ -3,36 +3,139 @@ import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 import { LayoutPanelTop } from 'lucide-react'
 import React from 'react'
-import TemplateSelectionForm from './template-selection-form'
 import { Metadata } from 'next'
+import TestCaseForm from '../test-case-form'
+import {
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+} from '@/actions/template-step/template-step-actions'
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { createTestCaseAction, getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-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 {
+  getLocatorGroupRows,
+  getEnvironmentRows,
+  getLocatorRows,
+  getModuleRows,
+  getTagRows,
+  getTemplateStepParamRows,
+  getTemplateStepRows,
+  getTestSuiteRows,
+} from '../test-case-resource-rows'
+import { getTestCaseRows } from '../test-case-row-helpers'
 
-import { getTemplateSelectionRows } from './create-from-template-helpers'
+import { getConvertedTemplateTestCaseData, getTemplateTestCasesWithSteps } from './create-from-template-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Create Test Case From Template',
   description: 'Select a template test case to create a new test case from',
 }
 
-const CreateTestCaseFromTemplate = async () => {
-  const response = await getAllTemplateTestCasesAction()
-  const templateTestCases = getTemplateSelectionRows(response.data)
+const CreateTestCaseFromTemplate = async ({
+  searchParams,
+}: {
+  searchParams?: Promise<{ templateTestCaseId?: string }>
+}) => {
+  const resolvedSearchParams = searchParams ? await searchParams : {}
+  const selectedTemplateTestCaseId = resolvedSearchParams.templateTestCaseId ?? ''
 
-  if (response.status !== 200) {
-    return <div className="text-red-500">Error</div>
+  const [
+    templateTestCasesResponse,
+    templateStepParamsResponse,
+    templateStepsResponse,
+    testSuitesResponse,
+    locatorsResponse,
+    locatorGroupsResponse,
+    tagsResponse,
+    testCasesResponse,
+    moduleListResponse,
+    environmentsResponse,
+  ] = await Promise.all([
+    getAllTemplateTestCasesAction(),
+    getAllTemplateStepParamsAction(),
+    getAllTemplateStepsAction(),
+    getAllTestSuitesAction(),
+    getAllLocatorsAction(),
+    getAllLocatorGroupsAction(),
+    getAllTagsAction(),
+    getAllTestCasesAction(),
+    getAllModulesAction(),
+    getAllEnvironmentsAction(),
+  ])
+
+  const loadError =
+    templateTestCasesResponse.error ||
+    templateStepParamsResponse.error ||
+    templateStepsResponse.error ||
+    testSuitesResponse.error ||
+    locatorsResponse.error ||
+    locatorGroupsResponse.error ||
+    tagsResponse.error ||
+    testCasesResponse.error ||
+    moduleListResponse.error ||
+    environmentsResponse.error
+
+  if (loadError) {
+    return <div>Error: {loadError}</div>
   }
 
+  const templateTestCases = getTemplateTestCasesWithSteps(templateTestCasesResponse.data)
+  const selectedTemplateTestCase =
+    templateTestCases.find(templateTestCase => templateTestCase.id === selectedTemplateTestCaseId) ?? null
+
+  const convertedTemplateData = selectedTemplateTestCase
+    ? getConvertedTemplateTestCaseData(selectedTemplateTestCase)
+    : { convertedData: null, error: null }
+
+  if (selectedTemplateTestCase && (!convertedTemplateData.convertedData || convertedTemplateData.error)) {
+    return <div>{convertedTemplateData.error || 'Invalid template test case'}</div>
+  }
+
+  const templateStepParams = getTemplateStepParamRows(templateStepParamsResponse.data)
+  const templateSteps = getTemplateStepRows(templateStepsResponse.data)
+  const testSuites = getTestSuiteRows(testSuitesResponse.data)
+  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>
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <LayoutPanelTop className="mr-2 h-8 w-8" />
+            <LayoutPanelTop className="mr-2 size-8" />
             Create Test Case From Template
           </span>
         </PageHeader>
-        <HeaderSubtitle>Select a template test case to create a new test case from</HeaderSubtitle>
+        <HeaderSubtitle>Select a template, add the test details, then refine the generated flow</HeaderSubtitle>
       </div>
-      <TemplateSelectionForm templateTestCases={templateTestCases} />
+      <TestCaseForm
+        defaultNodesOrder={convertedTemplateData.convertedData?.nodesOrder ?? {}}
+        templateStepParams={templateStepParams}
+        templateSteps={templateSteps}
+        locators={locators}
+        locatorGroups={locatorGroups}
+        environments={environments}
+        testSuites={testSuites}
+        testCases={testCases}
+        moduleList={moduleList}
+        tags={tags}
+        onSubmitAction={createTestCaseAction}
+        onCreateTestSuiteAction={createTestSuiteAction}
+        onCreateTagAction={createTagAction}
+        templateTestCases={templateTestCases}
+        defaultTemplateTestCaseId={selectedTemplateTestCase?.id}
+        defaultTitle={selectedTemplateTestCase?.name || ''}
+        defaultDescription={selectedTemplateTestCase?.description || ''}
+        defaultTestSuiteIds={convertedTemplateData.convertedData?.testSuiteIds}
+      />
     </div>
   )
 }

package/templates/starter/src/app/(base)/test-cases/editable-test-case-builders.ts

@@ -0,0 +1,35 @@
+import type { FlowBlock, NodeOrderMap } from '@/types/diagram/diagram'
+
+import type { EditableTestCase } from './editable-test-case-types'
+
+export function buildNodeOrderFromTestCaseSteps(steps: EditableTestCase['steps']): NodeOrderMap {
+  return steps.reduce<NodeOrderMap>((acc, step) => {
+    const nodeId = step.flowNodeId ?? step.id
+    acc[nodeId] = {
+      nodeId,
+      order: step.order,
+      label: step.label,
+      gherkinStep: step.gherkinStep,
+      icon: step.icon,
+      parameters: (step.parameters || []).map(parameter => ({
+        name: parameter.name,
+        value: parameter.value,
+        type: parameter.type,
+        order: parameter.order,
+      })),
+      templateStepId: step.templateStepId,
+    }
+    return acc
+  }, {})
+}
+
+export function buildFlowBlocksFromTestCaseRows(flowBlocks: EditableTestCase['flowBlocks'] = []): FlowBlock[] {
+  return flowBlocks
+    .slice()
+    .sort((left, right) => left.order - right.order)
+    .map(block => ({
+      id: block.id,
+      name: block.name,
+      nodeIds: block.nodes.map(node => node.flowNodeId),
+    }))
+}

package/templates/starter/src/app/(base)/test-cases/editable-test-case-guards.ts

@@ -0,0 +1,42 @@
+import type { TestCaseStep, TestCaseStepParameter } from '@prisma/client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+import type { EditableTestCase } from './editable-test-case-types'
+
+function isTestCaseStepParameterRow(value: unknown): value is TestCaseStepParameter {
+  return typeof value === 'object' && value !== null && 'name' in value && 'value' in value && 'type' in value
+}
+
+function isTestCaseStepRow(value: unknown): value is TestCaseStep & { parameters: TestCaseStepParameter[] } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'label' in value &&
+    'templateStepId' in value &&
+    'parameters' in value &&
+    Array.isArray(value.parameters) &&
+    value.parameters.every(isTestCaseStepParameterRow)
+  )
+}
+
+function isEditableTestCase(value: unknown): value is EditableTestCase {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'title' in value &&
+    'steps' in value &&
+    Array.isArray(value.steps) &&
+    value.steps.every(isTestCaseStepRow) &&
+    'testSuiteIds' in value &&
+    Array.isArray(value.testSuiteIds) &&
+    'tagIds' in value &&
+    Array.isArray(value.tagIds)
+  )
+}
+
+export function getEditableTestCase(data: ActionResponseData | undefined) {
+  return isEditableTestCase(data) ? data : null
+}

package/templates/starter/src/app/(base)/test-cases/editable-test-case-helpers.ts

@@ -0,0 +1,3 @@
+export { buildFlowBlocksFromTestCaseRows, buildNodeOrderFromTestCaseSteps } from './editable-test-case-builders'
+export { getEditableTestCase } from './editable-test-case-guards'
+export type { EditableTestCase } from './editable-test-case-types'

package/templates/starter/src/app/(base)/test-cases/editable-test-case-types.ts

@@ -0,0 +1,14 @@
+import type {
+  TestCase,
+  TestCaseFlowBlock,
+  TestCaseFlowBlockNode,
+  TestCaseStep,
+  TestCaseStepParameter,
+} from '@prisma/client'
+
+export type EditableTestCase = TestCase & {
+  steps: (TestCaseStep & { parameters: TestCaseStepParameter[] })[]
+  flowBlocks?: (TestCaseFlowBlock & { nodes: TestCaseFlowBlockNode[] })[]
+  testSuiteIds: string[]
+  tagIds: string[]
+}

package/templates/starter/src/app/(base)/test-cases/inline-tag-creation-dialog.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import TagForm from '@/app/(base)/tags/tag-form'
+import type { TagFormSubmitAction } from '@/app/(base)/tags/tag-form-helpers'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import type { Tag } from '@prisma/client'
+
+type InlineTagCreationDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSubmitAction: TagFormSubmitAction
+  onSuccess: (tag: Tag) => void | Promise<void>
+}
+
+export function InlineTagCreationDialog({
+  open,
+  onOpenChange,
+  onSubmitAction,
+  onSuccess,
+}: InlineTagCreationDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl gap-0 overflow-hidden p-0">
+        <DialogHeader className="border-b px-6 py-4">
+          <DialogTitle>Create Filter Tag</DialogTitle>
+          <DialogDescription>Create a new filter tag without leaving the current test case.</DialogDescription>
+        </DialogHeader>
+
+        <div className="px-6 py-4">
+          <TagForm
+            successTitle="Tag created"
+            successMessage="Tag created successfully"
+            onSubmitAction={onSubmitAction}
+            onSuccess={onSuccess}
+            redirectPath={null}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}