From c3455a4ad82d965c41267fea173feaad4800c43f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Wed, 19 Jul 2023 16:51:49 +0200
Subject: [PATCH] feat(editor): Removing `ph-no-capture` class from some
 elements (#6674)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(editor): Remove `.ph-no-capture` class from some of the fields
* ✔️ Updating test snapshots
* ⚡ Redacting expressions preview in credentials form
* 🔧 Disable posthog input masking
* 🚨 Testing PostHog iFrame settings
* Reverting iframe test
* ⚡ Hiding API key in PostHog recordings
* ✅ Added tests for redacted values
* ✔️ Updating checkbox snapshots after label component update
* ✔️ Updating test snapshots in editor-ui
* 👕 Fix lint errors
---
 .../__snapshots__/Checkbox.spec.ts.snap       |  2 +
 .../src/components/N8nInput/Input.vue         |  9 ++--
 .../N8nInput/__tests__/Input.spec.ts          | 18 +++++++
 .../components/N8nInputLabel/InputLabel.vue   |  2 +-
 .../src/components/N8nMarkdown/Markdown.vue   |  1 -
 .../src/components/N8nSticky/Sticky.vue       | 10 +---
 .../src/components/N8nUserInfo/UserInfo.vue   |  2 +-
 .../src/components/N8nUsersList/UsersList.vue |  1 -
 packages/editor-ui/src/Interface.ts           |  4 ++
 .../CodeNodeEditor/CodeNodeEditor.vue         |  2 +-
 .../editor-ui/src/components/CopyInput.vue    | 11 +++-
 .../src/components/CredentialCard.vue         |  2 +-
 .../CredentialEdit/CredentialConfig.vue       |  3 +-
 .../src/components/ExecutionFilter.vue        |  2 +-
 .../src/components/ExecutionsList.vue         |  2 +-
 .../src/components/ExpressionEdit.vue         | 13 +++--
 .../ExpressionEditorModalInput.vue            |  2 +-
 .../ExpressionEditorModalOutput.vue           |  2 +-
 .../src/components/HtmlEditor/HtmlEditor.vue  |  2 +-
 .../InlineExpressionEditorInput.vue           |  2 +-
 .../InlineExpressionEditorOutput.vue          |  2 +-
 .../src/components/InlineNameEdit.vue         |  2 +-
 .../editor-ui/src/components/InputPanel.vue   |  2 +-
 packages/editor-ui/src/components/Node.vue    |  2 +-
 .../editor-ui/src/components/NodeTitle.vue    |  2 +-
 .../src/components/ParameterInput.vue         | 19 ++++---
 .../src/components/ParameterInputWrapper.vue  |  3 +-
 .../ResourceLocatorDropdown.vue               |  1 -
 .../editor-ui/src/components/RunDataHtml.vue  |  2 +-
 .../editor-ui/src/components/RunDataJson.vue  |  5 +-
 .../src/components/RunDataSchemaItem.vue      |  2 +-
 .../editor-ui/src/components/RunDataTable.vue |  9 ++--
 .../EventDestinationCard.ee.vue               |  2 +-
 .../src/components/SqlEditor/SqlEditor.vue    |  2 +-
 .../src/components/VariableSelector.vue       |  3 +-
 .../src/components/VariableSelectorItem.vue   |  5 +-
 .../editor-ui/src/components/WorkflowCard.vue |  8 +--
 .../components/__tests__/CopyInput.test.ts    | 51 +++++++++++++++++++
 .../components/__tests__/RunDataJson.test.ts  | 13 -----
 .../PersonalizationModal.spec.ts.snap         | 10 ++--
 .../__snapshots__/RunDataJson.test.ts.snap    | 30 ++++-------
 .../__snapshots__/RunDataSchema.test.ts.snap  | 12 ++---
 .../__snapshots__/VariablesRow.spec.ts.snap   |  4 +-
 .../editor-ui/src/stores/posthog.store.ts     |  3 ++
 .../editor-ui/src/views/SettingsApiView.vue   |  3 +-
 .../src/views/SettingsPersonalView.vue        |  2 +-
 46 files changed, 173 insertions(+), 118 deletions(-)
 create mode 100644 packages/editor-ui/src/components/__tests__/CopyInput.test.ts

diff --git a/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap b/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap
index 9a7a248acc..73f5989d6f 100644
--- a/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap
+++ b/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap
@@ -27,6 +27,7 @@ exports[`components > N8nCheckbox > should render with both child and label 1`]
       </strong>
       <div
         class="container"
+        data-test-id="input-label"
       >
         <label
           class="n8n-input-label inputLabel heading medium"
@@ -108,6 +109,7 @@ exports[`components > N8nCheckbox > should render with label 1`] = `
     >
       <div
         class="container"
+        data-test-id="input-label"
       >
         <label
           class="n8n-input-label inputLabel heading medium"
diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index 68e617d590..1236d0f6ad 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -85,11 +85,14 @@ export default defineComponent({
 			return this.size;
 		},
 		classes(): string[] {
+			const classes = [];
 			if (this.size === 'xlarge') {
-				return ['xlarge'];
+				classes.push('xlarge');
 			}
-
-			return [];
+			if (this.type === 'password') {
+				classes.push('ph-no-capture');
+			}
+			return classes;
 		},
 	},
 	methods: {
diff --git a/packages/design-system/src/components/N8nInput/__tests__/Input.spec.ts b/packages/design-system/src/components/N8nInput/__tests__/Input.spec.ts
index 0bd6e2d35e..8026fab588 100644
--- a/packages/design-system/src/components/N8nInput/__tests__/Input.spec.ts
+++ b/packages/design-system/src/components/N8nInput/__tests__/Input.spec.ts
@@ -6,4 +6,22 @@ describe('N8nInput', () => {
 		const wrapper = render(N8nInput);
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	it('should add .ph-no-capture class on password input', () => {
+		const { container } = render(N8nInput, {
+			props: {
+				type: 'password',
+			},
+		});
+		expect(container.firstChild).toHaveClass('ph-no-capture');
+	});
+
+	it('should not add .ph-no-capture class on other input types', () => {
+		const { container } = render(N8nInput, {
+			props: {
+				type: 'number',
+			},
+		});
+		expect(container.firstChild).not.toHaveClass('ph-no-capture');
+	});
 });
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index eb460161ad..6e96e49252 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.container" v-on="$listeners">
+	<div :class="$style.container" v-on="$listeners" data-test-id="input-label">
 		<label
 			v-if="label || $slots.options"
 			:for="inputName"
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
index d35f1ee575..09be174724 100644
--- a/packages/design-system/src/components/N8nMarkdown/Markdown.vue
+++ b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
@@ -3,7 +3,6 @@
 		<div
 			v-if="!loading"
 			ref="editor"
-			class="ph-no-capture"
 			:class="$style[theme]"
 			v-html="htmlContent"
 			@click="onClick"
diff --git a/packages/design-system/src/components/N8nSticky/Sticky.vue b/packages/design-system/src/components/N8nSticky/Sticky.vue
index 1c18ce051c..c5952fb835 100644
--- a/packages/design-system/src/components/N8nSticky/Sticky.vue
+++ b/packages/design-system/src/components/N8nSticky/Sticky.vue
@@ -17,12 +17,7 @@
 			@resizestart="onResizeStart"
 		>
 			<template>
-				<div
-					v-show="!editMode"
-					class="ph-no-capture"
-					:class="$style.wrapper"
-					@dblclick.stop="onDoubleClick"
-				>
+				<div v-show="!editMode" :class="$style.wrapper" @dblclick.stop="onDoubleClick">
 					<n8n-markdown
 						theme="sticky"
 						:content="content"
@@ -38,8 +33,7 @@
 					@keydown.esc="onInputBlur"
 					@keydown.stop
 					@wheel.stop
-					class="sticky-textarea ph-no-capture"
-					:class="{ 'full-height': !shouldShowFooter }"
+					:class="{ 'full-height': !shouldShowFooter, 'sticky-textarea': true }"
 				>
 					<n8n-input
 						:value="content"
diff --git a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
index ec780a1577..4f609aa9a9 100644
--- a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
+++ b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="ph-no-capture" :class="classes">
+	<div :class="classes">
 		<div :class="$style.avatarContainer">
 			<n8n-avatar :firstName="firstName" :lastName="lastName" />
 		</div>
diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.vue b/packages/design-system/src/components/N8nUsersList/UsersList.vue
index 9ab256dd41..64d3f13d58 100644
--- a/packages/design-system/src/components/N8nUsersList/UsersList.vue
+++ b/packages/design-system/src/components/N8nUsersList/UsersList.vue
@@ -3,7 +3,6 @@
 		<div
 			v-for="(user, i) in sortedUsers"
 			:key="user.id"
-			class="ph-no-capture"
 			:class="i === sortedUsers.length - 1 ? $style.itemContainer : $style.itemWithBorder"
 			:data-test-id="`user-list-item-${user.email}`"
 		>
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 7e0d39a1f3..9a36b6284d 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -62,6 +62,10 @@ declare global {
 						isIdentifiedID?: boolean;
 						featureFlags: FeatureFlags;
 					};
+					session_recording?: {
+						maskAllInputs?: boolean;
+						maskInputFn?: ((text: string, element?: HTMLElement) => string) | null;
+					};
 				},
 			): void;
 			isFeatureEnabled?(flagName: string): boolean;
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index 9deed663d1..54fe35687c 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -5,7 +5,7 @@
 		@mouseout="onMouseOut"
 		ref="codeNodeEditorContainer"
 	>
-		<div ref="codeNodeEditor" class="code-node-editor-input ph-no-capture"></div>
+		<div ref="codeNodeEditor" class="code-node-editor-input"></div>
 		<n8n-button
 			v-if="aiButtonEnabled && (isEditorHovered || isEditorFocused)"
 			size="small"
diff --git a/packages/editor-ui/src/components/CopyInput.vue b/packages/editor-ui/src/components/CopyInput.vue
index 4b071ade30..71e7b90307 100644
--- a/packages/editor-ui/src/components/CopyInput.vue
+++ b/packages/editor-ui/src/components/CopyInput.vue
@@ -2,7 +2,12 @@
 	<div>
 		<n8n-input-label :label="label">
 			<div
-				:class="{ [$style.copyText]: true, [$style[size]]: true, [$style.collapsed]: collapse }"
+				:class="{
+					[$style.copyText]: true,
+					[$style[size]]: true,
+					[$style.collapsed]: collapse,
+					'ph-no-capture': redactValue,
+				}"
 				@click="copy"
 				data-test-id="copy-input"
 			>
@@ -56,6 +61,10 @@ export default defineComponent({
 			type: String,
 			default: 'large',
 		},
+		redactValue: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup() {
 		return {
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index 338aef999e..87a8255969 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -4,7 +4,7 @@
 			<credential-icon :credential-type-name="credentialType ? credentialType.name : ''" />
 		</template>
 		<template #header>
-			<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style['card-heading']">
+			<n8n-heading tag="h2" bold :class="$style['card-heading']">
 				{{ data.name }}
 			</n8n-heading>
 		</template>
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index e33117ea65..71b87c0f00 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -88,10 +88,11 @@
 				:toastTitle="
 					$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
 				"
+				:redactValue="true"
 			/>
 		</template>
 		<enterprise-edition v-else :features="[EnterpriseEditionFeature.Sharing]">
-			<div class="ph-no-capture">
+			<div>
 				<n8n-info-tip :bold="false">
 					{{
 						$locale.baseText('credentialEdit.credentialEdit.info.sharee', {
diff --git a/packages/editor-ui/src/components/ExecutionFilter.vue b/packages/editor-ui/src/components/ExecutionFilter.vue
index 7d0258ee83..9f8dd8f641 100644
--- a/packages/editor-ui/src/components/ExecutionFilter.vue
+++ b/packages/editor-ui/src/components/ExecutionFilter.vue
@@ -176,7 +176,7 @@ onBeforeMount(() => {
 						filterable
 						data-test-id="executions-filter-workflows-select"
 					>
-						<div class="ph-no-capture">
+						<div>
 							<n8n-option
 								v-for="(item, idx) in props.workflows"
 								:key="idx"
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index c2ddce3619..ac01067fa3 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -79,7 +79,7 @@
 							/>
 						</td>
 						<td>
-							<span class="ph-no-capture" @click.stop="displayExecution(execution)"
+							<span @click.stop="displayExecution(execution)"
 								><a href="#" :class="$style.link">{{
 									execution.workflowName || $locale.baseText('executionsList.unsavedWorkflow')
 								}}</a></span
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index c7110a45ac..612b3a7ac8 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -20,7 +20,11 @@
 					</div>
 
 					<div class="variable-selector">
-						<variable-selector :path="path" @itemSelected="itemSelected"></variable-selector>
+						<variable-selector
+							:path="path"
+							:redactValues="redactValues"
+							@itemSelected="itemSelected"
+						></variable-selector>
 					</div>
 				</el-col>
 				<el-col :span="16" class="right-side">
@@ -42,11 +46,12 @@
 								</n8n-link>
 							</div>
 						</div>
-						<div class="expression-editor ph-no-capture">
+						<div class="expression-editor">
 							<ExpressionEditorModalInput
 								:value="value"
 								:isReadOnly="isReadOnlyRoute"
 								:path="path"
+								:class="{ 'ph-no-capture': redactValues }"
 								@change="valueChanged"
 								@close="closeDialog"
 								ref="inputFieldExpression"
@@ -59,7 +64,7 @@
 						<div class="editor-description">
 							{{ $locale.baseText('expressionEdit.resultOfItem1') }}
 						</div>
-						<div class="ph-no-capture">
+						<div :class="{ 'ph-no-capture': redactValues }">
 							<ExpressionEditorModalOutput
 								:segments="segments"
 								ref="expressionResult"
@@ -97,7 +102,7 @@ import type { Segment } from '@/types/expressions';
 export default defineComponent({
 	name: 'ExpressionEdit',
 	mixins: [externalHooks, genericHelpers, debounceHelper],
-	props: ['dialogVisible', 'parameter', 'path', 'value', 'eventSource'],
+	props: ['dialogVisible', 'parameter', 'path', 'value', 'eventSource', 'redactValues'],
 	components: {
 		ExpressionEditorModalInput,
 		ExpressionEditorModalOutput,
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
index 88cf944b74..943fe2db3c 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="root" class="ph-no-capture" @keydown.stop></div>
+	<div ref="root" @keydown.stop></div>
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
index 8c1d9f3ad3..d4e28945f3 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="root" class="ph-no-capture"></div>
+	<div ref="root"></div>
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
index 04c6b0dfc6..fd3e57ed4f 100644
--- a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
+++ b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="htmlEditor" class="ph-no-capture"></div>
+	<div ref="htmlEditor"></div>
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index ae6f185b7e..646b3f3c2b 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="root" class="ph-no-capture" data-test-id="inline-expression-editor-input"></div>
+	<div ref="root" data-test-id="inline-expression-editor-input"></div>
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
index 472fef3ed2..cf139c1e7a 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
@@ -4,7 +4,7 @@
 			{{ $locale.baseText('parameterInput.resultForItem') }} {{ hoveringItemNumber }}
 		</n8n-text>
 		<n8n-text :class="$style.body">
-			<div ref="root" class="ph-no-capture" data-test-id="inline-expression-editor-output"></div>
+			<div ref="root" data-test-id="inline-expression-editor-output"></div>
 		</n8n-text>
 		<div :class="$style.footer">
 			<n8n-text size="small" compact>
diff --git a/packages/editor-ui/src/components/InlineNameEdit.vue b/packages/editor-ui/src/components/InlineNameEdit.vue
index 0e14aaba0d..04c0e7b511 100644
--- a/packages/editor-ui/src/components/InlineNameEdit.vue
+++ b/packages/editor-ui/src/components/InlineNameEdit.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="ph-no-capture" :class="$style.container">
+	<div :class="$style.container">
 		<span v-if="readonly" :class="$style.headline">
 			{{ name }}
 		</span>
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 25d62b3657..14cf1f06c3 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -45,7 +45,7 @@
 						:label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`"
 						data-test-id="ndv-input-option"
 					>
-						<span class="ph-no-capture">{{ truncate(node.name) }}&nbsp;</span>
+						<span>{{ truncate(node.name) }}&nbsp;</span>
 						<span v-if="getMultipleNodesText(node.name)">{{
 							getMultipleNodesText(node.name)
 						}}</span>
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 1a41ef9d9b..6f318630b8 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -155,7 +155,7 @@
 			></div>
 		</div>
 		<div class="node-description">
-			<div class="node-name ph-no-capture" :title="nodeTitle">
+			<div class="node-name" :title="nodeTitle">
 				<p data-test-id="canvas-node-box-title">
 					{{ nodeTitle }}
 				</p>
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index 7e344c115c..67c3ef33a6 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -28,7 +28,7 @@
 				</div>
 			</div>
 			<template #reference>
-				<div class="ph-no-capture" :class="{ [$style.title]: true, [$style.hoverable]: editable }">
+				<div :class="{ [$style.title]: true, [$style.hoverable]: editable }">
 					{{ value }}
 					<div :class="$style.editIconContainer">
 						<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" v-if="editable" />
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index c886160c02..6326286302 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -9,6 +9,7 @@
 			:path="path"
 			:eventSource="eventSource || 'ndv'"
 			:isReadOnly="isReadOnly"
+			:redactValues="shouldRedactValue"
 			@closeDialog="closeExpressionEditDialog"
 			@valueChanged="expressionUpdated"
 		></expression-edit>
@@ -41,6 +42,7 @@
 				:title="displayTitle"
 				:isReadOnly="isReadOnly"
 				:path="path"
+				:class="{ 'ph-no-capture': shouldRedactValue }"
 				@valueChanged="expressionUpdated"
 				@modalOpenerClick="openExpressionEditorModal"
 				@focus="setFocus"
@@ -114,11 +116,7 @@
 					@valueChanged="valueChangedDebounced"
 				/>
 
-				<div
-					v-else-if="editorType"
-					class="readonly-code clickable ph-no-capture"
-					@click="displayEditDialog()"
-				>
+				<div v-else-if="editorType" class="readonly-code clickable" @click="displayEditDialog()">
 					<code-node-editor
 						v-if="!codeEditDialogVisible"
 						:value="value"
@@ -131,7 +129,7 @@
 					v-else
 					v-model="tempValue"
 					ref="inputField"
-					class="input-with-opener"
+					:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
 					:size="inputSize"
 					:type="getStringInputType"
 					:rows="getArgument('rows')"
@@ -204,6 +202,7 @@
 						: $locale.baseText('parameterInput.selectDateAndTime')
 				"
 				:picker-options="dateTimePickerOptions"
+				:class="{ 'ph-no-capture': shouldRedactValue }"
 				@change="valueChanged"
 				@focus="setFocus"
 				@blur="onBlur"
@@ -220,6 +219,7 @@
 				:min="getArgument('minValue')"
 				:precision="getArgument('numberPrecision')"
 				:disabled="isReadOnly"
+				:class="{ 'ph-no-capture': shouldRedactValue }"
 				@change="valueChanged"
 				@input="onTextInputChange"
 				@focus="setFocus"
@@ -274,7 +274,7 @@
 				>
 					<div class="list-option">
 						<div
-							class="option-headline ph-no-capture"
+							class="option-headline"
 							:class="{ 'remote-parameter-option': isRemoteParameterOption(option) }"
 						>
 							{{ getOptionsOptionDisplayName(option) }}
@@ -331,7 +331,7 @@
 			/>
 			<el-switch
 				v-else-if="parameter.type === 'boolean'"
-				class="switch-input"
+				:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
 				ref="inputField"
 				active-color="#13ce66"
 				:value="displayValue"
@@ -830,6 +830,9 @@ export default defineComponent({
 		remoteParameterOptionsKeys(): string[] {
 			return (this.remoteParameterOptions || []).map((o) => o.name);
 		},
+		shouldRedactValue(): boolean {
+			return this.getStringInputType === 'password' || this.isForCredential;
+		},
 	},
 	methods: {
 		isRemoteParameterOption(option: INodePropertyOptions) {
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index a8d794eb98..a163ceec02 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -27,9 +27,8 @@
 		/>
 		<input-hint
 			v-if="expressionOutput"
-			:class="$style.hint"
+			:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
 			data-test-id="parameter-expression-preview"
-			class="ph-no-capture"
 			:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
 			:hint="expressionOutput"
 			:singleLine="true"
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
index b5bcd9fa4a..f8feb2b179 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -48,7 +48,6 @@
 					[$style.selected]: result.value === value,
 					[$style.hovering]: hoverIndex === i,
 				}"
-				class="ph-no-capture"
 				@click="() => onItemClick(result.value)"
 				@mouseenter="() => onItemHover(i)"
 				@mouseleave="() => onItemHoverLeave()"
diff --git a/packages/editor-ui/src/components/RunDataHtml.vue b/packages/editor-ui/src/components/RunDataHtml.vue
index 805fa67a1d..8221d6985f 100644
--- a/packages/editor-ui/src/components/RunDataHtml.vue
+++ b/packages/editor-ui/src/components/RunDataHtml.vue
@@ -1,5 +1,5 @@
 <template>
-	<iframe class="__html-display ph-no-capture" :srcdoc="html" />
+	<iframe class="__html-display" :srcdoc="html" />
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 6f4a8d7d9f..cd51f62c02 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -45,9 +45,7 @@
 						>
 					</template>
 					<template #nodeValue="{ node }">
-						<span v-if="isNaN(node.index)" class="ph-no-capture">{{
-							getContent(node.content)
-						}}</span>
+						<span v-if="isNaN(node.index)">{{ getContent(node.content) }}</span>
 						<span
 							v-else
 							data-target="mappable"
@@ -59,7 +57,6 @@
 								[$style.mappable]: mappingEnabled,
 								[$style.dragged]: draggingPath === node.path,
 							}"
-							class="ph-no-capture"
 							>{{ getContent(node.content) }}</span
 						>
 					</template>
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index b9d0ae7d39..6ea7485ade 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -96,7 +96,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				<span v-if="key" :class="{ [$style.arrayIndex]: isSchemaParentTypeArray }">{{ key }}</span>
 			</span>
 		</div>
-		<span v-if="text" :class="$style.text" class="ph-no-capture">{{ text }}</span>
+		<span v-if="text" :class="$style.text">{{ text }}</span>
 		<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" checked />
 		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
 			<font-awesome-icon icon="angle-up" />
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index f6852c679b..b69522fd70 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -121,7 +121,6 @@
 							<span
 								v-if="isSimple(data)"
 								:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
-								class="ph-no-capture"
 								>{{ getValueToRender(data) }}</span
 							>
 							<n8n-tree :nodeClass="$style.nodeClass" v-else :value="data">
@@ -143,11 +142,9 @@
 									>
 								</template>
 								<template #value="{ value }">
-									<span
-										:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
-										class="ph-no-capture"
-										>{{ getValueToRender(value) }}</span
-									>
+									<span :class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }">
+										{{ getValueToRender(value) }}
+									</span>
 								</template>
 							</n8n-tree>
 						</td>
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
index bf40eba811..9c977a984c 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
@@ -2,7 +2,7 @@
 	<n8n-card :class="$style.cardLink" data-test-id="destination-card" @click="onClick">
 		<template #header>
 			<div>
-				<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style.cardHeading">
+				<n8n-heading tag="h2" bold :class="$style.cardHeading">
 					{{ destination.label }}
 				</n8n-heading>
 				<div :class="$style.cardDescription">
diff --git a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
index 09cee368d0..596cbdb908 100644
--- a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
+++ b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.sqlEditor" v-click-outside="onBlur">
-		<div ref="sqlEditor" data-test-id="sql-editor-container" class="ph-no-capture"></div>
+		<div ref="sqlEditor" data-test-id="sql-editor-container"></div>
 		<InlineExpressionEditorOutput
 			:segments="segments"
 			:value="query"
diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue
index ed9de7342a..6601bf9958 100644
--- a/packages/editor-ui/src/components/VariableSelector.vue
+++ b/packages/editor-ui/src/components/VariableSelector.vue
@@ -16,6 +16,7 @@
 				v-for="option in currentResults"
 				:key="option.key"
 				:extendAll="extendAll"
+				:redactValues="redactValues"
 				@itemSelected="forwardItemSelected"
 			></variable-selector-item>
 		</div>
@@ -59,7 +60,7 @@ export default defineComponent({
 	components: {
 		VariableSelectorItem,
 	},
-	props: ['path'],
+	props: ['path', 'redactValues'],
 	data() {
 		return {
 			variableFilter: '',
diff --git a/packages/editor-ui/src/components/VariableSelectorItem.vue b/packages/editor-ui/src/components/VariableSelectorItem.vue
index a944483fea..5569673ef5 100644
--- a/packages/editor-ui/src/components/VariableSelectorItem.vue
+++ b/packages/editor-ui/src/components/VariableSelectorItem.vue
@@ -41,6 +41,7 @@
 					:key="option.key"
 					:extendAll="extendAll"
 					:allowParentSelect="option.allowParentSelect"
+					:redactValues="redactValues"
 					class="sub-level"
 					@itemSelected="forwardItemSelected"
 				></variable-selector-item>
@@ -51,7 +52,7 @@
 				{{ item.name }}:
 				<font-awesome-icon icon="dot-circle" title="Select Item" />
 			</div>
-			<div class="item-value ph-no-capture">
+			<div :class="{ 'ph-no-capture': redactValues, 'item-value': true }">
 				{{ item.value !== undefined ? item.value : $locale.baseText('variableSelectorItem.empty') }}
 			</div>
 		</div>
@@ -66,7 +67,7 @@ import { externalHooks } from '@/mixins/externalHooks';
 export default defineComponent({
 	name: 'VariableSelectorItem',
 	mixins: [externalHooks],
-	props: ['allowParentSelect', 'extendAll', 'item'],
+	props: ['allowParentSelect', 'extendAll', 'item', 'redactValues'],
 	mounted() {
 		if (this.extended) return;
 
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 21b8873d6b..c3438942b4 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -1,13 +1,7 @@
 <template>
 	<n8n-card :class="$style.cardLink" @click="onClick">
 		<template #header>
-			<n8n-heading
-				tag="h2"
-				bold
-				class="ph-no-capture"
-				:class="$style.cardHeading"
-				data-test-id="workflow-card-name"
-			>
+			<n8n-heading tag="h2" bold :class="$style.cardHeading" data-test-id="workflow-card-name">
 				{{ data.name }}
 			</n8n-heading>
 		</template>
diff --git a/packages/editor-ui/src/components/__tests__/CopyInput.test.ts b/packages/editor-ui/src/components/__tests__/CopyInput.test.ts
new file mode 100644
index 0000000000..93991153b2
--- /dev/null
+++ b/packages/editor-ui/src/components/__tests__/CopyInput.test.ts
@@ -0,0 +1,51 @@
+import { PiniaVuePlugin } from 'pinia';
+import { render } from '@testing-library/vue';
+import { merge } from 'lodash-es';
+
+import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import { STORES } from '@/constants';
+
+import { createTestingPinia } from '@pinia/testing';
+import CopyInput from '@/components/CopyInput.vue';
+
+const DEFAULT_SETUP = {
+	pinia: createTestingPinia({
+		initialState: {
+			[STORES.SETTINGS]: {
+				settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
+			},
+		},
+	}),
+	props: {
+		copyButtonText: 'Click to copy',
+		label: 'Copy Input test',
+	},
+};
+
+const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
+	render(CopyInput, merge(DEFAULT_SETUP, renderOptions), (vue) => {
+		vue.use(PiniaVuePlugin);
+	});
+
+describe('BannerStack', () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render default configuration', async () => {
+		const { getByTestId } = renderComponent();
+		expect(getByTestId('input-label')).toHaveTextContent('Copy Input test');
+		expect(getByTestId('copy-input')).toHaveTextContent('Click to copy');
+	});
+
+	it('should render redacted version', async () => {
+		const { container, getByTestId } = renderComponent(
+			merge(DEFAULT_SETUP, {
+				props: {
+					redactValue: true,
+				},
+			}),
+		);
+		expect(getByTestId('copy-input')).toHaveClass('ph-no-capture');
+	});
+});
diff --git a/packages/editor-ui/src/components/__tests__/RunDataJson.test.ts b/packages/editor-ui/src/components/__tests__/RunDataJson.test.ts
index 22a87e6cdb..88f73367bb 100644
--- a/packages/editor-ui/src/components/__tests__/RunDataJson.test.ts
+++ b/packages/editor-ui/src/components/__tests__/RunDataJson.test.ts
@@ -65,17 +65,4 @@ describe('RunDataJson.vue', () => {
 		expect(screen.getByText('null')).toBeInTheDocument();
 		expect(screen.queryByText('undefined')).not.toBeInTheDocument();
 	});
-
-	it('sets ph-no-capture class correctly', () => {
-		render(RunDataJson, DEFAULT_SETUP);
-
-		expect(screen.getByText('"list"')).not.toHaveClass('ph-no-capture');
-		expect(screen.getByText('"record"')).not.toHaveClass('ph-no-capture');
-		expect(screen.getByText('"myStringNumber"')).not.toHaveClass('ph-no-capture');
-
-		expect(screen.getByText('123')).toHaveClass('ph-no-capture');
-		expect(screen.getByText('"456"')).toHaveClass('ph-no-capture');
-		expect(screen.getByText('"abc"')).toHaveClass('ph-no-capture');
-		expect(screen.getByText('null')).toHaveClass('ph-no-capture');
-	});
 });
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/PersonalizationModal.spec.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/PersonalizationModal.spec.ts.snap
index e7241c7063..a60c0d7529 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/PersonalizationModal.spec.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/PersonalizationModal.spec.ts.snap
@@ -21,7 +21,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
             <div>
               <div class=\\"grid\\">
                 <div class=\\"\\">
-                  <div class=\\"container\\" data-test-id=\\"companyType\\"><label for=\\"companyType\\" class=\\"n8n-input-label inputLabel heading medium\\">
+                  <div data-test-id=\\"companyType\\" class=\\"container\\"><label for=\\"companyType\\" class=\\"n8n-input-label inputLabel heading medium\\">
                       <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> What best describes your company? <!----></span></div>
                       <!---->
                       <!---->
@@ -71,7 +71,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
                   </div>
                 </div>
                 <div class=\\"\\">
-                  <div class=\\"container\\" data-test-id=\\"role\\"><label for=\\"role\\" class=\\"n8n-input-label inputLabel heading medium\\">
+                  <div data-test-id=\\"role\\" class=\\"container\\"><label for=\\"role\\" class=\\"n8n-input-label inputLabel heading medium\\">
                       <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> Which role best describes you? <!----></span></div>
                       <!---->
                       <!---->
@@ -123,7 +123,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
                   </div>
                 </div>
                 <div class=\\"\\">
-                  <div class=\\"container\\" data-test-id=\\"automationBeneficiary\\"><label for=\\"automationBeneficiary\\" class=\\"n8n-input-label inputLabel heading medium\\">
+                  <div data-test-id=\\"automationBeneficiary\\" class=\\"container\\"><label for=\\"automationBeneficiary\\" class=\\"n8n-input-label inputLabel heading medium\\">
                       <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> Who will your automations mainly be for? <!----></span></div>
                       <!---->
                       <!---->
@@ -169,7 +169,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
                   </div>
                 </div>
                 <div class=\\"\\">
-                  <div class=\\"container\\" data-test-id=\\"companySize\\"><label for=\\"companySize\\" class=\\"n8n-input-label inputLabel heading medium\\">
+                  <div data-test-id=\\"companySize\\" class=\\"container\\"><label for=\\"companySize\\" class=\\"n8n-input-label inputLabel heading medium\\">
                       <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How big is your company? <!----></span></div>
                       <!---->
                       <!---->
@@ -218,7 +218,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
                   </div>
                 </div>
                 <div class=\\"\\">
-                  <div class=\\"container\\" data-test-id=\\"reportedSource\\"><label for=\\"reportedSource\\" class=\\"n8n-input-label inputLabel heading medium\\">
+                  <div data-test-id=\\"reportedSource\\" class=\\"container\\"><label for=\\"reportedSource\\" class=\\"n8n-input-label inputLabel heading medium\\">
                       <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How did you hear about n8n? <!----></span></div>
                       <!---->
                       <!---->
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
index a0116bd5ec..b4ea061a33 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
@@ -138,7 +138,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     class="vjs-value vjs-value-number"
                   >
                     <span
-                      class="ph-no-capture mappable"
+                      class="mappable"
                       data-depth="3"
                       data-name="list[0]"
                       data-path="[0].list[0]"
@@ -180,7 +180,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     class="vjs-value vjs-value-number"
                   >
                     <span
-                      class="ph-no-capture mappable"
+                      class="mappable"
                       data-depth="3"
                       data-name="list[1]"
                       data-path="[0].list[1]"
@@ -222,7 +222,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                     class="vjs-value vjs-value-number"
                   >
                     <span
-                      class="ph-no-capture mappable"
+                      class="mappable"
                       data-depth="3"
                       data-name="list[2]"
                       data-path="[0].list[2]"
@@ -351,9 +351,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   <span
                     class="vjs-value vjs-value-string"
                   >
-                    <span
-                      class="ph-no-capture"
-                    >
+                    <span>
                       "Joe"
                     </span>
                   </span>
@@ -429,9 +427,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   <span
                     class="vjs-value vjs-value-number"
                   >
-                    <span
-                      class="ph-no-capture"
-                    >
+                    <span>
                       123
                     </span>
                   </span>
@@ -479,9 +475,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   <span
                     class="vjs-value vjs-value-string"
                   >
-                    <span
-                      class="ph-no-capture"
-                    >
+                    <span>
                       "456"
                     </span>
                   </span>
@@ -529,9 +523,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   <span
                     class="vjs-value vjs-value-string"
                   >
-                    <span
-                      class="ph-no-capture"
-                    >
+                    <span>
                       "abc"
                     </span>
                   </span>
@@ -579,9 +571,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   <span
                     class="vjs-value vjs-value-null"
                   >
-                    <span
-                      class="ph-no-capture"
-                    >
+                    <span>
                       null
                     </span>
                   </span>
@@ -629,9 +619,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
                   <span
                     class="vjs-value vjs-value-undefined"
                   >
-                    <span
-                      class="ph-no-capture"
-                    >
+                    <span>
                       
                     </span>
                   </span>
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
index 317edebadb..32223d9b39 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
@@ -52,7 +52,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                 </span>
               </div>
               <span
-                class="ph-no-capture text"
+                class="text"
               >
                 John
               </span>
@@ -90,7 +90,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                 </span>
               </div>
               <span
-                class="ph-no-capture text"
+                class="text"
               >
                 22
               </span>
@@ -176,7 +176,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                     </span>
                   </div>
                   <span
-                    class="ph-no-capture text"
+                    class="text"
                   >
                     surfing
                   </span>
@@ -216,7 +216,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                     </span>
                   </div>
                   <span
-                    class="ph-no-capture text"
+                    class="text"
                   >
                     traveling
                   </span>
@@ -458,7 +458,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                             </span>
                           </div>
                           <span
-                            class="ph-no-capture text"
+                            class="text"
                           >
                             1
                           </span>
@@ -498,7 +498,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                         </span>
                       </div>
                       <span
-                        class="ph-no-capture text"
+                        class="text"
                       >
                         ignore
                       </span>
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/VariablesRow.spec.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/VariablesRow.spec.ts.snap
index 0ade850423..c4309d2451 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/VariablesRow.spec.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/VariablesRow.spec.ts.snap
@@ -32,7 +32,7 @@ exports[`VariablesRow > should show key and value inputs in edit mode 1`] = `
 "<tr data-test-id=\\"variables-row\\" class=\\"variablesRow\\">
   <td class=\\"variables-key-column\\">
     <div>
-      <div class=\\"container\\" data-test-id=\\"variable-row-key-input\\">
+      <div data-test-id=\\"variable-row-key-input\\" class=\\"container\\">
         <!---->
         <div class=\\"\\">
           <div class=\\"el-input el-input--large n8n-input\\">
@@ -49,7 +49,7 @@ exports[`VariablesRow > should show key and value inputs in edit mode 1`] = `
   </td>
   <td class=\\"variables-value-column\\">
     <div>
-      <div class=\\"container\\" data-test-id=\\"variable-row-value-input\\">
+      <div data-test-id=\\"variable-row-value-input\\" class=\\"container\\">
         <!---->
         <div class=\\"\\">
           <div class=\\"el-input el-input--large n8n-input\\">
diff --git a/packages/editor-ui/src/stores/posthog.store.ts b/packages/editor-ui/src/stores/posthog.store.ts
index 3728db6253..1626437f97 100644
--- a/packages/editor-ui/src/stores/posthog.store.ts
+++ b/packages/editor-ui/src/stores/posthog.store.ts
@@ -118,6 +118,9 @@ export const usePostHog = defineStore('posthog', () => {
 			autocapture: config.autocapture,
 			disable_session_recording: config.disableSessionRecording,
 			debug: config.debug,
+			session_recording: {
+				maskAllInputs: false,
+			},
 		};
 
 		window.posthog?.init(config.apiKey, options);
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index ff78c47e3c..ed863a2a30 100644
--- a/packages/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/editor-ui/src/views/SettingsApiView.vue
@@ -36,12 +36,13 @@
 						{{ $locale.baseText('generic.delete') }}
 					</n8n-link>
 				</span>
-				<div class="ph-no-capture">
+				<div>
 					<CopyInput
 						:label="$locale.baseText('settings.api.view.myKey')"
 						:value="apiKey"
 						:copy-button-text="$locale.baseText('generic.clickToCopy')"
 						:toast-title="$locale.baseText('settings.api.view.copy.toast')"
+						:redactValue="true"
 						@copy="onCopy"
 					/>
 				</div>
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index 7dd49c763b..d86ceede04 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -4,7 +4,7 @@
 			<n8n-heading size="2xlarge">{{
 				$locale.baseText('settings.personal.personalSettings')
 			}}</n8n-heading>
-			<div class="ph-no-capture" :class="$style.user">
+			<div :class="$style.user">
 				<span :class="$style.username" data-test-id="current-user-name">
 					<n8n-text color="text-light">{{ currentUser.fullName }}</n8n-text>
 				</span>