feat: No expression error when node hasn’t executed (#8448)

Co-authored-by: Giulio Andreini <andreini@netseven.it>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

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

@@ -41,6 +41,7 @@
 		<InlineExpressionEditorOutput
 			:segments="segments"
 			:is-read-only="isReadOnly"
+			:no-input-data="noInputData"
 			:visible="isFocused"
 			:hovering-item-number="hoveringItemNumber"
 		/>
@@ -118,6 +119,9 @@ export default defineComponent({
 		isDragging(): boolean {
 			return this.ndvStore.isDraggableDragging;
 		},
+		noInputData(): boolean {
+			return !this.ndvStore.hasInputData;
+		},
 	},
 	methods: {
 		focus() {

packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="visible ? $style.dropdown : $style.hidden">
-		<n8n-text size="small" compact :class="$style.header">
+		<n8n-text v-if="!noInputData" size="small" compact :class="$style.header">
 			{{ i18n.baseText('parameterInput.resultForItem') }} {{ hoveringItemNumber }}
 		</n8n-text>
 		<n8n-text :class="$style.body">
@@ -57,6 +57,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		noInputData: {
+			type: Boolean,
+			default: false,
+		},
 		hoveringItemNumber: {
 			type: Number,
 			required: true,
@@ -169,6 +173,10 @@ export default defineComponent({
 		padding-top: 0;
 		padding-left: var(--spacing-2xs);
 		color: var(--color-text-dark);
+
+		&:first-child {
+			padding-top: var(--spacing-2xs);
+		}
 	}
 
 	.footer {

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

@@ -110,6 +110,7 @@
 					</template>
 					<NodeExecuteButton
 						type="secondary"
+						hide-icon
 						:transparent="true"
 						:node-name="isActiveNodeConfig ? rootNode : currentNodeName"
 						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"

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

@@ -12,7 +12,7 @@
 					:label="buttonLabel"
 					:type="type"
 					:size="size"
-					:icon="!isListeningForEvents && 'flask'"
+					:icon="!isListeningForEvents && !hideIcon && 'flask'"
 					:transparent-background="transparent"
 					:title="!isTriggerNode ? $locale.baseText('ndv.execute.testNode.description') : ''"
 					@click="onClick"
@@ -72,6 +72,9 @@ export default defineComponent({
 		telemetrySource: {
 			type: String,
 		},
+		hideIcon: {
+			type: Boolean,
+		},
 	},
 	setup(props, ctx) {
 		const workflowsStore = useWorkflowsStore();

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

@@ -67,11 +67,11 @@ import type {
 } from 'n8n-workflow';
 import { isResourceLocatorValue } from 'n8n-workflow';
 
-import { get } from 'lodash-es';
 import type { EventBus } from 'n8n-design-system/utils';
 import { createEventBus } from 'n8n-design-system/utils';
 import { useRouter } from 'vue-router';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { getExpressionErrorMessage, getResolvableState } from '@/utils/expressions';
 
 export default defineComponent({
 	name: 'ParameterInputWrapper',
@@ -230,9 +230,12 @@ export default defineComponent({
 			const evaluated = this.evaluatedExpression;
 
 			if (!evaluated.ok) {
-				return `[${this.$locale.baseText('parameterInput.error')}: ${get(
-					evaluated.error,
-					'message',
+				if (getResolvableState(evaluated.error) !== 'invalid') {
+					return null;
+				}
+
+				return `[${this.$locale.baseText('parameterInput.error')}: ${getExpressionErrorMessage(
+					evaluated.error as Error,
 				)}]`;
 			}