create-appraisejs 0.3.0 → 0.3.1-alpha.0

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

@@ -1,80 +1,61 @@
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { NodeData } from '@/constants/form-opts/diagram/node-form'
-import React, { useState, useEffect, useRef, useCallback } from 'react'
-import TemplateStepCombobox from './template-step-combobox'
-import { type TemplateStepWithGroup } from '@/types/diagram/template-step'
-import DynamicFormFields, { DynamicFormFieldsRef } from './dynamic-parameters'
-import ErrorMessage from '@/components/form/error-message'
+'use client'
+
+import { Sheet, SheetContent } from '@/components/ui/sheet'
+import type { NodeFormData } from '@/constants/form-opts/diagram/node-form'
+import { useCallback, useRef, useState } from 'react'
+import type { TemplateStep } from '@prisma/client'
+
+import type { DynamicFormFieldsRef } from './dynamic-parameters'
+import { NodeFormFieldsContent } from './node-form-fields-content'
+import type { NodeFormFieldsProps } from './node-form-fields-props'
+import { handleNodeFormSubmit } from './node-form-submit'
 import {
-  buildNodeFormSubmitValue,
-  createInitialParametersForTemplateStep,
-  getGherkinPreview,
-  getSelectedTemplateIcon,
   getSelectedTemplateStep,
   getSelectedTemplateStepParams,
-  type NodeFormErrors,
   type NodeFormProps,
-  validateNodeFormValues,
 } from './node-form-helpers'
+import { getTemplateStepSelectionUpdates } from './node-form-template-step-selection'
+
+function buildFormResetKey(
+  initialValues: NodeFormProps['initialValues'],
+  mode: NodeFormProps['mode'],
+  showAddNodeDialog: boolean,
+) {
+  return JSON.stringify({
+    label: initialValues.label,
+    gherkinStep: initialValues.gherkinStep,
+    templateStepId: initialValues.templateStepId,
+    parameters: initialValues.parameters ?? [],
+    mode,
+    dialog: mode === 'add' ? showAddNodeDialog : 'edit',
+  })
+}
 
-const NodeForm = ({
+function NodeFormFields({
   onSubmitAction,
   initialValues,
+  mode = 'add',
   templateSteps,
   templateStepParams,
-  showAddNodeDialog,
   locators,
   locatorGroups,
-  setShowAddNodeDialog,
+  environments,
+  modules,
+  onLocatorCreated,
   defaultValueInput = false,
-}: NodeFormProps) => {
+}: NodeFormFieldsProps) {
+  const fieldClassName = 'border-border bg-background'
   const dynamicFormRef = useRef<DynamicFormFieldsRef>(null)
   const [selectedTemplateId, setSelectedTemplateId] = useState(initialValues.templateStepId)
-  const [selectedTemplateStep, setSelectedTemplateStep] = useState(() =>
+  const [selectedTemplateStep, setSelectedTemplateStep] = useState<TemplateStep | null>(() =>
     getSelectedTemplateStep(templateSteps, initialValues.templateStepId),
   )
   const [selectedTemplateStepParams, setSelectedTemplateStepParams] = useState(() =>
     getSelectedTemplateStepParams(templateStepParams, initialValues.templateStepId),
   )
-  const [parameters, setParameters] = useState<
-    {
-      name: string
-      value: string
-      type: NodeData['parameters'][number]['type']
-      order: number
-    }[]
-  >(initialValues.parameters ?? [])
-  const [gherkinStep, setGherkinStep] = useState<string>(initialValues.gherkinStep ?? '')
-  const [errors, setErrors] = useState<NodeFormErrors>({})
-
-  useEffect(() => {
-    queueMicrotask(() => {
-      setSelectedTemplateId(initialValues.templateStepId)
-      const step = getSelectedTemplateStep(templateSteps, initialValues.templateStepId)
-      setSelectedTemplateStep(step)
-      setSelectedTemplateStepParams(getSelectedTemplateStepParams(templateStepParams, initialValues.templateStepId))
-      setParameters(initialValues.parameters ?? [])
-      setGherkinStep(initialValues.gherkinStep ?? '')
-    })
-  }, [
-    initialValues.templateStepId,
-    initialValues.parameters,
-    initialValues.gherkinStep,
-    templateSteps,
-    templateStepParams,
-  ])
+  const [parameters, setParameters] = useState<NodeFormData['parameters']>(initialValues.parameters ?? [])
+  const [gherkinStep, setGherkinStep] = useState(initialValues.gherkinStep ?? '')
+  const [errors, setErrors] = useState({})
 
   const handleTemplateStepChange = useCallback(
     (value: string) => {
@@ -83,116 +64,85 @@ const NodeForm = ({
         templateStepId: value ? undefined : ['Template step is required'],
       }))
       setSelectedTemplateId(value)
-      const step = getSelectedTemplateStep(templateSteps, value)
-      if (step) {
-        setSelectedTemplateStep(step)
-        const newParams = getSelectedTemplateStepParams(templateStepParams, step.id)
-        setSelectedTemplateStepParams(newParams)
-        const initialParamsForStep = createInitialParametersForTemplateStep(newParams)
-        setParameters(initialParamsForStep)
-        setGherkinStep(getGherkinPreview(step, initialParamsForStep))
+
+      const selection = getTemplateStepSelectionUpdates(value, templateSteps, templateStepParams)
+      if (!selection) {
+        return
       }
+
+      setSelectedTemplateStep(selection.step)
+      setSelectedTemplateStepParams(selection.newParams)
+      setParameters(selection.initialParamsForStep)
+      setGherkinStep(selection.gherkinStep)
     },
     [templateStepParams, templateSteps],
   )
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    const isDynamicFormValid = dynamicFormRef.current?.validate()
-
-    const formData = new FormData(e.currentTarget)
-    const formValues = Object.fromEntries(formData.entries())
-
-    const parsed = validateNodeFormValues(formValues.label, selectedTemplateId)
-
-    if (!parsed.success || !isDynamicFormValid) {
-      if (!parsed.success) {
-        setErrors(parsed.error.flatten().fieldErrors)
+  return (
+    <form
+      onSubmit={event =>
+        handleNodeFormSubmit(event, {
+          dynamicFormRef,
+          selectedTemplateId,
+          parameters,
+          gherkinStep,
+          onSubmitAction,
+          setErrors,
+        })
       }
-      return
-    }
+      className="flex h-full flex-col overflow-hidden"
+    >
+      <NodeFormFieldsContent
+        mode={mode}
+        initialValues={initialValues}
+        templateSteps={templateSteps}
+        templateStepParams={templateStepParams}
+        locators={locators}
+        locatorGroups={locatorGroups}
+        environments={environments}
+        modules={modules}
+        onLocatorCreated={onLocatorCreated}
+        defaultValueInput={defaultValueInput}
+        onSubmitAction={onSubmitAction}
+        fieldClassName={fieldClassName}
+        dynamicFormRef={dynamicFormRef}
+        selectedTemplateId={selectedTemplateId}
+        selectedTemplateStep={selectedTemplateStep}
+        selectedTemplateStepParams={selectedTemplateStepParams}
+        parameters={parameters}
+        gherkinStep={gherkinStep}
+        errors={errors}
+        onLabelChange={value => {
+          setErrors(prev => ({
+            ...prev,
+            label: value ? undefined : ['Label is required'],
+          }))
+        }}
+        onTemplateStepChange={handleTemplateStepChange}
+        onParametersChange={(nextParameters, nextGherkinStep) => {
+          setParameters(nextParameters)
+          setGherkinStep(nextGherkinStep)
+        }}
+      />
+    </form>
+  )
+}
 
-    setErrors({})
-    onSubmitAction(buildNodeFormSubmitValue(formValues, parameters, gherkinStep, selectedTemplateId))
-  }
+function NodeForm({
+  showAddNodeDialog,
+  setShowAddNodeDialog,
+  initialValues,
+  mode,
+  ...fieldsProps
+}: NodeFormProps) {
+  const formResetKey = buildFormResetKey(initialValues, mode ?? 'add', showAddNodeDialog)
 
   return (
-    <Dialog open={showAddNodeDialog} onOpenChange={setShowAddNodeDialog}>
-      <DialogTrigger asChild>
-        <Button type="button" onClick={e => e.preventDefault()}>
-          Add Node
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <form onSubmit={handleSubmit}>
-          <DialogHeader>
-            <DialogTitle>Add Node</DialogTitle>
-          </DialogHeader>
-          <DialogDescription>Insert a new node to the diagram</DialogDescription>
-          <div className="my-4">
-            <div className="mb-4 flex flex-col gap-2">
-              <Label htmlFor="label">Label</Label>
-              <Input
-                id="label"
-                name="label"
-                defaultValue={initialValues.label}
-                onChange={e => {
-                  setErrors(prev => ({
-                    ...prev,
-                    label: e.target.value ? undefined : ['Label is required'],
-                  }))
-                }}
-              />
-              <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={handleTemplateStepChange}
-                templateSteps={templateSteps as TemplateStepWithGroup[]}
-                placeholder="Select a template step"
-              />
-              <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}
-                initialParameterValues={initialValues.parameters}
-                onChange={values => {
-                  setParameters([...values])
-                  setGherkinStep(getGherkinPreview(selectedTemplateStep, values))
-                }}
-                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} />
-              </div>
-            )}
-            <input
-              type="hidden"
-              name="icon"
-              value={getSelectedTemplateIcon(selectedTemplateStep)}
-            />
-          </div>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DialogClose>
-            <Button type="submit">Save</Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+    <Sheet open={showAddNodeDialog} onOpenChange={setShowAddNodeDialog}>
+      <SheetContent side="right" className="w-full sm:max-w-md">
+        <NodeFormFields key={formResetKey} initialValues={initialValues} mode={mode} {...fieldsProps} />
+      </SheetContent>
+    </Sheet>
   )
 }
 

package/templates/blank/src/components/diagram/options-header-gherkin-step.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import type { StepParameterType } from '@prisma/client'
+
+type OptionsHeaderGherkinParameter = {
+  name: string
+  value: string
+  type?: StepParameterType
+  order: number
+}
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+export function OptionsHeaderGherkinStep({
+  gherkinStep,
+  parameters,
+}: {
+  gherkinStep: string
+  parameters: OptionsHeaderGherkinParameter[]
+}) {
+  const sortedParameters = parameters.toSorted((left, right) => left.order - right.order)
+  const nonEmptyParameters = sortedParameters.filter(parameter => parameter.value.trim().length > 0)
+
+  if (!nonEmptyParameters.length) {
+    return <>{gherkinStep}</>
+  }
+
+  const allTokens = nonEmptyParameters
+    .map(parameter => parameter.value)
+    .sort((left, right) => right.length - left.length)
+    .map(escapeRegExp)
+
+  const tokenRegex = new RegExp(`(${allTokens.join('|')})`, 'g')
+  const stepParts = gherkinStep.split(tokenRegex)
+
+  return (
+    <>
+      {stepParts.map(part => {
+        const matchingParameter = nonEmptyParameters.find(parameter => parameter.value === part)
+        if (!matchingParameter) {
+          return (
+            <span key={`text-${part || 'empty'}`} className="whitespace-pre-wrap">
+              {part}
+            </span>
+          )
+        }
+
+        return (
+          <TooltipProvider key={`chip-${matchingParameter.name}-${matchingParameter.value}`} delayDuration={40}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Badge
+                  variant="outline"
+                  className="border-primary/30 bg-primary/10 mx-0.5 inline-flex cursor-help px-1.5 py-0 align-baseline text-[11px] font-medium text-primary"
+                >
+                  {matchingParameter.value}
+                </Badge>
+              </TooltipTrigger>
+              <TooltipContent side="top" className="font-mono text-[10px] font-medium">
+                {matchingParameter.name}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )
+      })}
+    </>
+  )
+}

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

@@ -0,0 +1,210 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { StepParameterType, TemplateStepIcon } from '@prisma/client'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import OptionsHeaderNode from './options-header-node'
+
+const xyflowMocks = vi.hoisted(() => ({
+  nodeId: 'node-1',
+  setNodes: vi.fn(),
+}))
+
+vi.mock('@xyflow/react', () => ({
+  Handle: ({ type, position }: { type: string; position: string }) => (
+    <div data-testid={`${type}-handle`} data-position={position} />
+  ),
+  Position: {
+    Left: 'left',
+    Right: 'right',
+  },
+  useNodeId: () => xyflowMocks.nodeId,
+  useReactFlow: () => ({
+    setNodes: xyflowMocks.setNodes,
+  }),
+}))
+
+function renderOptionsHeaderNode(
+  data: Record<string, unknown> = {},
+  props: {
+    selected?: boolean
+    onEdit?: (nodeId: string) => void
+    onAddConnectedNode?: (nodeId: string) => void
+  } = {},
+) {
+  const onEdit = props.onEdit ?? vi.fn()
+  const onAddConnectedNode = props.onAddConnectedNode ?? vi.fn()
+
+  render(
+    <OptionsHeaderNode
+      {...({
+        selected: props.selected ?? false,
+        data: {
+          label: 'Click submit',
+          gherkinStep: 'When click "Submit"',
+          icon: TemplateStepIcon.MOUSE,
+          isFirstNode: false,
+          parameters: [
+            {
+              name: 'count',
+              value: '3',
+              type: StepParameterType.NUMBER,
+              order: 2,
+            },
+            {
+              name: 'target',
+              value: 'Submit',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+          ...data,
+        },
+      } as never)}
+      onEdit={onEdit}
+      onAddConnectedNode={onAddConnectedNode}
+    />,
+  )
+
+  return { onEdit, onAddConnectedNode }
+}
+
+describe('OptionsHeaderNode', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders the large icon, title, and hover-triggered gherkin param tooltips', async () => {
+    const user = userEvent.setup()
+    renderOptionsHeaderNode()
+
+    expect(screen.getByTestId('node-step-icon')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'Click submit' })).toBeInTheDocument()
+    await user.hover(screen.getByTestId('options-header-node'))
+    expect(screen.getByText('When click "', { exact: false })).toBeInTheDocument()
+    expect(screen.getByText('Submit')).toBeInTheDocument()
+    expect(screen.queryByText('target')).not.toBeInTheDocument()
+    await user.hover(screen.getByText('Submit'))
+
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('target')
+  })
+
+  it('calls the edit callback with the current node id', async () => {
+    const user = userEvent.setup()
+    const onEdit = vi.fn()
+    renderOptionsHeaderNode({}, { onEdit })
+
+    await user.hover(screen.getByTestId('options-header-node'))
+    await user.click(screen.getByRole('button', { name: /edit/i }))
+
+    expect(onEdit).toHaveBeenCalledWith('node-1')
+  })
+
+  it('always renders the add-connected button', () => {
+    renderOptionsHeaderNode()
+
+    expect(screen.getByRole('button', { name: /add connected node/i })).toBeInTheDocument()
+  })
+
+  it('renders the add-connected button when selected', () => {
+    renderOptionsHeaderNode({}, { selected: true })
+
+    expect(screen.getByRole('button', { name: /add connected node/i })).toBeInTheDocument()
+  })
+
+  it('calls the add-connected callback with the current node id', async () => {
+    const user = userEvent.setup()
+    const onAddConnectedNode = vi.fn()
+    renderOptionsHeaderNode({}, { onAddConnectedNode })
+
+    await user.hover(screen.getByTestId('options-header-node'))
+    await user.click(screen.getByRole('button', { name: /add connected node/i }))
+
+    expect(onAddConnectedNode).toHaveBeenCalledWith('node-1')
+  })
+
+  it('hides the add-connected button when the node already has an outgoing connection', () => {
+    const onAddConnectedNode = vi.fn()
+    renderOptionsHeaderNode({ hasOutgoingConnection: true }, { onAddConnectedNode })
+
+    expect(screen.queryByRole('button', { name: /add connected node/i })).not.toBeInTheDocument()
+    expect(onAddConnectedNode).not.toHaveBeenCalled()
+  })
+
+  it('hides the add-connected button while a connection drag is in progress', () => {
+    const onAddConnectedNode = vi.fn()
+    renderOptionsHeaderNode({ isConnectionInProgress: true }, { onAddConnectedNode })
+
+    expect(screen.queryByRole('button', { name: /add connected node/i })).not.toBeInTheDocument()
+    expect(onAddConnectedNode).not.toHaveBeenCalled()
+  })
+
+  it('removes the current node from React Flow state on delete', async () => {
+    const user = userEvent.setup()
+    renderOptionsHeaderNode()
+
+    await user.hover(screen.getByTestId('options-header-node'))
+    await user.click(screen.getByRole('button', { name: /delete/i }))
+
+    expect(xyflowMocks.setNodes).toHaveBeenCalledTimes(1)
+
+    const updateNodes = xyflowMocks.setNodes.mock.calls[0]?.[0] as (
+      nodes: Array<{ id: string }>,
+    ) => Array<{ id: string }>
+
+    expect(updateNodes([{ id: 'node-1' }, { id: 'node-2' }])).toEqual([{ id: 'node-2' }])
+  })
+
+  it('disables node deletion when the flow structure is locked', async () => {
+    const user = userEvent.setup()
+    renderOptionsHeaderNode({ isDeleteDisabled: true })
+
+    await user.hover(screen.getByTestId('options-header-node'))
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i })
+    expect(deleteButton).toBeDisabled()
+    await user.click(deleteButton)
+
+    expect(xyflowMocks.setNodes).not.toHaveBeenCalled()
+  })
+
+  it('keeps missing-param warning nodes readable and omits empty chip rows', async () => {
+    const user = userEvent.setup()
+    renderOptionsHeaderNode({
+      isMissingParams: true,
+      parameters: [],
+    })
+
+    expect(screen.getByTestId('options-header-node')).toHaveAttribute('data-missing-params', 'true')
+    expect(screen.getByRole('heading', { name: 'Click submit' })).toBeInTheDocument()
+    await user.hover(screen.getByTestId('options-header-node'))
+    expect(screen.getByText('When click "Submit"')).toBeInTheDocument()
+    expect(screen.queryByTestId('node-param-chip-row')).not.toBeInTheDocument()
+  })
+
+  it('styles start nodes with rounded left edge and hides incoming handle', () => {
+    renderOptionsHeaderNode({ isFirstNode: true })
+
+    expect(screen.getByTestId('options-header-node')).toHaveAttribute('data-first-node', 'true')
+    expect(screen.getByTestId('options-header-node')).toHaveClass('rounded-l-3xl')
+    expect(screen.queryByTestId('target-handle')).not.toBeInTheDocument()
+    expect(screen.getByTestId('source-handle')).toBeInTheDocument()
+  })
+
+  it('marks search-highlighted nodes without removing missing-param or start-node styling', () => {
+    renderOptionsHeaderNode({
+      isSearchHighlighted: true,
+      isMissingParams: true,
+      isFirstNode: true,
+    })
+
+    expect(screen.getByTestId('options-header-node')).toHaveAttribute('data-search-highlighted', 'true')
+    expect(screen.getByTestId('options-header-node')).toHaveAttribute('data-missing-params', 'true')
+    expect(screen.getByTestId('options-header-node')).toHaveAttribute('data-first-node', 'true')
+    expect(screen.getByTestId('options-header-node')).toHaveClass('ring-emerald-500/70')
+    expect(screen.getByTestId('options-header-node')).toHaveClass('border-destructive/70')
+    expect(screen.getByTestId('options-header-node')).toHaveClass('rounded-l-3xl')
+  })
+})