refactor(editor-ui): Update telemetry

packages/cli/src/InternalHooks.ts

@@ -186,6 +186,7 @@ export class InternalHooksClass implements IInternalHooksClass {
 				}
 
 				const manualExecEventProperties: ITelemetryTrackProperties = {
+					user_id: userId,
 					workflow_id: workflow.id.toString(),
 					status: properties.success ? 'success' : 'failed',
 					error_message: properties.error_message as string,

packages/cli/src/telemetry/index.ts

@@ -142,16 +142,6 @@ export class Telemetry {
 		[key: string]: string | number | boolean | object | undefined | null;
 	}): Promise<void> {
 		return new Promise<void>((resolve) => {
-			if (this.postHog) {
-				this.postHog.identify({
-					distinctId: this.instanceId,
-					properties: {
-						...traits,
-						instanceId: this.instanceId,
-					},
-				});
-			}
-
 			if (this.rudderStack) {
 				this.rudderStack.identify(
 					{
@@ -192,13 +182,19 @@ export class Telemetry {
 				};
 
 				if (withPostHog && this.postHog) {
-					this.postHog.capture({ ...payload, distinctId: payload.userId });
+					return Promise.all([
+						this.postHog.capture({
+							distinctId: payload.userId,
+							...payload,
+						}),
+						this.rudderStack.track(payload),
+					]).then(() => resolve());
 				}
 
-				this.rudderStack.track(payload, resolve);
-			} else {
-				resolve();
+				return this.rudderStack.track(payload, resolve);
 			}
+
+			return resolve();
 		});
 	}
 
@@ -208,7 +204,7 @@ export class Telemetry {
 	): Promise<boolean> {
 		if (!this.postHog) return Promise.resolve(false);
 
-		const fullId = [this.instanceId, userId].join('_'); // PostHog disallows # in ID
+		const fullId = [this.instanceId, userId].join('#');
 
 		return this.postHog.isFeatureEnabled(featureFlagName, fullId);
 	}

packages/design-system/src/components/N8nMarkdown/Markdown.vue

@@ -3,6 +3,7 @@
 		<div
 			v-if="!loading"
 			ref="editor"
+			class="ph-no-capture"
 			:class="$style[theme]" v-html="htmlContent"
 			@click="onClick"
 		/>

packages/design-system/src/components/N8nSticky/Sticky.vue

@@ -19,6 +19,7 @@
 			<template>
 				<div
 					v-show="!editMode"
+					class="ph-no-capture"
 					:class="$style.wrapper"
 					@dblclick.stop="onDoubleClick"
 				>
@@ -37,7 +38,7 @@
 					@keydown.esc="onInputBlur"
 					@keydown.stop
 					@wheel.stop
-					class="sticky-textarea"
+					class="sticky-textarea ph-no-capture"
 					:class="{'full-height': !shouldShowFooter}"
 				>
 					<n8n-input

packages/design-system/src/components/N8nUserInfo/UserInfo.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="classes">
+	<div class="ph-no-capture" :class="classes">
 		<div :class="$style.avatarContainer">
 			<n8n-avatar :firstName="firstName" :lastName="lastName" />
 		</div>

packages/design-system/src/components/N8nUsersList/UsersList.vue

@@ -3,6 +3,7 @@
 		<div
 			v-for="(user, i) in sortedUsers"
 			:key="user.id"
+			class='ph-no-capture'
 			:class="i === sortedUsers.length - 1 ? $style.itemContainer : $style.itemWithBorder"
 		>
 			<n8n-user-info v-bind="user" :isCurrentUser="currentUserId === user.id" />

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

@@ -62,9 +62,6 @@ export default mixins(copyPaste, showMessage).extend({
 			});
 		},
 	},
-	mounted() {
-		this.$externalHooks().run('copyInput.mounted', { copyInputValueRef: this.$refs.copyInputValue });
-	},
 });
 </script>
 

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

@@ -16,7 +16,7 @@
 				/>
 			</div>
 
-			<el-table :data="credentialsToDisplay" v-loading="loading" :default-sort = "{prop: 'name', order: 'ascending'}" stripe max-height="450" @row-click="editCredential" ref="table">
+			<el-table class="ph-no-capture" :data="credentialsToDisplay" v-loading="loading" :default-sort = "{prop: 'name', order: 'ascending'}" stripe max-height="450" @row-click="editCredential">
 				<el-table-column property="name" :label="$locale.baseText('credentialsList.name')" class-name="clickable" sortable></el-table-column>
 				<el-table-column property="type" :label="$locale.baseText('credentialsList.type')" class-name="clickable" sortable></el-table-column>
 				<el-table-column property="createdAt" :label="$locale.baseText('credentialsList.created')" class-name="clickable" sortable></el-table-column>
@@ -96,9 +96,6 @@ export default mixins(
 			this.$showError(e, this.$locale.baseText('credentialsList.errorLoadingCredentials'));
 		}
 		this.loading = false;
-		this.$externalHooks().run('credentialsList.mounted', {
-			tableRef: this.$refs['table'],
-		});
 		this.$telemetry.track('User opened Credentials panel', { workflow_id: this.$store.getters.workflowId });
 	},
 	destroyed() {

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

@@ -7,19 +7,21 @@
 	>
 		<template v-slot:content>
 
-			<div class="filters" ref="filters">
+			<div class="filters">
 				<el-row>
 					<el-col :span="2" class="filter-headline">
 						{{ $locale.baseText('executionsList.filters') }}:
 					</el-col>
 					<el-col :span="7">
 						<n8n-select v-model="filter.workflowId" :placeholder="$locale.baseText('executionsList.selectWorkflow')" size="medium" filterable @change="handleFilterChanged">
-							<n8n-option
-								v-for="item in workflows"
-								:key="item.id"
-								:label="item.name"
-								:value="item.id">
-							</n8n-option>
+							<div class="ph-no-capture">
+								<n8n-option
+									v-for="item in workflows"
+									:key="item.id"
+									:label="item.name"
+									:value="item.id">
+								</n8n-option>
+							</div>
 						</n8n-select>
 					</el-col>
 					<el-col :span="5" :offset="1">
@@ -45,7 +47,7 @@
 				</span>
 			</div>
 
-			<el-table :data="combinedExecutions" stripe v-loading="isDataLoading" :row-class-name="getRowClass" ref="table">
+			<el-table :data="combinedExecutions" stripe v-loading="isDataLoading" :row-class-name="getRowClass">
 				<el-table-column label="" width="30">
 					<!-- eslint-disable-next-line vue/no-unused-vars -->
 					<template slot="header" slot-scope="scope">
@@ -63,9 +65,11 @@
 				</el-table-column>
 				<el-table-column property="workflowName" :label="$locale.baseText('executionsList.name')">
 					<template slot-scope="scope">
-						<span class="workflow-name">
-							{{ scope.row.workflowName || $locale.baseText('executionsList.unsavedWorkflow') }}
-						</span>
+						<div class="ph-no-capture">
+							<span class="workflow-name">
+								{{ scope.row.workflowName || $locale.baseText('executionsList.unsavedWorkflow') }}
+							</span>
+						</div>
 
 						<span v-if="scope.row.stoppedAt === undefined">
 							({{ $locale.baseText('executionsList.running') }})
@@ -245,11 +249,6 @@ export default mixins(
 
 		this.$externalHooks().run('executionsList.openDialog');
 		this.$telemetry.track('User opened Executions log', { workflow_id: this.$store.getters.workflowId });
-
-		this.$externalHooks().run('executionsList.created', {
-			tableRef: this.$refs['table'],
-			filtersRef: this.$refs['filters'],
-		});
 	},
 	beforeDestroy() {
 		if (this.autoRefreshInterval) {

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

@@ -21,7 +21,7 @@
 						<div class="editor-description">
 							{{ $locale.baseText('expressionEdit.expression') }}
 						</div>
-						<div class="expression-editor" ref="expressionInput">
+						<div class="expression-editor ph-no-capture">
 							<expression-input :parameter="parameter" ref="inputFieldExpression" rows="8" :value="value" :path="path" @change="valueChanged" @keydown.stop="noOp"></expression-input>
 						</div>
 					</div>
@@ -30,7 +30,7 @@
 						<div class="editor-description">
 							{{ $locale.baseText('expressionEdit.result') }}
 						</div>
-						<div ref="expressionOutput">
+						<div class="ph-no-capture">
 							<expression-input :parameter="parameter" resolvedValue="true" ref="expressionResult" rows="8" :value="displayValue" :path="path"></expression-input>
 						</div>
 					</div>
@@ -76,17 +76,6 @@ export default mixins(
 			latestValue: '',
 		};
 	},
-	updated() {
-		if (this.$refs.expressionInput && this.$refs.expressionOutput) {
-			this.$externalHooks().run(
-				'expressionEdit.mounted',
-				{
-					expressionInputRef: this.$refs.expressionInput,
-					expressionOutputRef: this.$refs.expressionOutput,
-				},
-			);
-		}
-	},
 	methods: {
 		valueChanged (value: string, forceUpdate = false) {
 			this.latestValue = value;

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

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.container">
+	<div class='ph-no-capture' :class="$style.container">
 		<span
 			v-if="readonly"
 			:class="$style.headline"

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

@@ -131,7 +131,7 @@
 						<span slot="title" class="item-title-root">{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available</span>
 					</n8n-menu-item>
 					<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle" v-if="canUserAccessSidebarUserInfo && currentUser">
-						<div ref="user">
+						<div class="ph-no-capture">
 							<n8n-menu-item class="user">
 								<div class="avatar">
 									<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
@@ -346,11 +346,6 @@ export default mixins(
 				return this.$route.meta && this.$route.meta.nodeView;
 			},
 		},
-		mounted() {
-			if (this.$refs.user) {
-				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
-			}
-		},
 		methods: {
 			trackHelpItemClick (itemType: string) {
 				this.$telemetry.track('User clicked help resource', { type: itemType, workflow_id: this.$store.getters.workflowId });

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

@@ -81,7 +81,7 @@
 					({{ $locale.baseText('node.disabled') }})
 				</p>
 			</div>
-			<div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle">
+			<div v-if="nodeSubtitle !== undefined" class="node-subtitle ph-no-capture" :title="nodeSubtitle">
 				{{ nodeSubtitle }}
 			</div>
 		</div>

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

@@ -202,7 +202,7 @@
 				>
 					<div class="list-option">
 						<div
-							class="option-headline"
+							class="option-headline ph-no-capture"
 							:class="{ 'remote-parameter-option': isRemoteParameterOption(option) }"
 						>
 							{{ getOptionsOptionDisplayName(option) }}

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

@@ -233,11 +233,11 @@
 				</n8n-text>
 			</div>
 
-			<div v-else-if="hasNodeRun && displayMode === 'table'" :class="$style.dataDisplay">
+			<div v-else-if="hasNodeRun && displayMode === 'table'" class="ph-no-capture" :class="$style.dataDisplay">
 				<RunDataTable :node="node" :inputData="inputData" :mappingEnabled="mappingEnabled" :distanceFromActive="distanceFromActive" :showMappingHint="showMappingHint" :runIndex="runIndex" :totalRuns="maxRunIndex" @mounted="$emit('tableMounted', $event)" />
 			</div>
 
-			<div v-else-if="hasNodeRun && displayMode === 'json'" :class="$style.jsonDisplay">
+			<div v-else-if="hasNodeRun && displayMode === 'json'" class="ph-no-capture" :class="$style.jsonDisplay">
 				<vue-json-pretty
 					:data="jsonData"
 					:deep="10"
@@ -489,18 +489,6 @@ export default mixins(
 				}
 			}
 		},
-		updated() {
-			this.$nextTick(() => {
-				const jsonValues = this.$el.querySelectorAll('.vjs-value');
-				const tableRows = this.$el.querySelectorAll('tbody tr');
-
-				const elements = [...jsonValues, ...tableRows].reduce<Element[]>((acc, cur) => [...acc, cur], []);
-
-				if (elements.length > 0) {
-					this.$externalHooks().run('runData.updated', { elements });
-				}
-			});
-		},
 		destroyed() {
 			this.hidePinDataDiscoveryTooltip();
 			this.eventBus.$off('data-pinning-error', this.onDataPinningError);

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

@@ -67,9 +67,6 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			type: Number,
 		},
 	},
-	mounted() {
-		this.$externalHooks().run('sticky.mounted', { stickyRef: this.$refs['sticky'] });
-	},
 	computed: {
 		defaultText (): string {
 			if (!this.nodeType) {

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

@@ -43,9 +43,15 @@ export default mixins(externalHooks).extend({
 					instanceId: this.instanceId,
 					userId: this.currentUserId,
 					store: this.$store,
+					versionCli: this.$store.getters['settings/versionCli'],
 				},
 			);
 
+			this.$externalHooks().run('telemetry.currentUserIdChanged', {
+				instanceId: this.instanceId,
+				userId: this.currentUserId,
+			});
+
 			this.isTelemetryInitialized = true;
 		},
 	},

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

@@ -25,7 +25,7 @@
 			</div>
 		</div>
 		<div v-else class="value clickable" @click="selectItem(item)">
-			<div class="item-title" :title="item.key" ref="variableSelectorItem">
+			<div class="item-title ph-no-capture" :title="item.key">
 				{{item.name}}:
 				<font-awesome-icon icon="dot-circle" title="Select Item" />
 			</div>
@@ -87,14 +87,6 @@ export default mixins(externalHooks).extend({
 			extended: false,
 		};
 	},
-	mounted() {
-		if (this.$refs.variableSelectorItem) {
-			this.$externalHooks().run(
-				'variableSelectorItem.mounted',
-				{ variableSelectorItemRef: this.$refs.variableSelectorItem },
-			);
-		}
-	},
 	methods: {
 		optionSelected (command: string, item: IVariableSelectorOption) {
 			// By default it is raw

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

@@ -29,10 +29,10 @@
 			</template>
 
 			<template v-slot:content>
-				<el-table class="search-table" :data="filteredWorkflows" stripe @cell-click="openWorkflow" :default-sort = "{prop: 'updatedAt', order: 'descending'}" v-loading="isDataLoading" ref="table">
+				<el-table class="search-table" :data="filteredWorkflows" stripe @cell-click="openWorkflow" :default-sort = "{prop: 'updatedAt', order: 'descending'}" v-loading="isDataLoading">
 					<el-table-column property="name" :label="$locale.baseText('workflowOpen.name')" class-name="clickable" sortable>
 						<template slot-scope="scope">
-							<div :key="scope.row.id">
+							<div class="ph-no-capture" :key="scope.row.id">
 								<span class="name">{{scope.row.name}}</span>
 								<TagsContainer v-if="areTagsEnabled" class="hidden-sm-and-down" :tagIds="getIds(scope.row.tags)" :limit="3" @click="onTagClick" :clickable="true" :hoverable="true" />
 							</div>
@@ -127,10 +127,6 @@ export default mixins(
 			// Make sure that users can directly type in the filter
 			(this.$refs.inputFieldFilter as HTMLInputElement).focus();
 		});
-
-		this.$externalHooks().run('workflowOpen.mounted', {
-			tableRef: this.$refs['table'],
-		});
 	},
 	methods: {
 		getIds(tags: ITag[] | undefined) {