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

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);

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"
 }

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>

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,