feat(results): ✨ Brand new Results table

- Resizable columns
- Hide / Show columns
- Reorganize columns
- Expand result

apps/builder/assets/icons.tsx

@@ -474,3 +474,10 @@ export const BuoyIcon = (props: IconProps) => (
     <line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line>
   </Icon>
 )
+
+export const EyeOffIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+    <line x1="1" y1="1" x2="23" y2="23"></line>
+  </Icon>
+)

apps/builder/layouts/results/LogsModal.tsx → apps/builder/components/results/LogsModal.tsx

@@ -23,11 +23,11 @@ import { isDefined } from 'utils'
 
 type Props = {
   typebotId: string
-  resultId?: string
+  resultId: string | null
   onClose: () => void
 }
 export const LogsModal = ({ typebotId, resultId, onClose }: Props) => {
-  const { isLoading, logs } = useLogs(typebotId, resultId)
+  const { isLoading, logs } = useLogs(typebotId, resultId ?? undefined)
   return (
     <Modal isOpen={isDefined(resultId)} onClose={onClose} size="xl">
       <ModalOverlay />

apps/builder/components/results/ResultModal.tsx

@@ -0,0 +1,55 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalCloseButton,
+  ModalBody,
+  Stack,
+  Heading,
+  Text,
+  HStack,
+} from '@chakra-ui/react'
+import { useResults } from 'contexts/ResultsProvider'
+import React from 'react'
+import { isDefined } from 'utils'
+import { HeaderIcon } from './ResultsTable/ResultsTable'
+
+type Props = {
+  resultIdx: number | null
+  onClose: () => void
+}
+
+export const ResultModal = ({ resultIdx, onClose }: Props) => {
+  const { tableData, resultHeader } = useResults()
+  const result = isDefined(resultIdx) ? tableData[resultIdx] : undefined
+
+  const getHeaderValue = (
+    val: string | { plainText: string; element?: JSX.Element | undefined }
+  ) => (typeof val === 'string' ? val : val.element ?? val.plainText)
+
+  return (
+    <Modal isOpen={isDefined(result)} onClose={onClose} size="2xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalCloseButton />
+        <ModalBody as={Stack} p="10" spacing="10">
+          {resultHeader.map((header) =>
+            result && result[header.label] ? (
+              <Stack key={header.id} spacing="4">
+                <HStack>
+                  <HeaderIcon header={header} />
+                  <Heading fontSize="md">{header.label}</Heading>
+                </HStack>
+                <Text whiteSpace="pre-wrap" textAlign="justify">
+                  {getHeaderValue(result[header.label])}
+                </Text>
+              </Stack>
+            ) : (
+              <></>
+            )
+          )}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}

apps/builder/components/results/ResultsContent.tsx

@@ -0,0 +1,81 @@
+import { Stack } from '@chakra-ui/react'
+import { SubmissionsTable } from 'components/results/ResultsTable'
+import React, { useState } from 'react'
+import { UnlockPlanInfo } from 'components/shared/Info'
+import { LogsModal } from './LogsModal'
+import { useTypebot } from 'contexts/TypebotContext'
+import { Plan } from 'db'
+import { useResults } from 'contexts/ResultsProvider'
+import { ResultModal } from './ResultModal'
+
+export const ResultsContent = () => {
+  const {
+    flatResults: results,
+    fetchMore,
+    hasMore,
+    resultHeader,
+    totalHiddenResults,
+    tableData,
+  } = useResults()
+  const { typebot, publishedTypebot } = useTypebot()
+  const [inspectingLogsResultId, setInspectingLogsResultId] = useState<
+    string | null
+  >(null)
+  const [expandedResultIndex, setExpandedResultIndex] = useState<number | null>(
+    null
+  )
+
+  const handleLogsModalClose = () => setInspectingLogsResultId(null)
+
+  const handleResultModalClose = () => setExpandedResultIndex(null)
+
+  const handleLogOpenIndex = (index: number) => () => {
+    if (!results) return
+    setInspectingLogsResultId(results[index].id)
+  }
+
+  const handleResultExpandIndex = (index: number) => () =>
+    setExpandedResultIndex(index)
+
+  return (
+    <Stack
+      pb="28"
+      px={['4', '0']}
+      spacing="4"
+      maxW="1600px"
+      overflow="scroll"
+      w="full"
+    >
+      {totalHiddenResults && (
+        <UnlockPlanInfo
+          buttonLabel={`Unlock ${totalHiddenResults} results`}
+          contentLabel="You are seeing complete submissions only."
+          plan={Plan.PRO}
+        />
+      )}
+      {publishedTypebot && (
+        <LogsModal
+          typebotId={publishedTypebot?.typebotId}
+          resultId={inspectingLogsResultId}
+          onClose={handleLogsModalClose}
+        />
+      )}
+      <ResultModal
+        resultIdx={expandedResultIndex}
+        onClose={handleResultModalClose}
+      />
+
+      {typebot && (
+        <SubmissionsTable
+          preferences={typebot.resultsTablePreferences}
+          resultHeader={resultHeader}
+          data={tableData}
+          onScrollToBottom={fetchMore}
+          hasMore={hasMore}
+          onLogOpenIndex={handleLogOpenIndex}
+          onResultExpandIndex={handleResultExpandIndex}
+        />
+      )}
+    </Stack>
+  )
+}