feat(apollo-wind): add DAP component patterns page

packages/apollo-react/src/canvas/components/Edges/CanvasEdge.test.tsx

@@ -0,0 +1,142 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Position } from '@uipath/apollo-react/canvas/xyflow/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { BaseCanvasModeProvider } from '../BaseCanvas/BaseCanvasModeProvider';
+import { CanvasEdge } from './CanvasEdge';
+import type { CanvasEdgeProps } from './shared/types';
+
+const { addSelectedEdges, edgeLookup, getState, setState, unselectNodesAndEdges } = vi.hoisted(
+  () => ({
+    addSelectedEdges: vi.fn(),
+    edgeLookup: new Map(),
+    getState: vi.fn(),
+    setState: vi.fn(),
+    unselectNodesAndEdges: vi.fn(),
+  })
+);
+
+vi.mock('@uipath/apollo-react/canvas/xyflow/react', async () => {
+  const actual = await vi.importActual('@uipath/apollo-react/canvas/xyflow/react');
+  return { ...actual, useStoreApi: () => ({ getState, setState }) };
+});
+
+vi.mock('./shared/hooks', () => ({
+  useEdgeGeometry: () => ({
+    arrow: { angle: 0, offset: 0 },
+    edgePath: 'M 0 0 L 100 0',
+    labelPoint: { x: 50, y: 0 },
+    pathPoints: [],
+    segments: [],
+  }),
+  useExecutionEdge: () => ({ animation: null, statusColor: undefined }),
+  useNodeDragRebalance: ({ waypoints }: { waypoints: unknown[] }) => waypoints,
+  useWaypointEditor: () => ({
+    isDragging: false,
+    segmentHandlers: {},
+    waypointHandlers: {},
+  }),
+}));
+
+vi.mock('../Toolbar', () => ({
+  EdgeToolbar: () => null,
+  useEdgeToolbarState: () => ({ showToolbar: false }),
+}));
+
+vi.mock('./shared/primitives', () => ({
+  EdgeArrow: () => null,
+  EdgeLabel: ({ text, onClick }: { text: string; onClick?: () => void }) => (
+    <button type="button" onClick={onClick}>
+      {text}
+    </button>
+  ),
+  EdgePath: () => null,
+  SegmentDragHandle: () => null,
+  WaypointHandle: () => null,
+}));
+
+const baseProps = {
+  id: 'e1',
+  source: 'a',
+  target: 'b',
+  sourcePosition: Position.Right,
+  targetPosition: Position.Left,
+  sourceX: 0,
+  sourceY: 0,
+  targetX: 100,
+  targetY: 0,
+  data: { label: 'Alpha' },
+} as unknown as CanvasEdgeProps;
+
+function renderEdge(
+  mode: 'design' | 'readonly' = 'design',
+  edge: { selected?: boolean; selectable?: boolean } = {}
+) {
+  edgeLookup.set('e1', { id: 'e1', ...edge });
+  getState.mockReturnValue({
+    addSelectedEdges,
+    edgeLookup,
+    elementsSelectable: true,
+    multiSelectionActive: false,
+    unselectNodesAndEdges,
+  });
+
+  render(
+    <BaseCanvasModeProvider mode={mode}>
+      <svg>
+        <CanvasEdge {...baseProps} selected={edge.selected ?? false} />
+      </svg>
+    </BaseCanvasModeProvider>
+  );
+}
+
+describe('CanvasEdge label selection', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    edgeLookup.clear();
+  });
+
+  it('uses the xyflow selection action and closes an active node selection', () => {
+    renderEdge();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Alpha' }));
+
+    expect(setState).toHaveBeenCalledWith({ nodesSelectionActive: false });
+    expect(addSelectedEdges).toHaveBeenCalledWith(['e1']);
+  });
+
+  it('toggles an already-selected edge when multi-selection is active', () => {
+    renderEdge('design', { selected: true });
+
+    getState.mockReturnValue({
+      addSelectedEdges,
+      edgeLookup,
+      elementsSelectable: true,
+      multiSelectionActive: true,
+      unselectNodesAndEdges,
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Alpha' }));
+
+    expect(unselectNodesAndEdges).toHaveBeenCalledWith({
+      nodes: [],
+      edges: [expect.objectContaining({ id: 'e1' })],
+    });
+  });
+
+  it('does not select a label when the edge is not selectable', () => {
+    renderEdge('design', { selectable: false });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Alpha' }));
+
+    expect(addSelectedEdges).not.toHaveBeenCalled();
+    expect(setState).not.toHaveBeenCalled();
+  });
+
+  it('does not attach label selection in read-only mode', () => {
+    renderEdge('readonly');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Alpha' }));
+
+    expect(addSelectedEdges).not.toHaveBeenCalled();
+    expect(setState).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,5 +1,5 @@
-import { Position } from '@uipath/apollo-react/canvas/xyflow/react';
-import { memo, useCallback, useRef, useState } from 'react';
+import { Position, useStoreApi } from '@uipath/apollo-react/canvas/xyflow/react';
+import { type MouseEvent, memo, useCallback, useRef, useState } from 'react';
 import { isPreviewEdge } from '../../utils/createPreviewNode';
 import { useBaseCanvasMode } from '../BaseCanvas/BaseCanvasModeProvider';
 import { EdgeToolbar, useEdgeToolbarState } from '../Toolbar';
@@ -53,6 +53,31 @@ export const CanvasEdge = memo(function CanvasEdge({
   const onMouseEnter = useCallback(() => setIsHovered(true), []);
   const onMouseLeave = useCallback(() => setIsHovered(false), []);
   const pathRef = useRef<SVGPathElement | null>(null);
+  const store = useStoreApi();
+
+  const onLabelClick = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+      const {
+        addSelectedEdges,
+        edgeLookup,
+        elementsSelectable,
+        multiSelectionActive,
+        unselectNodesAndEdges,
+      } = store.getState();
+      const edge = edgeLookup.get(id);
+
+      if (!edge || !(edge.selectable ?? elementsSelectable)) return;
+
+      store.setState({ nodesSelectionActive: false });
+      if (edge.selected && multiSelectionActive) {
+        unselectNodesAndEdges({ nodes: [], edges: [edge] });
+      } else {
+        addSelectedEdges([id]);
+      }
+    },
+    [id, store]
+  );
 
   const routing = data?.routing ?? 'waypoint';
   const storedWaypoints = data?.waypoints ?? EMPTY_WAYPOINTS;
@@ -150,6 +175,7 @@ export const CanvasEdge = memo(function CanvasEdge({
   return (
     <>
       <g
+        data-edge-hovered={isHovered || undefined}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         onMouseMove={toolbarEnabled ? toolbar.handleMouseMoveOnPath : undefined}
@@ -208,7 +234,10 @@ export const CanvasEdge = memo(function CanvasEdge({
             x={geometry.labelPoint.x}
             y={geometry.labelPoint.y}
             text={label}
-            selected={selected}
+            borderColor={color}
+            onClick={isReadOnly ? undefined : onLabelClick}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
           />
         )}
       </g>