From a732374f24354e0c1f36247f4476e743b0fc78e5 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Thu, 23 Mar 2023 11:20:11 +0100
Subject: [PATCH] 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
---
 .../src/components/ExecutionsList.vue         |   2 +-
 .../editor-ui/src/components/InputPanel.vue   |   2 +-
 .../src/components/ParameterInputWrapper.vue  |   1 +
 .../ResourceLocatorDropdown.vue               |   1 +
 packages/editor-ui/src/components/RunData.vue |   2 -
 .../editor-ui/src/components/RunDataHtml.vue  |   2 +-
 .../src/components/RunDataJson.test.ts        | 107 +--
 .../editor-ui/src/components/RunDataJson.vue  |   5 +-
 .../src/components/RunDataSchemaItem.vue      |   2 +-
 .../editor-ui/src/components/RunDataTable.vue |   9 +-
 .../src/components/VariableSelectorItem.vue   |   4 +-
 .../__snapshots__/RunDataJson.test.ts.snap    | 700 ++++++++++++++++++
 .../__snapshots__/RunDataSchema.test.ts.snap  |  12 +-
 .../layouts/ResourcesListLayout.vue           |   2 +-
 14 files changed, 789 insertions(+), 62 deletions(-)
 create mode 100644 packages/editor-ui/src/components/__snapshots__/RunDataJson.test.ts.snap

diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index e7b6a548bf..589b5bd605 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/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>
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 589ccb95e6..c52d2a1e66 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"
 					>
-						{{ truncate(node.name) }}&nbsp;
+						<span class="ph-no-capture">{{ truncate(node.name) }}&nbsp;</span>
 						<span v-if="getMultipleNodesText(node.name)">{{
 							getMultipleNodesText(node.name)
 						}}</span>
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 441c3979cb..d1f2c73ebb 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/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"
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
index 0fff36c344..c26e8cbda8 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/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()"
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index cd72958357..70666e31f1 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/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"
diff --git a/packages/editor-ui/src/components/RunDataHtml.vue b/packages/editor-ui/src/components/RunDataHtml.vue
index 53aff0c9eb..afdae703b7 100644
--- a/packages/editor-ui/src/components/RunDataHtml.vue
+++ b/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">
diff --git a/packages/editor-ui/src/components/RunDataJson.test.ts b/packages/editor-ui/src/components/RunDataJson.test.ts
index f2e30956c6..22a87e6cdb 100644
--- a/packages/editor-ui/src/components/RunDataJson.test.ts
+++ b/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', () => {
+	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,
+					},
+				},
+			],
+			node: {
+				parameters: {
+					keepOnlySet: false,
+					values: {},
+					options: {},
+				},
+				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', () => {
-		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: {},
-					},
-					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: {},
-				},
-			},
+		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');
+	});
 });
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index eb85ce9524..ea6718d2b5 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/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>
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index 23550593c0..3af9a04e4e 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">{{ 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" />
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 9f092a7fd7..07cd4d134d 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/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>
diff --git a/packages/editor-ui/src/components/VariableSelectorItem.vue b/packages/editor-ui/src/components/VariableSelectorItem.vue
index d0b55be280..713392d016 100644
--- a/packages/editor-ui/src/components/VariableSelectorItem.vue
+++ b/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>
diff --git a/packages/editor-ui/src/components/__snapshots__/RunDataJson.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/RunDataJson.test.ts.snap
new file mode 100644
index 0000000000..e7f97d5676
--- /dev/null
+++ b/packages/editor-ui/src/components/__snapshots__/RunDataJson.test.ts.snap
@@ -0,0 +1,700 @@
+// Vitest Snapshot v1
+
+exports[`RunDataJson.vue > renders json values properly 1`] = `
+<div>
+  <div
+    class="jsonDisplay"
+  >
+    <!---->
+    <div
+      class=""
+    >
+      <div
+        class="json-data vjs-tree"
+      >
+        <div
+          class="vjs-tree-list"
+        >
+          <div
+            class="vjs-tree-list-holder"
+          >
+            <div
+              class="vjs-tree-list-holder-inner"
+            >
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    [
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    {
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  <span
+                    class="mappable"
+                    data-depth="2"
+                    data-name="list"
+                    data-path="[0].list"
+                    data-target="mappable"
+                    data-value="{{ $node.Set.json.list }}"
+                  >
+                    "list"
+                  </span>
+                  <span>
+                    :
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    [
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-value vjs-value-number"
+                  >
+                    <span
+                      class="ph-no-capture mappable"
+                      data-depth="3"
+                      data-name="list[0]"
+                      data-path="[0].list[0]"
+                      data-target="mappable"
+                      data-value="{{ $node.Set.json.list[0] }}"
+                    >
+                      1
+                    </span>
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-value vjs-value-number"
+                  >
+                    <span
+                      class="ph-no-capture mappable"
+                      data-depth="3"
+                      data-name="list[1]"
+                      data-path="[0].list[1]"
+                      data-target="mappable"
+                      data-value="{{ $node.Set.json.list[1] }}"
+                    >
+                      2
+                    </span>
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-value vjs-value-number"
+                  >
+                    <span
+                      class="ph-no-capture mappable"
+                      data-depth="3"
+                      data-name="list[2]"
+                      data-path="[0].list[2]"
+                      data-target="mappable"
+                      data-value="{{ $node.Set.json.list[2] }}"
+                    >
+                      3
+                    </span>
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    ]
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  <span
+                    class="mappable"
+                    data-depth="2"
+                    data-name="record"
+                    data-path="[0].record"
+                    data-target="mappable"
+                    data-value="{{ $node.Set.json.record }}"
+                  >
+                    "record"
+                  </span>
+                  <span>
+                    :
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    {
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  <span
+                    class="mappable"
+                    data-depth="3"
+                    data-name="name"
+                    data-path="[0].record.name"
+                    data-target="mappable"
+                    data-value="{{ $node.Set.json.record.name }}"
+                  >
+                    "name"
+                  </span>
+                  <span>
+                    :
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-string"
+                  >
+                    <span
+                      class="ph-no-capture"
+                    >
+                      "Joe"
+                    </span>
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    }
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  <span
+                    class="mappable"
+                    data-depth="2"
+                    data-name="myNumber"
+                    data-path="[0].myNumber"
+                    data-target="mappable"
+                    data-value="{{ $node.Set.json.myNumber }}"
+                  >
+                    "myNumber"
+                  </span>
+                  <span>
+                    :
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-number"
+                  >
+                    <span
+                      class="ph-no-capture"
+                    >
+                      123
+                    </span>
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  <span
+                    class="mappable"
+                    data-depth="2"
+                    data-name="myStringNumber"
+                    data-path="[0].myStringNumber"
+                    data-target="mappable"
+                    data-value="{{ $node.Set.json.myStringNumber }}"
+                  >
+                    "myStringNumber"
+                  </span>
+                  <span>
+                    :
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-string"
+                  >
+                    <span
+                      class="ph-no-capture"
+                    >
+                      "456"
+                    </span>
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  <span
+                    class="mappable"
+                    data-depth="2"
+                    data-name="myStringText"
+                    data-path="[0].myStringText"
+                    data-target="mappable"
+                    data-value="{{ $node.Set.json.myStringText }}"
+                  >
+                    "myStringText"
+                  </span>
+                  <span>
+                    :
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-string"
+                  >
+                    <span
+                      class="ph-no-capture"
+                    >
+                      "abc"
+                    </span>
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  <span
+                    class="mappable"
+                    data-depth="2"
+                    data-name="nil"
+                    data-path="[0].nil"
+                    data-target="mappable"
+                    data-value="{{ $node.Set.json.nil }}"
+                  >
+                    "nil"
+                  </span>
+                  <span>
+                    :
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-null"
+                  >
+                    <span
+                      class="ph-no-capture"
+                    >
+                      null
+                    </span>
+                  </span>
+                  <span>
+                    ,
+                  </span>
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <span
+                  class="vjs-key"
+                >
+                  <span
+                    class="mappable"
+                    data-depth="2"
+                    data-name="d"
+                    data-path="[0].d"
+                    data-target="mappable"
+                    data-value="{{ $node.Set.json.d }}"
+                  >
+                    "d"
+                  </span>
+                  <span>
+                    :
+                  </span>
+                </span>
+                <span>
+                  <span
+                    class="vjs-value vjs-value-undefined"
+                  >
+                    <span
+                      class="ph-no-capture"
+                    >
+                      
+                    </span>
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <div
+                    class="vjs-indent-unit has-line"
+                  />
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    }
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+              <div
+                class="vjs-tree-node"
+                collapsed-on-click-brackets="true"
+              >
+                <!---->
+                <!---->
+                <div
+                  class="vjs-indent"
+                >
+                  <!---->
+                </div>
+                <!---->
+                <span>
+                  <span
+                    class="vjs-tree-brackets"
+                  >
+                    ]
+                  </span>
+                  <!---->
+                  <!---->
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="teleporter hidden"
+        data-v-d4e6e290=""
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
index ec26244ccf..1356f49ca8 100644
--- a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
@@ -52,7 +52,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                 </span>
               </div>
               <span
-                class="text"
+                class="ph-no-capture text"
               >
                 John
               </span>
@@ -90,7 +90,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                 </span>
               </div>
               <span
-                class="text"
+                class="ph-no-capture text"
               >
                 22
               </span>
@@ -176,7 +176,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                     </span>
                   </div>
                   <span
-                    class="text"
+                    class="ph-no-capture text"
                   >
                     surfing
                   </span>
@@ -216,7 +216,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                     </span>
                   </div>
                   <span
-                    class="text"
+                    class="ph-no-capture text"
                   >
                     traveling
                   </span>
@@ -458,7 +458,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                             </span>
                           </div>
                           <span
-                            class="text"
+                            class="ph-no-capture text"
                           >
                             1
                           </span>
@@ -498,7 +498,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                         </span>
                       </div>
                       <span
-                        class="text"
+                        class="ph-no-capture text"
                       >
                         ignore
                       </span>
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 3c5a8e7601..ec4e1a6cb0 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -33,7 +33,7 @@
 			<n8n-loading :class="$style['card-loading']" variant="custom" />
 		</div>
 		<template v-else>
-			<div class="ph-no-capture" v-if="resources.length === 0">
+			<div v-if="resources.length === 0">
 				<slot name="empty">
 					<n8n-action-box
 						data-test-id="empty-resources-list"