From c9f4e26e02b413e6e80fda24767915800ee0a85e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 6 Sep 2022 13:35:57 +0200
Subject: [PATCH] :zap: Move obfuscators to editor-ui

---
 .../src/components/N8nUserInfo/UserInfo.vue          |  2 +-
 packages/editor-ui/src/components/CopyInput.vue      |  5 +----
 .../editor-ui/src/components/CredentialsList.vue     |  5 +----
 packages/editor-ui/src/components/ExecutionsList.vue | 12 ++++--------
 packages/editor-ui/src/components/ExpressionEdit.vue |  4 ++--
 packages/editor-ui/src/components/MainSidebar.vue    |  7 +------
 packages/editor-ui/src/components/Node.vue           |  2 +-
 packages/editor-ui/src/components/ParameterInput.vue |  2 +-
 packages/editor-ui/src/components/RunData.vue        |  4 +++-
 packages/editor-ui/src/components/Sticky.vue         |  5 +----
 .../src/components/VariableSelectorItem.vue          | 10 +---------
 packages/editor-ui/src/components/WorkflowOpen.vue   |  6 +-----
 .../editor-ui/src/views/SettingsPersonalView.vue     |  6 +-----
 13 files changed, 19 insertions(+), 51 deletions(-)

diff --git a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
index e6acb476ea..313fcf5267 100644
--- a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
+++ b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.container">
-		<div :class="$style.avatarContainer">
+		<div class="ph-no-capture" :class="$style.avatarContainer">
 			<n8n-avatar :firstName="firstName" :lastName="lastName" />
 		</div>
 
diff --git a/packages/editor-ui/src/components/CopyInput.vue b/packages/editor-ui/src/components/CopyInput.vue
index 10567a6ff9..1cd754c6e9 100644
--- a/packages/editor-ui/src/components/CopyInput.vue
+++ b/packages/editor-ui/src/components/CopyInput.vue
@@ -2,7 +2,7 @@
 	<div>
 		<n8n-input-label :label="label">
 			<div :class="{[$style.copyText]: true, [$style[size]]: true, [$style.collapsed]: collapse}" @click="copy">
-				<span ref="copyInputValue">{{ value }}</span>
+				<span ref="copyInputValue ph-no-capture">{{ value }}</span>
 				<div :class="$style.copyButton"><span>{{ copyButtonText }}</span></div>
 			</div>
 		</n8n-input-label>
@@ -62,9 +62,6 @@ export default mixins(copyPaste, showMessage).extend({
 			});
 		},
 	},
-	mounted() {
-		this.$externalHooks().run('copyInput.mounted', { copyInputValueRef: this.$refs.copyInputValue });
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/CredentialsList.vue b/packages/editor-ui/src/components/CredentialsList.vue
index 1b5a4a6699..0e406ab5e7 100644
--- a/packages/editor-ui/src/components/CredentialsList.vue
+++ b/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" ref="table">
 				<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() {
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index 7fd1493980..4e1c531325 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -7,7 +7,7 @@
 	>
 		<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') }}:
@@ -15,6 +15,7 @@
 					<el-col :span="7">
 						<n8n-select v-model="filter.workflowId" :placeholder="$locale.baseText('executionsList.selectWorkflow')" size="medium" filterable @change="handleFilterChanged">
 							<n8n-option
+								class="ph-no-capture"
 								v-for="item in workflows"
 								:key="item.id"
 								:label="item.name"
@@ -45,7 +46,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,7 +64,7 @@
 				</el-table-column>
 				<el-table-column property="workflowName" :label="$locale.baseText('executionsList.name')">
 					<template slot-scope="scope">
-						<span class="workflow-name">
+						<span class="workflow-name ph-no-capture">
 							{{ scope.row.workflowName || $locale.baseText('executionsList.unsavedWorkflow') }}
 						</span>
 
@@ -245,11 +246,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) {
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index 0a2a5dea57..9724c1b52b 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/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>
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 1c7f527f56..5665d93d8f 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -146,7 +146,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" />
@@ -361,11 +361,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 });
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index aa84814c40..8920b6f55d 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/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>
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index c9d40902ad..95ce583e8c 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -201,7 +201,7 @@
 				>
 					<div class="list-option">
 						<div
-							class="option-headline"
+							class="option-headline ph-no-capture"
 							:class="{ 'remote-parameter-option': isRemoteParameterOption(option) }"
 						>
 							{{ getOptionsOptionDisplayName(option) }}
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index b640bbba12..a01923380f 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -497,7 +497,9 @@ export default mixins(
 				const elements = [...jsonValues, ...tableRows].reduce<Element[]>((acc, cur) => [...acc, cur], []);
 
 				if (elements.length > 0) {
-					this.$externalHooks().run('runData.updated', { elements });
+					for (const element of elements) {
+						element.classList.value = [element.classList.value, 'ph-no-capture'].join(' ');
+					}
 				}
 			});
 		},
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index 3c639c5226..f8babf36d8 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -6,7 +6,7 @@
 		>
 			<div class="select-sticky-background" v-show="isSelected" />
 			<div
-				class="sticky-box"
+				class="sticky-box ph-no-capture"
 				:data-name="data.name"
 				:ref="data.name"
 				@click.left="mouseLeftClick"
@@ -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) {
diff --git a/packages/editor-ui/src/components/VariableSelectorItem.vue b/packages/editor-ui/src/components/VariableSelectorItem.vue
index ca7282c912..c9bc48c801 100644
--- a/packages/editor-ui/src/components/VariableSelectorItem.vue
+++ b/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
diff --git a/packages/editor-ui/src/components/WorkflowOpen.vue b/packages/editor-ui/src/components/WorkflowOpen.vue
index a575977551..2b9e684ba7 100644
--- a/packages/editor-ui/src/components/WorkflowOpen.vue
+++ b/packages/editor-ui/src/components/WorkflowOpen.vue
@@ -29,7 +29,7 @@
 			</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 ph-no-capture" :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">
@@ -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) {
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index fcf3964ddc..de5518492f 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -3,7 +3,7 @@
 		<div :class="$style.container">
 			<div :class="$style.header">
 				<n8n-heading size="2xlarge">{{ $locale.baseText('settings.personal.personalSettings') }}</n8n-heading>
-				<div :class="$style.user" ref="user">
+				<div class="ph-no-capture" :class="$style.user">
 					<span :class="$style.username">
 						<n8n-text  color="text-light">{{currentUser.fullName}}</n8n-text>
 					</span>
@@ -103,10 +103,6 @@ export default mixins(
 				},
 			},
 		];
-
-		if (this.$refs.user) {
-			this.$externalHooks().run('settingsPersonalView.mounted', { userRef: this.$refs.user });
-		}
 	},
 	computed: {
 		currentUser() {