✨ 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/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.