🐛 (editor) Fix condition item drag and drop

apps/builder/src/features/editor/editor.spec.ts

@@ -104,9 +104,20 @@ test('Drag and drop blocks and items should work', async ({ page }) => {
     'Item 3'
   )
   await page.dragAndDrop('text=Item 3', 'text=Item 2-3')
-  await expect(page.locator('[data-testid="item"] >> nth=6')).toHaveText(
+  await expect(page.locator('[data-testid="item"] >> nth=7')).toHaveText(
     'Item 3'
   )
+
+  await expect(page.locator('[data-testid="item"] >> nth=2')).toHaveText(
+    'Name=John'
+  )
+  await page.dragAndDrop(
+    '[data-testid="item"] >> nth=2',
+    '[data-testid="item"] >> nth=3'
+  )
+  await expect(page.locator('[data-testid="item"] >> nth=3')).toHaveText(
+    'Name=John'
+  )
 })
 test('Undo / Redo and Zoom buttons should work', async ({ page }) => {
   const typebotId = cuid()

apps/builder/src/features/graph/components/Nodes/ItemNode/ItemNodeOverlay.tsx

@@ -1,26 +0,0 @@
-import { Flex, FlexProps, useColorModeValue } from '@chakra-ui/react'
-import { Item } from 'models'
-import React, { ReactNode } from 'react'
-
-type Props = {
-  item: Item
-} & FlexProps
-
-export const ItemNodeOverlay = ({ item, ...props }: Props) => {
-  return (
-    <Flex
-      px="4"
-      py="2"
-      rounded="md"
-      bgColor={useColorModeValue('white', 'gray.850')}
-      borderWidth="1px"
-      borderColor={useColorModeValue('gray.200', 'gray.700')}
-      w="212px"
-      pointerEvents="none"
-      shadow="lg"
-      {...props}
-    >
-      {(item.content ?? 'Click to edit') as ReactNode}
-    </Flex>
-  )
-}

apps/builder/src/features/graph/components/Nodes/ItemNode/ItemNodesList.tsx

@@ -17,7 +17,6 @@ import { BlockIndices, BlockWithItems, LogicBlockType, Item } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
 import { ItemNode } from './ItemNode'
 import { SourceEndpoint } from '../../Endpoints'
-import { ItemNodeOverlay } from './ItemNodeOverlay'
 import { PlaceholderNode } from '../PlaceholderNode'
 
 type Props = {
@@ -164,7 +163,11 @@ export const ItemNodesList = ({
             w="220px"
             transformOrigin="0 0 0"
           >
-            <ItemNodeOverlay item={draggedItem} />
+            <ItemNode
+              item={draggedItem}
+              indices={{ groupIndex, blockIndex, itemIndex: 0 }}
+              connectionDisabled
+            />
           </Flex>
         </Portal>
       )}