refactor: Migrate NodeConnectionType to const object type (no-changelog) (#14078)

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

packages/frontend/editor-ui/src/components/canvas/Canvas.test.ts

@@ -5,7 +5,7 @@ import Canvas from '@/components/canvas/Canvas.vue';
 import { createPinia, setActivePinia } from 'pinia';
 import type { CanvasConnection, CanvasNode } from '@/types';
 import { createCanvasConnection, createCanvasNodeElement } from '@/__tests__/data';
-import { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
 import type { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useVueFlow } from '@vue-flow/core';
 
@@ -59,7 +59,7 @@ describe('Canvas', () => {
 				data: {
 					outputs: [
 						{
-							type: NodeConnectionType.Main,
+							type: NodeConnectionTypes.Main,
 							index: 0,
 						},
 					],
@@ -72,7 +72,7 @@ describe('Canvas', () => {
 				data: {
 					inputs: [
 						{
-							type: NodeConnectionType.Main,
+							type: NodeConnectionTypes.Main,
 							index: 0,
 						},
 					],

packages/frontend/editor-ui/src/components/canvas/Canvas.vue

@@ -36,7 +36,7 @@ import type {
 import { MarkerType, PanelPosition, useVueFlow, VueFlow } from '@vue-flow/core';
 import { MiniMap } from '@vue-flow/minimap';
 import { onKeyDown, onKeyUp, useThrottleFn } from '@vueuse/core';
-import { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
 import {
 	computed,
 	nextTick,
@@ -460,7 +460,7 @@ onEdgeMouseEnter(({ edge }) => {
 onEdgeMouseMove(
 	useThrottleFn(({ edge, event }) => {
 		const type = edge.data.source.type;
-		if (type !== NodeConnectionType.AiTool) {
+		if (type !== NodeConnectionTypes.AiTool) {
 			return;
 		}
 

packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasConnectionLine.vue

@@ -5,7 +5,7 @@ import { BaseEdge } from '@vue-flow/core';
 import { computed, onMounted, ref, useCssModule } from 'vue';
 import { getEdgeRenderData } from './utils';
 import { useCanvas } from '@/composables/useCanvas';
-import { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
 import { parseCanvasConnectionHandleString } from '@/utils/canvasUtils';
 
 const props = defineProps<ConnectionLineProps>();
@@ -26,7 +26,7 @@ const classes = computed(() => {
 });
 
 const edgeColor = computed(() => {
-	if (connectionType.value !== NodeConnectionType.Main) {
+	if (connectionType.value !== NodeConnectionTypes.Main) {
 		return 'var(--node-type-supplemental-color)';
 	} else {
 		return 'var(--color-foreground-xdark)';
@@ -34,7 +34,7 @@ const edgeColor = computed(() => {
 });
 
 const edgeStyle = computed(() => ({
-	...(connectionType.value === NodeConnectionType.Main ? {} : { strokeDasharray: '8,8' }),
+	...(connectionType.value === NodeConnectionTypes.Main ? {} : { strokeDasharray: '8,8' }),
 	strokeWidth: 2,
 	stroke: edgeColor.value,
 }));

packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdge.test.ts

@@ -2,7 +2,7 @@ import { createComponentRenderer } from '@/__tests__/render';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
 import { Position } from '@vue-flow/core';
-import { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
 import { setActivePinia } from 'pinia';
 import CanvasEdge, { type CanvasEdgeProps } from './CanvasEdge.vue';
 
@@ -15,8 +15,8 @@ const DEFAULT_PROPS = {
 	targetPosition: Position.Bottom,
 	data: {
 		status: undefined,
-		source: { index: 0, type: NodeConnectionType.Main },
-		target: { index: 0, type: NodeConnectionType.Main },
+		source: { index: 0, type: NodeConnectionTypes.Main },
+		target: { index: 0, type: NodeConnectionTypes.Main },
 	},
 } satisfies Partial<CanvasEdgeProps>;
 const renderComponent = createComponentRenderer(CanvasEdge, {
@@ -159,7 +159,7 @@ describe('CanvasEdge', () => {
 				data: {
 					...DEFAULT_PROPS.data,
 					source: {
-						type: NodeConnectionType.AiTool,
+						type: NodeConnectionTypes.AiTool,
 					},
 				},
 				sourceX: 0,

packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue

@@ -4,7 +4,7 @@ import type { CanvasConnectionData } from '@/types';
 import { isValidNodeConnectionType } from '@/utils/typeGuards';
 import type { Connection, EdgeProps } from '@vue-flow/core';
 import { BaseEdge, EdgeLabelRenderer } from '@vue-flow/core';
-import { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
 import { computed, ref, toRef, useCssModule, watch } from 'vue';
 import CanvasEdgeToolbar from './CanvasEdgeToolbar.vue';
 import { getEdgeRenderData } from './utils';
@@ -30,7 +30,7 @@ const $style = useCssModule();
 const connectionType = computed(() =>
 	isValidNodeConnectionType(props.data.source.type)
 		? props.data.source.type
-		: NodeConnectionType.Main,
+		: NodeConnectionTypes.Main,
 );
 
 const delayedHovered = ref(props.hovered);
@@ -54,7 +54,7 @@ watch(
 
 const renderToolbar = computed(() => (props.selected || delayedHovered.value) && !props.readOnly);
 
-const isMainConnection = computed(() => data.value.source.type === NodeConnectionType.Main);
+const isMainConnection = computed(() => data.value.source.type === NodeConnectionTypes.Main);
 
 const status = computed(() => props.data.status);
 

packages/frontend/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { useI18n } from '@/composables/useI18n';
 import { computed, useCssModule } from 'vue';
-import { NodeConnectionType } from 'n8n-workflow';
+import type { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
 
 const emit = defineEmits<{
 	add: [];
@@ -20,7 +21,7 @@ const classes = computed(() => ({
 	[$style.canvasEdgeToolbar]: true,
 }));
 
-const isAddButtonVisible = computed(() => props.type === NodeConnectionType.Main);
+const isAddButtonVisible = computed(() => props.type === NodeConnectionTypes.Main);
 
 function onAdd() {
 	emit('add');

packages/frontend/editor-ui/src/components/canvas/elements/edges/utils/getEdgeRenderData.ts

@@ -1,6 +1,7 @@
 import type { EdgeProps } from '@vue-flow/core';
 import { getBezierPath, getSmoothStepPath, Position } from '@vue-flow/core';
-import { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
+import type { NodeConnectionType } from 'n8n-workflow';
 
 const EDGE_PADDING_BOTTOM = 130;
 const EDGE_PADDING_X = 40;
@@ -15,7 +16,7 @@ export function getEdgeRenderData(
 		'sourceX' | 'sourceY' | 'sourcePosition' | 'targetX' | 'targetY' | 'targetPosition'
 	>,
 	{
-		connectionType = NodeConnectionType.Main,
+		connectionType = NodeConnectionTypes.Main,
 	}: {
 		connectionType?: NodeConnectionType;
 	} = {},
@@ -23,7 +24,7 @@ export function getEdgeRenderData(
 	const { targetX, targetY, sourceX, sourceY, sourcePosition, targetPosition } = props;
 	const isConnectorStraight = sourceY === targetY;
 
-	if (!isRightOfSourceHandle(sourceX, targetX) || connectionType !== NodeConnectionType.Main) {
+	if (!isRightOfSourceHandle(sourceX, targetX) || connectionType !== NodeConnectionTypes.Main) {
 		const segment = getBezierPath(props);
 		return {
 			segments: [segment],

packages/frontend/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.test.ts

@@ -1,5 +1,5 @@
 import CanvasHandleRenderer from '@/components/canvas/elements/handles/CanvasHandleRenderer.vue';
-import { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
 import { createComponentRenderer } from '@/__tests__/render';
 import { CanvasNodeHandleKey } from '@/constants';
 import { ref } from 'vue';
@@ -16,7 +16,7 @@ describe('CanvasHandleRenderer', () => {
 		const { container } = renderComponent({
 			props: {
 				mode: CanvasConnectionMode.Input,
-				type: NodeConnectionType.Main,
+				type: NodeConnectionTypes.Main,
 				index: 0,
 				position: 'left',
 				offset: { left: '10px', top: '10px' },
@@ -37,7 +37,7 @@ describe('CanvasHandleRenderer', () => {
 		const { container } = renderComponent({
 			props: {
 				mode: CanvasConnectionMode.Output,
-				type: NodeConnectionType.Main,
+				type: NodeConnectionTypes.Main,
 				index: 0,
 				position: 'right',
 				offset: { right: '10px', bottom: '10px' },
@@ -58,7 +58,7 @@ describe('CanvasHandleRenderer', () => {
 		const { container } = renderComponent({
 			props: {
 				mode: CanvasConnectionMode.Input,
-				type: NodeConnectionType.AiTool,
+				type: NodeConnectionTypes.AiTool,
 				index: 0,
 				position: 'top',
 				offset: { top: '10px', left: '5px' },
@@ -80,7 +80,7 @@ describe('CanvasHandleRenderer', () => {
 		const { getByText } = renderComponent({
 			props: {
 				mode: 'input',
-				type: NodeConnectionType.AiTool,
+				type: NodeConnectionTypes.AiTool,
 				index: 0,
 				position: 'top',
 				offset: { top: '10px', left: '5px' },

packages/frontend/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.vue

@@ -5,7 +5,7 @@ import type { CanvasConnectionPort, CanvasElementPortWithRenderData } from '@/ty
 import { CanvasConnectionMode } from '@/types';
 import type { ValidConnectionFunc } from '@vue-flow/core';
 import { Handle } from '@vue-flow/core';
-import { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
 import CanvasHandleMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue';
 import CanvasHandleMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue';
 import CanvasHandleNonMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.vue';
@@ -58,13 +58,13 @@ const connectionsLimitReached = computed(() => {
 const isConnectableStart = computed(() => {
 	if (connectionsLimitReached.value) return false;
 
-	return props.mode === CanvasConnectionMode.Output || props.type !== NodeConnectionType.Main;
+	return props.mode === CanvasConnectionMode.Output || props.type !== NodeConnectionTypes.Main;
 });
 
 const isConnectableEnd = computed(() => {
 	if (connectionsLimitReached.value) return false;
 
-	return props.mode === CanvasConnectionMode.Input || props.type !== NodeConnectionType.Main;
+	return props.mode === CanvasConnectionMode.Input || props.type !== NodeConnectionTypes.Main;
 });
 
 const isConnected = computed(() => props.connectionsCount > 0);
@@ -91,13 +91,13 @@ const RenderType = () => {
 	let Component;
 
 	if (props.mode === CanvasConnectionMode.Output) {
-		if (props.type === NodeConnectionType.Main) {
+		if (props.type === NodeConnectionTypes.Main) {
 			Component = CanvasHandleMainOutput;
 		} else {
 			Component = CanvasHandleNonMainOutput;
 		}
 	} else {
-		if (props.type === NodeConnectionType.Main) {
+		if (props.type === NodeConnectionTypes.Main) {
 			Component = CanvasHandleMainInput;
 		} else {
 			Component = CanvasHandleNonMainInput;

packages/frontend/editor-ui/src/components/canvas/elements/nodes/CanvasNode.test.ts

@@ -1,7 +1,7 @@
 import CanvasNode from '@/components/canvas/elements/nodes/CanvasNode.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createPinia, setActivePinia } from 'pinia';
-import { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
 import { fireEvent } from '@testing-library/vue';
 import { createCanvasNodeData, createCanvasNodeProps, createCanvasProvide } from '@/__tests__/data';
 import { CanvasNodeRenderType } from '@/types';
@@ -61,13 +61,13 @@ describe('CanvasNode', () => {
 					...createCanvasNodeProps({
 						data: {
 							inputs: [
-								{ type: NodeConnectionType.Main, index: 0 },
-								{ type: NodeConnectionType.Main, index: 0 },
-								{ type: NodeConnectionType.Main, index: 0 },
+								{ type: NodeConnectionTypes.Main, index: 0 },
+								{ type: NodeConnectionTypes.Main, index: 0 },
+								{ type: NodeConnectionTypes.Main, index: 0 },
 							],
 							outputs: [
-								{ type: NodeConnectionType.Main, index: 0 },
-								{ type: NodeConnectionType.Main, index: 0 },
+								{ type: NodeConnectionTypes.Main, index: 0 },
+								{ type: NodeConnectionTypes.Main, index: 0 },
 							],
 						},
 					}),
@@ -92,9 +92,9 @@ describe('CanvasNode', () => {
 					...createCanvasNodeProps({
 						data: {
 							inputs: [
-								{ type: NodeConnectionType.Main, index: 0 },
-								{ type: NodeConnectionType.AiAgent, index: 0, required: true },
-								{ type: NodeConnectionType.AiTool, index: 0 },
+								{ type: NodeConnectionTypes.Main, index: 0 },
+								{ type: NodeConnectionTypes.AiAgent, index: 0, required: true },
+								{ type: NodeConnectionTypes.AiTool, index: 0 },
 							],
 							outputs: [],
 						},

packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.test.ts

@@ -1,6 +1,6 @@
 import CanvasNodeDefault from '@/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue';
 import { createComponentRenderer } from '@/__tests__/render';
-import { NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionTypes } from 'n8n-workflow';
 import { createCanvasNodeProvide, createCanvasProvide } from '@/__tests__/data';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
@@ -40,7 +40,7 @@ describe('CanvasNodeDefault', () => {
 					provide: {
 						...createCanvasNodeProvide({
 							data: {
-								inputs: [{ type: NodeConnectionType.Main, index: 0 }],
+								inputs: [{ type: NodeConnectionTypes.Main, index: 0 }],
 							},
 						}),
 					},
@@ -58,9 +58,9 @@ describe('CanvasNodeDefault', () => {
 						...createCanvasNodeProvide({
 							data: {
 								inputs: [
-									{ type: NodeConnectionType.Main, index: 0 },
-									{ type: NodeConnectionType.Main, index: 0 },
-									{ type: NodeConnectionType.Main, index: 0 },
+									{ type: NodeConnectionTypes.Main, index: 0 },
+									{ type: NodeConnectionTypes.Main, index: 0 },
+									{ type: NodeConnectionTypes.Main, index: 0 },
 								],
 							},
 						}),
@@ -80,7 +80,7 @@ describe('CanvasNodeDefault', () => {
 					provide: {
 						...createCanvasNodeProvide({
 							data: {
-								outputs: [{ type: NodeConnectionType.Main, index: 0 }],
+								outputs: [{ type: NodeConnectionTypes.Main, index: 0 }],
 							},
 						}),
 					},
@@ -98,9 +98,9 @@ describe('CanvasNodeDefault', () => {
 						...createCanvasNodeProvide({
 							data: {
 								outputs: [
-									{ type: NodeConnectionType.Main, index: 0 },
-									{ type: NodeConnectionType.Main, index: 0 },
-									{ type: NodeConnectionType.Main, index: 0 },
+									{ type: NodeConnectionTypes.Main, index: 0 },
+									{ type: NodeConnectionTypes.Main, index: 0 },
+									{ type: NodeConnectionTypes.Main, index: 0 },
 								],
 							},
 						}),
@@ -173,17 +173,17 @@ describe('CanvasNodeDefault', () => {
 						...createCanvasNodeProvide({
 							data: {
 								disabled: true,
-								inputs: [{ type: NodeConnectionType.Main, index: 0 }],
-								outputs: [{ type: NodeConnectionType.Main, index: 0 }],
+								inputs: [{ type: NodeConnectionTypes.Main, index: 0 }],
+								outputs: [{ type: NodeConnectionTypes.Main, index: 0 }],
 								connections: {
 									[CanvasConnectionMode.Input]: {
-										[NodeConnectionType.Main]: [
-											[{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
+										[NodeConnectionTypes.Main]: [
+											[{ node: 'node', type: NodeConnectionTypes.Main, index: 0 }],
 										],
 									},
 									[CanvasConnectionMode.Output]: {
-										[NodeConnectionType.Main]: [
-											[{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
+										[NodeConnectionTypes.Main]: [
+											[{ node: 'node', type: NodeConnectionTypes.Main, index: 0 }],
 										],
 									},
 								},
@@ -251,10 +251,10 @@ describe('CanvasNodeDefault', () => {
 							...createCanvasNodeProvide({
 								data: {
 									inputs: [
-										{ type: NodeConnectionType.Main, index: 0 },
-										{ type: NodeConnectionType.AiTool, index: 0 },
-										{ type: NodeConnectionType.AiDocument, index: 0, required: true },
-										{ type: NodeConnectionType.AiMemory, index: 0, required: true },
+										{ type: NodeConnectionTypes.Main, index: 0 },
+										{ type: NodeConnectionTypes.AiTool, index: 0 },
+										{ type: NodeConnectionTypes.AiDocument, index: 0, required: true },
+										{ type: NodeConnectionTypes.AiMemory, index: 0, required: true },
 									],
 									render: {
 										type: CanvasNodeRenderType.Default,