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
This commit is contained in:
Tomi Turtiainen 2023-12-07 19:35:34 +02:00 committed by GitHub
parent c48850d74f
commit a3ca7c7acd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 9 deletions

View file

@ -92,13 +92,17 @@ describe('Template credentials setup', () => {
it('can create credentials and workflow from the template', () => { it('can create credentials and workflow from the template', () => {
templateCredentialsSetupPage.actions.visit(testTemplate.id); 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(); templateCredentialsSetupPage.getters.createAppCredentialsButton('Shopify').click();
credentialsModal.getters.editCredentialModal().find('input:first()').type('test'); credentialsModal.getters.editCredentialModal().find('input:first()').type('test');
credentialsModal.actions.save(false); credentialsModal.actions.save(false);
credentialsModal.actions.close(); 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(); templateCredentialsSetupPage.getters.createAppCredentialsButton('X (Formerly Twitter)').click();
credentialsModal.getters.editCredentialModal().find('input:first()').type('test'); credentialsModal.getters.editCredentialModal().find('input:first()').type('test');
credentialsModal.actions.save(false); credentialsModal.actions.save(false);

View file

@ -2283,5 +2283,6 @@
"templateSetup.instructions": "You need {0} account to setup this template", "templateSetup.instructions": "You need {0} account to setup this template",
"templateSetup.skip": "Skip", "templateSetup.skip": "Skip",
"templateSetup.continue.button": "Continue", "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"
} }

View file

@ -129,14 +129,21 @@ onMounted(async () => {
i18n.baseText('templateSetup.skip') i18n.baseText('templateSetup.skip')
}}</n8n-link> }}</n8n-link>
<n8n-button <n8n-tooltip
v-if="isReady" v-if="isReady"
size="large" :content="i18n.baseText('templateSetup.continue.button.fillRemaining')"
:label="i18n.baseText('templateSetup.continue.button')" :disabled="setupTemplateStore.numFilledCredentials > 0"
:disabled="setupTemplateStore.isSaving" >
@click="setupTemplateStore.createWorkflow({ router })" <n8n-button
data-test-id="continue-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> <div v-else>
<n8n-loading variant="button" /> <n8n-loading variant="button" />
</div> </div>

View file

@ -227,6 +227,10 @@ export const useSetupTemplateStore = defineStore('setupTemplate', () => {
return overrides; return overrides;
}); });
const numFilledCredentials = computed(() => {
return Object.keys(selectedCredentialIdByKey.value).length;
});
//#endregion Getters //#endregion Getters
//#region Actions //#region Actions
@ -376,6 +380,7 @@ export const useSetupTemplateStore = defineStore('setupTemplate', () => {
credentialUsages, credentialUsages,
selectedCredentialIdByKey, selectedCredentialIdByKey,
credentialOverrides, credentialOverrides,
numFilledCredentials,
createWorkflow, createWorkflow,
skipSetup, skipSetup,
init, init,