From c2ad15646d326a8f71e314d54efe202a5bcdd296 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Tue, 15 Oct 2024 15:48:13 +0200
Subject: [PATCH] fix: Don't show pinned data tooltip for pinned nodes (#11249)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
---
 cypress/e2e/13-pinning.cy.ts               | 40 ++++++++++++++++++++++
 cypress/e2e/16-webhook-node.cy.ts          | 14 ++++++--
 cypress/fixtures/Pinned_webhook_node.json  | 39 +++++++++++++++++++++
 packages/editor-ui/src/components/Node.vue |  3 +-
 4 files changed, 92 insertions(+), 4 deletions(-)
 create mode 100644 cypress/fixtures/Pinned_webhook_node.json

diff --git a/cypress/e2e/13-pinning.cy.ts b/cypress/e2e/13-pinning.cy.ts
index 4558c44bca..4f48fa4529 100644
--- a/cypress/e2e/13-pinning.cy.ts
+++ b/cypress/e2e/13-pinning.cy.ts
@@ -1,3 +1,6 @@
+import { nanoid } from 'nanoid';
+
+import { simpleWebhookCall, waitForWebhook } from './16-webhook-node.cy';
 import {
 	HTTP_REQUEST_NODE_NAME,
 	MANUAL_TRIGGER_NODE_NAME,
@@ -7,6 +10,7 @@ import {
 } from '../constants';
 import { WorkflowPage, NDV } from '../pages';
 import { errorToast } from '../pages/notifications';
+import { getVisiblePopper } from '../utils';
 
 const workflowPage = new WorkflowPage();
 const ndv = new NDV();
@@ -212,6 +216,42 @@ describe('Data pinning', () => {
 			},
 		);
 	});
+
+	it('should show pinned data tooltip', () => {
+		const { callEndpoint } = simpleWebhookCall({
+			method: 'GET',
+			webhookPath: nanoid(),
+			executeNow: false,
+		});
+
+		ndv.actions.close();
+		workflowPage.actions.executeWorkflow();
+		cy.wait(waitForWebhook);
+
+		// hide other visible popper on workflow execute button
+		workflowPage.getters.canvasNodes().eq(0).click();
+
+		callEndpoint((response) => {
+			expect(response.status).to.eq(200);
+			getVisiblePopper().should('have.length', 1);
+			getVisiblePopper()
+				.eq(0)
+				.should(
+					'have.text',
+					'You can pin this output instead of waiting for a test event. Open node to do so.',
+				);
+		});
+	});
+
+	it('should not show pinned data tooltip', () => {
+		cy.createFixtureWorkflow('Pinned_webhook_node.json', 'Test');
+		workflowPage.actions.executeWorkflow();
+
+		// hide other visible popper on workflow execute button
+		workflowPage.getters.canvasNodes().eq(0).click();
+
+		getVisiblePopper().should('have.length', 0);
+	});
 });
 
 function setExpressionOnStringValueInSet(expression: string) {
diff --git a/cypress/e2e/16-webhook-node.cy.ts b/cypress/e2e/16-webhook-node.cy.ts
index 9346004388..3d6c1049a2 100644
--- a/cypress/e2e/16-webhook-node.cy.ts
+++ b/cypress/e2e/16-webhook-node.cy.ts
@@ -9,7 +9,7 @@ const workflowPage = new WorkflowPage();
 const ndv = new NDV();
 const credentialsModal = new CredentialsModal();
 
-const waitForWebhook = 500;
+export const waitForWebhook = 500;
 
 interface SimpleWebhookCallOptions {
 	method: string;
@@ -21,7 +21,7 @@ interface SimpleWebhookCallOptions {
 	authentication?: string;
 }
 
-const simpleWebhookCall = (options: SimpleWebhookCallOptions) => {
+export const simpleWebhookCall = (options: SimpleWebhookCallOptions) => {
 	const {
 		authentication,
 		method,
@@ -65,15 +65,23 @@ const simpleWebhookCall = (options: SimpleWebhookCallOptions) => {
 		getVisibleSelect().find('.option-headline').contains(responseData).click();
 	}
 
+	const callEndpoint = (cb: (response: Cypress.Response<unknown>) => void) => {
+		cy.request(method, `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then(cb);
+	};
+
 	if (executeNow) {
 		ndv.actions.execute();
 		cy.wait(waitForWebhook);
 
-		cy.request(method, `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then((response) => {
+		callEndpoint((response) => {
 			expect(response.status).to.eq(200);
 			ndv.getters.outputPanel().contains('headers');
 		});
 	}
+
+	return {
+		callEndpoint,
+	};
 };
 
 describe('Webhook Trigger node', () => {
diff --git a/cypress/fixtures/Pinned_webhook_node.json b/cypress/fixtures/Pinned_webhook_node.json
new file mode 100644
index 0000000000..eb98b17351
--- /dev/null
+++ b/cypress/fixtures/Pinned_webhook_node.json
@@ -0,0 +1,39 @@
+{
+  "nodes": [
+    {
+      "parameters": {
+        "path": "FwrbSiaua2Xmvn6-Z-7CQ",
+        "options": {}
+      },
+      "id": "8fcc7e5f-2cef-4938-9564-eea504c20aa0",
+      "name": "Webhook",
+      "type": "n8n-nodes-base.webhook",
+      "typeVersion": 2,
+      "position": [
+        360,
+        220
+      ],
+      "webhookId": "9c778f2a-e882-46ed-a0e4-c8e2f76ccd65"
+    }
+  ],
+  "connections": {},
+  "pinData": {
+    "Webhook": [
+      {
+        "headers": {
+          "connection": "keep-alive",
+          "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36",
+          "accept": "*/*",
+          "cookie": "n8n-auth=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjNiM2FhOTE5LWRhZDgtNDE5MS1hZWZiLTlhZDIwZTZkMjJjNiIsImhhc2giOiJ1ZVAxR1F3U2paIiwiaWF0IjoxNzI4OTE1NTQyLCJleHAiOjE3Mjk1MjAzNDJ9.fV02gpUnSiUoMxHwfB0npBjcjct7Mv9vGfj-jRTT3-I",
+          "host": "localhost:5678",
+          "accept-encoding": "gzip, deflate"
+        },
+        "params": {},
+        "query": {},
+        "body": {},
+        "webhookUrl": "http://localhost:5678/webhook-test/FwrbSiaua2Xmvn6-Z-7CQ",
+        "executionMode": "test"
+      }
+    ]
+  }
+}
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 6fcc93be76..ae46c79c6f 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -523,7 +523,8 @@ function showPinDataDiscoveryTooltip(dataItemsCount: number): void {
 		isManualTypeNode.value ||
 		isScheduledGroup.value ||
 		uiStore.isAnyModalOpen ||
-		dataItemsCount === 0
+		dataItemsCount === 0 ||
+		pinnedData.hasData.value
 	)
 		return;