From 4cd87191e50e7501a3ff7a7e5cb477da10044d8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 18 Apr 2023 15:39:49 +0200
Subject: [PATCH 01/18] :construction: Quick test

---
 .../src/components/ParameterInputWrapper.vue   | 18 +++++++++++++++---
 packages/editor-ui/src/utils/htmlUtils.ts      |  2 +-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index d1f2c73ebb164..707d855406c13 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -31,6 +31,7 @@
 			:highlight="!!(expressionOutput && targetItem)"
 			:hint="expressionOutput"
 			:singleLine="true"
+			renderHTML
 		/>
 		<input-hint
 			v-else-if="parameterHint"
@@ -176,14 +177,16 @@ export default mixins(showMessage, workflowHelpers).extend({
 					return null;
 				}
 
-				if (typeof computedValue === 'string' && computedValue.trim().length === 0) {
-					computedValue = this.$locale.baseText('parameterInput.emptyString');
+				if (typeof computedValue === 'string' && computedValue.length === 0) {
+					return this.$locale.baseText('parameterInput.emptyString');
 				}
 			} catch (error) {
 				computedValue = `[${this.$locale.baseText('parameterInput.error')}: ${error.message}]`;
 			}
 
-			return typeof computedValue === 'string' ? computedValue : JSON.stringify(computedValue);
+			return typeof computedValue === 'string'
+				? this.toDisplayableString(computedValue)
+				: JSON.stringify(computedValue);
 		},
 		expressionOutput(): string | null {
 			if (this.isValueExpression && this.expressionValueComputed) {
@@ -194,6 +197,11 @@ export default mixins(showMessage, workflowHelpers).extend({
 		},
 	},
 	methods: {
+		toDisplayableString(str: string): string {
+			const whitespaced = str.replace(/ /g, '&nbsp;');
+
+			return `<span class="${this.$style.quotes}">"</span><span>${whitespaced}</span><span class="${this.$style.quotes}">"</span>`;
+		},
 		onFocus() {
 			this.$emit('focus');
 		},
@@ -221,6 +229,10 @@ export default mixins(showMessage, workflowHelpers).extend({
 <style lang="scss" module>
 .hint {
 	margin-top: var(--spacing-4xs);
+
+	.quotes {
+		color: var(--color-text-lighter);
+	}
 }
 
 .hovering {
diff --git a/packages/editor-ui/src/utils/htmlUtils.ts b/packages/editor-ui/src/utils/htmlUtils.ts
index 45ea9fcc1d780..741b2bb67d732 100644
--- a/packages/editor-ui/src/utils/htmlUtils.ts
+++ b/packages/editor-ui/src/utils/htmlUtils.ts
@@ -6,7 +6,7 @@ import xss, { friendlyAttrValue } from 'xss';
 
 export function sanitizeHtml(dirtyHtml: string) {
 	const allowedAttributes = ['href', 'name', 'target', 'title', 'class', 'id'];
-	const allowedTags = ['p', 'strong', 'b', 'code', 'a', 'br', 'i', 'em', 'small'];
+	const allowedTags = ['p', 'strong', 'b', 'code', 'a', 'br', 'i', 'em', 'small', 'span'];
 
 	const sanitizedHtml = xss(dirtyHtml, {
 		onTagAttr: (tag, name, value) => {

From 2848917591adf66815dfe45feaadda3db0a8ca97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 18 Apr 2023 16:37:36 +0200
Subject: [PATCH 02/18] :zap: Adjust to new requirements

---
 .../editor-ui/src/components/ParameterInputHint.vue  |  9 ++++++++-
 .../src/components/ParameterInputWrapper.vue         | 12 +-----------
 packages/editor-ui/src/utils/htmlUtils.ts            |  2 +-
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index f0a39b4e0a1cd..ead77cf8dfc4a 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -2,7 +2,11 @@
 	<n8n-text size="small" color="text-base" tag="div" v-if="hint">
 		<div
 			v-if="!renderHTML"
-			:class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
+			:class="{
+				[$style.singleline]: singleLine,
+				[$style.highlight]: highlight,
+				[$style['preserve-whitespace']]: true,
+			}"
 		>
 			{{ hint }}
 		</div>
@@ -56,4 +60,7 @@ export default Vue.extend({
 .highlight {
 	color: var(--color-secondary);
 }
+.preserve-whitespace {
+	white-space: pre;
+}
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 707d855406c13..14ef22ebfc3d9 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -31,7 +31,6 @@
 			:highlight="!!(expressionOutput && targetItem)"
 			:hint="expressionOutput"
 			:singleLine="true"
-			renderHTML
 		/>
 		<input-hint
 			v-else-if="parameterHint"
@@ -185,7 +184,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 			}
 
 			return typeof computedValue === 'string'
-				? this.toDisplayableString(computedValue)
+				? `"${computedValue}"`
 				: JSON.stringify(computedValue);
 		},
 		expressionOutput(): string | null {
@@ -197,11 +196,6 @@ export default mixins(showMessage, workflowHelpers).extend({
 		},
 	},
 	methods: {
-		toDisplayableString(str: string): string {
-			const whitespaced = str.replace(/ /g, '&nbsp;');
-
-			return `<span class="${this.$style.quotes}">"</span><span>${whitespaced}</span><span class="${this.$style.quotes}">"</span>`;
-		},
 		onFocus() {
 			this.$emit('focus');
 		},
@@ -229,10 +223,6 @@ export default mixins(showMessage, workflowHelpers).extend({
 <style lang="scss" module>
 .hint {
 	margin-top: var(--spacing-4xs);
-
-	.quotes {
-		color: var(--color-text-lighter);
-	}
 }
 
 .hovering {
diff --git a/packages/editor-ui/src/utils/htmlUtils.ts b/packages/editor-ui/src/utils/htmlUtils.ts
index 741b2bb67d732..45ea9fcc1d780 100644
--- a/packages/editor-ui/src/utils/htmlUtils.ts
+++ b/packages/editor-ui/src/utils/htmlUtils.ts
@@ -6,7 +6,7 @@ import xss, { friendlyAttrValue } from 'xss';
 
 export function sanitizeHtml(dirtyHtml: string) {
 	const allowedAttributes = ['href', 'name', 'target', 'title', 'class', 'id'];
-	const allowedTags = ['p', 'strong', 'b', 'code', 'a', 'br', 'i', 'em', 'small', 'span'];
+	const allowedTags = ['p', 'strong', 'b', 'code', 'a', 'br', 'i', 'em', 'small'];
 
 	const sanitizedHtml = xss(dirtyHtml, {
 		onTagAttr: (tag, name, value) => {

From 05ffa7f1359d8097cebb530e0795a39f165fd53b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 18 Apr 2023 16:44:10 +0200
Subject: [PATCH 03/18] :zap: Account for 2x double quotes

---
 .../editor-ui/src/components/ParameterInputWrapper.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 14ef22ebfc3d9..92c1e36346f2b 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -183,9 +183,13 @@ export default mixins(showMessage, workflowHelpers).extend({
 				computedValue = `[${this.$locale.baseText('parameterInput.error')}: ${error.message}]`;
 			}
 
-			return typeof computedValue === 'string'
-				? `"${computedValue}"`
-				: JSON.stringify(computedValue);
+			if (typeof computedValue === 'string') {
+				return computedValue.startsWith('"') && computedValue.endsWith('"')
+					? `'${computedValue}''`
+					: `"${computedValue}"`;
+			}
+
+			return JSON.stringify(computedValue);
 		},
 		expressionOutput(): string | null {
 			if (this.isValueExpression && this.expressionValueComputed) {

From 770437b81682f8740b529629fcdaa218387f5b38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 18 Apr 2023 17:13:00 +0200
Subject: [PATCH 04/18] :fire: Remove excess single quote

---
 packages/editor-ui/src/components/ParameterInputWrapper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 92c1e36346f2b..bb331c3582761 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -185,7 +185,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 
 			if (typeof computedValue === 'string') {
 				return computedValue.startsWith('"') && computedValue.endsWith('"')
-					? `'${computedValue}''`
+					? `'${computedValue}'`
 					: `"${computedValue}"`;
 			}
 

From 34428fcc464ca3479e7ff569d469147449151583 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 20 Apr 2023 11:45:01 +0200
Subject: [PATCH 05/18] :rewind: Revert per new requirements

---
 packages/editor-ui/src/components/ParameterInputHint.vue  | 1 -
 .../editor-ui/src/components/ParameterInputWrapper.vue    | 8 +-------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index ead77cf8dfc4a..668f82673aba4 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -5,7 +5,6 @@
 			:class="{
 				[$style.singleline]: singleLine,
 				[$style.highlight]: highlight,
-				[$style['preserve-whitespace']]: true,
 			}"
 		>
 			{{ hint }}
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index bb331c3582761..4433c4d6ca0e1 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -183,13 +183,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 				computedValue = `[${this.$locale.baseText('parameterInput.error')}: ${error.message}]`;
 			}
 
-			if (typeof computedValue === 'string') {
-				return computedValue.startsWith('"') && computedValue.endsWith('"')
-					? `'${computedValue}'`
-					: `"${computedValue}"`;
-			}
-
-			return JSON.stringify(computedValue);
+			return typeof computedValue === 'string' ? computedValue : JSON.stringify(computedValue);
 		},
 		expressionOutput(): string | null {
 			if (this.isValueExpression && this.expressionValueComputed) {

From b3dff4d83dd29de6f3721fd3a462965061b1e90d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 20 Apr 2023 11:49:03 +0200
Subject: [PATCH 06/18] :rewind: Undo more changes to minimize diff

---
 packages/editor-ui/src/components/ParameterInputHint.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index 668f82673aba4..f0a39b4e0a1cd 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -2,10 +2,7 @@
 	<n8n-text size="small" color="text-base" tag="div" v-if="hint">
 		<div
 			v-if="!renderHTML"
-			:class="{
-				[$style.singleline]: singleLine,
-				[$style.highlight]: highlight,
-			}"
+			:class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
 		>
 			{{ hint }}
 		</div>
@@ -59,7 +56,4 @@ export default Vue.extend({
 .highlight {
 	color: var(--color-secondary);
 }
-.preserve-whitespace {
-	white-space: pre;
-}
 </style>

From ed8a1661d394f0ae11661c77e9796b9cea9feea0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 20 Apr 2023 12:33:18 +0200
Subject: [PATCH 07/18] :rewind: New requirement changes

---
 packages/editor-ui/src/components/ParameterInputHint.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index f0a39b4e0a1cd..ead77cf8dfc4a 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -2,7 +2,11 @@
 	<n8n-text size="small" color="text-base" tag="div" v-if="hint">
 		<div
 			v-if="!renderHTML"
-			:class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
+			:class="{
+				[$style.singleline]: singleLine,
+				[$style.highlight]: highlight,
+				[$style['preserve-whitespace']]: true,
+			}"
 		>
 			{{ hint }}
 		</div>
@@ -56,4 +60,7 @@ export default Vue.extend({
 .highlight {
 	color: var(--color-secondary);
 }
+.preserve-whitespace {
+	white-space: pre;
+}
 </style>

From c535807617628a3cac746d2c804e234ce6478730 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 20 Apr 2023 12:54:41 +0200
Subject: [PATCH 08/18] :bug: Prevent excess whitespace from HTML formatting

---
 .../src/components/ParameterInputHint.vue     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index ead77cf8dfc4a..9c2b887c34778 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -1,15 +1,6 @@
 <template>
 	<n8n-text size="small" color="text-base" tag="div" v-if="hint">
-		<div
-			v-if="!renderHTML"
-			:class="{
-				[$style.singleline]: singleLine,
-				[$style.highlight]: highlight,
-				[$style['preserve-whitespace']]: true,
-			}"
-		>
-			{{ hint }}
-		</div>
+		<div v-if="!renderHTML" :class="style">{{ hint }}</div>
 		<div
 			v-else
 			ref="hint"
@@ -43,6 +34,15 @@ export default Vue.extend({
 	methods: {
 		sanitizeHtml,
 	},
+	computed: {
+		style() {
+			return {
+				[this.$style.singleline]: this.singleLine,
+				[this.$style.highlight]: this.highlight,
+				[this.$style['preserve-whitespace']]: true,
+			};
+		},
+	},
 	mounted() {
 		if (this.$refs.hint) {
 			(this.$refs.hint as Element).querySelectorAll('a').forEach((a) => (a.target = '_blank'));

From 34f6ed5bef15981edb48c8c74133faa87e4a751e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 24 Apr 2023 10:02:01 +0200
Subject: [PATCH 09/18] :truck: Rename computed property

---
 packages/editor-ui/src/components/ParameterInputHint.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index 70da950583eb1..d683e23537f60 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -1,6 +1,6 @@
 <template>
 	<n8n-text size="small" color="text-base" tag="div" v-if="hint">
-		<div v-if="!renderHTML" :class="style">{{ hint }}</div>
+		<div v-if="!renderHTML" :class="classes">{{ hint }}</div>
 		<div
 			v-else
 			ref="hint"
@@ -35,7 +35,7 @@ export default defineComponent({
 		sanitizeHtml,
 	},
 	computed: {
-		style() {
+		classes() {
 			return {
 				[this.$style.singleline]: this.singleLine,
 				[this.$style.highlight]: this.highlight,

From 462732179c7726d97ae30d9957e3c0e06af0a274 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 24 Apr 2023 10:41:20 +0200
Subject: [PATCH 10/18] :test_tube: Set up e2e tests for parameter input hint

---
 cypress/e2e/26-parameter-input.hint.cy.ts     | 47 +++++++++++++++++++
 .../src/components/ParameterInputWrapper.vue  | 32 +++++++------
 2 files changed, 64 insertions(+), 15 deletions(-)
 create mode 100644 cypress/e2e/26-parameter-input.hint.cy.ts

diff --git a/cypress/e2e/26-parameter-input.hint.cy.ts b/cypress/e2e/26-parameter-input.hint.cy.ts
new file mode 100644
index 0000000000000..2a214eccb0006
--- /dev/null
+++ b/cypress/e2e/26-parameter-input.hint.cy.ts
@@ -0,0 +1,47 @@
+import { WorkflowPage, NDV } from '../pages';
+
+const wf = new WorkflowPage();
+const ndv = new NDV();
+
+describe('Parameter input hint', () => {
+	before(() => {
+		cy.resetAll();
+		cy.skipSetup();
+	});
+
+	[
+		{
+			name: 'should display a regular string',
+			pinData: [{ regular_string: 'hello' }],
+			input: '{{ $json.regular_string',
+			output: 'hello',
+		},
+		{
+			name: 'should display `[empty]` for a zero-length string',
+			pinData: [{ empty_string: '' }],
+			input: '{{ $json.empty_string',
+			output: '[empty]',
+		},
+		{
+			name: 'should display ` ` for a single-whitespace string',
+			pinData: [{ single_whitespace_string: ' ' }],
+			input: '{{ $json.single_whitespace_string',
+			output: ' ',
+		},
+	].forEach(({ name, pinData, input, output }) => {
+		it(name, () => {
+			wf.actions.visit();
+			wf.actions.addInitialNodeToCanvas('Schedule Trigger', { keepNdvOpen: true });
+			ndv.actions.setPinnedData(pinData);
+			ndv.actions.close();
+
+			wf.actions.addNodeToCanvas('Set', true, true);
+			cy.get('input[placeholder="Add Value"]').click();
+			cy.get('span').contains('String').click();
+			ndv.getters.nthParam(3).contains('Expression').invoke('show').click();
+
+			ndv.getters.inlineExpressionEditorInput().clear().type(input);
+			cy.get('[data-test-id="parameter-input-hint"]').should('contain', output);
+		});
+	});
+});
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 9591db2c59065..44d6f4de13310 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -23,21 +23,23 @@
 			@textInput="onTextInput"
 			@valueChanged="onValueChanged"
 		/>
-		<input-hint
-			v-if="expressionOutput"
-			:class="$style.hint"
-			data-test-id="parameter-expression-preview"
-			class="ph-no-capture"
-			:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
-			:hint="expressionOutput"
-			:singleLine="true"
-		/>
-		<input-hint
-			v-else-if="parameterHint"
-			:class="$style.hint"
-			:renderHTML="true"
-			:hint="parameterHint"
-		/>
+		<div data-test-id="parameter-input-hint">
+			<input-hint
+				v-if="expressionOutput"
+				:class="$style.hint"
+				data-test-id="parameter-expression-preview"
+				class="ph-no-capture"
+				:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
+				:hint="expressionOutput"
+				:singleLine="true"
+			/>
+			<input-hint
+				v-else-if="parameterHint"
+				:class="$style.hint"
+				:renderHTML="true"
+				:hint="parameterHint"
+			/>
+		</div>
 	</div>
 </template>
 

From 86eca3557f07e7c7f9acbbdad0280e8df084a8b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 27 Apr 2023 12:19:11 +0200
Subject: [PATCH 11/18] :construction: Experiments with unit tests

Pinia stores setup process WIP.
---
 packages/editor-ui/package.json               |  2 +-
 .../src/components/ParameterInputWrapper.vue  |  5 ++
 .../__tests__/ParameterInputWrapper.spec.ts   | 87 +++++++++++++++++++
 packages/editor-ui/src/stores/workflows.ts    |  2 +-
 4 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 packages/editor-ui/src/components/__tests__/ParameterInputWrapper.spec.ts

diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 90a2bde2060e3..561c89e114029 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -22,7 +22,7 @@
     "lintfix": "eslint --ext .js,.ts,.vue src --fix",
     "format": "prettier --write . --ignore-path ../../.prettierignore",
     "serve": "cross-env VUE_APP_URL_BASE_API=http://localhost:5678/ vite --host 0.0.0.0 --port 8080 dev",
-    "test": "vitest run --coverage",
+    "test": "vitest run ParameterInputWrapper",
     "test:dev": "vitest"
   },
   "dependencies": {
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 44d6f4de13310..944cc3ffe3145 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -162,6 +162,11 @@ export default mixins(showMessage, workflowHelpers).extend({
 		},
 		expressionValueComputed(): string | null {
 			const value = isResourceLocatorValue(this.value) ? this.value.value : this.value;
+
+			console.log('this.activeNode', this.activeNode);
+			// console.log('!this.activeNode', !this.activeNode);
+			// console.log('!this.isValueExpression', !this.isValueExpression);
+			// console.log("typeof value !== 'string'", typeof value !== 'string');
 			if (!this.activeNode || !this.isValueExpression || typeof value !== 'string') {
 				return null;
 			}
diff --git a/packages/editor-ui/src/components/__tests__/ParameterInputWrapper.spec.ts b/packages/editor-ui/src/components/__tests__/ParameterInputWrapper.spec.ts
new file mode 100644
index 0000000000000..fbbfb9a41722c
--- /dev/null
+++ b/packages/editor-ui/src/components/__tests__/ParameterInputWrapper.spec.ts
@@ -0,0 +1,87 @@
+import { PiniaVuePlugin } from 'pinia';
+import { createLocalVue, mount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import { STORES } from '@/constants';
+import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import { render, screen } from '@testing-library/vue';
+import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
+import { createEmptyWorkflow, useWorkflowsStore } from '@/stores/workflows';
+import { Workflow } from 'n8n-workflow';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+
+describe('ParameterInputWrapper.vue', () => {
+	const localVue = createLocalVue();
+	localVue.use(PiniaVuePlugin);
+
+	const DEFAULT_SETUP = {
+		pinia: createTestingPinia({
+			initialState: {
+				[STORES.SETTINGS]: {
+					settings: SETTINGS_STORE_DEFAULT_STATE.settings,
+				},
+				[STORES.NDV]: {
+					activeNodeName: 'Set',
+					getters: {
+						activeNode: () => ({ name: 'Set', parameters: {} }),
+					},
+				},
+				[STORES.WORKFLOWS]: {
+					workflow: {
+						nodes: [{ name: 'Set', parameters: {} }],
+						connections: {},
+					},
+					actions: {
+						getCurrentWorkflow: () => ({ hello: 123 }),
+					},
+				},
+				[STORES.NODE_TYPES]: {
+					nodeTypes: {}, // @TODO
+				},
+			},
+		}),
+		props: {
+			activeDrop: false,
+			documentationUrl: undefined,
+			droppable: false,
+			errorHighlight: false,
+			eventSource: undefined,
+			forceShowExpression: false,
+			hideIssues: false,
+			hint: '',
+			inputSize: 'small',
+			isForCredential: false,
+			isReadOnly: false,
+			parameter: {
+				default: 'propertyName',
+				description:
+					'Name of the property to write data to. Supports dot-notation. Example: "data.person[0].name"',
+				displayName: 'Name',
+				name: 'name',
+				requiresDataPath: 'single',
+				type: 'string',
+			},
+			path: 'parameters.values.string[0].name',
+			value: '={{ "" }}',
+		},
+		mocks: {
+			$locale: {
+				baseText() {
+					return '';
+				},
+			},
+			$store: {
+				getters: {},
+			},
+		},
+	};
+
+	it('renders json values properly', () => {
+		vi.mocked(useWorkflowsStore().getCurrentWorkflow).mockReturnValue(
+			new Workflow({ ...createEmptyWorkflow(), nodes: [{ name: 'Set', parameters: {} }] }),
+		);
+
+		render(ParameterInputWrapper, DEFAULT_SETUP, (vue) => vue.use(PiniaVuePlugin));
+
+		expect(screen.getByText('[empty]')).toBeInTheDocument();
+	});
+});
diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
index 3d9600c0c851a..6893de2687cb4 100644
--- a/packages/editor-ui/src/stores/workflows.ts
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -76,7 +76,7 @@ import { useWorkflowsEEStore } from '@/stores/workflows.ee';
 import { useUsersStore } from '@/stores/users';
 import { useSettingsStore } from '@/stores/settings';
 
-const createEmptyWorkflow = (): IWorkflowDb => ({
+export const createEmptyWorkflow = (): IWorkflowDb => ({
 	id: PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	name: '',
 	active: false,

From 067086ef202db07a20a5d8c84216decc816e2247 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 2 May 2023 10:13:06 +0200
Subject: [PATCH 12/18] :fire: Remove e2e test

---
 cypress/e2e/26-parameter-input.hint.cy.ts | 47 -----------------------
 1 file changed, 47 deletions(-)
 delete mode 100644 cypress/e2e/26-parameter-input.hint.cy.ts

diff --git a/cypress/e2e/26-parameter-input.hint.cy.ts b/cypress/e2e/26-parameter-input.hint.cy.ts
deleted file mode 100644
index 2a214eccb0006..0000000000000
--- a/cypress/e2e/26-parameter-input.hint.cy.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { WorkflowPage, NDV } from '../pages';
-
-const wf = new WorkflowPage();
-const ndv = new NDV();
-
-describe('Parameter input hint', () => {
-	before(() => {
-		cy.resetAll();
-		cy.skipSetup();
-	});
-
-	[
-		{
-			name: 'should display a regular string',
-			pinData: [{ regular_string: 'hello' }],
-			input: '{{ $json.regular_string',
-			output: 'hello',
-		},
-		{
-			name: 'should display `[empty]` for a zero-length string',
-			pinData: [{ empty_string: '' }],
-			input: '{{ $json.empty_string',
-			output: '[empty]',
-		},
-		{
-			name: 'should display ` ` for a single-whitespace string',
-			pinData: [{ single_whitespace_string: ' ' }],
-			input: '{{ $json.single_whitespace_string',
-			output: ' ',
-		},
-	].forEach(({ name, pinData, input, output }) => {
-		it(name, () => {
-			wf.actions.visit();
-			wf.actions.addInitialNodeToCanvas('Schedule Trigger', { keepNdvOpen: true });
-			ndv.actions.setPinnedData(pinData);
-			ndv.actions.close();
-
-			wf.actions.addNodeToCanvas('Set', true, true);
-			cy.get('input[placeholder="Add Value"]').click();
-			cy.get('span').contains('String').click();
-			ndv.getters.nthParam(3).contains('Expression').invoke('show').click();
-
-			ndv.getters.inlineExpressionEditorInput().clear().type(input);
-			cy.get('[data-test-id="parameter-input-hint"]').should('contain', output);
-		});
-	});
-});

From bba95e48bd04568b2f32fbffc9d95a1192c2e418 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 2 May 2023 10:13:45 +0200
Subject: [PATCH 13/18] :rewind: Restore `test` command

---
 packages/editor-ui/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 561c89e114029..90a2bde2060e3 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -22,7 +22,7 @@
     "lintfix": "eslint --ext .js,.ts,.vue src --fix",
     "format": "prettier --write . --ignore-path ../../.prettierignore",
     "serve": "cross-env VUE_APP_URL_BASE_API=http://localhost:5678/ vite --host 0.0.0.0 --port 8080 dev",
-    "test": "vitest run ParameterInputWrapper",
+    "test": "vitest run --coverage",
     "test:dev": "vitest"
   },
   "dependencies": {

From 57ad6c8e792f5ecb818c2e7564bd15eb5027d0c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 2 May 2023 10:15:44 +0200
Subject: [PATCH 14/18] :fire: Remove unit test stub

---
 .../__tests__/ParameterInputWrapper.spec.ts   | 87 -------------------
 packages/editor-ui/src/stores/workflows.ts    |  2 +-
 2 files changed, 1 insertion(+), 88 deletions(-)
 delete mode 100644 packages/editor-ui/src/components/__tests__/ParameterInputWrapper.spec.ts

diff --git a/packages/editor-ui/src/components/__tests__/ParameterInputWrapper.spec.ts b/packages/editor-ui/src/components/__tests__/ParameterInputWrapper.spec.ts
deleted file mode 100644
index fbbfb9a41722c..0000000000000
--- a/packages/editor-ui/src/components/__tests__/ParameterInputWrapper.spec.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { PiniaVuePlugin } from 'pinia';
-import { createLocalVue, mount } from '@vue/test-utils';
-import { createTestingPinia } from '@pinia/testing';
-import { STORES } from '@/constants';
-import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
-import { render, screen } from '@testing-library/vue';
-import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
-import { createEmptyWorkflow, useWorkflowsStore } from '@/stores/workflows';
-import { Workflow } from 'n8n-workflow';
-import { useNodeTypesStore } from '@/stores/nodeTypes';
-
-describe('ParameterInputWrapper.vue', () => {
-	const localVue = createLocalVue();
-	localVue.use(PiniaVuePlugin);
-
-	const DEFAULT_SETUP = {
-		pinia: createTestingPinia({
-			initialState: {
-				[STORES.SETTINGS]: {
-					settings: SETTINGS_STORE_DEFAULT_STATE.settings,
-				},
-				[STORES.NDV]: {
-					activeNodeName: 'Set',
-					getters: {
-						activeNode: () => ({ name: 'Set', parameters: {} }),
-					},
-				},
-				[STORES.WORKFLOWS]: {
-					workflow: {
-						nodes: [{ name: 'Set', parameters: {} }],
-						connections: {},
-					},
-					actions: {
-						getCurrentWorkflow: () => ({ hello: 123 }),
-					},
-				},
-				[STORES.NODE_TYPES]: {
-					nodeTypes: {}, // @TODO
-				},
-			},
-		}),
-		props: {
-			activeDrop: false,
-			documentationUrl: undefined,
-			droppable: false,
-			errorHighlight: false,
-			eventSource: undefined,
-			forceShowExpression: false,
-			hideIssues: false,
-			hint: '',
-			inputSize: 'small',
-			isForCredential: false,
-			isReadOnly: false,
-			parameter: {
-				default: 'propertyName',
-				description:
-					'Name of the property to write data to. Supports dot-notation. Example: "data.person[0].name"',
-				displayName: 'Name',
-				name: 'name',
-				requiresDataPath: 'single',
-				type: 'string',
-			},
-			path: 'parameters.values.string[0].name',
-			value: '={{ "" }}',
-		},
-		mocks: {
-			$locale: {
-				baseText() {
-					return '';
-				},
-			},
-			$store: {
-				getters: {},
-			},
-		},
-	};
-
-	it('renders json values properly', () => {
-		vi.mocked(useWorkflowsStore().getCurrentWorkflow).mockReturnValue(
-			new Workflow({ ...createEmptyWorkflow(), nodes: [{ name: 'Set', parameters: {} }] }),
-		);
-
-		render(ParameterInputWrapper, DEFAULT_SETUP, (vue) => vue.use(PiniaVuePlugin));
-
-		expect(screen.getByText('[empty]')).toBeInTheDocument();
-	});
-});
diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
index 6893de2687cb4..3d9600c0c851a 100644
--- a/packages/editor-ui/src/stores/workflows.ts
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -76,7 +76,7 @@ import { useWorkflowsEEStore } from '@/stores/workflows.ee';
 import { useUsersStore } from '@/stores/users';
 import { useSettingsStore } from '@/stores/settings';
 
-export const createEmptyWorkflow = (): IWorkflowDb => ({
+const createEmptyWorkflow = (): IWorkflowDb => ({
 	id: PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	name: '',
 	active: false,

From 04fa796138cb74e72ced833acd59568198a2739f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 2 May 2023 10:16:44 +0200
Subject: [PATCH 15/18] :fire: Remove logging

---
 packages/editor-ui/src/components/ParameterInputWrapper.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 944cc3ffe3145..21d8e68c36a06 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -163,10 +163,6 @@ export default mixins(showMessage, workflowHelpers).extend({
 		expressionValueComputed(): string | null {
 			const value = isResourceLocatorValue(this.value) ? this.value.value : this.value;
 
-			console.log('this.activeNode', this.activeNode);
-			// console.log('!this.activeNode', !this.activeNode);
-			// console.log('!this.isValueExpression', !this.isValueExpression);
-			// console.log("typeof value !== 'string'", typeof value !== 'string');
 			if (!this.activeNode || !this.isValueExpression || typeof value !== 'string') {
 				return null;
 			}

From da9e85f58c567e03e396a03b35a9e79d1ac6b86f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 2 May 2023 10:17:34 +0200
Subject: [PATCH 16/18] :fire: Remove test ID

---
 .../src/components/ParameterInputWrapper.vue  | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 21d8e68c36a06..9591db2c59065 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -23,23 +23,21 @@
 			@textInput="onTextInput"
 			@valueChanged="onValueChanged"
 		/>
-		<div data-test-id="parameter-input-hint">
-			<input-hint
-				v-if="expressionOutput"
-				:class="$style.hint"
-				data-test-id="parameter-expression-preview"
-				class="ph-no-capture"
-				:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
-				:hint="expressionOutput"
-				:singleLine="true"
-			/>
-			<input-hint
-				v-else-if="parameterHint"
-				:class="$style.hint"
-				:renderHTML="true"
-				:hint="parameterHint"
-			/>
-		</div>
+		<input-hint
+			v-if="expressionOutput"
+			:class="$style.hint"
+			data-test-id="parameter-expression-preview"
+			class="ph-no-capture"
+			:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
+			:hint="expressionOutput"
+			:singleLine="true"
+		/>
+		<input-hint
+			v-else-if="parameterHint"
+			:class="$style.hint"
+			:renderHTML="true"
+			:hint="parameterHint"
+		/>
 	</div>
 </template>
 
@@ -162,7 +160,6 @@ export default mixins(showMessage, workflowHelpers).extend({
 		},
 		expressionValueComputed(): string | null {
 			const value = isResourceLocatorValue(this.value) ? this.value.value : this.value;
-
 			if (!this.activeNode || !this.isValueExpression || typeof value !== 'string') {
 				return null;
 			}

From b8873ad14809927e1bc8a6cf0036accc2b71925d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 2 May 2023 10:47:03 +0200
Subject: [PATCH 17/18] :test_tube: Fix e2e test

---
 cypress/e2e/14-mapping.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/14-mapping.cy.ts b/cypress/e2e/14-mapping.cy.ts
index 8c4d6f9cdbe05..65354796000a7 100644
--- a/cypress/e2e/14-mapping.cy.ts
+++ b/cypress/e2e/14-mapping.cy.ts
@@ -205,7 +205,7 @@ describe('Data mapping', () => {
 				'have.text',
 				`{{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input[0].count }} {{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input }}`,
 			);
-		ndv.getters.parameterExpressionPreview('value').should('include.text', '[empty]');
+		ndv.getters.parameterExpressionPreview('value').should('include.text', ' ');
 
 		ndv.actions.selectInputNode('Set');
 

From 9bfc901a57629cbfac34336c8d671ba981b7e798 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 2 May 2023 11:07:28 +0200
Subject: [PATCH 18/18] :test_tube: Tighten text check

---
 cypress/e2e/14-mapping.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/14-mapping.cy.ts b/cypress/e2e/14-mapping.cy.ts
index 65354796000a7..afab75190e641 100644
--- a/cypress/e2e/14-mapping.cy.ts
+++ b/cypress/e2e/14-mapping.cy.ts
@@ -205,7 +205,7 @@ describe('Data mapping', () => {
 				'have.text',
 				`{{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input[0].count }} {{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input }}`,
 			);
-		ndv.getters.parameterExpressionPreview('value').should('include.text', ' ');
+		ndv.getters.parameterExpressionPreview('value').should('have.text', ' ');
 
 		ndv.actions.selectInputNode('Set');