From b63f9cc53396b781347ccd7b195cc013d7b0fdfd Mon Sep 17 00:00:00 2001
From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>
Date: Thu, 7 Dec 2023 16:05:43 +0200
Subject: [PATCH] feat(editor): Add user opened cred modal telemetry event
 (no-changelog) (#7927)

## Summary

Add `User opened Credential modal` telemetry event to the template
credential setup page, as specified
[here](https://www.notion.so/n8n/Handoff-a1150c38f6e042db91fdf61c56900967?pvs=4)
---
 .../CredentialPicker/CredentialPicker.vue       |  3 +++
 .../SetupTemplateFormStep.vue                   | 17 +++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue b/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
index eb945a7ab..4a65f49e5 100644
--- a/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
+++ b/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
@@ -24,6 +24,7 @@ const props = defineProps({
 const $emit = defineEmits({
 	credentialSelected: (_credentialId: string) => true,
 	credentialDeselected: () => true,
+	credentialModalOpened: () => true,
 });
 
 const uiStore = useUIStore();
@@ -47,10 +48,12 @@ const onCredentialSelected = (credentialId: string) => {
 };
 const createNewCredential = () => {
 	uiStore.openNewCredential(props.credentialType, true);
+	$emit('credentialModalOpened');
 };
 const editCredential = () => {
 	assert(props.selectedCredentialId);
 	uiStore.openExistingCredential(props.selectedCredentialId);
+	$emit('credentialModalOpened');
 };
 
 listenForCredentialChanges({
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
index ae67e6d21..f9ba10322 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
@@ -12,6 +12,7 @@ import type { CredentialUsages } from '@/views/SetupWorkflowFromTemplateView/set
 import { useSetupTemplateStore } from '@/views/SetupWorkflowFromTemplateView/setupTemplate.store';
 import type { IWorkflowTemplateNode } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
 
 // Props
 const props = defineProps({
@@ -29,6 +30,7 @@ const props = defineProps({
 const setupTemplateStore = useSetupTemplateStore();
 const nodeTypesStore = useNodeTypesStore();
 const i18n = useI18n();
+const telemetry = useTelemetry();
 
 //#region Computed
 
@@ -66,6 +68,20 @@ const onCredentialDeselected = () => {
 	setupTemplateStore.unsetSelectedCredential(props.credentials.key);
 };
 
+const onCredentialModalOpened = () => {
+	telemetry.track(
+		'User opened Credential modal',
+		{
+			source: 'cred_setup',
+			credentialType: props.credentials.credentialType,
+			new_credential: !selectedCredentialId.value,
+		},
+		{
+			withPostHog: true,
+		},
+	);
+};
+
 //#endregion Methods
 </script>
 
@@ -98,6 +114,7 @@ const onCredentialDeselected = () => {
 				:selectedCredentialId="selectedCredentialId"
 				@credential-selected="onCredentialSelected"
 				@credential-deselected="onCredentialDeselected"
+				@credential-modal-opened="onCredentialModalOpened"
 			/>
 
 			<IconSuccess