create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

package/templates/default/src/components/diagram/edit-header-option.tsx

@@ -1,36 +1,36 @@
-import { NodeHeaderAction, NodeHeaderActionProps } from '@/components/node-header'
-import { useCallback } from 'react'
-import { useNodeId } from '@xyflow/react'
-import { Pencil } from 'lucide-react'
-import React from 'react'
-
-export interface NodeHeaderEditActionProps extends Omit<NodeHeaderActionProps, 'onClick'> {
-  onClick?: (nodeId: string, event: React.MouseEvent) => void
-}
-
-/**
- * A copy action button that passes the node's id to the `onClick` handler when
- * clicked.
- */
-export const NodeHeaderEditAction = React.forwardRef<HTMLButtonElement, NodeHeaderEditActionProps>(
-  ({ onClick, ...props }, ref) => {
-    const id = useNodeId()
-
-    const handleClick = useCallback(
-      (event: React.MouseEvent) => {
-        if (!onClick || !id) return
-
-        onClick(id, event)
-      },
-      [onClick, id],
-    )
-
-    return (
-      <NodeHeaderAction ref={ref} onClick={handleClick} variant="ghost" {...props}>
-        <Pencil />
-      </NodeHeaderAction>
-    )
-  },
-)
-
-NodeHeaderEditAction.displayName = 'NodeHeaderEditAction'
+import { NodeHeaderAction, NodeHeaderActionProps } from '@/components/node-header'
+import { useCallback } from 'react'
+import { useNodeId } from '@xyflow/react'
+import { Pencil } from 'lucide-react'
+import React from 'react'
+
+export interface NodeHeaderEditActionProps extends Omit<NodeHeaderActionProps, 'onClick'> {
+  onClick?: (nodeId: string, event: React.MouseEvent) => void
+}
+
+/**
+ * A copy action button that passes the node's id to the `onClick` handler when
+ * clicked.
+ */
+export const NodeHeaderEditAction = React.forwardRef<HTMLButtonElement, NodeHeaderEditActionProps>(
+  ({ onClick, ...props }, ref) => {
+    const id = useNodeId()
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent) => {
+        if (!onClick || !id) return
+
+        onClick(id, event)
+      },
+      [onClick, id],
+    )
+
+    return (
+      <NodeHeaderAction ref={ref} onClick={handleClick} variant="ghost" {...props}>
+        <Pencil />
+      </NodeHeaderAction>
+    )
+  },
+)
+
+NodeHeaderEditAction.displayName = 'NodeHeaderEditAction'

package/templates/default/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/default/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)
+}