From a6cfb3b0c57dc7467204747422acc96131604e23 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 25 Sep 2024 11:28:07 +0300
Subject: [PATCH] feat(editor): Show strikethrough line for all single main
 input and single main output nodes in new canvas (no-changelog) (#10925)

---
 .../render-types/CanvasNodeDefault.spec.ts    | 32 ++++++++++++++++++-
 .../nodes/render-types/CanvasNodeDefault.vue  | 20 ++++++++++--
 .../CanvasNodeDisabledStrikeThrough.spec.ts   | 28 ++--------------
 .../parts/CanvasNodeDisabledStrikeThrough.vue | 15 +--------
 4 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
index 084597e4d8..6ba17c31e7 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
@@ -4,7 +4,7 @@ import { NodeConnectionType } from 'n8n-workflow';
 import { createCanvasNodeProvide } from '@/__tests__/data';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
-import { CanvasNodeRenderType } from '@/types';
+import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
 
 const renderComponent = createComponentRenderer(CanvasNodeDefault);
 
@@ -158,6 +158,36 @@ describe('CanvasNodeDefault', () => {
 			});
 			expect(getByText('Test Node').closest('.node')).not.toHaveClass('disabled');
 		});
+
+		it('should render strike-through when node is disabled and has node input and output handles', () => {
+			const { container } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide({
+							data: {
+								disabled: true,
+								inputs: [{ type: NodeConnectionType.Main, index: 0 }],
+								outputs: [{ type: NodeConnectionType.Main, index: 0 }],
+								connections: {
+									[CanvasConnectionMode.Input]: {
+										[NodeConnectionType.Main]: [
+											[{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
+										],
+									},
+									[CanvasConnectionMode.Output]: {
+										[NodeConnectionType.Main]: [
+											[{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
+										],
+									},
+								},
+							},
+						}),
+					},
+				},
+			});
+
+			expect(container.querySelector('.disabledStrikeThrough')).toBeVisible();
+		});
 	});
 
 	describe('running', () => {
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
index bc443c1732..7a7f16f017 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -30,7 +30,14 @@ const {
 	hasIssues,
 	render,
 } = useCanvasNode();
-const { mainOutputs, mainInputs, nonMainInputs, requiredNonMainInputs } = useNodeConnections({
+const {
+	mainOutputs,
+	mainOutputConnections,
+	mainInputs,
+	mainInputConnections,
+	nonMainInputs,
+	requiredNonMainInputs,
+} = useNodeConnections({
 	inputs,
 	outputs,
 	connections,
@@ -86,6 +93,15 @@ const dataTestId = computed(() => {
 	return `canvas-${type}-node`;
 });
 
+const isStrikethroughVisible = computed(() => {
+	const isSingleMainInputNode =
+		mainInputs.value.length === 1 && mainInputConnections.value.length <= 1;
+	const isSingleMainOutputNode =
+		mainOutputs.value.length === 1 && mainOutputConnections.value.length <= 1;
+
+	return isDisabled.value && isSingleMainInputNode && isSingleMainOutputNode;
+});
+
 function openContextMenu(event: MouseEvent) {
 	emit('open:contextmenu', event);
 }
@@ -103,7 +119,7 @@ function openContextMenu(event: MouseEvent) {
 			</div>
 		</N8nTooltip>
 		<CanvasNodeStatusIcons :class="$style.statusIcons" />
-		<CanvasNodeDisabledStrikeThrough v-if="isDisabled" />
+		<CanvasNodeDisabledStrikeThrough v-if="isStrikethroughVisible" />
 		<div :class="$style.description">
 			<div v-if="label" :class="$style.label">
 				{{ label }}
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.spec.ts
index 5375c552f6..57645abe91 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.spec.ts
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.spec.ts
@@ -1,36 +1,12 @@
 import CanvasNodeDisabledStrikeThrough from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.vue';
 import { createComponentRenderer } from '@/__tests__/render';
-import { NodeConnectionType } from 'n8n-workflow';
-import { createCanvasNodeProvide } from '@/__tests__/data';
-import { CanvasConnectionMode } from '@/types';
 
 const renderComponent = createComponentRenderer(CanvasNodeDisabledStrikeThrough);
 
 describe('CanvasNodeDisabledStrikeThrough', () => {
 	it('should render node correctly', () => {
-		const { container } = renderComponent({
-			global: {
-				provide: {
-					...createCanvasNodeProvide({
-						data: {
-							connections: {
-								[CanvasConnectionMode.Input]: {
-									[NodeConnectionType.Main]: [
-										[{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
-									],
-								},
-								[CanvasConnectionMode.Output]: {
-									[NodeConnectionType.Main]: [
-										[{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
-									],
-								},
-							},
-						},
-					}),
-				},
-			},
-		});
+		const { container } = renderComponent();
 
-		expect(container.firstChild).toBeVisible();
+		expect(container.firstChild).toHaveClass('disabledStrikeThrough');
 	});
 });
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.vue
index bd34aa025a..f006d10311 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeDisabledStrikeThrough.vue
@@ -1,21 +1,8 @@
 <script setup lang="ts">
 import { computed, useCssModule } from 'vue';
-import { useNodeConnections } from '@/composables/useNodeConnections';
-import { useCanvasNode } from '@/composables/useCanvasNode';
 
 const $style = useCssModule();
 
-const { inputs, outputs, connections } = useCanvasNode();
-const { mainInputConnections, mainOutputConnections } = useNodeConnections({
-	inputs,
-	outputs,
-	connections,
-});
-
-const isVisible = computed(
-	() => mainInputConnections.value.length === 1 && mainOutputConnections.value.length === 1,
-);
-
 const isSuccessStatus = computed(
 	() => false,
 	// @TODO Implement this
@@ -31,7 +18,7 @@ const classes = computed(() => {
 </script>
 
 <template>
-	<div v-if="isVisible" :class="classes"></div>
+	<div :class="classes"></div>
 </template>
 
 <style lang="scss" module>