From 3a47a0fcbda4d850509ab304f15d51f3cc17e5f2 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 16 Nov 2023 16:41:02 +0100
Subject: [PATCH] :bug: (editor) Fix AB test items not connectable

---
 .../blocks/logic/abTest/components/AbTestNodeBody.tsx    | 5 ++++-
 .../graph/components/endpoints/BlockSourceEndpoint.tsx   | 2 +-
 .../features/graph/components/nodes/block/BlockNode.tsx  | 9 ++++++++-
 .../graph/components/nodes/block/BlockNodeContent.tsx    | 9 +++++++--
 .../graph/components/nodes/block/BlockNodeOverlay.tsx    | 2 +-
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/apps/builder/src/features/blocks/logic/abTest/components/AbTestNodeBody.tsx b/apps/builder/src/features/blocks/logic/abTest/components/AbTestNodeBody.tsx
index aa4326ae2..2fee2676c 100644
--- a/apps/builder/src/features/blocks/logic/abTest/components/AbTestNodeBody.tsx
+++ b/apps/builder/src/features/blocks/logic/abTest/components/AbTestNodeBody.tsx
@@ -6,9 +6,10 @@ import { defaultAbTestOptions } from '@typebot.io/schemas/features/blocks/logic/
 
 type Props = {
   block: AbTestBlock
+  groupId: string
 }
 
-export const AbTestNodeBody = ({ block }: Props) => {
+export const AbTestNodeBody = ({ block, groupId }: Props) => {
   const borderColor = useColorModeValue('gray.200', 'gray.700')
   const bg = useColorModeValue('white', undefined)
 
@@ -33,6 +34,7 @@ export const AbTestNodeBody = ({ block }: Props) => {
             blockId: block.id,
             itemId: block.items[0].id,
           }}
+          groupId={groupId}
           pos="absolute"
           right="-49px"
           pointerEvents="all"
@@ -59,6 +61,7 @@ export const AbTestNodeBody = ({ block }: Props) => {
             blockId: block.id,
             itemId: block.items[1].id,
           }}
+          groupId={groupId}
           pos="absolute"
           right="-49px"
           pointerEvents="all"
diff --git a/apps/builder/src/features/graph/components/endpoints/BlockSourceEndpoint.tsx b/apps/builder/src/features/graph/components/endpoints/BlockSourceEndpoint.tsx
index 1d912b8c2..967c2fd38 100644
--- a/apps/builder/src/features/graph/components/endpoints/BlockSourceEndpoint.tsx
+++ b/apps/builder/src/features/graph/components/endpoints/BlockSourceEndpoint.tsx
@@ -25,7 +25,7 @@ export const BlockSourceEndpoint = ({
   ...props
 }: BoxProps & {
   source: BlockSource
-  groupId?: string
+  groupId: string
   isHidden?: boolean
 }) => {
   const id = source.itemId ?? source.blockId
diff --git a/apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx b/apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx
index 3de417884..45bff6ef3 100644
--- a/apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx
+++ b/apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx
@@ -239,7 +239,13 @@ export const BlockNode = ({
                   mt="1"
                   data-testid={`${block.id}-icon`}
                 />
-                <BlockNodeContent block={block} indices={indices} />
+                {typebot?.groups[indices.groupIndex].id && (
+                  <BlockNodeContent
+                    block={block}
+                    indices={indices}
+                    groupId={typebot.groups[indices.groupIndex].id}
+                  />
+                )}
                 {(hasIcomingEdge || isDefined(connectingIds)) && (
                   <TargetEndpoint
                     pos="absolute"
@@ -252,6 +258,7 @@ export const BlockNode = ({
                 {(isConnectable ||
                   (pathname.endsWith('analytics') && isInputBlock(block))) &&
                   hasDefaultConnector(block) &&
+                  groupId &&
                   block.type !== LogicBlockType.JUMP && (
                     <BlockSourceEndpoint
                       source={{
diff --git a/apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx b/apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx
index 28e24dc10..c8a64322d 100644
--- a/apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx
+++ b/apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx
@@ -41,9 +41,14 @@ import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integr
 
 type Props = {
   block: BlockV6
+  groupId: string
   indices: BlockIndices
 }
-export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
+export const BlockNodeContent = ({
+  block,
+  indices,
+  groupId,
+}: Props): JSX.Element => {
   switch (block.type) {
     case BubbleBlockType.TEXT: {
       return <TextBubbleContent block={block} />
@@ -109,7 +114,7 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
       return <JumpNodeBody options={block.options} />
     }
     case LogicBlockType.AB_TEST: {
-      return <AbTestNodeBody block={block} />
+      return <AbTestNodeBody block={block} groupId={groupId} />
     }
     case LogicBlockType.TYPEBOT_LINK:
       return <TypebotLinkNode block={block} />
diff --git a/apps/builder/src/features/graph/components/nodes/block/BlockNodeOverlay.tsx b/apps/builder/src/features/graph/components/nodes/block/BlockNodeOverlay.tsx
index 7050930ca..8c954f489 100644
--- a/apps/builder/src/features/graph/components/nodes/block/BlockNodeOverlay.tsx
+++ b/apps/builder/src/features/graph/components/nodes/block/BlockNodeOverlay.tsx
@@ -22,7 +22,7 @@ export const BlockNodeOverlay = ({
       {...props}
     >
       <BlockIcon type={block.type} />
-      <BlockNodeContent block={block} indices={indices} />
+      <BlockNodeContent block={block} indices={indices} groupId="" />
     </HStack>
   )
 }