From a3ca7c7acddaf7462dd9b6e15ab630dbcb6bb842 Mon Sep 17 00:00:00 2001
From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>
Date: Thu, 7 Dec 2023 19:35:34 +0200
Subject: [PATCH] fix: Disable continue button unless at least 1 cred has been
 filled (no-changelog) (#7959)

Disable the continue button in template credential setup unless at least
one credential has been (pre-)filled
---
 .../e2e/34-template-credentials-setup.cy.ts   |  6 +++++-
 .../src/plugins/i18n/locales/en.json          |  3 ++-
 .../SetupWorkflowFromTemplateView.vue         | 21 ++++++++++++-------
 .../setupTemplate.store.ts                    |  5 +++++
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/cypress/e2e/34-template-credentials-setup.cy.ts b/cypress/e2e/34-template-credentials-setup.cy.ts
index 2969d56c0f..670b94d942 100644
--- a/cypress/e2e/34-template-credentials-setup.cy.ts
+++ b/cypress/e2e/34-template-credentials-setup.cy.ts
@@ -92,13 +92,17 @@ describe('Template credentials setup', () => {
 	it('can create credentials and workflow from the template', () => {
 		templateCredentialsSetupPage.actions.visit(testTemplate.id);
 
-		templateCredentialsSetupPage.getters.continueButton().should('be.enabled');
+		// Continue button should be disabled if no credentials are created
+		templateCredentialsSetupPage.getters.continueButton().should('be.disabled');
 
 		templateCredentialsSetupPage.getters.createAppCredentialsButton('Shopify').click();
 		credentialsModal.getters.editCredentialModal().find('input:first()').type('test');
 		credentialsModal.actions.save(false);
 		credentialsModal.actions.close();
 
+		// Continue button should be enabled if at least one has been created
+		templateCredentialsSetupPage.getters.continueButton().should('be.enabled');
+
 		templateCredentialsSetupPage.getters.createAppCredentialsButton('X (Formerly Twitter)').click();
 		credentialsModal.getters.editCredentialModal().find('input:first()').type('test');
 		credentialsModal.actions.save(false);
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 88d92105e2..2c8d62560f 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2283,5 +2283,6 @@
 	"templateSetup.instructions": "You need {0} account to setup this template",
 	"templateSetup.skip": "Skip",
 	"templateSetup.continue.button": "Continue",
-	"templateSetup.credential.description": "The credential you select will be used in the {0} node of the workflow template. | The credential you select will be used in the {0} nodes of the workflow template."
+	"templateSetup.credential.description": "The credential you select will be used in the {0} node of the workflow template. | The credential you select will be used in the {0} nodes of the workflow template.",
+	"templateSetup.continue.button.fillRemaining": "Fill remaining credentials to continue"
 }
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
index 5578a5430b..3def689312 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
@@ -129,14 +129,21 @@ onMounted(async () => {
 						i18n.baseText('templateSetup.skip')
 					}}</n8n-link>
 
-					<n8n-button
+					<n8n-tooltip
 						v-if="isReady"
-						size="large"
-						:label="i18n.baseText('templateSetup.continue.button')"
-						:disabled="setupTemplateStore.isSaving"
-						@click="setupTemplateStore.createWorkflow({ router })"
-						data-test-id="continue-button"
-					/>
+						:content="i18n.baseText('templateSetup.continue.button.fillRemaining')"
+						:disabled="setupTemplateStore.numFilledCredentials > 0"
+					>
+						<n8n-button
+							size="large"
+							:label="i18n.baseText('templateSetup.continue.button')"
+							:disabled="
+								setupTemplateStore.isSaving || setupTemplateStore.numFilledCredentials === 0
+							"
+							@click="setupTemplateStore.createWorkflow({ router })"
+							data-test-id="continue-button"
+						/>
+					</n8n-tooltip>
 					<div v-else>
 						<n8n-loading variant="button" />
 					</div>
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/setupTemplate.store.ts b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/setupTemplate.store.ts
index 8181f47e8a..0f2407da43 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/setupTemplate.store.ts
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/setupTemplate.store.ts
@@ -227,6 +227,10 @@ export const useSetupTemplateStore = defineStore('setupTemplate', () => {
 		return overrides;
 	});
 
+	const numFilledCredentials = computed(() => {
+		return Object.keys(selectedCredentialIdByKey.value).length;
+	});
+
 	//#endregion Getters
 
 	//#region Actions
@@ -376,6 +380,7 @@ export const useSetupTemplateStore = defineStore('setupTemplate', () => {
 		credentialUsages,
 		selectedCredentialIdByKey,
 		credentialOverrides,
+		numFilledCredentials,
 		createWorkflow,
 		skipSetup,
 		init,