fix: Update Posthog no-capture (#5693)

* feat: add no-capture class for schema view

* fix: add ee nocapture

* fix: update no capture

* fix: update ndv capturing

* feat: remove no capture from empty resources list

* lint: fix

* test: update tests

* test: add json view tests

* fix: update more class to cover

* lint: fix

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

@@ -92,7 +92,7 @@
 							/>
 						</td>
 						<td>
-							<span>{{
+							<span class="ph-no-capture">{{
 								execution.workflowName || $locale.baseText('executionsList.unsavedWorkflow')
 							}}</span>
 						</td>

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

@@ -45,7 +45,7 @@
 						:label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`"
 						data-test-id="ndv-input-option"
 					>
-						{{ truncate(node.name) }} 
+						<span class="ph-no-capture">{{ truncate(node.name) }}&nbsp;</span>
 						<span v-if="getMultipleNodesText(node.name)">{{
 							getMultipleNodesText(node.name)
 						}}</span>

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

@@ -27,6 +27,7 @@
 			v-if="expressionOutput"
 			:class="$style.hint"
 			data-test-id="parameter-expression-preview"
+			class="ph-no-capture"
 			:highlight="!!(expressionOutput && targetItem)"
 			:hint="expressionOutput"
 			:singleLine="true"

packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue

@@ -47,6 +47,7 @@
 					[$style.selected]: result.value === value,
 					[$style.hovering]: hoverIndex === i,
 				}"
+				class="ph-no-capture"
 				@click="() => onItemClick(result.value)"
 				@mouseenter="() => onItemHover(i)"
 				@mouseleave="() => onItemHoverLeave()"

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

@@ -290,7 +290,6 @@
 
 			<run-data-table
 				v-else-if="hasNodeRun && displayMode === 'table'"
-				class="ph-no-capture"
 				:node="node"
 				:inputData="inputData"
 				:mappingEnabled="mappingEnabled"
@@ -306,7 +305,6 @@
 
 			<run-data-json
 				v-else-if="hasNodeRun && displayMode === 'json'"
-				class="ph-no-capture"
 				:paneType="paneType"
 				:editMode="editMode"
 				:sessioId="sessionId"

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="__html-display" v-html="html"></div>
+	<div class="__html-display ph-no-capture" v-html="html"></div>
 </template>
 
 <script lang="ts">

packages/editor-ui/src/components/RunDataJson.test.ts

@@ -1,60 +1,81 @@
 import Vue from 'vue';
 import { PiniaVuePlugin } from 'pinia';
 import { createTestingPinia } from '@pinia/testing';
-import { render, screen } from '@testing-library/vue';
+import { render, screen, cleanup } from '@testing-library/vue';
 import RunDataJson from '@/components/RunDataJson.vue';
 
 Vue.use(PiniaVuePlugin);
 
 describe('RunDataJson.vue', () => {
-	it('renders json values properly', () => {
-		render(RunDataJson, {
-			pinia: createTestingPinia(),
-			props: {
-				mappingEnabled: true,
-				editMode: { enabled: false },
-				inputData: [
-					{
-						json: {
-							list: [1, 2, 3],
-							record: { name: 'Joe' },
-							myNumber: 123,
-							myStringNumber: '456',
-							myStringText: 'abc',
-							nil: null,
-							d: undefined,
-						},
-					},
-				],
-				node: {
-					parameters: {
-						keepOnlySet: false,
-						values: {},
-						options: {},
+	const DEFAULT_SETUP = {
+		pinia: createTestingPinia(),
+		props: {
+			mappingEnabled: true,
+			editMode: { enabled: false },
+			inputData: [
+				{
+					json: {
+						list: [1, 2, 3],
+						record: { name: 'Joe' },
+						myNumber: 123,
+						myStringNumber: '456',
+						myStringText: 'abc',
+						nil: null,
+						d: undefined,
 					},
-					id: '820ea733-d8a6-4379-8e73-88a2347ea003',
-					name: 'Set',
-					type: 'n8n-nodes-base.set',
-					typeVersion: 1,
-					position: [380, 1060],
-					disabled: false,
 				},
-			},
-			mocks: {
-				$locale: {
-					baseText() {
-						return '';
-					},
+			],
+			node: {
+				parameters: {
+					keepOnlySet: false,
+					values: {},
+					options: {},
 				},
-				$store: {
-					getters: {},
+				id: '820ea733-d8a6-4379-8e73-88a2347ea003',
+				name: 'Set',
+				type: 'n8n-nodes-base.set',
+				typeVersion: 1,
+				position: [380, 1060],
+				disabled: false,
+			},
+		},
+		mocks: {
+			$locale: {
+				baseText() {
+					return '';
 				},
 			},
+			$store: {
+				getters: {},
+			},
+		},
+	};
+
+	beforeEach(cleanup);
+
+	it('renders json values properly', () => {
+		const { container } = render(RunDataJson, DEFAULT_SETUP, (vue) => {
+			vue.use(PiniaVuePlugin);
 		});
+		expect(container).toMatchSnapshot();
+
 		expect(screen.getByText('123')).toBeInTheDocument();
 		expect(screen.getByText('"456"')).toBeInTheDocument();
 		expect(screen.getByText('"abc"')).toBeInTheDocument();
 		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');
+	});
 });

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

@@ -45,7 +45,9 @@
 						>
 					</template>
 					<template #nodeValue="{ node }">
-						<span v-if="isNaN(node.index)">{{ getContent(node.content) }}</span>
+						<span v-if="isNaN(node.index)" class="ph-no-capture">{{
+							getContent(node.content)
+						}}</span>
 						<span
 							v-else
 							data-target="mappable"
@@ -57,6 +59,7 @@
 								[$style.mappable]: mappingEnabled,
 								[$style.dragged]: draggingPath === node.path,
 							}"
+							class="ph-no-capture"
 							>{{ getContent(node.content) }}</span
 						>
 					</template>

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">{{ text }}</span>
+		<span v-if="text" :class="$style.text" class="ph-no-capture">{{ 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" />

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

@@ -120,6 +120,7 @@
 							<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">
@@ -141,9 +142,11 @@
 									>
 								</template>
 								<template #value="{ value }">
-									<span :class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }">{{
-										getValueToRender(value)
-									}}</span>
+									<span
+										:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
+										class="ph-no-capture"
+										>{{ getValueToRender(value) }}</span
+									>
 								</template>
 							</n8n-tree>
 						</td>

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

@@ -47,11 +47,11 @@
 			</div>
 		</div>
 		<div v-else class="value clickable" @click="selectItem(item)">
-			<div class="item-title ph-no-capture" :title="item.key">
+			<div class="item-title" :title="item.key">
 				{{ item.name }}:
 				<font-awesome-icon icon="dot-circle" title="Select Item" />
 			</div>
-			<div class="item-value">
+			<div class="item-value ph-no-capture">
 				{{ item.value !== undefined ? item.value : $locale.baseText('variableSelectorItem.empty') }}
 			</div>
 		</div>