🐛 (results) Keep focus on current expanded result when new ones arrive

Closes #453

apps/builder/src/features/results/components/ResultModal.tsx

@@ -15,13 +15,15 @@ import { isDefined } from '@typebot.io/lib'
 import { HeaderIcon } from './HeaderIcon'
 
 type Props = {
-  resultIdx: number | null
+  resultId: string | null
   onClose: () => void
 }
 
-export const ResultModal = ({ resultIdx, onClose }: Props) => {
+export const ResultModal = ({ resultId, onClose }: Props) => {
   const { tableData, resultHeader } = useResults()
-  const result = isDefined(resultIdx) ? tableData[resultIdx] : undefined
+  const result = isDefined(resultId)
+    ? tableData.find((data) => data.id.plainText === resultId)
+    : undefined
 
   const getHeaderValue = (
     val: string | { plainText: string; element?: JSX.Element | undefined }

apps/builder/src/features/results/components/ResultsTableContainer.tsx

@@ -18,21 +18,21 @@ export const ResultsTableContainer = () => {
   const [inspectingLogsResultId, setInspectingLogsResultId] = useState<
     string | null
   >(null)
-  const [expandedResultIndex, setExpandedResultIndex] = useState<number | null>(
-    null
-  )
+  const [expandedResultId, setExpandedResultId] = useState<string | null>(null)
 
   const handleLogsModalClose = () => setInspectingLogsResultId(null)
 
-  const handleResultModalClose = () => setExpandedResultIndex(null)
+  const handleResultModalClose = () => setExpandedResultId(null)
 
   const handleLogOpenIndex = (index: number) => () => {
     if (!results[index]) return
     setInspectingLogsResultId(results[index].id)
   }
 
-  const handleResultExpandIndex = (index: number) => () =>
-    setExpandedResultIndex(index)
+  const handleResultExpandIndex = (index: number) => () => {
+    if (!results[index]) return
+    setExpandedResultId(results[index].id)
+  }
 
   return (
     <Stack pb="28" px={['4', '0']} spacing="4" maxW="1600px" w="full">
@@ -44,7 +44,7 @@ export const ResultsTableContainer = () => {
         />
       )}
       <ResultModal
-        resultIdx={expandedResultIndex}
+        resultId={expandedResultId}
         onClose={handleResultModalClose}
       />