fix: Small ui fixes to workflow cred setup modal (no-changelog) (#8280)

cypress/composables/modals/workflow-credential-setup-modal.ts

@@ -4,9 +4,10 @@
 
 export const getWorkflowCredentialsModal = () => cy.getByTestId('setup-workflow-credentials-modal');
 
+export const getContinueButton = () => cy.getByTestId('continue-button');
+
 /**
  * Actions
  */
 
-export const closeModal = () =>
+export const closeModalFromContinueButton = () => getContinueButton().click();
-	getWorkflowCredentialsModal().find("button[aria-label='Close this dialog']").click();

cypress/e2e/34-template-credentials-setup.cy.ts

@@ -43,7 +43,7 @@ describe('Template credentials setup', () => {
 		templateWorkflowPage.actions.clickUseThisWorkflowButton();
 
 		templateCredentialsSetupPage.getters
-			.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
+			.title(`Set up 'Promote new Shopify products on Twitter and Telegram' template`)
 			.should('be.visible');
 	});
 
@@ -53,7 +53,7 @@ describe('Template credentials setup', () => {
 		clickUseWorkflowButtonByTitle('Promote new Shopify products on Twitter and Telegram');
 
 		templateCredentialsSetupPage.getters
-			.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
+			.title(`Set up 'Promote new Shopify products on Twitter and Telegram' template`)
 			.should('be.visible');
 	});
 
@@ -61,7 +61,7 @@ describe('Template credentials setup', () => {
 		templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
 
 		templateCredentialsSetupPage.getters
-			.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
+			.title(`Set up 'Promote new Shopify products on Twitter and Telegram' template`)
 			.should('be.visible');
 	});
 
@@ -69,7 +69,7 @@ describe('Template credentials setup', () => {
 		templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
 
 		templateCredentialsSetupPage.getters
-			.title(`Setup 'Promote new Shopify products on Twitter and Telegram' template`)
+			.title(`Set up 'Promote new Shopify products on Twitter and Telegram' template`)
 			.should('be.visible');
 
 		templateCredentialsSetupPage.getters
@@ -195,7 +195,8 @@ describe('Template credentials setup', () => {
 			templateCredentialsSetupPage.fillInDummyCredentialsForAppWithConfirm('X (Formerly Twitter)');
 			templateCredentialsSetupPage.fillInDummyCredentialsForApp('Telegram');
 
-			setupCredsModal.closeModal();
+			setupCredsModal.closeModalFromContinueButton();
+			setupCredsModal.getWorkflowCredentialsModal().should('not.exist');
 
 			// Focus the canvas so the copy to clipboard works
 			workflowPage.getters.canvasNodes().eq(0).realClick();

packages/editor-ui/src/components/SetupWorkflowCredentialsModal/SetupWorkflowCredentialsModal.vue

@@ -8,10 +8,12 @@ import SetupTemplateFormStep from '@/views/SetupWorkflowFromTemplateView/SetupTe
 import { onMounted, onUnmounted } from 'vue';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useUIStore } from '@/stores/ui.store';
 
 const i18n = useI18n();
 const telemetry = useTelemetry();
 const workflowStore = useWorkflowsStore();
+const uiStore = useUIStore();
 
 const props = defineProps<{
 	modalName: string;
@@ -45,7 +47,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<Modal width="900px" max-height="90%" :name="props.modalName">
+	<Modal width="700px" max-height="90%" :name="props.modalName">
 		<template #header>
 			<N8nHeading tag="h2" size="xlarge">
 				{{ i18n.baseText('setupCredentialsModal.title') }}
@@ -74,6 +76,18 @@ onUnmounted(() => {
 				</div>
 			</div>
 		</template>
+
+		<template #footer>
+			<div :class="$style.footer">
+				<n8n-button
+					size="large"
+					:label="i18n.baseText('templateSetup.continue.button')"
+					:disabled="numFilledCredentials === 0"
+					data-test-id="continue-button"
+					@click="uiStore.closeModal(props.modalName)"
+				/>
+			</div>
+		</template>
 	</Modal>
 </template>
 
@@ -84,7 +98,6 @@ onUnmounted(() => {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	max-width: 768px;
 }
 
 .notice {
@@ -102,4 +115,9 @@ onUnmounted(() => {
 	padding-bottom: var(--spacing-2xl);
 	border-bottom: 1px solid var(--color-foreground-light);
 }
+
+.footer {
+	display: flex;
+	justify-content: flex-end;
+}
 </style>

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -2365,11 +2365,11 @@
 	"filter.condition.resolvedFalse": "This condition is false for the first input item",
 	"filter.condition.placeholderLeft": "value1",
 	"filter.condition.placeholderRight": "value2",
-	"templateSetup.title": "Setup '{name}' template",
+	"templateSetup.title": "Set up '{name}' template",
 	"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.continue.button.fillRemaining": "Fill remaining credentials to continue",
-	"setupCredentialsModal.title": "Setup credentials"
+	"setupCredentialsModal.title": "Set up credentials"
 }