create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/blank/src/components/diagram/node-form-fields-content.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import type { RefObject } from 'react'
+import { Button } from '@/components/ui/button'
+import { SheetClose, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import type { NodeFormData } from '@/constants/form-opts/diagram/node-form'
+import type { TemplateStep } from '@prisma/client'
+
+import DynamicFormFields, { type DynamicFormFieldsRef } from './dynamic-parameters'
+import ErrorMessage from '@/components/form/error-message'
+import TemplateStepCombobox from './template-step-combobox'
+import { getSelectedTemplateIcon, type NodeFormErrors } from './node-form-helpers'
+import { getParameterPreviewUpdates } from './node-form-template-step-selection'
+import type { TemplateStepWithGroup } from '@/types/diagram/template-step'
+import type { NodeFormFieldsProps } from './node-form-fields-props'
+import { Save, X } from 'lucide-react'
+
+type NodeFormFieldsContentProps = NodeFormFieldsProps & {
+  fieldClassName: string
+  dynamicFormRef: RefObject<DynamicFormFieldsRef | null>
+  selectedTemplateId: string
+  selectedTemplateStep: TemplateStep | null
+  selectedTemplateStepParams: NodeFormFieldsProps['templateStepParams']
+  parameters: NodeFormData['parameters']
+  gherkinStep: string
+  errors: NodeFormErrors
+  onLabelChange: (value: string) => void
+  onTemplateStepChange: (value: string) => void
+  onParametersChange: (values: NodeFormData['parameters'], gherkinStep: string) => void
+}
+
+export function NodeFormFieldsContent({
+  mode = 'add',
+  initialValues,
+  templateSteps,
+  locators,
+  locatorGroups,
+  environments,
+  modules,
+  onLocatorCreated,
+  defaultValueInput = false,
+  fieldClassName,
+  dynamicFormRef,
+  selectedTemplateId,
+  selectedTemplateStep,
+  selectedTemplateStepParams,
+  gherkinStep,
+  errors,
+  onLabelChange,
+  onTemplateStepChange,
+  onParametersChange,
+}: NodeFormFieldsContentProps) {
+  return (
+    <>
+      <SheetHeader className="shrink-0">
+        <SheetTitle>{mode === 'edit' ? 'Edit Node' : 'Add Node'}</SheetTitle>
+        <SheetDescription>
+          {mode === 'edit' ? 'Update this node in the diagram' : 'Insert a new node to the diagram'}
+        </SheetDescription>
+      </SheetHeader>
+      <div className="my-4 flex-1 overflow-y-auto px-1">
+        <div className="mb-4 flex flex-col gap-2">
+          <Label htmlFor="label">Label</Label>
+          <Input
+            id="label"
+            name="label"
+            defaultValue={initialValues.label}
+            className={fieldClassName}
+            onChange={event => onLabelChange(event.target.value)}
+          />
+          <ErrorMessage message={errors.label?.[0] ?? ''} visible={!!errors.label} />
+        </div>
+        <div className="mb-4 flex flex-col gap-2">
+          <Label htmlFor="templateStepId">Template Step</Label>
+          <TemplateStepCombobox
+            id="templateStepId"
+            value={selectedTemplateId}
+            onValueChange={onTemplateStepChange}
+            templateSteps={templateSteps as TemplateStepWithGroup[]}
+            placeholder="Select a template step"
+            className={fieldClassName}
+          />
+          <input type="hidden" name="templateStepId" value={selectedTemplateId} />
+          <ErrorMessage message={errors.templateStepId?.[0] ?? ''} visible={!!errors.templateStepId} />
+        </div>
+        <div className="mb-4 flex flex-col gap-2">
+          <DynamicFormFields
+            ref={dynamicFormRef}
+            templateStepParams={selectedTemplateStepParams}
+            locators={locators}
+            locatorGroups={locatorGroups}
+            environments={environments}
+            modules={modules}
+            onLocatorCreated={onLocatorCreated}
+            initialParameterValues={initialValues.parameters}
+            onChange={values => {
+              const preview = getParameterPreviewUpdates(selectedTemplateStep, values)
+              onParametersChange(preview.parameters, preview.gherkinStep)
+            }}
+            defaultValueInput={defaultValueInput}
+          />
+        </div>
+        {selectedTemplateStep ? (
+          <div className="mb-4 flex flex-col gap-2">
+            <Label htmlFor="gherkinStep">Gherkin Step</Label>
+            <Input disabled id="gherkinStep" name="gherkinStep" value={gherkinStep} className={fieldClassName} />
+          </div>
+        ) : null}
+        <input type="hidden" name="icon" value={getSelectedTemplateIcon(selectedTemplateStep)} />
+      </div>
+      <SheetFooter className="shrink-0 border-t pt-4">
+        <SheetClose asChild>
+          <Button variant="outline">
+            <X className="size-4" aria-hidden />
+            <span>Cancel</span>
+          </Button>
+        </SheetClose>
+        <Button type="submit">
+          <Save className="size-4" aria-hidden />
+          <span className="font-bold">Save</span>
+        </Button>
+      </SheetFooter>
+    </>
+  )
+}

package/templates/blank/src/components/diagram/node-form-fields-props.ts

@@ -0,0 +1,3 @@
+import type { NodeFormProps } from './node-form-helpers'
+
+export type NodeFormFieldsProps = Omit<NodeFormProps, 'showAddNodeDialog' | 'setShowAddNodeDialog'>

package/templates/blank/src/components/diagram/node-form-helpers.test.ts

@@ -54,7 +54,9 @@ describe('node-form helpers', () => {
   })
 
   it('creates initial parameters and gherkin previews', () => {
-    const parameters = createInitialParametersForTemplateStep(getSelectedTemplateStepParams(templateStepParams, 'step-1'))
+    const parameters = createInitialParametersForTemplateStep(
+      getSelectedTemplateStepParams(templateStepParams, 'step-1'),
+    )
 
     expect(parameters).toEqual([
       {

package/templates/blank/src/components/diagram/node-form-helpers.ts

@@ -2,17 +2,20 @@ import { format } from 'date-fns'
 import {
   StepParameterType,
   TemplateStepIcon,
+  type Environment,
   type Locator,
   type LocatorGroup,
+  type Module,
   type TemplateStep,
   type TemplateStepParameter,
 } from '@prisma/client'
+import type { InlineLocatorSaveResult } from '@/app/(base)/locators/create/create-locator-workspace-helpers'
 import { z } from 'zod'
 
-import type { NodeData } from '@/constants/form-opts/diagram/node-form'
+import type { NodeFormData } from '@/constants/form-opts/diagram/node-form'
 import { generateGherkinStep } from '@/lib/transformers/gherkin-converter'
 
-export const nodeFormErrorSchema = z.object({
+const nodeFormErrorSchema = z.object({
   label: z.string().min(3, { message: 'Label must be at least 3 characters' }),
   templateStepId: z.string().min(1, { message: 'Template step is required' }),
 })
@@ -20,13 +23,17 @@ export const nodeFormErrorSchema = z.object({
 export type NodeFormErrors = z.inferFlattenedErrors<typeof nodeFormErrorSchema>['fieldErrors']
 
 export type NodeFormProps = {
-  onSubmitAction: (values: NodeData) => void
-  initialValues: NodeData
+  onSubmitAction: (values: NodeFormData) => void
+  initialValues: NodeFormData
+  mode?: 'add' | 'edit'
   templateSteps: TemplateStep[]
   templateStepParams: TemplateStepParameter[]
   showAddNodeDialog: boolean
   locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>
-  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name'>>
+  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name' | 'route' | 'moduleId'>>
+  environments: Array<Pick<Environment, 'id' | 'name'>>
+  modules: Array<Pick<Module, 'id' | 'name' | 'parentId'>>
+  onLocatorCreated?: (result: InlineLocatorSaveResult) => void
   setShowAddNodeDialog: (show: boolean) => void
   defaultValueInput?: boolean
 }
@@ -62,10 +69,7 @@ export function createInitialParametersForTemplateStep(templateStepParams: Templ
   }))
 }
 
-export function getGherkinPreview(
-  templateStep: TemplateStep | null,
-  parameters: NodeData['parameters'],
-) {
+export function getGherkinPreview(templateStep: TemplateStep | null, parameters: NodeFormData['parameters']) {
   if (!templateStep?.signature) {
     return ''
   }
@@ -82,7 +86,7 @@ export function validateNodeFormValues(label: FormDataEntryValue | undefined, te
 
 export function buildNodeFormSubmitValue(
   formValues: Record<string, FormDataEntryValue>,
-  parameters: NodeData['parameters'],
+  parameters: NodeFormData['parameters'],
   gherkinStep: string,
   templateStepId: string,
 ) {
@@ -92,7 +96,7 @@ export function buildNodeFormSubmitValue(
     label: String(formValues.label ?? ''),
     gherkinStep,
     templateStepId,
-  } satisfies NodeData
+  } satisfies NodeFormData
 }
 
 export function getSelectedTemplateIcon(templateStep: TemplateStep | null) {

package/templates/blank/src/components/diagram/node-form-submit.ts

@@ -0,0 +1,36 @@
+import type { RefObject } from 'react'
+
+import type { NodeFormData } from '@/constants/form-opts/diagram/node-form'
+
+import type { DynamicFormFieldsRef } from './dynamic-parameters'
+import { buildNodeFormSubmitValue, validateNodeFormValues, type NodeFormErrors } from './node-form-helpers'
+
+type HandleNodeFormSubmitOptions = {
+  dynamicFormRef: RefObject<DynamicFormFieldsRef | null>
+  selectedTemplateId: string
+  parameters: NodeFormData['parameters']
+  gherkinStep: string
+  onSubmitAction: (values: NodeFormData) => void
+  setErrors: (errors: NodeFormErrors) => void
+}
+
+export function handleNodeFormSubmit(event: React.FormEvent<HTMLFormElement>, options: HandleNodeFormSubmitOptions) {
+  event.preventDefault()
+
+  const isDynamicFormValid = options.dynamicFormRef.current?.validate()
+  const formData = new FormData(event.currentTarget)
+  const formValues = Object.fromEntries(formData.entries())
+  const parsed = validateNodeFormValues(formValues.label, options.selectedTemplateId)
+
+  if (!parsed.success || !isDynamicFormValid) {
+    if (!parsed.success) {
+      options.setErrors(parsed.error.flatten().fieldErrors)
+    }
+    return
+  }
+
+  options.setErrors({})
+  options.onSubmitAction(
+    buildNodeFormSubmitValue(formValues, options.parameters, options.gherkinStep, options.selectedTemplateId),
+  )
+}

package/templates/blank/src/components/diagram/node-form-template-step-selection.test.ts

@@ -0,0 +1,42 @@
+import { StepParameterType, TemplateStepIcon, TemplateStepType } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import { getParameterPreviewUpdates, getTemplateStepSelectionUpdates } from './node-form-template-step-selection'
+
+describe('node-form-template-step-selection', () => {
+  const templateSteps = [
+    {
+      id: 'step-1',
+      name: 'Click',
+      icon: TemplateStepIcon.MOUSE,
+      signature: 'click {string}',
+      type: TemplateStepType.ACTION,
+    } as never,
+  ]
+
+  const templateStepParams = [
+    {
+      id: 'param-1',
+      name: 'target',
+      type: StepParameterType.STRING,
+      order: 1,
+      templateStepId: 'step-1',
+    } as never,
+  ]
+
+  it('builds template step selection state', () => {
+    const selection = getTemplateStepSelectionUpdates('step-1', templateSteps, templateStepParams)
+
+    expect(selection).not.toBeNull()
+    expect(selection?.gherkinStep).toContain('click')
+  })
+
+  it('builds parameter preview updates', () => {
+    const preview = getParameterPreviewUpdates(templateSteps[0], [
+      { name: 'target', value: 'Submit', type: StepParameterType.STRING, order: 1 },
+    ])
+
+    expect(preview.parameters).toHaveLength(1)
+    expect(preview.gherkinStep).toContain('Submit')
+  })
+})

package/templates/blank/src/components/diagram/node-form-template-step-selection.ts

@@ -0,0 +1,37 @@
+import type { NodeFormData } from '@/constants/form-opts/diagram/node-form'
+import type { TemplateStepParameter, TemplateStep } from '@prisma/client'
+
+import {
+  createInitialParametersForTemplateStep,
+  getGherkinPreview,
+  getSelectedTemplateStep,
+  getSelectedTemplateStepParams,
+} from './node-form-helpers'
+
+export function getTemplateStepSelectionUpdates(
+  templateStepId: string,
+  templateSteps: TemplateStep[],
+  templateStepParams: TemplateStepParameter[],
+) {
+  const step = getSelectedTemplateStep(templateSteps, templateStepId)
+  if (!step) {
+    return null
+  }
+
+  const newParams = getSelectedTemplateStepParams(templateStepParams, step.id)
+  const initialParamsForStep = createInitialParametersForTemplateStep(newParams)
+
+  return {
+    step,
+    newParams,
+    initialParamsForStep,
+    gherkinStep: getGherkinPreview(step, initialParamsForStep),
+  }
+}
+
+export function getParameterPreviewUpdates(templateStep: TemplateStep | null, values: NodeFormData['parameters']) {
+  return {
+    parameters: [...values],
+    gherkinStep: getGherkinPreview(templateStep, values),
+  }
+}

package/templates/blank/src/components/diagram/node-form.test.tsx

@@ -12,12 +12,12 @@ const validateMock = vi.fn(() => true)
 vi.mock('./dynamic-parameters', async () => {
   const React = await import('react')
 
-  const MockDynamicFormFields = React.forwardRef<
-    { validate: () => boolean },
-    {
-      onChange?: (values: Array<{ name: string; value: string; type: StepParameterType; order: number }>) => void
-    }
-  >(({ onChange }, ref) => {
+  function MockDynamicFormFields({
+    ref,
+    onChange,
+  }: {
+    onChange?: (values: Array<{ name: string; value: string; type: StepParameterType; order: number }>) => void
+  } & React.RefAttributes<{ validate: () => boolean }>) {
     React.useImperativeHandle(ref, () => ({
       validate: validateMock,
     }))
@@ -38,7 +38,7 @@ vi.mock('./dynamic-parameters', async () => {
         Apply Parameters
       </button>
     )
-  })
+  }
 
   MockDynamicFormFields.displayName = 'MockDynamicFormFields'
 
@@ -77,6 +77,26 @@ describe('NodeForm', () => {
     validateMock.mockReturnValue(true)
   })
 
+  const templateSteps = [
+    {
+      id: 'step-1',
+      name: 'Click',
+      icon: TemplateStepIcon.MOUSE,
+      signature: 'click {string}',
+      type: TemplateStepType.ACTION,
+    } as never,
+  ]
+
+  const templateStepParams = [
+    {
+      id: 'param-1',
+      name: 'target',
+      type: StepParameterType.STRING,
+      order: 1,
+      templateStepId: 'step-1',
+    } as never,
+  ]
+
   it('submits the shaped node payload', async () => {
     const user = userEvent.setup()
     const onSubmitAction = vi.fn()
@@ -90,27 +110,13 @@ describe('NodeForm', () => {
           templateStepId: '',
           parameters: [],
         }}
-        templateSteps={[
-          {
-            id: 'step-1',
-            name: 'Click',
-            icon: TemplateStepIcon.MOUSE,
-            signature: 'click {string}',
-            type: TemplateStepType.ACTION,
-          } as never,
-        ]}
-        templateStepParams={[
-          {
-            id: 'param-1',
-            name: 'target',
-            type: StepParameterType.STRING,
-            order: 1,
-            templateStepId: 'step-1',
-          } as never,
-        ]}
+        templateSteps={templateSteps}
+        templateStepParams={templateStepParams}
         showAddNodeDialog
         locators={[]}
         locatorGroups={[]}
+        environments={[]}
+        modules={[]}
         setShowAddNodeDialog={vi.fn()}
       />,
     )
@@ -139,6 +145,61 @@ describe('NodeForm', () => {
     })
   })
 
+  it('renders footer actions with icons', () => {
+    render(
+      <NodeForm
+        onSubmitAction={vi.fn()}
+        initialValues={{
+          label: '',
+          gherkinStep: '',
+          templateStepId: '',
+          parameters: [],
+        }}
+        templateSteps={templateSteps}
+        templateStepParams={templateStepParams}
+        showAddNodeDialog
+        locators={[]}
+        locatorGroups={[]}
+        environments={[]}
+        modules={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: 'Cancel' }).querySelector('svg')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Save' }).querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('blocks submit when dynamic parameter validation fails', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+    validateMock.mockReturnValue(false)
+
+    render(
+      <NodeForm
+        onSubmitAction={onSubmitAction}
+        initialValues={{
+          label: 'Valid label',
+          gherkinStep: '',
+          templateStepId: 'step-1',
+          parameters: [],
+        }}
+        templateSteps={templateSteps}
+        templateStepParams={templateStepParams}
+        showAddNodeDialog
+        locators={[]}
+        locatorGroups={[]}
+        environments={[]}
+        modules={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(onSubmitAction).not.toHaveBeenCalled()
+  })
+
   it('shows validation feedback when required fields are missing', async () => {
     const user = userEvent.setup()
 
@@ -156,6 +217,8 @@ describe('NodeForm', () => {
         showAddNodeDialog
         locators={[]}
         locatorGroups={[]}
+        environments={[]}
+        modules={[]}
         setShowAddNodeDialog={vi.fn()}
       />,
     )
@@ -165,4 +228,113 @@ describe('NodeForm', () => {
     expect(screen.getByText('Label must be at least 3 characters')).toBeInTheDocument()
     expect(screen.getByText('Template step is required')).toBeInTheDocument()
   })
+
+  it('preserves the selected template step when locator options update', async () => {
+    const user = userEvent.setup()
+    const baseInitialValues = {
+      label: '',
+      gherkinStep: '',
+      templateStepId: '',
+      parameters: [],
+    }
+
+    const { rerender } = render(
+      <NodeForm
+        onSubmitAction={vi.fn()}
+        initialValues={baseInitialValues}
+        templateSteps={templateSteps}
+        templateStepParams={templateStepParams}
+        showAddNodeDialog
+        locators={[]}
+        locatorGroups={[]}
+        environments={[]}
+        modules={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    await user.selectOptions(screen.getByLabelText('Template Step'), 'step-1')
+    expect(screen.getByLabelText('Template Step')).toHaveValue('step-1')
+
+    rerender(
+      <NodeForm
+        onSubmitAction={vi.fn()}
+        initialValues={{ ...baseInitialValues, parameters: [] }}
+        templateSteps={templateSteps}
+        templateStepParams={templateStepParams}
+        showAddNodeDialog
+        locators={[{ id: 'locator-1', name: 'Submit button', locatorGroupId: 'group-1' }]}
+        locatorGroups={[{ id: 'group-1', name: 'Checkout', route: '/checkout', moduleId: 'module-1' }]}
+        environments={[]}
+        modules={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Template Step')).toHaveValue('step-1')
+    })
+  })
+
+  it('resets the selected template step when reopening the add node sidebar', async () => {
+    const user = userEvent.setup()
+    const baseInitialValues = {
+      label: '',
+      gherkinStep: '',
+      templateStepId: '',
+      parameters: [],
+    }
+
+    const { rerender } = render(
+      <NodeForm
+        onSubmitAction={vi.fn()}
+        initialValues={baseInitialValues}
+        templateSteps={templateSteps}
+        templateStepParams={templateStepParams}
+        showAddNodeDialog
+        locators={[]}
+        locatorGroups={[]}
+        environments={[]}
+        modules={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    await user.selectOptions(screen.getByLabelText('Template Step'), 'step-1')
+    expect(screen.getByLabelText('Template Step')).toHaveValue('step-1')
+
+    rerender(
+      <NodeForm
+        onSubmitAction={vi.fn()}
+        initialValues={baseInitialValues}
+        templateSteps={templateSteps}
+        templateStepParams={templateStepParams}
+        showAddNodeDialog={false}
+        locators={[]}
+        locatorGroups={[]}
+        environments={[]}
+        modules={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    rerender(
+      <NodeForm
+        onSubmitAction={vi.fn()}
+        initialValues={{ ...baseInitialValues, parameters: [] }}
+        templateSteps={templateSteps}
+        templateStepParams={templateStepParams}
+        showAddNodeDialog
+        locators={[]}
+        locatorGroups={[]}
+        environments={[]}
+        modules={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Template Step')).toHaveValue('')
+    })
+  })
 })