create-appraisejs 0.3.0-alpha.0 → 0.3.0

package/templates/starter/src/components/diagram/flow-diagram-helpers.test.ts

@@ -0,0 +1,117 @@
+import { StepParameterType } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  buildFlowNodeData,
+  determineNodeOrders,
+  generateInitialNodesAndEdges,
+  isValidDiagramConnection,
+  removeOrphanedEdges,
+} from './flow-diagram-helpers'
+
+describe('flow-diagram helpers', () => {
+  it('hydrates initial nodes and edges from ordered node maps', () => {
+    const { nodes, edges } = generateInitialNodesAndEdges(
+      {
+        'node-1': {
+          order: 1,
+          label: 'First',
+          gherkinStep: 'Given first step',
+          parameters: [],
+          templateStepId: 'step-1',
+        },
+        'node-2': {
+          order: 2,
+          label: 'Second',
+          gherkinStep: 'When second step',
+          parameters: [],
+          templateStepId: 'step-2',
+        },
+      },
+      [],
+      false,
+    )
+
+    expect(nodes).toHaveLength(2)
+    expect(edges).toEqual([
+      expect.objectContaining({
+        id: 'node-1-node-2',
+        source: 'node-1',
+        target: 'node-2',
+      }),
+    ])
+  })
+
+  it('marks missing parameters when mandatory step params are absent', () => {
+    const nodeData = buildFlowNodeData(
+      {
+        order: 1,
+        label: 'Step',
+        parameters: [],
+        templateStepId: 'step-1',
+      },
+      [
+        {
+          id: 'param-1',
+          name: 'locator',
+          type: StepParameterType.STRING,
+          order: 1,
+          isMandatory: true,
+          templateStepId: 'step-1',
+        } as never,
+      ],
+      false,
+    )
+
+    expect(nodeData.isMissingParams).toBe(true)
+  })
+
+  it('recomputes node orders and isolated nodes correctly', () => {
+    const orders = determineNodeOrders(
+      [
+        {
+          id: 'node-1',
+          data: { label: 'First', parameters: [], templateStepId: 'step-1' },
+        },
+        {
+          id: 'node-2',
+          data: { label: 'Second', parameters: [], templateStepId: 'step-2' },
+        },
+        {
+          id: 'node-3',
+          data: { label: 'Isolated', parameters: [], templateStepId: 'step-3' },
+        },
+      ] as never,
+      [
+        {
+          source: 'node-1',
+          target: 'node-2',
+        },
+      ] as never,
+    )
+
+    expect(orders['node-1']?.order).toBe(1)
+    expect(orders['node-2']?.order).toBe(2)
+    expect(orders['node-3']?.order).toBe(-1)
+  })
+
+  it('validates single in/out connections and removes orphaned edges', () => {
+    const edges = [
+      { source: 'node-1', target: 'node-2' },
+      { source: 'node-2', target: 'missing-node' },
+    ] as never
+
+    expect(isValidDiagramConnection(edges, { source: 'node-1', target: 'node-3' } as never)).toBe(false)
+    expect(isValidDiagramConnection(edges, { source: 'node-3', target: 'node-4' } as never)).toBe(true)
+
+    expect(
+      removeOrphanedEdges(
+        [
+          { id: 'node-1' },
+          { id: 'node-2' },
+        ] as never,
+        edges,
+      ),
+    ).toEqual([{ source: 'node-1', target: 'node-2' }])
+  })
+})

package/templates/starter/src/components/diagram/flow-diagram-helpers.ts

@@ -0,0 +1,251 @@
+import type { Connection, Edge, Node } from '@xyflow/react'
+import { StepParameterType, type TemplateStep, type TemplateStepParameter } from '@prisma/client'
+
+import type { NodeData as NodeFormData } from '@/constants/form-opts/diagram/node-form'
+import { checkMissingMandatoryParams } from '@/lib/utils/node-param-validation'
+import type { NodeOrderMap, TemplateTestCaseNodeData, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+
+type DiagramParameter =
+  | NodeFormData['parameters'][number]
+  | TemplateTestCaseNodeData['parameters'][number]
+
+type DiagramNodeOrder = NodeOrderMap | TemplateTestCaseNodeOrderMap
+type FlowNodeData = {
+  label: string
+  gherkinStep: string
+  icon: string
+  parameters: Array<{
+    name: string
+    value: string
+    type: StepParameterType
+    order: number
+  }>
+  templateStepId: string
+  isFirstNode?: boolean
+  isMissingParams?: true
+}
+
+function toRuntimeParameters(parameters: DiagramParameter[]) {
+  return parameters.map(parameter => ({
+    name: parameter.name,
+    value: 'value' in parameter ? parameter.value : parameter.defaultValue,
+    type: parameter.type ?? StepParameterType.STRING,
+    order: parameter.order,
+  }))
+}
+
+function toSerializableParameters(parameters: NodeFormData['parameters']) {
+  return parameters.map(parameter => ({
+    name: parameter.name,
+    value: parameter.value,
+    type: parameter.type ?? StepParameterType.STRING,
+    order: parameter.order,
+  }))
+}
+
+function toDiagramNodeOrderEntry(node: Node, order: number) {
+  return {
+    order,
+    label: node.data.label as string,
+    gherkinStep: (node.data.gherkinStep as string) ?? '',
+    isFirstNode: (node.data.isFirstNode as boolean) ?? false,
+    icon: (node.data.icon as string) ?? '',
+    parameters: toSerializableParameters((node.data.parameters as NodeFormData['parameters']) ?? []),
+    templateStepId: (node.data.templateStepId as string) ?? '',
+  }
+}
+
+export function buildFlowNodeData(
+  nodeData: DiagramNodeOrder[string],
+  templateStepParams: TemplateStepParameter[],
+  defaultValueInput: boolean,
+): FlowNodeData {
+  const parameters = toRuntimeParameters(nodeData.parameters ?? [])
+  const baseNodeData = {
+    label: nodeData.label,
+    gherkinStep: nodeData.gherkinStep ?? '',
+    icon: nodeData.icon ?? '',
+    parameters,
+    templateStepId: nodeData.templateStepId ?? '',
+    ...('isFirstNode' in nodeData ? { isFirstNode: nodeData.isFirstNode ?? false } : {}),
+  }
+
+  const isMissingParams = checkMissingMandatoryParams(
+    {
+      parameters: baseNodeData.parameters,
+      templateStepId: baseNodeData.templateStepId,
+    },
+    templateStepParams,
+    defaultValueInput,
+  )
+
+  return isMissingParams ? { ...baseNodeData, isMissingParams: true } : baseNodeData
+}
+
+export function generateInitialNodesAndEdges(
+  nodeOrder: DiagramNodeOrder,
+  templateStepParams: TemplateStepParameter[],
+  defaultValueInput: boolean,
+) {
+  const nodes: Node[] = []
+  const edges: Edge[] = []
+
+  const sortedEntries = Object.entries(nodeOrder).sort(([, left], [, right]) => left.order - right.order)
+
+  sortedEntries.forEach(([id, nodeData], index) => {
+    const data = buildFlowNodeData(nodeData, templateStepParams, defaultValueInput)
+
+    if (nodeData.order === -1) {
+      nodes.push({
+        id,
+        data,
+        position: { x: 0, y: index * 100 },
+        type: 'optionsHeaderNode',
+      })
+      return
+    }
+
+    nodes.push({
+      id,
+      data,
+      position: { x: nodeData.order * 500, y: 0 },
+      type: 'optionsHeaderNode',
+    })
+
+    if (index < sortedEntries.length - 1) {
+      const nextEntry = sortedEntries[index + 1]
+      if (nodeData.order !== -1 && nextEntry[1].order !== -1 && nodeData.order === nextEntry[1].order - 1) {
+        edges.push({
+          id: `${id}-${nextEntry[0]}`,
+          source: id,
+          target: nextEntry[0],
+          type: 'buttonEdge',
+        })
+      }
+    }
+  })
+
+  return { nodes, edges }
+}
+
+export function createEditableNodeData(node: Node | undefined): NodeFormData | null {
+  if (!node) {
+    return null
+  }
+
+  return {
+    ...(node.data as NodeFormData),
+    gherkinStep: (node.data.gherkinStep as string) ?? '',
+    parameters: ((node.data.parameters as NodeFormData['parameters']) ?? []).map(parameter => ({
+      name: parameter.name,
+      value: parameter.value,
+      type: parameter.type ?? StepParameterType.STRING,
+      order: parameter.order,
+    })),
+    templateStepId: (node.data.templateStepId as string) ?? '',
+  }
+}
+
+export function getTemplateStepIcon(templateSteps: TemplateStep[], templateStepId: string) {
+  return templateSteps.find(templateStep => templateStep.id === templateStepId)?.icon ?? 'MOUSE'
+}
+
+export function buildNodeFormData(
+  formData: NodeFormData,
+  templateSteps: TemplateStep[],
+  templateStepParams: TemplateStepParameter[],
+  defaultValueInput: boolean,
+  isFirstNode: boolean,
+) {
+  const icon = getTemplateStepIcon(templateSteps, formData.templateStepId)
+  const isMissingParams = checkMissingMandatoryParams(
+    {
+      parameters: formData.parameters,
+      templateStepId: formData.templateStepId,
+    },
+    templateStepParams,
+    defaultValueInput,
+  )
+
+  return {
+    ...formData,
+    icon,
+    isFirstNode,
+    isMissingParams,
+  }
+}
+
+export function determineNodeOrders(nodes: Node[], edges: Edge[]): NodeOrderMap {
+  const graph: Record<string, string[]> = {}
+  const inDegree: Record<string, number> = {}
+  const hasConnections: Record<string, boolean> = {}
+  const nodeIds = new Set(nodes.map(node => node.id))
+
+  nodes.forEach(node => {
+    graph[node.id] = []
+    inDegree[node.id] = 0
+    hasConnections[node.id] = false
+  })
+
+  edges.forEach(edge => {
+    if (edge.source && edge.target && nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
+      graph[edge.source].push(edge.target)
+      inDegree[edge.target] = (inDegree[edge.target] || 0) + 1
+      hasConnections[edge.source] = true
+      hasConnections[edge.target] = true
+    }
+  })
+
+  const queue = nodes.map(node => node.id).filter(nodeId => inDegree[nodeId] === 0 && hasConnections[nodeId])
+
+  const orders: NodeOrderMap = {}
+  let orderNumber = 1
+
+  nodes.forEach(node => {
+    if (!hasConnections[node.id]) {
+      orders[node.id] = toDiagramNodeOrderEntry(node, -1)
+    }
+  })
+
+  while (queue.length > 0) {
+    const currentId = queue.shift()
+    if (!currentId) {
+      break
+    }
+
+    const currentNode = nodes.find(node => node.id === currentId)
+    if (!currentNode) {
+      continue
+    }
+
+    orders[currentId] = toDiagramNodeOrderEntry(currentNode, orderNumber++)
+
+    graph[currentId].forEach(neighborId => {
+      inDegree[neighborId]--
+      if (inDegree[neighborId] === 0) {
+        queue.push(neighborId)
+      }
+    })
+  }
+
+  nodes.forEach(node => {
+    if (!orders[node.id]) {
+      orders[node.id] = toDiagramNodeOrderEntry(node, orderNumber++)
+    }
+  })
+
+  return orders
+}
+
+export function removeOrphanedEdges(nodes: Node[], edges: Edge[]) {
+  const nodeIds = new Set(nodes.map(node => node.id))
+  return edges.filter(edge => nodeIds.has(edge.source) && nodeIds.has(edge.target))
+}
+
+export function isValidDiagramConnection(edges: Edge[], connection: Connection | Edge) {
+  const hasSourceConnection = edges.some(edge => edge.source === connection.source)
+  const hasTargetConnection = edges.some(edge => edge.target === connection.target)
+  const isReconnecting = edges.some(edge => edge.source === connection.source && edge.target === connection.target)
+
+  return isReconnecting || (!hasSourceConnection && !hasTargetConnection)
+}

package/templates/starter/src/components/diagram/flow-diagram.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import {
+  addEdge,
+  Background,
+  ConnectionMode,
+  Controls,
+  Edge,
+  Node,
+  NodeProps,
+  OnConnect,
+  ReactFlow,
+  useEdgesState,
+  useNodesState,
+  Connection,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { useCallback, useState, useEffect, useMemo, memo, useRef } from 'react'
+import { Button } from '@/components/ui/button'
+import ButtonEdge from './button-edge'
+import { Plus } from 'lucide-react'
+import OptionsHeaderNode from './options-header-node'
+import NodeForm from './node-form'
+import { NodeData } from '@/constants/form-opts/diagram/node-form'
+import { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import { Locator, TemplateStep, TemplateStepParameter, LocatorGroup } from '@prisma/client'
+import {
+  buildNodeFormData,
+  createEditableNodeData,
+  determineNodeOrders,
+  generateInitialNodesAndEdges,
+  isValidDiagramConnection,
+  removeOrphanedEdges,
+} from './flow-diagram-helpers'
+
+const edgeTypes = {
+  buttonEdge: ButtonEdge,
+}
+
+type FlowDiagramProps = {
+  nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Locator[]
+  locatorGroups: LocatorGroup[]
+  defaultValueInput?: boolean
+  onNodeOrderChange: (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => void
+}
+
+const FlowDiagram = ({
+  nodeOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  onNodeOrderChange,
+  defaultValueInput = false,
+}: FlowDiagramProps) => {
+  const handleEditNodeRef = useRef<(nodeId: string) => void>(() => {})
+
+  const { nodes: initialNodes, edges: initialEdges } = useMemo(
+    () => generateInitialNodesAndEdges(nodeOrder, templateStepParams, defaultValueInput),
+    [defaultValueInput, nodeOrder, templateStepParams],
+  )
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+  const [showAddNodeDialog, setShowAddNodeDialog] = useState(false)
+  const [showEditNodeDialog, setShowEditNodeDialog] = useState(false)
+  const [editNodeId, setEditNodeId] = useState<string | null>(null)
+  const [editNodeData, setEditNodeData] = useState<NodeData | null>(null)
+
+  const handleEditNode = useCallback(
+    (nodeId: string) => {
+      const node = nodes.find(node => node.id === nodeId)
+      const editableNodeData = createEditableNodeData(node)
+      if (!editableNodeData) {
+        return
+      }
+
+      setEditNodeData(editableNodeData)
+      setEditNodeId(nodeId)
+      setShowEditNodeDialog(true)
+    },
+    [nodes],
+  )
+
+  // Update the ref whenever handleEditNode changes
+  useEffect(() => {
+    handleEditNodeRef.current = handleEditNode
+  }, [handleEditNode])
+
+  const addNode = useCallback(
+    (formData: NodeData) => {
+      const newNode: Node = {
+        id: crypto.randomUUID(),
+        data: buildNodeFormData(formData, templateSteps, templateStepParams, defaultValueInput, nodes.length === 0),
+        position: { x: 0, y: 0 },
+        type: 'optionsHeaderNode',
+      }
+      setNodes(nds => nds.concat(newNode))
+      setShowAddNodeDialog(false)
+    },
+    [setNodes, setShowAddNodeDialog, nodes, templateSteps, templateStepParams, defaultValueInput],
+  )
+
+  const handleEditNodeSubmit = useCallback(
+    (formData: NodeData) => {
+      if (!editNodeId) return
+      const nextNodeData = buildNodeFormData(formData, templateSteps, templateStepParams, defaultValueInput, false)
+
+      setNodes(nds =>
+        nds.map(node =>
+          node.id === editNodeId
+            ? {
+                ...node,
+                data: {
+                  ...node.data,
+                  ...nextNodeData,
+                },
+              }
+            : node,
+        ),
+      )
+      setShowEditNodeDialog(false)
+    },
+    [editNodeId, setNodes, setShowEditNodeDialog, templateSteps, templateStepParams, defaultValueInput],
+  )
+
+  useEffect(() => {
+    const orders = determineNodeOrders(nodes, edges)
+    onNodeOrderChange(orders)
+  }, [nodes, edges, onNodeOrderChange])
+
+  // Clean up orphaned edges when nodes are deleted
+  useEffect(() => {
+    const nextEdges = removeOrphanedEdges(nodes, edges)
+
+    if (nextEdges.length !== edges.length) {
+      setEdges(nextEdges)
+    }
+  }, [nodes, edges, setEdges])
+
+  const isValidConnection = useCallback(
+    (connection: Connection | Edge) => isValidDiagramConnection(edges, connection),
+    [edges],
+  )
+
+  const onConnect: OnConnect = useCallback(
+    params => {
+      if (isValidConnection(params)) {
+        setEdges(eds => addEdge(params, eds))
+      }
+    },
+    [setEdges, isValidConnection],
+  )
+
+  const memoizedTemplateSteps = useMemo(() => templateSteps, [templateSteps])
+  const memoizedTemplateStepParams = useMemo(() => templateStepParams, [templateStepParams])
+  const memoizedLocators = useMemo(() => locators, [locators])
+
+  // Memoize nodeTypes to prevent recreation
+  const nodeTypes = useMemo(
+    () => ({
+      optionsHeaderNode: (props: NodeProps) => (
+        <OptionsHeaderNode {...props} onEdit={nodeId => handleEditNodeRef.current(nodeId)} />
+      ),
+    }),
+    [], // Empty dependency array - now stable since we use ref
+  )
+
+  return (
+    <>
+      <div className="h-[400px] w-full">
+        <div className="mb-8">
+          <Button onClick={() => setShowAddNodeDialog(true)}>
+            <span className="flex items-center">
+              <Plus className="mr-2 h-4 w-4" />
+              Add Node
+            </span>
+          </Button>
+        </div>
+        <ReactFlow
+          nodes={nodes}
+          onNodesChange={onNodesChange}
+          edges={edges}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          fitView
+          colorMode="dark"
+          connectionMode={ConnectionMode.Loose}
+          edgeTypes={edgeTypes}
+          nodeTypes={nodeTypes}
+          defaultEdgeOptions={{
+            type: 'buttonEdge',
+          }}
+          connectOnClick={false}
+          isValidConnection={isValidConnection}
+          proOptions={{ hideAttribution: true }}
+        >
+          <Background />
+          <Controls />
+        </ReactFlow>
+      </div>
+
+      {showAddNodeDialog && (
+        <NodeForm
+          onSubmitAction={addNode}
+          initialValues={{
+            label: '',
+            gherkinStep: '',
+            templateStepId: '',
+            parameters: [],
+          }}
+          templateSteps={memoizedTemplateSteps}
+          templateStepParams={memoizedTemplateStepParams}
+          showAddNodeDialog={showAddNodeDialog}
+          setShowAddNodeDialog={setShowAddNodeDialog}
+          locators={memoizedLocators}
+          defaultValueInput={defaultValueInput}
+          locatorGroups={locatorGroups}
+        />
+      )}
+
+      {showEditNodeDialog && (
+        <NodeForm
+          onSubmitAction={handleEditNodeSubmit}
+          initialValues={{
+            label: editNodeData?.label ?? '',
+            gherkinStep: editNodeData?.gherkinStep ?? '',
+            templateStepId: editNodeData?.templateStepId ?? '',
+            parameters: editNodeData?.parameters ?? [],
+          }}
+          templateSteps={memoizedTemplateSteps}
+          templateStepParams={memoizedTemplateStepParams}
+          showAddNodeDialog={showEditNodeDialog}
+          setShowAddNodeDialog={setShowEditNodeDialog}
+          locators={memoizedLocators}
+          defaultValueInput={defaultValueInput}
+          locatorGroups={locatorGroups}
+        />
+      )}
+    </>
+  )
+}
+
+export default memo(FlowDiagram)

package/templates/starter/src/components/diagram/flow-host-helpers.test.ts

@@ -0,0 +1,74 @@
+import { StepParameterType } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import { toNodeOrderMap, toTemplateTestCaseNodeOrderMap } from './flow-host-helpers'
+
+describe('flow host helpers', () => {
+  it('converts template-test-case node parameters into runtime values', () => {
+    expect(
+      toNodeOrderMap({
+        'node-1': {
+          order: 1,
+          label: 'Click button',
+          parameters: [
+            {
+              name: 'target',
+              defaultValue: 'Submit',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+          templateStepId: 'step-1',
+        },
+      }),
+    ).toEqual({
+      'node-1': {
+        order: 1,
+        label: 'Click button',
+        parameters: [
+          {
+            name: 'target',
+            value: 'Submit',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        templateStepId: 'step-1',
+      },
+    })
+  })
+
+  it('converts runtime node parameters into template default values', () => {
+    expect(
+      toTemplateTestCaseNodeOrderMap({
+        'node-1': {
+          order: 1,
+          label: 'Fill field',
+          parameters: [
+            {
+              name: 'value',
+              value: 'email@example.com',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+          templateStepId: 'step-2',
+        },
+      }),
+    ).toEqual({
+      'node-1': {
+        order: 1,
+        label: 'Fill field',
+        parameters: [
+          {
+            name: 'value',
+            defaultValue: 'email@example.com',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        templateStepId: 'step-2',
+      },
+    })
+  })
+})