From 306d13d70a8ee5bbe83a22801c3b1f2a138a91e2 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 29 Oct 2024 14:38:58 +0100
Subject: [PATCH 1/2] enable pinning with error output and always unpin

---
 packages/editor-ui/src/components/RunData.vue    |  9 ++++++---
 .../editor-ui/src/composables/usePinnedData.ts   | 16 +++++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 1c2d0b78a68ed..46099560517fd 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -284,6 +284,11 @@ export default defineComponent({
 				return false;
 			}
 
+			if (this.outputIndex !== 0) {
+				// Only allow pinning of the main output
+				return false;
+			}
+
 			const canPinNode = usePinnedData(this.node).canPinNode(false);
 
 			return (
@@ -1209,9 +1214,7 @@ export default defineComponent({
 <template>
 	<div :class="['run-data', $style.container]" @mouseover="activatePane">
 		<n8n-callout
-			v-if="
-				canPinData && pinnedData.hasData.value && !editMode.enabled && !isProductionExecutionPreview
-			"
+			v-if="pinnedData.hasData.value && !editMode.enabled && !isProductionExecutionPreview"
 			theme="secondary"
 			icon="thumbtack"
 			:class="$style.pinnedDataCallout"
diff --git a/packages/editor-ui/src/composables/usePinnedData.ts b/packages/editor-ui/src/composables/usePinnedData.ts
index 2ee0d046b5bc6..c5d7014c1b681 100644
--- a/packages/editor-ui/src/composables/usePinnedData.ts
+++ b/packages/editor-ui/src/composables/usePinnedData.ts
@@ -85,14 +85,16 @@ export function usePinnedData(
 		if (!nodeType || (checkDataEmpty && dataToPin.length === 0)) return false;
 
 		const workflow = workflowsStore.getCurrentWorkflow();
-		const outputs = NodeHelpers.getNodeOutputs(workflow, targetNode, nodeType);
-		const mainOutputs = outputs.filter((output) =>
-			typeof output === 'string'
-				? output === NodeConnectionType.Main
-				: output.type === NodeConnectionType.Main,
-		);
+		const mainOutputs = NodeHelpers.getNodeOutputs(workflow, targetNode, nodeType)
+			.map((output) => (typeof output === 'string' ? { type: output } : output))
+			.filter((output) => output.type === NodeConnectionType.Main);
+
+		// Outputs are pinnable if there is exactly one main output and optionally one error output
+		const pinnableMainOutputs =
+			mainOutputs.length === 1 ||
+			(mainOutputs.length === 2 && mainOutputs[1]?.category === 'error');
 
-		return mainOutputs.length === 1 && !PIN_DATA_NODE_TYPES_DENYLIST.includes(targetNode.type);
+		return pinnableMainOutputs && !PIN_DATA_NODE_TYPES_DENYLIST.includes(targetNode.type);
 	}
 
 	function isValidJSON(data: string): boolean {

From dd354ff7b5dc59dd186868dae368e8a2e0c78c67 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Thu, 31 Oct 2024 11:24:39 +0100
Subject: [PATCH 2/2] Add tests

---
 .../__tests__/usePinnedData.test.ts           | 77 ++++++++++++++++++-
 1 file changed, 76 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/composables/__tests__/usePinnedData.test.ts b/packages/editor-ui/src/composables/__tests__/usePinnedData.test.ts
index 499c3714965a0..affde4cabd939 100644
--- a/packages/editor-ui/src/composables/__tests__/usePinnedData.test.ts
+++ b/packages/editor-ui/src/composables/__tests__/usePinnedData.test.ts
@@ -3,9 +3,10 @@ import { setActivePinia, createPinia } from 'pinia';
 import { ref } from 'vue';
 import { usePinnedData } from '@/composables/usePinnedData';
 import type { INodeUi } from '@/Interface';
-import { MAX_PINNED_DATA_SIZE } from '@/constants';
+import { HTTP_REQUEST_NODE_TYPE, IF_NODE_TYPE, MAX_PINNED_DATA_SIZE } from '@/constants';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { NodeConnectionType, type INodeTypeDescription } from 'n8n-workflow';
 
 vi.mock('@/composables/useToast', () => ({ useToast: vi.fn(() => ({ showError: vi.fn() })) }));
 vi.mock('@/composables/useI18n', () => ({
@@ -17,6 +18,13 @@ vi.mock('@/composables/useExternalHooks', () => ({
 	})),
 }));
 
+const getNodeType = vi.fn();
+vi.mock('@/stores/nodeTypes.store', () => ({
+	useNodeTypesStore: vi.fn(() => ({
+		getNodeType,
+	})),
+}));
+
 describe('usePinnedData', () => {
 	beforeEach(() => {
 		setActivePinia(createPinia());
@@ -133,4 +141,71 @@ describe('usePinnedData', () => {
 			expect(spy).toHaveBeenCalled();
 		});
 	});
+
+	describe('canPinData()', () => {
+		afterEach(() => {
+			vi.clearAllMocks();
+		});
+
+		it('allows pin on single output', async () => {
+			const node = ref({
+				name: 'single output node',
+				typeVersion: 1,
+				type: HTTP_REQUEST_NODE_TYPE,
+
+				parameters: {},
+				onError: 'stopWorkflow',
+			} as INodeUi);
+			getNodeType.mockReturnValue(makeNodeType([NodeConnectionType.Main], HTTP_REQUEST_NODE_TYPE));
+
+			const { canPinNode } = usePinnedData(node);
+
+			expect(canPinNode()).toBe(true);
+		});
+
+		it('allows pin on one main and one error output', async () => {
+			const node = ref({
+				name: 'single output node',
+				typeVersion: 1,
+				type: HTTP_REQUEST_NODE_TYPE,
+				parameters: {},
+				onError: 'continueErrorOutput',
+			} as INodeUi);
+			getNodeType.mockReturnValue(makeNodeType([NodeConnectionType.Main], HTTP_REQUEST_NODE_TYPE));
+
+			const { canPinNode } = usePinnedData(node);
+
+			expect(canPinNode()).toBe(true);
+		});
+
+		it('does not allow pin on two main outputs', async () => {
+			const node = ref({
+				name: 'single output node',
+				typeVersion: 1,
+				type: IF_NODE_TYPE,
+				parameters: {},
+				onError: 'stopWorkflow',
+			} as INodeUi);
+			getNodeType.mockReturnValue(
+				makeNodeType([NodeConnectionType.Main, NodeConnectionType.Main], IF_NODE_TYPE),
+			);
+
+			const { canPinNode } = usePinnedData(node);
+
+			expect(canPinNode()).toBe(false);
+		});
+	});
 });
+
+const makeNodeType = (outputs: NodeConnectionType[], name: string) =>
+	({
+		displayName: name,
+		name,
+		version: [1],
+		inputs: [],
+		outputs,
+		properties: [],
+		defaults: { color: '', name: '' },
+		group: [],
+		description: '',
+	}) as INodeTypeDescription;