fix: Adjust telemetry from canvas (no-changelog) (#8252)

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

@@ -5,9 +5,13 @@ import { useI18n } from '@/composables/useI18n';
 import N8nHeading from 'n8n-design-system/components/N8nHeading';
 import AppsRequiringCredsNotice from '@/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue';
 import SetupTemplateFormStep from '@/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue';
-import { onMounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useWorkflowsStore } from '@/stores/workflows.store';
 
 const i18n = useI18n();
+const telemetry = useTelemetry();
+const workflowStore = useWorkflowsStore();
 
 const props = defineProps<{
 	modalName: string;
@@ -17,6 +21,7 @@ const props = defineProps<{
 const {
 	appCredentials,
 	credentialUsages,
+	numFilledCredentials,
 	selectedCredentialIdByKey,
 	setInitialCredentialSelection,
 	setCredential,
@@ -25,6 +30,17 @@ const {
 
 onMounted(() => {
 	setInitialCredentialSelection();
+
+	telemetry.track('User opened cred setup', { source: 'canvas' }, { withPostHog: true });
+});
+
+onUnmounted(() => {
+	telemetry.track('User closed cred setup', {
+		completed: numFilledCredentials.value === credentialUsages.value.length,
+		creds_filled: numFilledCredentials.value,
+		creds_needed: credentialUsages.value.length,
+		workflow_id: workflowStore.workflowId,
+	});
 });
 </script>
 

packages/editor-ui/src/stores/credentials.store.ts

@@ -407,11 +407,11 @@ export const listenForCredentialChanges = (opts: {
 	onCredentialCreated?: (credential: ICredentialsResponse) => void;
 	onCredentialUpdated?: (credential: ICredentialsResponse) => void;
 	onCredentialDeleted?: (credentialId: string) => void;
-}): void => {
+}) => {
 	const { store, onCredentialCreated, onCredentialDeleted, onCredentialUpdated } = opts;
 	const listeningForActions = ['createNewCredential', 'updateCredential', 'deleteCredential'];
 
-	store.$onAction((result) => {
+	return store.$onAction((result) => {
 		const { name, after, args } = result;
 		after(async (returnValue) => {
 			if (!listeningForActions.includes(name)) {

packages/editor-ui/src/stores/ui.store.ts

@@ -629,11 +629,11 @@ export const listenForModalChanges = (opts: {
 	store: UiStore;
 	onModalOpened?: (name: keyof Modals) => void;
 	onModalClosed?: (name: keyof Modals) => void;
-}): void => {
+}) => {
 	const { store, onModalClosed, onModalOpened } = opts;
 	const listeningForActions = ['openModal', 'openModalWithData', 'closeModal'];
 
-	store.$onAction((result) => {
+	return store.$onAction((result) => {
 		const { name, after, args } = result;
 		after(async () => {
 			if (!listeningForActions.includes(name)) {

packages/editor-ui/src/utils/templates/templateActions.ts

@@ -68,8 +68,12 @@ async function openTemplateCredentialSetup(opts: {
 	templateId: string;
 	router: Router;
 	inNewBrowserTab?: boolean;
+	telemetry: Telemetry;
+	source: string;
 }) {
-	const { router, templateId, inNewBrowserTab = false } = opts;
+	const { router, templateId, inNewBrowserTab = false, telemetry, source } = opts;
+
+	telemetry.track('User opened cred setup', { source }, { withPostHog: true });
 
 	const routeLocation: RouteLocationRaw = {
 		name: VIEWS.TEMPLATE_SETUP,
@@ -152,6 +156,7 @@ export async function useTemplateWorkflow(opts: {
 	router: Router;
 	inNewBrowserTab?: boolean;
 	telemetry: Telemetry;
+	source: string;
 }) {
 	const { nodeTypesStore, posthogStore, templateId, templatesStore } = opts;
 

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

@@ -81,12 +81,7 @@ setupTemplateStore.setTemplateId(templateId.value);
 
 onMounted(async () => {
 	await setupTemplateStore.init();
-	const wasSkipped = await skipIfTemplateHasNoCreds();
+	await skipIfTemplateHasNoCreds();
-	if (!wasSkipped) {
-		telemetry.track('User opened cred setup', undefined, {
-			withPostHog: true,
-		});
-	}
 });
 
 //#endregion Lifecycle hooks

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

@@ -162,6 +162,7 @@ export default defineComponent({
 				externalHooks: this.externalHooks,
 				nodeTypesStore: useNodeTypesStore(),
 				telemetry: this.$telemetry,
+				source: 'template_list',
 			});
 		},
 		navigateTo(e: MouseEvent, page: string, id: string) {

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

@@ -141,6 +141,7 @@ export default defineComponent({
 				nodeTypesStore: useNodeTypesStore(),
 				telemetry: this.$telemetry,
 				templatesStore: useTemplatesStore(),
+				source: 'template_preview',
 			});
 		},
 		onHidePreview() {