feat(Switch Node): Add support for infinite Switch outputs (#7499)

Github issue / Community forum post (link here to close automatically):
https://community.n8n.io/t/add-more-outputs-to-switch-node/3864

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

packages/editor-ui/src/plugins/jsplumb/N8nPlusEndpointType.ts

@@ -14,6 +14,7 @@ interface N8nPlusEndpointParams extends EndpointRepresentationParams {
 	dimensions: number;
 	connectedEndpoint: Endpoint;
 	hoverMessage: string;
+	nodeType: string;
 	size: 'small' | 'medium';
 	showOutputLabel: boolean;
 }
@@ -23,15 +24,17 @@ export const N8nPlusEndpointType = 'N8nPlus';
 export const EVENT_PLUS_ENDPOINT_CLICK = 'eventPlusEndpointClick';
 export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpoint> {
 	params: N8nPlusEndpointParams;
+
 	label: string;
+
 	stalkOverlay: Overlay | null;
+
 	messageOverlay: Overlay | null;
 
 	constructor(endpoint: Endpoint, params: N8nPlusEndpointParams) {
 		super(endpoint, params);
 
 		this.params = params;
-
 		this.label = '';
 		this.stalkOverlay = null;
 		this.messageOverlay = null;
@@ -41,6 +44,7 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
 	}
 
 	static type = N8nPlusEndpointType;
+
 	type = N8nPlusEndpoint.type;
 
 	setupOverlays() {
@@ -50,6 +54,9 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
 			type: 'Custom',
 			options: {
 				id: PlusStalkOverlay,
+				attributes: {
+					'data-endpoint-node-type': this.params.nodeType,
+				},
 				create: () => {
 					const stalk = createElement('div', {}, `${PlusStalkOverlay} ${this.params.size}`);
 					return stalk;
@@ -61,6 +68,9 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
 			options: {
 				id: HoverMessageOverlay,
 				location: 0.5,
+				attributes: {
+					'data-endpoint-node-type': this.params.nodeType,
+				},
 				create: () => {
 					const hoverMessage = createElement('p', {}, `${HoverMessageOverlay} ${this.params.size}`);
 					hoverMessage.innerHTML = this.params.hoverMessage;
@@ -70,23 +80,27 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
 		});
 		this.endpoint.instance.setSuspendDrawing(false);
 	}
+
 	bindEvents() {
 		this.instance.bind(EVENT_ENDPOINT_MOUSEOVER, this.setHoverMessageVisible);
 		this.instance.bind(EVENT_ENDPOINT_MOUSEOUT, this.unsetHoverMessageVisible);
 		this.instance.bind(EVENT_ENDPOINT_CLICK, this.fireClickEvent);
 		this.instance.bind(EVENT_CONNECTION_ABORT, this.setStalkLabels);
 	}
+
 	unbindEvents() {
 		this.instance.unbind(EVENT_ENDPOINT_MOUSEOVER, this.setHoverMessageVisible);
 		this.instance.unbind(EVENT_ENDPOINT_MOUSEOUT, this.unsetHoverMessageVisible);
 		this.instance.unbind(EVENT_ENDPOINT_CLICK, this.fireClickEvent);
 		this.instance.unbind(EVENT_CONNECTION_ABORT, this.setStalkLabels);
 	}
+
 	setStalkLabels = () => {
 		if (!this.endpoint) return;
 
 		const stalkOverlay = this.endpoint.getOverlay(PlusStalkOverlay);
 		const messageOverlay = this.endpoint.getOverlay(HoverMessageOverlay);
+
 		if (stalkOverlay && messageOverlay) {
 			// Increase the size of the stalk overlay if the label is too long
 			const fnKey = this.label.length > 10 ? 'add' : 'remove';
@@ -100,21 +114,25 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
 			}
 		}
 	};
+
 	fireClickEvent = (endpoint: Endpoint) => {
 		if (endpoint === this.endpoint) {
 			this.instance.fire(EVENT_PLUS_ENDPOINT_CLICK, this.endpoint);
 		}
 	};
+
 	setHoverMessageVisible = (endpoint: Endpoint) => {
 		if (endpoint === this.endpoint && this.messageOverlay) {
 			this.instance.addOverlayClass(this.messageOverlay, 'visible');
 		}
 	};
+
 	unsetHoverMessageVisible = (endpoint: Endpoint) => {
 		if (endpoint === this.endpoint && this.messageOverlay) {
 			this.instance.removeOverlayClass(this.messageOverlay, 'visible');
 		}
 	};
+
 	clearOverlays() {
 		Object.keys(this.endpoint.getOverlays()).forEach((key) => {
 			this.endpoint.removeOverlay(key);
@@ -122,6 +140,7 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
 		this.stalkOverlay = null;
 		this.messageOverlay = null;
 	}
+
 	getConnections() {
 		const connections = [
 			...this.endpoint.connections,
@@ -130,6 +149,7 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
 
 		return connections;
 	}
+
 	setIsVisible(visible: boolean) {
 		this.instance.setSuspendDrawing(true);
 		Object.keys(this.endpoint.getOverlays()).forEach((overlay) => {
@@ -179,6 +199,7 @@ export const N8nPlusEndpointHandler: EndpointHandler<N8nPlusEndpoint, ComputedN8
 		ep.w = w;
 		ep.h = h;
 
+		ep.canvas?.setAttribute('data-endpoint-node-type', ep.params.nodeType);
 		ep.addClass('plus-endpoint');
 		return [x, y, w, h, ep.params.dimensions];
 	},