fix(editor): Restrict [empty] in parameter input hint to zero-length string

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

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>

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>
 
@@ -182,8 +184,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}]`;