From 8862e1e7df0be62ab3746b70e613ffd2ab26bc4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 3 May 2023 09:41:40 +0200
Subject: [PATCH] fix(editor): Restrict `[empty]` in parameter input hint to
 zero-length string (#6003)

* :construction: Quick test

* :zap: Adjust to new requirements

* :zap: Account for 2x double quotes

* :fire: Remove excess single quote

* :rewind: Revert per new requirements

* :rewind: Undo more changes to minimize diff

* :rewind: New requirement changes

* :bug: Prevent excess whitespace from HTML formatting

* :truck: Rename computed property

* :test_tube: Set up e2e tests for parameter input hint

* :construction: Experiments with unit tests

Pinia stores setup process WIP.

* :fire: Remove e2e test

* :rewind: Restore `test` command

* :fire: Remove unit test stub

* :fire: Remove logging

* :fire: Remove test ID

* :test_tube: Fix e2e test

* :test_tube: Tighten text check
---
 cypress/e2e/14-mapping.cy.ts                  |  2 +-
 .../src/components/ParameterInputHint.vue     | 19 +++++++++++++------
 .../src/components/ParameterInputWrapper.vue  |  4 ++--
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/cypress/e2e/14-mapping.cy.ts b/cypress/e2e/14-mapping.cy.ts
index 8c4d6f9cd..afab75190 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('have.text', ' ');
 
 		ndv.actions.selectInputNode('Set');
 
diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index fbbd176d7..d683e2353 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -1,11 +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 }"
-		>
-			{{ hint }}
-		</div>
+		<div v-if="!renderHTML" :class="classes">{{ hint }}</div>
 		<div
 			v-else
 			ref="hint"
@@ -39,6 +34,15 @@ export default defineComponent({
 	methods: {
 		sanitizeHtml,
 	},
+	computed: {
+		classes() {
+			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'));
@@ -56,4 +60,7 @@ export default defineComponent({
 .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 1bd556f29..f93970d00 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -181,8 +181,8 @@ 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}]`;