From f78a7dd3e1ac41435bd23ea94262af528af6bbc7 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 21 Oct 2024 13:09:03 +0300
Subject: [PATCH] fix(editor): Show placeholder nodes when no trigger nodes
 available on new canvas (no-changelog) (#11106)

---
 .../src/components/canvas/WorkflowCanvas.spec.ts   | 14 +++++++-------
 .../src/components/canvas/WorkflowCanvas.vue       | 11 +++++------
 packages/editor-ui/src/views/NodeView.v2.vue       |  3 +++
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/WorkflowCanvas.spec.ts b/packages/editor-ui/src/components/canvas/WorkflowCanvas.spec.ts
index 75932803d3..d5d5e83125 100644
--- a/packages/editor-ui/src/components/canvas/WorkflowCanvas.spec.ts
+++ b/packages/editor-ui/src/components/canvas/WorkflowCanvas.spec.ts
@@ -100,6 +100,7 @@ describe('WorkflowCanvas', () => {
 				workflow,
 				workflowObject,
 				fallbackNodes,
+				showFallbackNodes: true,
 			},
 		});
 
@@ -109,9 +110,8 @@ describe('WorkflowCanvas', () => {
 		expect(container.querySelector(`[data-id="${fallbackNodes[0].id}"]`)).toBeInTheDocument();
 	});
 
-	it('should not render fallback nodes when non-sticky nodes are present', async () => {
-		const nonStickyNodes = [createTestNode({ id: '1', name: 'Non-Sticky Node 1' })];
-		const stickyNodes = [createTestNode({ id: '2', name: 'Sticky Node', type: STICKY_NODE_TYPE })];
+	it('should not render fallback nodes when showFallbackNodes is false', async () => {
+		const nodes = [createTestNode({ id: '1', name: 'Non-Sticky Node 1' })];
 		const fallbackNodes = [
 			createTestNode({
 				id: CanvasNodeRenderType.AddNodes,
@@ -123,7 +123,7 @@ describe('WorkflowCanvas', () => {
 		const workflow = createTestWorkflow({
 			id: '1',
 			name: 'Test Workflow',
-			nodes: [...nonStickyNodes, ...stickyNodes],
+			nodes,
 			connections: {},
 		});
 
@@ -134,13 +134,13 @@ describe('WorkflowCanvas', () => {
 				workflow,
 				workflowObject,
 				fallbackNodes,
+				showFallbackNodes: false,
 			},
 		});
 
-		await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(2));
+		await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(1));
 
-		expect(container.querySelector(`[data-id="${nonStickyNodes[0].id}"]`)).toBeInTheDocument();
-		expect(container.querySelector(`[data-id="${stickyNodes[0].id}"]`)).toBeInTheDocument();
+		expect(container.querySelector(`[data-id="${nodes[0].id}"]`)).toBeInTheDocument();
 		expect(container.querySelector(`[data-id="${fallbackNodes[0].id}"]`)).not.toBeInTheDocument();
 	});
 });
diff --git a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
index 319084c1f2..e5016d7ed8 100644
--- a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
+++ b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
@@ -7,7 +7,6 @@ import { useCanvasMapping } from '@/composables/useCanvasMapping';
 import type { EventBus } from 'n8n-design-system';
 import { createEventBus } from 'n8n-design-system';
 import type { CanvasEventBusEvents } from '@/types';
-import { STICKY_NODE_TYPE } from '@/constants';
 
 defineOptions({
 	inheritAttrs: false,
@@ -19,6 +18,7 @@ const props = withDefaults(
 		workflow: IWorkflowDb;
 		workflowObject: Workflow;
 		fallbackNodes?: IWorkflowDb['nodes'];
+		showFallbackNodes?: boolean;
 		eventBus?: EventBus<CanvasEventBusEvents>;
 		readOnly?: boolean;
 		executing?: boolean;
@@ -27,6 +27,7 @@ const props = withDefaults(
 		id: 'canvas',
 		eventBus: () => createEventBus<CanvasEventBusEvents>(),
 		fallbackNodes: () => [],
+		showFallbackNodes: true,
 	},
 );
 
@@ -36,11 +37,9 @@ const workflow = toRef(props, 'workflow');
 const workflowObject = toRef(props, 'workflowObject');
 
 const nodes = computed(() => {
-	const stickyNoteNodes = props.workflow.nodes.filter((node) => node.type === STICKY_NODE_TYPE);
-
-	return props.workflow.nodes.length > stickyNoteNodes.length
-		? props.workflow.nodes
-		: [...props.fallbackNodes, ...stickyNoteNodes];
+	return props.showFallbackNodes
+		? [...props.workflow.nodes, ...props.fallbackNodes]
+		: props.workflow.nodes;
 });
 const connections = computed(() => props.workflow.connections);
 
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 244fdf5212..5c2351aa12 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -241,6 +241,8 @@ const fallbackNodes = computed<INodeUi[]>(() =>
 			],
 );
 
+const showFallbackNodes = computed(() => triggerNodes.value.length === 0);
+
 const keyBindingsEnabled = computed(() => {
 	return !ndvStore.activeNode && uiStore.activeModals.length === 0;
 });
@@ -1566,6 +1568,7 @@ onBeforeUnmount(() => {
 		:workflow="editableWorkflow"
 		:workflow-object="editableWorkflowObject"
 		:fallback-nodes="fallbackNodes"
+		:show-fallback-nodes="showFallbackNodes"
 		:event-bus="canvasEventBus"
 		:read-only="isCanvasReadOnly"
 		:executing="isWorkflowRunning"