From 38d91c43e3b1b6cde7a5a737c8ad33b89bb6fc45 Mon Sep 17 00:00:00 2001
From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>
Date: Mon, 8 Jan 2024 16:34:28 +0200
Subject: [PATCH] fix: Adjust set up template button styles (no-changelog)
 (#8259)

---
 .../setup-workflow-credentials-button.ts      |  2 +-
 .../e2e/34-template-credentials-setup.cy.ts   | 22 ++++++++++++-------
 .../SetupWorkflowCredentialsButton.vue        |  2 ++
 .../src/plugins/i18n/locales/en.json          |  2 +-
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/cypress/composables/setup-workflow-credentials-button.ts b/cypress/composables/setup-workflow-credentials-button.ts
index 0e19fb23e2..6b1b9b69d4 100644
--- a/cypress/composables/setup-workflow-credentials-button.ts
+++ b/cypress/composables/setup-workflow-credentials-button.ts
@@ -2,4 +2,4 @@
  * Getters
  */
 
-export const getSetupWorkflowCredentialsButton = () => cy.get(`button:contains("Set up Template")`);
+export const getSetupWorkflowCredentialsButton = () => cy.get(`button:contains("Set up template")`);
diff --git a/cypress/e2e/34-template-credentials-setup.cy.ts b/cypress/e2e/34-template-credentials-setup.cy.ts
index 984a4f5c5e..29c2e74d7e 100644
--- a/cypress/e2e/34-template-credentials-setup.cy.ts
+++ b/cypress/e2e/34-template-credentials-setup.cy.ts
@@ -15,6 +15,20 @@ const workflowPage = new WorkflowPage();
 
 const testTemplate = templateCredentialsSetupPage.testData.simpleTemplate;
 
+// NodeView uses beforeunload listener that will show a browser
+// native popup, which will block cypress from continuing / exiting.
+// This prevent the registration of the listener.
+Cypress.on('window:before:load', (win) => {
+	const origAddEventListener = win.addEventListener;
+	win.addEventListener = (eventName: string, listener: any, opts: any) => {
+		if (eventName === 'beforeunload') {
+			return;
+		}
+
+		return origAddEventListener.call(win, eventName, listener, opts);
+	};
+});
+
 describe('Template credentials setup', () => {
 	beforeEach(() => {
 		cy.intercept('GET', `https://api.n8n.io/api/templates/workflows/${testTemplate.id}`, {
@@ -159,10 +173,6 @@ describe('Template credentials setup', () => {
 			templateCredentialsSetupPage.getters.skipLink().click();
 
 			getSetupWorkflowCredentialsButton().should('be.visible');
-
-			// We need to save the workflow or otherwise a browser native popup
-			// will block cypress from continuing
-			workflowPage.actions.saveWorkflowOnButtonClick();
 		});
 
 		it('should allow credential setup from workflow editor if user fills in credentials partially during template setup', () => {
@@ -203,10 +213,6 @@ describe('Template credentials setup', () => {
 			});
 
 			getSetupWorkflowCredentialsButton().should('not.exist');
-
-			// We need to save the workflow or otherwise a browser native popup
-			// will block cypress from continuing
-			workflowPage.actions.saveWorkflowOnButtonClick();
 		});
 	});
 });
diff --git a/packages/editor-ui/src/components/SetupWorkflowCredentialsButton/SetupWorkflowCredentialsButton.vue b/packages/editor-ui/src/components/SetupWorkflowCredentialsButton/SetupWorkflowCredentialsButton.vue
index 82302346e3..fc6af742ca 100644
--- a/packages/editor-ui/src/components/SetupWorkflowCredentialsButton/SetupWorkflowCredentialsButton.vue
+++ b/packages/editor-ui/src/components/SetupWorkflowCredentialsButton/SetupWorkflowCredentialsButton.vue
@@ -65,6 +65,8 @@ onBeforeUnmount(() => {
 		v-if="showButton"
 		:label="i18n.baseText('nodeView.setupTemplate')"
 		size="large"
+		icon="box-open"
+		type="secondary"
 		@click="handleClick()"
 	/>
 </template>
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 562eae33bf..ed1f0b0bf9 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1095,7 +1095,7 @@
 	"nodeView.zoomOut": "Zoom Out",
 	"nodeView.zoomToFit": "Zoom to Fit",
 	"nodeView.replaceMe": "Replace Me",
-	"nodeView.setupTemplate": "Set up Template",
+	"nodeView.setupTemplate": "Set up template",
 	"contextMenu.node": "node | nodes",
 	"contextMenu.sticky": "sticky note | sticky notes",
 	"contextMenu.selectAll": "Select all",