✨ Add parameter hints for node parameters N8N-2841 (#2704)

* 🔨 base functionality done

* :fix: changes accordingly to review

* :fix: replaced div with n8n-text

* :fix: return wrong deleted color variable

* add mock examples for testing

* add slack node test param

* 🔨 changed font size of hint, added top margin

* 🔨 updated comments and function name

* 🔨 updated parameterHint to hint

* 🔨 updated text color, set compact to true, changed inputLabelHint to hint

* 🔨 updated components styles

* 🔨 replaced mini with xsmall

* :fix: fixed line height

* :fix: changed line height to 1.25

* :hummer: removed mock data

* 🔨 changed xsmall line-height

* ⚡ update to merge hint

Co-authored-by: Mutasem <mutdmour@gmail.com>

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

@@ -23,18 +23,21 @@
 		<div class="errors" v-if="showRequiredErrors">
 			{{ $locale.baseText('parameterInputExpanded.thisFieldIsRequired') }} <a v-if="documentationUrl" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">{{ $locale.baseText('parameterInputExpanded.openDocs') }}</a>
 		</div>
+		<input-hint :class="$style.hint" :hint="$locale.credText().hint(parameter)" />
 	</n8n-input-label>
 </template>
 
 <script lang="ts">
 import { IUpdateInformation } from '@/Interface';
 import ParameterInput from './ParameterInput.vue';
+import InputHint from './ParameterInputHint.vue';
 import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'ParameterInputExpanded',
 	components: {
 		ParameterInput,
+		InputHint,
 	},
 	props: {
 		parameter: {
@@ -94,3 +97,9 @@ export default Vue.extend({
 	},
 });
 </script>
+
+<style lang="scss" module>
+	.hint {
+		margin-top: var(--spacing-4xs);
+	}
+</style>

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

@@ -16,6 +16,7 @@
 			@focus="focused = true"
 			@blur="focused = false"
 			inputSize="small" />
+		<input-hint :class="$style.hint" :hint="$locale.nodeText().hint(parameter, path)" />
 	</n8n-input-label>
 </template>
 
@@ -27,12 +28,14 @@ import {
 } from '@/Interface';
 
 import ParameterInput from '@/components/ParameterInput.vue';
+import InputHint from './ParameterInputHint.vue';
 
 export default Vue
 	.extend({
 		name: 'ParameterInputFull',
 		components: {
 			ParameterInput,
+			InputHint,
 		},
 		data() {
 			return {
@@ -64,3 +67,9 @@ export default Vue
 		},
 	});
 </script>
+
+<style lang="scss" module>
+	.hint {
+		margin-top: var(--spacing-4xs);
+	}
+</style>

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

@@ -0,0 +1,22 @@
+<template>
+	<div>
+		<n8n-text size="xsmall" color="text-base" v-if="hint">
+			<div ref="hint" v-html="hint"></div>
+		</n8n-text>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+	name: 'InputHint',
+	props: ['hint'],
+	mounted(){
+		if(this.$refs.hint){
+			(this.$refs.hint as Element).querySelectorAll('a').forEach(a => a.target = "_blank");
+		}
+	},
+});
+</script>
+

packages/editor-ui/src/plugins/i18n/index.ts

@@ -110,6 +110,18 @@ export class I18nClass {
 				});
 			},
 
+			/**
+			 * Hint for a top-level param.
+			 */
+			hint(
+				{ name: parameterName, hint }: { name: string; hint: string; },
+			) {
+				return context.dynamicRender({
+					key: `${credentialPrefix}.${parameterName}.hint`,
+					fallback: hint,
+				});
+			},
+
 			/**
 			 * Description (tooltip text) for an input label param.
 			 */
@@ -205,6 +217,21 @@ export class I18nClass {
 				});
 			},
 
+			/**
+			 * Hint for an input, whether top-level or nested.
+			 */
+			hint(
+				parameter: { name: string; hint: string; type: string },
+				path: string,
+			) {
+				const middleKey = deriveMiddleKey(path, parameter);
+
+				return context.dynamicRender({
+					key: `${initialKey}.${middleKey}.hint`,
+					fallback: parameter.hint,
+				});
+			},
+
 			/**
 			 * Placeholder for an input label or `collection` or `fixedCollection` param,
 			 * whether top-level or nested.