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) { - +
{{ 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 @@