feat(results): ✨ Add logs in results

apps/builder/layouts/results/LogsModal.tsx

@@ -0,0 +1,99 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  Stack,
+  Spinner,
+  ModalFooter,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  HStack,
+  AccordionIcon,
+  AccordionPanel,
+  Text,
+  Tag,
+} from '@chakra-ui/react'
+import { Log } from 'db'
+import { useLogs } from 'services/typebots/logs'
+import { isDefined } from 'utils'
+
+export const LogsModal = ({
+  resultId,
+  onClose,
+}: {
+  resultId?: string
+  onClose: () => void
+}) => {
+  const { isLoading, logs } = useLogs(resultId)
+  return (
+    <Modal isOpen={isDefined(resultId)} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Logs</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody as={Stack}>
+          {logs?.map((log, idx) => (
+            <LogCard key={idx} log={log} />
+          ))}
+          {isLoading && <Spinner />}
+        </ModalBody>
+
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}
+
+const LogCard = ({ log }: { log: Log }) => {
+  if (log.details)
+    return (
+      <Accordion allowToggle>
+        <AccordionItem style={{ borderBottomWidth: 0, borderWidth: 0 }}>
+          <AccordionButton
+            as={HStack}
+            p="4"
+            cursor="pointer"
+            justifyContent="space-between"
+            borderRadius="md"
+          >
+            <HStack>
+              <StatusTag status={log.status} />
+              <Text>{log.description}</Text>
+            </HStack>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel
+            as="pre"
+            overflow="scroll"
+            borderWidth="1px"
+            borderRadius="md"
+          >
+            {log.details}
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    )
+  return (
+    <HStack p="4">
+      <StatusTag status={log.status} />
+      <Text>{log.description}</Text>
+    </HStack>
+  )
+}
+
+const StatusTag = ({ status }: { status: string }) => {
+  switch (status) {
+    case 'error':
+      return <Tag colorScheme={'red'}>Fail</Tag>
+    case 'warning':
+      return <Tag colorScheme={'orange'}>Warn</Tag>
+    case 'info':
+      return <Tag colorScheme={'blue'}>Info</Tag>
+    default:
+      return <Tag colorScheme={'green'}>Ok</Tag>
+  }
+}

apps/builder/layouts/results/SubmissionContent.tsx

@@ -11,6 +11,7 @@ import {
 } from 'services/typebots'
 import { unparse } from 'papaparse'
 import { UnlockProPlanInfo } from 'components/shared/Info'
+import { LogsModal } from './LogsModal'
 
 type Props = {
   typebotId: string
@@ -27,6 +28,7 @@ export const SubmissionsContent = ({
   const [selectedIndices, setSelectedIndices] = useState<number[]>([])
   const [isDeleteLoading, setIsDeleteLoading] = useState(false)
   const [isExportLoading, setIsExportLoading] = useState(false)
+  const [inspectingLogsResultId, setInspectingLogsResultId] = useState<string>()
 
   const toast = useToast({
     position: 'top-right',
@@ -109,6 +111,13 @@ export const SubmissionsContent = ({
     [results]
   )
 
+  const handleLogsModalClose = () => setInspectingLogsResultId(undefined)
+
+  const handleLogOpenIndex = (index: number) => () => {
+    if (!results) return
+    setInspectingLogsResultId(results[index].id)
+  }
+
   return (
     <Stack maxW="1200px" w="full" pb="28">
       {totalHiddenResults && (
@@ -117,6 +126,10 @@ export const SubmissionsContent = ({
           contentLabel="You are seeing complete submissions only."
         />
       )}
+      <LogsModal
+        resultId={inspectingLogsResultId}
+        onClose={handleLogsModalClose}
+      />
       <Flex w="full" justifyContent="flex-end">
         <ResultsActionButtons
           isDeleteLoading={isDeleteLoading}
@@ -132,6 +145,7 @@ export const SubmissionsContent = ({
         onNewSelection={handleNewSelection}
         onScrollToBottom={handleScrolledToBottom}
         hasMore={hasMore}
+        onLogOpenIndex={handleLogOpenIndex}
       />
     </Stack>
   )