fix: Adjust 'use template' feature telemetry (no-changelog) (#8232)

- Add extra params to 'User closed cred setup' event
- Fire 'User closed cred setup' only when template has creds
- Skip cred setup page if template has no creds required
- Fire 'User inserted workflow template' also in cred setup

packages/editor-ui/src/views/SetupWorkflowFromTemplateView/setupTemplate.store.ts

@@ -8,28 +8,21 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { getAppNameFromNodeName } from '@/utils/nodeTypesUtils';
-import type {
-	INodeCredentialDescription,
-	INodeCredentialsDetails,
-	INodeTypeDescription,
-} from 'n8n-workflow';
-import type {
-	ICredentialsResponse,
-	INodeUi,
-	ITemplatesWorkflowFull,
-	IWorkflowTemplateNode,
-} from '@/Interface';
+import type { INodeCredentialsDetails, INodeTypeDescription } from 'n8n-workflow';
+import type { ICredentialsResponse, INodeUi, IWorkflowTemplateNode } from '@/Interface';
 import { VIEWS } from '@/constants';
 import { createWorkflowFromTemplate } from '@/utils/templates/templateActions';
-import type { TemplateCredentialKey } from '@/utils/templates/templateTransforms';
+import type {
+	TemplateCredentialKey,
+	TemplateNodeWithRequiredCredential,
+} from '@/utils/templates/templateTransforms';
 import {
+	getNodesRequiringCredentials,
 	keyFromCredentialTypeAndName,
 	normalizeTemplateNodeCredentials,
 } from '@/utils/templates/templateTransforms';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useTelemetry } from '@/composables/useTelemetry';
-import { getNodeTypeDisplayableCredentials } from '@/utils/nodes/nodeTransforms';
-import type { NodeTypeProvider } from '@/utils/nodeTypes/nodeTypeTransforms';
 
 export type NodeAndType = {
 	node: INodeUi;
@@ -64,35 +57,8 @@ export type AppCredentialCount = {
 	count: number;
 };
 
-export type TemplateNodeWithRequiredCredential = {
-	node: IWorkflowTemplateNode;
-	requiredCredentials: INodeCredentialDescription[];
-};
-
 //#region Getter functions
 
-/**
- * Returns the nodes in the template that require credentials
- * and the required credentials for each node.
- */
-export const getNodesRequiringCredentials = (
-	nodeTypeProvider: NodeTypeProvider,
-	template: ITemplatesWorkflowFull,
-): TemplateNodeWithRequiredCredential[] => {
-	if (!template) {
-		return [];
-	}
-
-	const nodesWithCredentials: TemplateNodeWithRequiredCredential[] = template.workflow.nodes
-		.map((node) => ({
-			node,
-			requiredCredentials: getNodeTypeDisplayableCredentials(nodeTypeProvider, node),
-		}))
-		.filter(({ requiredCredentials }) => requiredCredentials.length > 0);
-
-	return nodesWithCredentials;
-};
-
 export const groupNodeCredentialsByKey = (
 	nodeWithRequiredCredentials: TemplateNodeWithRequiredCredential[],
 ) => {
@@ -343,6 +309,9 @@ export const useSetupTemplateStore = defineStore('setupTemplate', () => {
 
 		telemetry.track('User closed cred setup', {
 			completed: false,
+			creds_filled: 0,
+			creds_needed: credentialUsages.value.length,
+			workflow_id: null,
 		});
 
 		// Replace the URL so back button doesn't come back to this setup view
@@ -376,6 +345,19 @@ export const useSetupTemplateStore = defineStore('setupTemplate', () => {
 
 			telemetry.track('User closed cred setup', {
 				completed: true,
+				creds_filled: numFilledCredentials.value,
+				creds_needed: credentialUsages.value.length,
+				workflow_id: createdWorkflow.id,
+			});
+
+			const telemetryPayload = {
+				source: 'workflow',
+				template_id: template.value.id,
+				wf_template_repo_session_id: templatesStore.currentSessionId,
+			};
+
+			telemetry.track('User inserted workflow template', telemetryPayload, {
+				withPostHog: true,
 			});
 
 			// Replace the URL so back button doesn't come back to this setup view

packages/editor-ui/src/views/TemplatesCollectionView.vue

@@ -66,11 +66,12 @@ import type {
 } from '@/Interface';
 
 import { setPageTitle } from '@/utils/htmlUtils';
-import { TEMPLATE_CREDENTIAL_SETUP_EXPERIMENT, VIEWS } from '@/constants';
+import { VIEWS } from '@/constants';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { usePostHog } from '@/stores/posthog.store';
-import { openTemplateCredentialSetup } from '@/utils/templates/templateActions';
+import { useTemplateWorkflow } from '@/utils/templates/templateActions';
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
 export default defineComponent({
 	name: 'TemplatesCollectionView',
@@ -152,23 +153,15 @@ export default defineComponent({
 			this.navigateTo(event, VIEWS.TEMPLATE, id);
 		},
 		async onUseWorkflow({ event, id }: { event: MouseEvent; id: string }) {
-			if (this.posthogStore.isFeatureEnabled(TEMPLATE_CREDENTIAL_SETUP_EXPERIMENT)) {
-				const telemetryPayload = {
-					template_id: id,
-					wf_template_repo_session_id: this.templatesStore.currentSessionId,
-					source: 'collection',
-				};
-				await this.externalHooks.run('templatesCollectionView.onUseWorkflow', telemetryPayload);
-				this.$telemetry.track('User inserted workflow template', telemetryPayload, {
-					withPostHog: true,
-				});
-			}
-
-			await openTemplateCredentialSetup({
+			await useTemplateWorkflow({
 				posthogStore: this.posthogStore,
 				router: this.$router,
 				templateId: id,
 				inNewBrowserTab: event.metaKey || event.ctrlKey,
+				templatesStore: useTemplatesStore(),
+				externalHooks: this.externalHooks,
+				nodeTypesStore: useNodeTypesStore(),
+				telemetry: this.$telemetry,
 			});
 		},
 		navigateTo(e: MouseEvent, page: string, id: string) {

packages/editor-ui/src/views/TemplatesWorkflowView.vue

@@ -68,9 +68,9 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { setPageTitle } from '@/utils/htmlUtils';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { usePostHog } from '@/stores/posthog.store';
-import { openTemplateCredentialSetup } from '@/utils/templates/templateActions';
+import { useTemplateWorkflow } from '@/utils/templates/templateActions';
 import { useExternalHooks } from '@/composables/useExternalHooks';
-import { TEMPLATE_CREDENTIAL_SETUP_EXPERIMENT } from '@/constants';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
 export default defineComponent({
 	name: 'TemplatesWorkflowView',
@@ -132,24 +132,15 @@ export default defineComponent({
 	},
 	methods: {
 		async openTemplateSetup(id: string, e: PointerEvent) {
-			if (!this.posthogStore.isFeatureEnabled(TEMPLATE_CREDENTIAL_SETUP_EXPERIMENT)) {
-				const telemetryPayload = {
-					source: 'workflow',
-					template_id: id,
-					wf_template_repo_session_id: this.templatesStore.currentSessionId,
-				};
-
-				this.$telemetry.track('User inserted workflow template', telemetryPayload, {
-					withPostHog: true,
-				});
-				await this.externalHooks.run('templatesWorkflowView.openWorkflow', telemetryPayload);
-			}
-
-			await openTemplateCredentialSetup({
+			await useTemplateWorkflow({
 				posthogStore: this.posthogStore,
 				router: this.$router,
 				templateId: id,
 				inNewBrowserTab: e.metaKey || e.ctrlKey,
+				externalHooks: this.externalHooks,
+				nodeTypesStore: useNodeTypesStore(),
+				telemetry: this.$telemetry,
+				templatesStore: useTemplatesStore(),
 			});
 		},
 		onHidePreview() {