🐛 (results) Fix bug preventing user from seeing linked typebots results

apps/builder/components/results/ResultModal.tsx

@@ -11,8 +11,8 @@ import {
 } from '@chakra-ui/react'
 import { useResults } from 'contexts/ResultsProvider'
 import React from 'react'
+import { HeaderIcon } from 'services/typebots/results'
 import { isDefined } from 'utils'
-import { HeaderIcon } from './ResultsTable/ResultsTable'
 
 type Props = {
   resultIdx: number | null

apps/builder/components/results/ResultsContent.tsx

@@ -27,7 +27,7 @@ export const ResultsContent = () => {
   const handleResultModalClose = () => setExpandedResultIndex(null)
 
   const handleLogOpenIndex = (index: number) => () => {
-    if (!results) return
+    if (!results[index]) return
     setInspectingLogsResultId(results[index].id)
   }
 

apps/builder/components/results/ResultsTable/ColumnsSettingsButton.tsx

@@ -15,7 +15,6 @@ import { ToolIcon, EyeIcon, EyeOffIcon, GripIcon } from 'assets/icons'
 import { ResultHeaderCell } from 'models'
 import React, { forwardRef, useState } from 'react'
 import { isNotDefined } from 'utils'
-import { HeaderIcon } from './ResultsTable'
 import {
   DndContext,
   closestCenter,
@@ -35,6 +34,7 @@ import {
   useSortable,
   arrayMove,
 } from '@dnd-kit/sortable'
+import { HeaderIcon } from 'services/typebots/results'
 
 type Props = {
   resultHeader: ResultHeaderCell[]

apps/builder/components/results/ResultsTable/ResultsActionButtons.tsx

@@ -93,18 +93,39 @@ export const ResultsActionButtons = ({
       : tableData.filter((data) =>
           selectedResultsId.includes(data.id.plainText)
         )
+
+    const fields = typebot?.resultsTablePreferences?.columnsOrder
+      ? typebot.resultsTablePreferences.columnsOrder.reduce<string[]>(
+          (currentHeaderLabels, columnId) => {
+            if (
+              typebot.resultsTablePreferences?.columnsVisibility[columnId] ===
+              false
+            )
+              return currentHeaderLabels
+            const columnLabel = resultHeader.find(
+              (headerCell) => headerCell.id === columnId
+            )?.label
+            if (!columnLabel) return currentHeaderLabels
+            return [...currentHeaderLabels, columnLabel]
+          },
+          []
+        )
+      : resultHeader.map((headerCell) => headerCell.label)
+
+    const data = dataToUnparse.map<{ [key: string]: string }>((data) => {
+      const newObject: { [key: string]: string } = {}
+      fields?.forEach((field) => {
+        console.log(data[field])
+        newObject[field] = data[field]?.plainText
+      })
+      return newObject
+    })
+
     const csvData = new Blob(
       [
         unparse({
-          data: dataToUnparse.map<{ [key: string]: string }>((data) => {
-            const newObject: { [key: string]: string } = {}
-            Object.keys(data).forEach((key) => {
-              newObject[key] = (data[key] as { plainText: string })
-                .plainText as string
-            })
-            return newObject
-          }),
-          fields: resultHeader.map((h) => h.label),
+          data,
+          fields,
         }),
       ],
       {

apps/builder/components/results/ResultsTable/ResultsTable.tsx

@@ -8,7 +8,7 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react'
-import { AlignLeftTextIcon, CalendarIcon, CodeIcon } from 'assets/icons'
+import { AlignLeftTextIcon } from 'assets/icons'
 import { ResultHeaderCell, ResultsTablePreferences } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
 import { LoadingRows } from './LoadingRows'
@@ -18,14 +18,13 @@ import {
   ColumnOrderState,
   ColumnDef,
 } from '@tanstack/react-table'
-import { BlockIcon } from 'components/editor/BlocksSideBar/BlockIcon'
 import { ColumnSettingsButton } from './ColumnsSettingsButton'
 import { useTypebot } from 'contexts/TypebotContext'
 import { useDebounce } from 'use-debounce'
 import { ResultsActionButtons } from './ResultsActionButtons'
 import { Row } from './Row'
 import { HeaderRow } from './HeaderRow'
-import { CellValueType, TableData } from 'services/typebots/results'
+import { CellValueType, HeaderIcon, TableData } from 'services/typebots/results'
 
 type ResultsTableProps = {
   resultHeader: ResultHeaderCell[]
@@ -112,7 +111,7 @@ export const ResultsTable = ({
       ...resultHeader.map<ColumnDef<TableData>>((header) => ({
         id: header.id,
         accessorKey: header.label,
-        size: header.isLong ? 400 : 200,
+        size: 200,
         header: () => (
           <HStack overflow="hidden" data-testid={`${header.label} header`}>
             <HeaderIcon header={header} />
@@ -147,8 +146,7 @@ export const ResultsTable = ({
         ),
       },
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [resultHeader]
+    [onLogOpenIndex, resultHeader]
   )
 
   const instance = useReactTable({
@@ -258,12 +256,3 @@ const IndeterminateCheckbox = React.forwardRef(
     )
   }
 )
-
-export const HeaderIcon = ({ header }: { header: ResultHeaderCell }) =>
-  header.blockType ? (
-    <BlockIcon type={header.blockType} />
-  ) : header.variableId ? (
-    <CodeIcon />
-  ) : (
-    <CalendarIcon />
-  )