feat(apollo-react): some fixes

Author: SreedharAvvari

packages/apollo-react/src/canvas/components/AddNodePanel/AddNodeManager.test.tsx

@@ -195,6 +195,33 @@ describe('AddNodeManager', () => {
     );
   });
 
+  it('preserves parented preview placement when materializing the selected node', () => {
+    mockNodes = [
+      existingNode,
+      {
+        ...previewNode,
+        parentId: 'loop-1',
+        extent: 'parent',
+      },
+    ];
+    mockPreviewNodeReturn.mockReturnValue({
+      previewNode: mockNodes[1],
+      previewNodeConnectionInfo: connectionInfo,
+    });
+
+    render(<AddNodeManager customPanel={TestPanel} />);
+
+    screen.getByTestId('select-node').click();
+
+    const addedNode = mockNodes.find((n) => n.id === 'test-node-1234567890');
+    expect(addedNode).toMatchObject({
+      id: 'test-node-1234567890',
+      parentId: 'loop-1',
+      extent: 'parent',
+      position: { x: 100, y: 200 },
+    });
+  });
+
   it('applies onBeforeNodeAdded transforms when node is added as target', () => {
     // Override shared setup for this test: existing node is the source
     mockEdges = [

packages/apollo-react/src/canvas/components/ButtonHandle/ButtonHandle.styles.tsx

@@ -167,17 +167,25 @@ export const StyledNotch = styled.div<{
 
 export const StyledHandle = (
   props: HandleProps & {
+    $visualPosition?: Position;
     $positionPercent: number;
     $total: number;
     $visible: boolean;
     $customPositionAndOffsets?: HandleConfigurationSpecificPosition;
   }
 ) => {
-  const { $total, $visible, $positionPercent, $customPositionAndOffsets, ...handleProps } = props;
-  const { position } = handleProps;
+  const {
+    $total,
+    $visible,
+    $positionPercent,
+    $customPositionAndOffsets,
+    $visualPosition,
+    ...handleProps
+  } = props;
+  const visualPosition = $visualPosition ?? handleProps.position;
 
   const { width, height, top, bottom, left, right, transform } = useButtonHandleSizeAndPosition({
-    position,
+    position: visualPosition,
     positionPercent: $positionPercent,
     numHandles: $total,
     customPositionAndOffsets: $customPositionAndOffsets,

packages/apollo-react/src/canvas/components/ButtonHandle/ButtonHandle.test.tsx

@@ -118,6 +118,51 @@ describe('ButtonHandles', () => {
       expect.objectContaining({
         handleId: 'handle1',
         nodeId: 'test-node',
+        position: Position.Right,
+      })
+    );
+  });
+
+  it('uses visual positioning for layout and connectionPosition for emitted flow direction', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    const handles: ButtonHandleConfig[] = [
+      {
+        id: 'handle1',
+        type: 'source',
+        handleType: 'output',
+        showButton: true,
+        onAction: handleClick,
+      },
+    ];
+
+    render(
+      <ButtonHandles
+        handles={handles}
+        nodeId="test-node"
+        position={Position.Left}
+        connectionPosition={Position.Right}
+        selected={true}
+        visible={true}
+      />
+    );
+
+    const handle = screen.getByTestId('handle');
+    expect(handle).toHaveAttribute('position', Position.Right);
+    expect(handle).toHaveStyle({ left: '0' });
+
+    const animatedButton = handle.querySelector('.nodrag.nopan > *');
+    if (!animatedButton) {
+      throw new Error('Animated button not found');
+    }
+
+    await user.click(animatedButton as Element);
+
+    expect(handleClick).toHaveBeenCalledWith(
+      expect.objectContaining({
+        handleId: 'handle1',
+        nodeId: 'test-node',
+        position: Position.Right,
       })
     );
   });

packages/apollo-react/src/canvas/components/ButtonHandle/ButtonHandle.tsx

@@ -58,6 +58,7 @@ type ButtonHandleProps = {
   nodeId: string;
   type: 'source' | 'target';
   position: Position;
+  connectionPosition?: Position;
   handleType: 'artifact' | 'input' | 'output';
   label?: string;
   labelIcon?: React.ReactNode;
@@ -80,6 +81,7 @@ const ButtonHandleBase = ({
   nodeId,
   type,
   position,
+  connectionPosition = position,
   handleType,
   label,
   labelIcon,
@@ -124,7 +126,7 @@ const ButtonHandleBase = ({
         handleId: id,
         nodeId,
         handleType,
-        position,
+        position: connectionPosition,
         originalEvent: event,
       };
 
@@ -136,11 +138,11 @@ const ButtonHandleBase = ({
         handleId: id,
         nodeId,
         handleType,
-        position,
+        position: connectionPosition,
         // timestamp: Date.now(), // Optional - uncomment if you need timing info
       });
     },
-    [id, nodeId, handleType, position, onAction]
+    [connectionPosition, id, nodeId, handleType, onAction]
   );
 
   const markAsHovered = useCallback(() => setIsHovered(true), []);
@@ -153,8 +155,9 @@ const ButtonHandleBase = ({
   return (
     <StyledHandle
       type={type}
-      position={position}
+      position={connectionPosition}
       id={id}
+      $visualPosition={position}
       $positionPercent={positionPercent}
       $total={total}
       $visible={visible}
@@ -237,6 +240,7 @@ const ButtonHandlesBase = ({
   nodeId,
   handles,
   position,
+  connectionPosition = position,
   selected = false,
   visible = true,
   showAddButton = true,
@@ -249,6 +253,7 @@ const ButtonHandlesBase = ({
   nodeId: string;
   handles: ButtonHandleConfig[];
   position: Position;
+  connectionPosition?: Position;
   selected?: boolean;
   visible?: boolean;
   showAddButton?: boolean;
@@ -288,6 +293,7 @@ const ButtonHandlesBase = ({
           nodeId={nodeId}
           type={handle.type}
           position={position}
+          connectionPosition={connectionPosition}
           handleType={handle.handleType}
           label={handle.label}
           labelIcon={handle.labelIcon}

packages/apollo-react/src/canvas/components/Edges/SequenceEdge.tsx

@@ -1,6 +1,6 @@
 import { type EdgeProps, Position } from '@uipath/apollo-react/canvas/xyflow/react';
 import { memo, useRef, useState } from 'react';
-import { PREVIEW_EDGE_ID } from '../../constants';
+import { PREVIEW_EDGE_ID, PREVIEW_NODE_ID } from '../../constants';
 import { useEdgeExecutionState, useEdgePath, useElementValidationStatus } from '../../hooks';
 import type { NodeExecutionStateWithDebug } from '../../types/execution';
 import { useBaseCanvasMode } from '../BaseCanvas/BaseCanvasModeProvider';
@@ -71,7 +71,7 @@ export const SequenceEdge = memo(function SequenceEdge({
 
   const { mode } = useBaseCanvasMode();
   const isReadOnly = mode === 'readonly';
-  const isPreviewEdge = id === PREVIEW_EDGE_ID;
+  const isPreviewEdge = id === PREVIEW_EDGE_ID || source === PREVIEW_NODE_ID || target === PREVIEW_NODE_ID;
 
   const executionStatus = useEdgeExecutionState(id, target);
   const { validationStatus } = useElementValidationStatus(id) ?? { validationStatus: undefined };

packages/apollo-react/src/canvas/components/LoopNode/LoopNode.helpers.test.ts

@@ -10,21 +10,21 @@ describe('LoopNode.helpers', () => {
     it('builds groups for populated walls and insets inner groups', () => {
       const groups = buildWallHandleGroups(
         {
-          left: [{ id: 'start', type: 'target', handleType: 'input' }],
-          right: [{ id: 'continue', type: 'source', handleType: 'output' }],
+          left: [{ id: 'start', type: 'source', handleType: 'output' }],
+          right: [{ id: 'continue', type: 'target', handleType: 'input' }],
         },
         'inner'
       );
 
       expect(groups).toEqual([
         {
           position: 'left',
-          handles: [{ id: 'start', type: 'target', handleType: 'input' }],
+          handles: [{ id: 'start', type: 'source', handleType: 'output' }],
           customPositionAndOffsets: { left: 16 },
         },
         {
           position: 'right',
-          handles: [{ id: 'continue', type: 'source', handleType: 'output' }],
+          handles: [{ id: 'continue', type: 'target', handleType: 'input' }],
           customPositionAndOffsets: { right: 16 },
         },
       ]);