feat(editor): Open template setup modal automatically (no-changelog) (#22596)

packages/frontend/editor-ui/src/features/workflows/templates/components/SetupWorkflowCredentialsButton.vue

@@ -1,15 +1,17 @@
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue';
 import { useI18n } from '@n8n/i18n';
-import { SETUP_CREDENTIALS_MODAL_KEY } from '@/app/constants';
+import { SETUP_CREDENTIALS_MODAL_KEY, TEMPLATE_SETUP_EXPERIENCE } from '@/app/constants';
 import { useNodeTypesStore } from '@/app/stores/nodeTypes.store';
 import { useUIStore } from '@/app/stores/ui.store';
 import { useWorkflowsStore } from '@/app/stores/workflows.store';
 import { doesNodeHaveAllCredentialsFilled } from '@/app/utils/nodes/nodeTransforms';
 
 import { N8nButton } from '@n8n/design-system';
+import { usePostHog } from '@/app/stores/posthog.store';
 const workflowsStore = useWorkflowsStore();
 const nodeTypesStore = useNodeTypesStore();
+const posthogStore = usePostHog();
 const uiStore = useUIStore();
 const i18n = useI18n();
 
@@ -39,6 +41,12 @@ const showButton = computed(() => {
 	return !allCredentialsFilled.value;
 });
 
+const isNewTemplatesSetupEnabled = computed(() => {
+	return (
+		posthogStore.getVariant(TEMPLATE_SETUP_EXPERIENCE.name) === TEMPLATE_SETUP_EXPERIENCE.variant
+	);
+});
+
 const unsubscribe = watch(allCredentialsFilled, (newValue) => {
 	if (newValue) {
 		workflowsStore.addToWorkflowMetadata({
@@ -49,13 +57,19 @@ const unsubscribe = watch(allCredentialsFilled, (newValue) => {
 	}
 });
 
-const handleClick = () => {
+const openSetupModal = () => {
 	uiStore.openModal(SETUP_CREDENTIALS_MODAL_KEY);
 };
 
 onBeforeUnmount(() => {
 	uiStore.closeModal(SETUP_CREDENTIALS_MODAL_KEY);
 });
+
+onMounted(() => {
+	if (isNewTemplatesSetupEnabled.value && showButton.value) {
+		openSetupModal();
+	}
+});
 </script>
 
 <template>
@@ -66,6 +80,6 @@ onBeforeUnmount(() => {
 		size="large"
 		icon="package-open"
 		type="secondary"
-		@click="handleClick()"
+		@click="openSetupModal()"
 	/>
 </template>

packages/testing/playwright/pages/TemplateCredentialSetupPage.ts

@@ -41,6 +41,12 @@ export class TemplateCredentialSetupPage extends BasePage {
 		return this.page.getByTestId('setup-workflow-credentials-modal');
 	}
 
+	getSetupCredentialModalCloseButton(): Locator {
+		return this.page
+			.getByTestId('setup-workflow-credentials-modal')
+			.getByRole('button', { name: 'Close this dialog' });
+	}
+
 	getSetupCredentialModalSteps(): Locator {
 		return this.page
 			.getByTestId('setup-workflow-credentials-modal')
@@ -68,4 +74,9 @@ export class TemplateCredentialSetupPage extends BasePage {
 		await messageBox.waitFor({ state: 'visible' });
 		await messageBox.locator('.btn--cancel').click();
 	}
+
+	async closeSetupCredentialModal(): Promise<void> {
+		await this.getSetupCredentialModalCloseButton().click();
+		await this.getCanvasCredentialModal().waitFor({ state: 'hidden' });
+	}
 }

packages/testing/playwright/tests/ui/regression/ADO-4462-template-setup-experiment.spec.ts

@@ -73,6 +73,11 @@ test.describe('Template credentials setup @db:reset', () => {
 		await expect(n8n.canvas.getCanvasNodes()).toHaveCount(3);
 
 		await expect(n8n.templateCredentialSetup.getCanvasSetupButton()).toBeVisible();
+		// Modal should open automatically
+		await expect(n8n.templateCredentialSetup.getCanvasCredentialModal()).toBeVisible();
+
+		// Close the modal and re-open it
+		await n8n.templateCredentialSetup.closeSetupCredentialModal();
 		await n8n.templateCredentialSetup.getCanvasSetupButton().click();
 		await expect(n8n.templateCredentialSetup.getCanvasCredentialModal()).toBeVisible();