diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index cfe3401b..2bf007ec 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -52,7 +52,7 @@ const Header: React.FC = ({ activePage, associatedWorkflowId }) => isVisible: false, }) const testInputs = useSelector((state: RootState) => state.flow.testInputs) - const [selectedRow, setSelectedRow] = useState(null) + const [selectedRow, setSelectedRow] = useState(null) const [isHelpModalOpen, setIsHelpModalOpen] = useState(false) const router = useRouter() @@ -78,7 +78,7 @@ const Header: React.FC = ({ 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 = ({ 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 = ({ activePage, associatedWorkflowId }) => - @@ -392,12 +398,14 @@ const Header: React.FC = ({ activePage, associatedWorkflowId }) => await executeWorkflow(selectedInputs) setIsDebugModalOpen(false) }} + selectedRow={selectedRow} + onSelectedRowChange={setSelectedRow} /> row.id === selectedRow) ?? testInputs[0]} + testInput={testInputs.find((row) => row.id.toString() === selectedRow) ?? testInputs[0]} /> setIsHelpModalOpen(false)} /> diff --git a/frontend/src/components/modals/RunModal.tsx b/frontend/src/components/modals/RunModal.tsx index 440bb503..66451619 100644 --- a/frontend/src/components/modals/RunModal.tsx +++ b/frontend/src/components/modals/RunModal.tsx @@ -1,39 +1,40 @@ -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, files?: Record) => void onSave?: () => void + selectedRow?: string | null + onSelectedRowChange?: (rowId: string | null) => void } interface EditingCell { @@ -41,7 +42,14 @@ interface EditingCell { field: string } -const RunModal: React.FC = ({ isOpen, onOpenChange, onRun, onSave }) => { +const RunModal: React.FC = ({ + 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 @@ -49,7 +57,11 @@ const RunModal: React.FC = ({ isOpen, onOpenChange, onRun, onSave 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, @@ -57,7 +69,7 @@ const RunModal: React.FC = ({ isOpen, onOpenChange, onRun, onSave const [testData, setTestData] = useState([]) const [editingCell, setEditingCell] = useState(null) - const [selectedRow, setSelectedRow] = useState(null) + const [selectedRow, setSelectedRow] = useState(externalSelectedRow || null) const [editorContents, setEditorContents] = useState>({}) const [uploadedFiles, setUploadedFiles] = useState>({}) const [filePaths, setFilePaths] = useState>({}) @@ -73,10 +85,18 @@ const RunModal: React.FC = ({ 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 = ({ isOpen, onOpenChange, onRun, onSave onSelectionChange={(selection) => { const selectedKey = Array.from(selection)[0]?.toString() || null setSelectedRow(selectedKey) + onSelectedRowChange?.(selectedKey) }} classNames={{ base: 'min-w-[800px]',