feat(editor): update expressions display (#4171)

* N8n 4673 expressions res1 (#4149)

* hide hints if necessary

* refactor out parameter input

* refactor param input in creds

* remove any

* add expression result before

* update case

* add types

* fix spacing

* update types

* update expr

* update parameter input

* update param input

* update param input

* remove import

* fix typo

* update value

* fix drop for rl

* add state to track hovering item

* add hover behavior to resolve values

* update index

* fix run selector bug

* add run item to eval expr

* add paired item mappings

* fix rec bug

* Fix for loops

* handle pinned data

* add missing pinned

* fix bug

* support parent

* add input

* map back from output

* clean up

* fix output bug

* fix branching bug

* update preview

* only if expr

* fix output

* fix expr eval for outputs

* add default hover state

* fix hover state

* fix branching

* hide hint if expr

* remove duplicate logic

* update style

* allow opening expr in demo

* update expr

* update row hover

* update param name

* clean up

* update hovering state

* update default output

* fix duplicate import

* update hover behavior

* update package lock

* fix pinned data case

* address case when no input

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

@@ -18,19 +18,18 @@
 			/>
 		</template>
 		<template>
-			<parameter-input
+			<parameter-input-wrapper
 				ref="param"
 				inputSize="large"
 				:parameter="parameter"
 				:value="value"
 				:path="parameter.name"
 				:hideIssues="true"
-				:displayOptions="true"
 				:documentationUrl="documentationUrl"
 				:errorHighlight="showRequiredErrors"
 				:isForCredential="true"
 				:eventSource="eventSource"
-				:isValueExpression="isValueExpression"
+				:hint="!showRequiredErrors? hint: ''"
 				@focus="onFocus"
 				@blur="onBlur"
 				@textInput="valueChanged"
@@ -44,30 +43,27 @@
 					</n8n-link>
 				</n8n-text>
 			</div>
-			<input-hint :class="$style.hint" :hint="$locale.credText().hint(parameter)" />
 		</template>
 	</n8n-input-label>
 </template>
 
 <script lang="ts">
 import { IUpdateInformation } from '@/Interface';
-import ParameterInput from './ParameterInput.vue';
 import ParameterOptions from './ParameterOptions.vue';
-import InputHint from './ParameterInputHint.vue';
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
+import ParameterInputWrapper from './ParameterInputWrapper.vue';
 import { isValueExpression } from './helpers';
 import { INodeParameterResourceLocator, INodeProperties } from 'n8n-workflow';
 
 export default Vue.extend({
-	name: 'ParameterInputExpanded',
+	name: 'parameter-input-expanded',
 	components: {
-		ParameterInput,
-		InputHint,
 		ParameterOptions,
+		ParameterInputWrapper,
 	},
 	props: {
 		parameter: {
-			type: Object as () => INodeProperties,
+			type: Object as PropType<INodeProperties>,
 		},
 		value: {
 		},
@@ -106,6 +102,13 @@ export default Vue.extend({
 
 			return false;
 		},
+		hint(): string | null {
+			if (this.isValueExpression) {
+				return null;
+			}
+
+			return this.$locale.credText().hint(this.parameter);
+		},
 		isValueExpression (): boolean {
 			return isValueExpression(this.parameter, this.value as string | INodeParameterResourceLocator);
 		},