feat(editor): Removing ph-no-capture class from some elements (#6674)

* 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

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"

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: {

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');
+	});
 });

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"

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"

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"

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>

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}`"
 		>