create-appraisejs 0.3.0 → 0.3.1-alpha.1

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

@@ -1,247 +1,93 @@
 'use client'
 
-import {
-  addEdge,
-  Background,
-  ConnectionMode,
-  Controls,
-  Edge,
-  Node,
-  NodeProps,
-  OnConnect,
-  ReactFlow,
-  useEdgesState,
-  useNodesState,
-  Connection,
-} from '@xyflow/react'
+import { useUpdateNodeInternals } 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,
+import { memo, useCallback, useEffect, useRef, type RefObject } from 'react'
+import { FlowDiagramView } from './flow-diagram-view'
+import type { FlowDiagramProps } from './flow-diagram-types'
+import { EMPTY_FLOW_BLOCKS } from './flow-diagram-types'
+import { useFlowDiagram } from './use-flow-diagram'
+
+const layoutRefreshDelays = [0, 80, 180, 360]
+
+type FlowLayoutRefreshProps = {
+  nodeIds: string[]
+  containerRef: RefObject<HTMLDivElement | null>
+  refreshKey?: string | number | boolean
 }
 
-type FlowDiagramProps = {
-  nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap
-  templateStepParams: TemplateStepParameter[]
-  templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
-  defaultValueInput?: boolean
-  onNodeOrderChange: (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => void
-}
+function FlowLayoutRefresh({ nodeIds, containerRef, refreshKey }: FlowLayoutRefreshProps) {
+  const updateNodeInternals = useUpdateNodeInternals()
+  const frameRef = useRef<number | null>(null)
+  const timeoutRefs = useRef<number[]>([])
+
+  const clearScheduledRefreshes = useCallback(() => {
+    if (frameRef.current !== null) {
+      window.cancelAnimationFrame(frameRef.current)
+      frameRef.current = null
+    }
+    timeoutRefs.current.forEach(timeoutId => window.clearTimeout(timeoutId))
+    timeoutRefs.current = []
+  }, [])
+
+  const refreshNodeInternals = useCallback(() => {
+    if (nodeIds.length === 0) {
+      return
+    }
 
-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) {
+    updateNodeInternals(nodeIds)
+  }, [nodeIds, updateNodeInternals])
+
+  const scheduleLayoutRefresh = useCallback(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    clearScheduledRefreshes()
+    layoutRefreshDelays.forEach(delay => {
+      if (delay === 0) {
+        frameRef.current = window.requestAnimationFrame(refreshNodeInternals)
         return
       }
 
-      setEditNodeData(editableNodeData)
-      setEditNodeId(nodeId)
-      setShowEditNodeDialog(true)
-    },
-    [nodes],
-  )
+      timeoutRefs.current.push(window.setTimeout(refreshNodeInternals, delay))
+    })
+  }, [clearScheduledRefreshes, refreshNodeInternals])
 
-  // 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],
-  )
+    scheduleLayoutRefresh()
 
-  useEffect(() => {
-    const orders = determineNodeOrders(nodes, edges)
-    onNodeOrderChange(orders)
-  }, [nodes, edges, onNodeOrderChange])
+    return clearScheduledRefreshes
+  }, [clearScheduledRefreshes, refreshKey, scheduleLayoutRefresh])
 
-  // Clean up orphaned edges when nodes are deleted
   useEffect(() => {
-    const nextEdges = removeOrphanedEdges(nodes, edges)
+    if (typeof ResizeObserver === 'undefined') {
+      return
+    }
 
-    if (nextEdges.length !== edges.length) {
-      setEdges(nextEdges)
+    const container = containerRef.current
+    if (!container) {
+      return
     }
-  }, [nodes, edges, setEdges])
 
-  const isValidConnection = useCallback(
-    (connection: Connection | Edge) => isValidDiagramConnection(edges, connection),
-    [edges],
-  )
+    const resizeObserver = new ResizeObserver(scheduleLayoutRefresh)
+    resizeObserver.observe(container)
 
-  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}
-        />
-      )}
-    </>
-  )
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [containerRef, scheduleLayoutRefresh])
+
+  return null
+}
+
+const FlowDiagram = (props: FlowDiagramProps) => {
+  const model = useFlowDiagram({
+    ...props,
+    flowBlocks: props.flowBlocks ?? EMPTY_FLOW_BLOCKS,
+  })
+
+  return <FlowDiagramView model={model} FlowLayoutRefresh={FlowLayoutRefresh} />
 }
 
 export default memo(FlowDiagram)

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

@@ -0,0 +1,122 @@
+import type { Node } from '@xyflow/react'
+import { StepParameterType, type TemplateStep, type TemplateStepParameter } from '@prisma/client'
+
+import type { 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'
+
+import { isAddNodePromptNode } from './flow-add-node-prompt-helpers'
+
+type DiagramParameter = NodeFormData['parameters'][number] | TemplateTestCaseNodeData['parameters'][number]
+export type DiagramNodeOrder = NodeOrderMap | TemplateTestCaseNodeOrderMap
+
+export 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,
+  }))
+}
+
+export function toSerializableParameters(parameters: NodeFormData['parameters']) {
+  return parameters.map(parameter => ({
+    name: parameter.name,
+    value: parameter.value,
+    type: parameter.type ?? StepParameterType.STRING,
+    order: parameter.order,
+  }))
+}
+
+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 createEditableNodeData(node: Node | undefined): NodeFormData | null {
+  if (!node) {
+    return null
+  }
+
+  if (isAddNodePromptNode(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) ?? '',
+  }
+}
+
+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: isMissingParams ? (true as const) : undefined,
+  }
+}

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

@@ -0,0 +1,179 @@
+import type { Connection, Edge, Node } from '@xyflow/react'
+import type { TemplateStepParameter } from '@prisma/client'
+
+import type { NodeFormData } from '@/constants/form-opts/diagram/node-form'
+import type { NodeOrderMap } from '@/types/diagram/diagram'
+
+import { createAddNodePromptNode, isAddNodePromptNode } from './flow-add-node-prompt-helpers'
+import { buildFlowNodeData, type DiagramNodeOrder, toSerializableParameters } from './flow-node-data-helpers'
+
+function toDiagramNodeOrderEntry(node: Node, order: number) {
+  return {
+    nodeId: node.id,
+    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 generateInitialNodesAndEdges(
+  nodeOrder: DiagramNodeOrder,
+  templateStepParams: TemplateStepParameter[],
+  defaultValueInput: boolean,
+) {
+  if (Object.keys(nodeOrder).length === 0) {
+    return { nodes: [createAddNodePromptNode()], edges: [] as Edge[] }
+  }
+
+  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 determineNodeOrders(nodes: Node[], edges: Edge[]): NodeOrderMap {
+  const realNodes = nodes.filter(node => !isAddNodePromptNode(node))
+
+  const graph: Record<string, string[]> = {}
+  const inDegree: Record<string, number> = {}
+  const hasConnections: Record<string, boolean> = {}
+  const nodeIds = new Set(realNodes.map(node => node.id))
+
+  realNodes.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 = realNodes.map(node => node.id).filter(nodeId => inDegree[nodeId] === 0 && hasConnections[nodeId])
+
+  const orders: NodeOrderMap = {}
+  let orderNumber = 1
+
+  realNodes.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 = realNodes.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)
+      }
+    })
+  }
+
+  realNodes.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 determineStartNodeIds(nodes: Node[], edges: Edge[]) {
+  const realNodes = nodes.filter(node => !isAddNodePromptNode(node))
+
+  const nodeIds = new Set(realNodes.map(node => node.id))
+  const inDegree: Record<string, number> = {}
+  const hasConnections: Record<string, boolean> = {}
+
+  realNodes.forEach(node => {
+    inDegree[node.id] = 0
+    hasConnections[node.id] = false
+  })
+
+  edges.forEach(edge => {
+    if (edge.source && edge.target && nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
+      inDegree[edge.target] = (inDegree[edge.target] || 0) + 1
+      hasConnections[edge.source] = true
+      hasConnections[edge.target] = true
+    }
+  })
+
+  const startCandidates = realNodes
+    .filter(node => inDegree[node.id] === 0 && hasConnections[node.id])
+    .map(node => node.id)
+
+  if (startCandidates.length !== 1) {
+    return new Set<string>()
+  }
+
+  return new Set(startCandidates)
+}
+
+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-node-search-helpers.ts

@@ -0,0 +1,24 @@
+import type { Node } from '@xyflow/react'
+
+import { isAddNodePromptNode } from './flow-add-node-prompt-helpers'
+
+export type FlowNodeSearchResult = {
+  id: string
+  label: string
+}
+
+export function searchFlowNodesByLabel(nodes: Node[], query: string): FlowNodeSearchResult[] {
+  const normalizedQuery = query.trim().toLocaleLowerCase()
+
+  if (normalizedQuery.length < 3) {
+    return []
+  }
+
+  return nodes
+    .filter(node => !isAddNodePromptNode(node))
+    .map(node => ({
+      id: node.id,
+      label: typeof node.data.label === 'string' ? node.data.label : '',
+    }))
+    .filter(result => result.label.toLocaleLowerCase().includes(normalizedQuery))
+}