✨ 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/design-system/src/components/N8nText/Text.stories.js

@@ -7,7 +7,7 @@ export default {
 		size: {
 			control: {
 				type: 'select',
-				options: ['small', 'medium', 'large'],
+				options: ['xsmall', 'small', 'medium', 'large'],
 			},
 		},
 		color: {

packages/design-system/src/components/N8nText/Text.vue

@@ -16,7 +16,7 @@ export default Vue.extend({
 		size: {
 			type: String,
 			default: 'medium',
-			validator: (value: string): boolean => ['mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
+			validator: (value: string): boolean => ['xsmall', 'mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
 		},
 		color: {
 			type: String,
@@ -122,4 +122,19 @@ export default Vue.extend({
 	composes: body-small;
 }
 
+.body-xsmall {
+	font-size: var(--font-size-3xs);
+	line-height: var(--font-line-height-compact);
+}
+
+.body-xsmall-regular {
+	composes: regular;
+	composes: body-xsmall;
+}
+
+.body-xsmall-bold {
+	composes: bold;
+	composes: body-xsmall;
+}
+
 </style>

packages/design-system/theme/src/_tokens.scss

@@ -316,6 +316,7 @@
 	--border-base: var(--border-width-base) var(--border-style-base)
 		var(--color-foreground-base);
 
+	--font-size-3xs: 0.625rem;
 	--font-size-2xs: 0.75rem;
 	--font-size-xs: 0.8125rem;
 	--font-size-s: 0.875rem;

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.

packages/nodes-base/nodes/Merge/Merge.node.ts

@@ -111,6 +111,7 @@ export class Merge implements INodeType {
 				name: 'propertyName1',
 				type: 'string',
 				default: '',
+				hint: 'The name of the field as text (e.g. “id”)',
 				required: true,
 				displayOptions: {
 					show: {
@@ -128,6 +129,7 @@ export class Merge implements INodeType {
 				name: 'propertyName2',
 				type: 'string',
 				default: '',
+				hint: 'The name of the field as text (e.g. “id”)',
 				required: true,
 				displayOptions: {
 					show: {

packages/workflow/src/Interfaces.ts

@@ -670,6 +670,7 @@ export interface INodeProperties {
 	typeOptions?: INodePropertyTypeOptions;
 	default: NodeParameterValue | INodeParameters | INodeParameters[] | NodeParameterValue[];
 	description?: string;
+	hint?: string;
 	displayOptions?: IDisplayOptions;
 	options?: Array<INodePropertyOptions | INodeProperties | INodePropertyCollection>;
 	placeholder?: string;