fix: Improve test input row selection and type handling in RunModal and Header

Author: srijanpatel

frontend/src/components/Header.tsx

@@ -52,7 +52,7 @@ const Header: React.FC<HeaderProps> = ({ activePage, associatedWorkflowId }) =>
         isVisible: false,
     })
     const testInputs = useSelector((state: RootState) => state.flow.testInputs)
-    const [selectedRow, setSelectedRow] = useState<number | null>(null)
+    const [selectedRow, setSelectedRow] = useState<string | null>(null)
     const [isHelpModalOpen, setIsHelpModalOpen] = useState<boolean>(false)
 
     const router = useRouter()
@@ -78,7 +78,7 @@ const Header: React.FC<HeaderProps> = ({ activePage, associatedWorkflowId }) =>
 
     useEffect(() => {
         if (testInputs.length > 0 && !selectedRow) {
-            setSelectedRow(testInputs[0].id)
+            setSelectedRow(testInputs[0].id.toString())
         }
     }, [testInputs])
 
@@ -142,7 +142,7 @@ const Header: React.FC<HeaderProps> = ({ activePage, associatedWorkflowId }) =>
                 return
             }
 
-            const testCase = testInputs.find((row) => row.id === selectedRow) ?? testInputs[0]
+            const testCase = testInputs.find((row) => row.id.toString() === selectedRow) ?? testInputs[0]
 
             if (testCase) {
                 const { id, ...inputValues } = testCase
@@ -379,7 +379,13 @@ const Header: React.FC<HeaderProps> = ({ activePage, associatedWorkflowId }) =>
                         <SettingsCard />
                     </NavbarItem>
                     <NavbarItem className="hidden sm:flex">
-                        <Button isIconOnly radius="full" variant="light" onPress={() => setIsHelpModalOpen(true)} aria-label="Help">
+                        <Button
+                            isIconOnly
+                            radius="full"
+                            variant="light"
+                            onPress={() => setIsHelpModalOpen(true)}
+                            aria-label="Help"
+                        >
                             <Icon className="text-foreground/60" icon="solar:question-circle-linear" width={24} />
                         </Button>
                     </NavbarItem>
@@ -392,12 +398,14 @@ const Header: React.FC<HeaderProps> = ({ activePage, associatedWorkflowId }) =>
                     await executeWorkflow(selectedInputs)
                     setIsDebugModalOpen(false)
                 }}
+                selectedRow={selectedRow}
+                onSelectedRowChange={setSelectedRow}
             />
             <DeployModal
                 isOpen={isDeployModalOpen}
                 onOpenChange={setIsDeployModalOpen}
                 workflowId={workflowId}
-                testInput={testInputs.find((row) => row.id === selectedRow) ?? testInputs[0]}
+                testInput={testInputs.find((row) => row.id.toString() === selectedRow) ?? testInputs[0]}
             />
             <HelpModal isOpen={isHelpModalOpen} onClose={() => setIsHelpModalOpen(false)} />
         </>

frontend/src/components/modals/RunModal.tsx

@@ -1,63 +1,75 @@
-import React, { useState, useEffect } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
+import { TestInput } from '@/types/api_types/workflowSchemas'
+import { uploadTestFiles } from '@/utils/api'
 import {
+    Alert,
+    Button,
+    Input,
     Modal,
-    ModalContent,
-    ModalHeader,
     ModalBody,
+    ModalContent,
     ModalFooter,
-    Button,
+    ModalHeader,
+    Switch,
     Table,
-    TableHeader,
-    TableColumn,
     TableBody,
-    TableRow,
     TableCell,
-    Input,
+    TableColumn,
+    TableHeader,
+    TableRow,
     Tooltip,
-    Switch,
-    Alert,
 } from '@heroui/react'
 import { Icon } from '@iconify/react'
-import TextEditor from '../textEditor/TextEditor'
-import { addTestInput, deleteTestInput, updateTestInput } from '../../store/flowSlice'
-import { RootState } from '../../store/store'
-import { AppDispatch } from '../../store/store'
-import { TestInput } from '@/types/api_types/workflowSchemas'
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { useSaveWorkflow } from '../../hooks/useSaveWorkflow'
-import FileUploadBox from '../FileUploadBox'
-import { uploadTestFiles } from '@/utils/api'
+import { addTestInput, deleteTestInput, updateTestInput } from '../../store/flowSlice'
 import { getNodeMissingRequiredFields } from '../../store/nodeTypesSlice'
+import { AppDispatch, RootState } from '../../store/store'
+import FileUploadBox from '../FileUploadBox'
+import TextEditor from '../textEditor/TextEditor'
 
 interface RunModalProps {
     isOpen: boolean
     onOpenChange: (isOpen: boolean) => void
     onRun: (initialInputs: Record<string, any>, files?: Record<string, string[]>) => void
     onSave?: () => void
+    selectedRow?: string | null
+    onSelectedRowChange?: (rowId: string | null) => void
 }
 
 interface EditingCell {
     rowId: number
     field: string
 }
 
-const RunModal: React.FC<RunModalProps> = ({ isOpen, onOpenChange, onRun, onSave }) => {
+const RunModal: React.FC<RunModalProps> = ({
+    isOpen,
+    onOpenChange,
+    onRun,
+    onSave,
+    selectedRow: externalSelectedRow,
+    onSelectedRowChange,
+}) => {
     const nodes = useSelector((state: RootState) => state.flow.nodes)
     const nodeConfigs = useSelector((state: RootState) => state.flow.nodeConfigs)
     const nodeTypesMetadata = useSelector((state: RootState) => state.nodeTypes).metadata
     const workflowID = useSelector((state: RootState) => state.flow.workflowID)
     const inputNode = nodes.find((node) => node.type === 'InputNode')
     const workflowInputVariables = inputNode ? nodeConfigs[inputNode.id]?.output_schema || {} : {}
     const workflowInputVariableNames = Object.keys(workflowInputVariables)
-    const [alert, setAlert] = useState<{ message: string; color: 'danger' | 'success' | 'warning' | 'default'; isVisible: boolean }>({
+    const [alert, setAlert] = useState<{
+        message: string
+        color: 'danger' | 'success' | 'warning' | 'default'
+        isVisible: boolean
+    }>({
         message: '',
         color: 'default',
         isVisible: false,
     })
 
     const [testData, setTestData] = useState<TestInput[]>([])
     const [editingCell, setEditingCell] = useState<EditingCell | null>(null)
-    const [selectedRow, setSelectedRow] = useState<string | null>(null)
+    const [selectedRow, setSelectedRow] = useState<string | null>(externalSelectedRow || null)
     const [editorContents, setEditorContents] = useState<Record<string, string>>({})
     const [uploadedFiles, setUploadedFiles] = useState<Record<string, File[]>>({})
     const [filePaths, setFilePaths] = useState<Record<string, string[]>>({})
@@ -73,10 +85,18 @@ const RunModal: React.FC<RunModalProps> = ({ isOpen, onOpenChange, onRun, onSave
 
     useEffect(() => {
         if (isOpen && testData.length > 0 && !selectedRow) {
-            setSelectedRow(testData[0].id.toString())
+            const newSelectedRow = testData[0].id.toString()
+            setSelectedRow(newSelectedRow)
+            onSelectedRowChange?.(newSelectedRow)
         }
     }, [isOpen, testData, selectedRow])
 
+    useEffect(() => {
+        if (externalSelectedRow !== selectedRow) {
+            setSelectedRow(externalSelectedRow)
+        }
+    }, [externalSelectedRow])
+
     const getNextId = () => {
         const maxId = testData.reduce((max, row) => Math.max(max, row.id), 0)
         return maxId + 1
@@ -337,6 +357,7 @@ const RunModal: React.FC<RunModalProps> = ({ isOpen, onOpenChange, onRun, onSave
                                             onSelectionChange={(selection) => {
                                                 const selectedKey = Array.from(selection)[0]?.toString() || null
                                                 setSelectedRow(selectedKey)
+                                                onSelectedRowChange?.(selectedKey)
                                             }}
                                             classNames={{
                                                 base: 'min-w-[800px]',