chore(editor): ♻️ Revert tables to arrays

Yet another refacto. I improved many many mechanisms on this one including dnd. It is now end 2 end tested 🎉

apps/builder/components/editor/BoardMenuButton.tsx

@@ -6,6 +6,7 @@ import {
   MenuItem,
   MenuList,
 } from '@chakra-ui/react'
+import assert from 'assert'
 import { DownloadIcon, MoreVerticalIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext'
 import React, { useState } from 'react'
@@ -16,7 +17,7 @@ export const BoardMenuButton = (props: MenuButtonProps) => {
   const [isDownloading, setIsDownloading] = useState(false)
 
   const downloadFlow = () => {
-    if (!typebot) return
+    assert(typebot)
     setIsDownloading(true)
     const data =
       'data:application/json;charset=utf-8,' +
@@ -39,6 +40,7 @@ export const BoardMenuButton = (props: MenuButtonProps) => {
         colorScheme="blue"
         icon={<MoreVerticalIcon transform={'rotate(90deg)'} />}
         isLoading={isDownloading}
+        size="sm"
         {...props}
       />
       <MenuList>

apps/builder/components/editor/StepsSideBar/StepCard.tsx

@@ -1,6 +1,6 @@
 import { Flex, HStack, StackProps, Text } from '@chakra-ui/react'
 import { StepType, DraggableStepType } from 'models'
-import { useStepDnd } from 'contexts/StepDndContext'
+import { useStepDnd } from 'contexts/GraphDndContext'
 import React, { useEffect, useState } from 'react'
 import { StepIcon } from './StepIcon'
 import { StepTypeLabel } from './StepTypeLabel'

apps/builder/components/editor/StepsSideBar/StepSideBar.tsx

@@ -16,7 +16,7 @@ import {
   IntegrationStepType,
   LogicStepType,
 } from 'models'
-import { useStepDnd } from 'contexts/StepDndContext'
+import { useStepDnd } from 'contexts/GraphDndContext'
 import React, { useState } from 'react'
 import { StepCard, StepCardOverlay } from './StepCard'
 import { LockedIcon, UnlockedIcon } from 'assets/icons'

apps/builder/components/editor/preview/PreviewDrawer.tsx

@@ -19,7 +19,7 @@ import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 export const PreviewDrawer = () => {
   const { typebot } = useTypebot()
   const { setRightPanel } = useEditor()
-  const { setPreviewingEdgeId } = useGraph()
+  const { setPreviewingEdge } = useGraph()
   const [isResizing, setIsResizing] = useState(false)
   const [width, setWidth] = useState(500)
   const [isResizeHandleVisible, setIsResizeHandleVisible] = useState(false)
@@ -45,10 +45,13 @@ export const PreviewDrawer = () => {
   }
   useEventListener('mouseup', handleMouseUp)
 
-  const handleNewBlockVisible = (edgeId: string) => setPreviewingEdgeId(edgeId)
-
   const handleRestartClick = () => setRestartKey((key) => key + 1)
 
+  const handleCloseClick = () => {
+    setPreviewingEdge(undefined)
+    setRightPanel(undefined)
+  }
+
   return (
     <Flex
       pos="absolute"
@@ -75,7 +78,7 @@ export const PreviewDrawer = () => {
       <VStack w="full" spacing={4}>
         <Flex justifyContent={'space-between'} w="full">
           <Button onClick={handleRestartClick}>Restart</Button>
-          <CloseButton onClick={() => setRightPanel(undefined)} />
+          <CloseButton onClick={handleCloseClick} />
         </Flex>
 
         {publicTypebot && (
@@ -89,7 +92,7 @@ export const PreviewDrawer = () => {
           >
             <TypebotViewer
               typebot={publicTypebot}
-              onNewBlockVisible={handleNewBlockVisible}
+              onNewBlockVisible={setPreviewingEdge}
             />
           </Flex>
         )}