feat(editor): Add plus handle design with ability to add connected nodes in new canvas (no-changelog) (#10097)

packages/editor-ui/src/__tests__/data/canvas.ts

@@ -1,7 +1,13 @@
-import { CanvasNodeKey } from '@/constants';
+import { CanvasNodeHandleKey, CanvasNodeKey } from '@/constants';
 import { ref } from 'vue';
-import type { CanvasNode, CanvasNodeData } from '@/types';
-import { CanvasNodeRenderType } from '@/types';
+import type {
+	CanvasNode,
+	CanvasNodeData,
+	CanvasNodeHandleInjectionData,
+	CanvasNodeInjectionData,
+} from '@/types';
+import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
+import { NodeConnectionType } from 'n8n-workflow';
 
 export function createCanvasNodeData({
 	id = 'node',
@@ -11,7 +17,7 @@ export function createCanvasNodeData({
 	disabled = false,
 	inputs = [],
 	outputs = [],
-	connections = { input: {}, output: {} },
+	connections = { [CanvasConnectionMode.Input]: {}, [CanvasConnectionMode.Output]: {} },
 	execution = { running: false },
 	issues = { items: [], visible: false },
 	pinnedData = { count: 0, visible: false },
@@ -73,7 +79,12 @@ export function createCanvasNodeProvide({
 	label = 'Test Node',
 	selected = false,
 	data = {},
-}: { id?: string; label?: string; selected?: boolean; data?: Partial<CanvasNodeData> } = {}) {
+}: {
+	id?: string;
+	label?: string;
+	selected?: boolean;
+	data?: Partial<CanvasNodeData>;
+} = {}) {
 	const props = createCanvasNodeProps({ id, label, selected, data });
 	return {
 		[`${CanvasNodeKey}`]: {
@@ -81,7 +92,28 @@ export function createCanvasNodeProvide({
 			label: ref(props.label),
 			selected: ref(props.selected),
 			data: ref(props.data),
-		},
+		} satisfies CanvasNodeInjectionData,
+	};
+}
+
+export function createCanvasHandleProvide({
+	label = 'Handle',
+	mode = CanvasConnectionMode.Input,
+	type = NodeConnectionType.Main,
+	connected = false,
+}: {
+	label?: string;
+	mode?: CanvasConnectionMode;
+	type?: NodeConnectionType;
+	connected?: boolean;
+} = {}) {
+	return {
+		[`${CanvasNodeHandleKey}`]: {
+			label: ref(label),
+			mode: ref(mode),
+			type: ref(type),
+			connected: ref(connected),
+		} satisfies CanvasNodeHandleInjectionData,
 	};
 }