🐛 (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>
       )}

apps/builder/src/test/assets/typebots/editor/buttonsDnd.json

@@ -1,43 +1,42 @@
 {
-  "id": "ckz84wbbj2095no1ali9kzfz4",
+  "id": "clc0ad9ah000t3b6szwnuqnzk",
-  "createdAt": "2022-02-04T08:16:59.215Z",
+  "createdAt": "2022-12-23T09:04:08.777Z",
-  "updatedAt": "2022-02-04T08:16:59.215Z",
+  "updatedAt": "2022-12-23T09:04:36.750Z",
-  "name": "My typebot",
+  "icon": null,
+  "name": "My typebot copy",
   "publishedTypebotId": null,
   "folderId": null,
   "groups": [
     {
-      "id": "de8iZbvNxMxyhvLrnPBpt8",
+      "id": "clc0ad9ah000m3b6s82zpun2g",
+      "title": "Start",
       "blocks": [
         {
           "id": "hqgG9FuPDWrkrdHXFnSy9G",
           "type": "start",
           "label": "Start",
-          "groupId": "de8iZbvNxMxyhvLrnPBpt8",
+          "groupId": "clc0ad9ah000m3b6s82zpun2g",
-          "outgoingEdgeId": "41aa19ih9WQQQEurwdjmVJ"
+          "outgoingEdgeId": "clc0ad9ah000q3b6szdobrx23"
         }
       ],
-      "title": "Start",
       "graphCoordinates": { "x": 0, "y": 0 }
     },
     {
-      "id": "vmDTsAC7aLeqanVVtJ9yQx",
+      "id": "clc0ad9ah000n3b6sw5w6h1mp",
-      "graphCoordinates": { "x": 85, "y": 220 },
       "title": "Group #1",
       "blocks": [
         {
           "id": "sqUp2x8SXx8JBC8a9XuKGL9",
-          "groupId": "vmDTsAC7aLeqanVVtJ9yQx",
           "type": "text",
           "content": {
             "html": "<div>Hello!</div>",
             "richText": [{ "type": "p", "children": [{ "text": "Hello!" }] }],
             "plainText": "Hello!"
-          }
+          },
+          "groupId": "clc0ad9ah000n3b6sw5w6h1mp"
         },
         {
           "id": "suRXuWyuJ7kpsdLUYKA6VqM",
-          "groupId": "vmDTsAC7aLeqanVVtJ9yQx",
           "type": "text",
           "content": {
             "html": "<div>How are you?</div>",
@@ -45,119 +44,147 @@
               { "type": "p", "children": [{ "text": "How are you?" }] }
             ],
             "plainText": "How are you?"
-          }
+          },
+          "groupId": "clc0ad9ah000n3b6sw5w6h1mp"
         },
         {
           "id": "ssxDdzVUkgZYPPoPnQK4dCo",
-          "groupId": "vmDTsAC7aLeqanVVtJ9yQx",
           "type": "choice input",
-          "options": { "buttonLabel": "Send", "isMultipleChoice": false },
           "items": [
             {
               "id": "e7dy3bH2py8fFcak2jUJjr",
-              "blockId": "ssxDdzVUkgZYPPoPnQK4dCo",
               "type": 0,
+              "blockId": "ssxDdzVUkgZYPPoPnQK4dCo",
               "content": "Item 1",
-              "outgoingEdgeId": "8Ty7noiTJAP3jtaWXLsNwy"
+              "outgoingEdgeId": "clc0ad9ah000r3b6sz3jc1bym"
             },
             {
-              "blockId": "ssxDdzVUkgZYPPoPnQK4dCo",
-              "type": 0,
               "id": "mBJkTavGHAygmPTjiLMQyC",
+              "type": 0,
+              "blockId": "ssxDdzVUkgZYPPoPnQK4dCo",
               "content": "Item 2"
             },
             {
-              "blockId": "ssxDdzVUkgZYPPoPnQK4dCo",
-              "type": 0,
               "id": "vVfToFyNLyGgRYyB8jYLkn",
+              "type": 0,
+              "blockId": "ssxDdzVUkgZYPPoPnQK4dCo",
               "content": "Item 3",
-              "outgoingEdgeId": "tprSzPvt6A5kTFf7iUNaeR"
+              "outgoingEdgeId": "clc0ad9ah000s3b6szo9q2p64"
             }
-          ]
+          ],
+          "groupId": "clc0ad9ah000n3b6sw5w6h1mp",
+          "options": { "buttonLabel": "Send", "isMultipleChoice": false }
         }
-      ]
+      ],
+      "graphCoordinates": { "x": 85, "y": 220 }
     },
     {
-      "id": "hB4p8rwA1dUSq9A5ctTLqh",
+      "id": "clc0ad9ah000o3b6smmpalmfh",
-      "graphCoordinates": { "x": 513, "y": 152 },
       "title": "Group #2",
       "blocks": [
         {
           "id": "suHw7fjcMD9KjDRpbB413jn",
-          "groupId": "hB4p8rwA1dUSq9A5ctTLqh",
           "type": "Condition",
           "items": [
             {
               "id": "jvGN6sfftqJgfYYVRUYMuJ",
-              "blockId": "suHw7fjcMD9KjDRpbB413jn",
               "type": 1,
-              "content": { "comparisons": [], "logicalOperator": "AND" }
+              "blockId": "suHw7fjcMD9KjDRpbB413jn",
+              "content": {
+                "comparisons": [
+                  {
+                    "id": "clc0add0v00103b6s86lsrsny",
+                    "variableId": "vclc0adfvq00113b6s506hh49e",
+                    "comparisonOperator": "Equal to",
+                    "value": "John"
                   }
-          ]
+                ],
+                "logicalOperator": "AND"
               }
-      ]
             },
             {
-      "id": "t7g44CwVvCg6mN16KHVAWv",
+              "id": "clc0adm4t00123b6sf8o6dnvb",
-      "graphCoordinates": { "x": 509, "y": 489 },
+              "content": {
+                "comparisons": [
+                  {
+                    "id": "clc0admrk00133b6spgw4k125",
+                    "variableId": "vclc0adfvq00113b6s506hh49e",
+                    "comparisonOperator": "Contains",
+                    "value": "Yo"
+                  }
+                ],
+                "logicalOperator": "AND"
+              },
+              "blockId": "suHw7fjcMD9KjDRpbB413jn",
+              "type": 1
+            }
+          ],
+          "groupId": "clc0ad9ah000o3b6smmpalmfh"
+        }
+      ],
+      "graphCoordinates": { "x": 514.84375, "y": 135.50390625 }
+    },
+    {
+      "id": "clc0ad9ah000p3b6smiscty8y",
       "title": "Group #3",
       "blocks": [
         {
           "id": "suHztCMVss4kTAtgShANxjU",
-          "groupId": "t7g44CwVvCg6mN16KHVAWv",
           "type": "choice input",
-          "options": { "buttonLabel": "Send", "isMultipleChoice": false },
           "items": [
             {
               "id": "buQjAL2M3cBUVK2ofnxKW3",
-              "blockId": "suHztCMVss4kTAtgShANxjU",
               "type": 0,
+              "blockId": "suHztCMVss4kTAtgShANxjU",
               "content": "Item 2-1"
             },
             {
-              "blockId": "suHztCMVss4kTAtgShANxjU",
-              "type": 0,
               "id": "4gQe9XK1vyQUHXVzFErW4t",
+              "type": 0,
+              "blockId": "suHztCMVss4kTAtgShANxjU",
               "content": "Item 2-2"
             },
             {
-              "blockId": "suHztCMVss4kTAtgShANxjU",
-              "type": 0,
               "id": "uttagH8w5XWzibkKsW23oi",
+              "type": 0,
+              "blockId": "suHztCMVss4kTAtgShANxjU",
               "content": "Item 2-3"
             }
-          ]
+          ],
-        }
+          "groupId": "clc0ad9ah000p3b6smiscty8y",
-      ]
+          "options": { "buttonLabel": "Send", "isMultipleChoice": false }
         }
       ],
-  "variables": [],
+      "graphCoordinates": { "x": 509, "y": 489 }
+    }
+  ],
+  "variables": [{ "id": "vclc0adfvq00113b6s506hh49e", "name": "Name" }],
   "edges": [
     {
+      "id": "clc0ad9ah000q3b6szdobrx23",
+      "to": { "groupId": "clc0ad9ah000n3b6sw5w6h1mp" },
       "from": {
-        "groupId": "de8iZbvNxMxyhvLrnPBpt8",
+        "blockId": "hqgG9FuPDWrkrdHXFnSy9G",
-        "blockId": "hqgG9FuPDWrkrdHXFnSy9G"
+        "groupId": "clc0ad9ah000m3b6s82zpun2g"
-      },
+      }
-      "to": { "groupId": "vmDTsAC7aLeqanVVtJ9yQx" },
-      "id": "41aa19ih9WQQQEurwdjmVJ"
     },
     {
+      "id": "clc0ad9ah000r3b6sz3jc1bym",
+      "to": { "groupId": "clc0ad9ah000o3b6smmpalmfh" },
       "from": {
-        "groupId": "vmDTsAC7aLeqanVVtJ9yQx",
+        "itemId": "e7dy3bH2py8fFcak2jUJjr",
         "blockId": "ssxDdzVUkgZYPPoPnQK4dCo",
-        "itemId": "e7dy3bH2py8fFcak2jUJjr"
+        "groupId": "clc0ad9ah000n3b6sw5w6h1mp"
-      },
+      }
-      "to": { "groupId": "hB4p8rwA1dUSq9A5ctTLqh" },
-      "id": "8Ty7noiTJAP3jtaWXLsNwy"
     },
     {
+      "id": "clc0ad9ah000s3b6szo9q2p64",
+      "to": { "groupId": "clc0ad9ah000p3b6smiscty8y" },
       "from": {
-        "groupId": "vmDTsAC7aLeqanVVtJ9yQx",
+        "itemId": "vVfToFyNLyGgRYyB8jYLkn",
         "blockId": "ssxDdzVUkgZYPPoPnQK4dCo",
-        "itemId": "vVfToFyNLyGgRYyB8jYLkn"
+        "groupId": "clc0ad9ah000n3b6sw5w6h1mp"
-      },
+      }
-      "to": { "groupId": "t7g44CwVvCg6mN16KHVAWv" },
-      "id": "tprSzPvt6A5kTFf7iUNaeR"
     }
   ],
   "theme": {
@@ -168,6 +195,10 @@
         "placeholderColor": "#9095A0"
       },
       "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostAvatar": {
+        "url": "https://avatars.githubusercontent.com/u/16015833?v=4",
+        "isEnabled": true
+      },
       "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
       "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
     },
@@ -180,5 +211,10 @@
     },
     "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
   },
-  "publicId": null
+  "publicId": null,
+  "customDomain": null,
+  "workspaceId": "proWorkspace",
+  "resultsTablePreferences": null,
+  "isArchived": false,
+  "isClosed": false
 }