From 78c024b247d5bc276e17f3780d83b1b35cb2f4c1 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Thu, 3 Nov 2022 13:04:53 +0100
Subject: [PATCH] refactor(editor): restrict mapping discoverability tooltip
 showing only on string input (#4496)

* refactor(editor): restrict mapping discoverability tooltip showing only on string input

* refactor(editor): renaming computed prop because not only string inputs can be mapped, but we want to show tooltips only on string inputs

* fix(editor): removing unused prop from ParameterInputWrapper.vue

* fix(editor): reorganizing and updating props in ParameterInputFull.vue

* fix(editor): proper typings for node related translations

* fix(editor): fix typings for input localisation functions

* fix(editor): simplifying localisation functions

* Revert "fix(editor): simplifying localisation functions"

This reverts commit 3d93ccf0cf4f62b07c49871825f4a518766ca470.

* fix(editor): move nullish coalescing into called function
---
 .../src/components/ParameterInput.vue         |  4 +-
 .../src/components/ParameterInputFull.vue     | 54 ++++++++++++------
 .../src/components/ParameterInputWrapper.vue  |  3 -
 packages/editor-ui/src/plugins/i18n/index.ts  | 55 +++++++++----------
 4 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 27f9a92b6d..0baa0d4d33 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -762,12 +762,12 @@ export default mixins(
 					? this.$locale.credText().placeholder(this.parameter)
 					: this.$locale.nodeText().placeholder(this.parameter, this.path);
 			},
-			getOptionsOptionDisplayName(option: { value: string; name: string }): string {
+			getOptionsOptionDisplayName(option: INodePropertyOptions): string {
 				return this.isForCredential
 					? this.$locale.credText().optionsOptionDisplayName(this.parameter, option)
 					: this.$locale.nodeText().optionsOptionDisplayName(this.parameter, option, this.path);
 			},
-			getOptionsOptionDescription(option: { value: string; description: string }): string {
+			getOptionsOptionDescription(option: INodePropertyOptions): string {
 				return this.isForCredential
 					? this.$locale.credText().optionsOptionDescription(this.parameter, option)
 					: this.$locale.nodeText().optionsOptionDescription(this.parameter, option, this.path);
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 733b438940..c64ff82ae3 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -1,7 +1,7 @@
 <template>
 	<n8n-input-label
-		:label="hideLabel? '': $locale.nodeText().inputLabelDisplayName(parameter, path)"
-		:tooltipText="hideLabel? '': $locale.nodeText().inputLabelDescription(parameter, path)"
+		:label="hideLabel ? '': $locale.nodeText().inputLabelDisplayName(parameter, path)"
+		:tooltipText="hideLabel ? '': $locale.nodeText().inputLabelDescription(parameter, path)"
 		:showTooltip="focused"
 		:showOptions="menuExpanded || focused || forceShowExpression"
 		:bold="false"
@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 import {
 	IN8nButton,
@@ -68,15 +68,15 @@ import {
 	IUpdateInformation,
 } from '@/Interface';
 
-import ParameterOptions from './ParameterOptions.vue';
+import ParameterOptions from '@/components/ParameterOptions.vue';
 import DraggableTarget from '@/components/DraggableTarget.vue';
 import mixins from 'vue-typed-mixins';
-import { showMessage } from './mixins/showMessage';
+import { showMessage } from '@/components/mixins/showMessage';
 import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
-import { hasExpressionMapping } from './helpers';
-import ParameterInputWrapper from './ParameterInputWrapper.vue';
-import { hasOnlyListMode } from './ResourceLocator/helpers';
-import { INodePropertyMode } from 'n8n-workflow';
+import { hasExpressionMapping } from '@/components/helpers';
+import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
+import { hasOnlyListMode } from '@/components/ResourceLocator/helpers';
+import { INodeParameters, INodeProperties, INodePropertyMode } from 'n8n-workflow';
 import { isResourceLocatorValue } from '@/typeGuards';
 import { BaseTextKey } from "@/plugins/i18n";
 
@@ -98,14 +98,29 @@ export default mixins(
 				dataMappingTooltipButtons: [] as IN8nButton[],
 			};
 		},
-		props: [
-			'displayOptions',
-			'isReadOnly',
-			'parameter',
-			'path',
-			'value',
-			'hideLabel',
-		],
+		props: {
+			displayOptions: {
+				type: Boolean,
+				default: false,
+			},
+			isReadOnly: {
+				type: Boolean,
+				default: false,
+			},
+			hideLabel: {
+				type: Boolean,
+				default: false,
+			},
+			parameter: {
+				type: Object as PropType<INodeProperties>,
+			},
+			path: {
+				type: String,
+			},
+			value: {
+				type: [Number, String, Boolean, Array, Object] as PropType<INodeParameters>,
+			},
+		},
 		created() {
 			const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this);
 			this.dataMappingTooltipButtons = [
@@ -126,6 +141,9 @@ export default mixins(
 			hint (): string | null {
 				return this.$locale.nodeText().hint(this.parameter, this.path);
 			},
+			isInputTypeString (): boolean {
+				return this.parameter.type === 'string';
+			},
 			isResourceLocator (): boolean {
 				return  this.parameter.type === 'resourceLocator';
 			},
@@ -142,7 +160,7 @@ export default mixins(
 				return this.$store.getters['ndv/inputPanelDisplayMode'];
 			},
 			showMappingTooltip (): boolean {
-				return this.focused && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
+				return this.focused && this.isInputTypeString && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
 			},
 		},
 		methods: {
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 0ec3ea7014..2a2d8fcb2d 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -64,9 +64,6 @@ export default mixins(
 			value: {
 				type: [String, Number, Boolean, Array, Object] as PropType<NodeParameterValueType>,
 			},
-			hideLabel: {
-				type: Boolean,
-			},
 			droppable: {
 				type: Boolean,
 			},
diff --git a/packages/editor-ui/src/plugins/i18n/index.ts b/packages/editor-ui/src/plugins/i18n/index.ts
index 82bfa2b7d2..c746f1b8fd 100644
--- a/packages/editor-ui/src/plugins/i18n/index.ts
+++ b/packages/editor-ui/src/plugins/i18n/index.ts
@@ -1,8 +1,7 @@
-import _Vue from "vue";
+import Vue from 'vue';
 import axios from 'axios';
 import VueI18n from 'vue-i18n';
 import { Store } from "vuex";
-import Vue from 'vue';
 import { INodeTranslationHeaders, IRootState } from '@/Interface';
 import {
 	deriveMiddleKey,
@@ -15,14 +14,14 @@ import {
 } from 'n8n-design-system';
 
 import englishBaseText from './locales/en.json';
-import { INodeProperties } from "n8n-workflow";
+import {INodeProperties, INodePropertyCollection, INodePropertyOptions} from "n8n-workflow";
 
 Vue.use(VueI18n);
 locale.use('en');
 
 export let i18n: I18nClass;
 
-export function I18nPlugin(vue: typeof _Vue, store: Store<IRootState>): void {
+export function I18nPlugin(vue: typeof Vue, store: Store<IRootState>): void {
 	i18n = new I18nClass(store);
 
 	Object.defineProperty(vue, '$locale', {
@@ -79,9 +78,9 @@ export class I18nClass {
 	 * Render a string of dynamic text, i.e. a string with a constructed path to the localized value.
 	 */
 	private dynamicRender(
-		{ key, fallback }: { key: string; fallback: string; },
+		{ key, fallback }: { key: string; fallback?: string; },
 	) {
-		return this.i18n.te(key) ? this.i18n.t(key).toString() : fallback;
+		return this.i18n.te(key) ? this.i18n.t(key).toString() : fallback ?? '';
 	}
 
 	/**
@@ -106,7 +105,7 @@ export class I18nClass {
 			 * Display name for a top-level param.
 			 */
 			inputLabelDisplayName(
-				{ name: parameterName, displayName }: { name: string; displayName: string; },
+				{ name: parameterName, displayName }: INodeProperties,
 			) {
 				if (['clientId', 'clientSecret'].includes(parameterName)) {
 					return context.dynamicRender({
@@ -125,11 +124,11 @@ export class I18nClass {
 			 * Hint for a top-level param.
 			 */
 			hint(
-				{ name: parameterName, hint }: { name: string; hint?: string; },
+				{ name: parameterName, hint }: INodeProperties,
 			) {
 				return context.dynamicRender({
 					key: `${credentialPrefix}.${parameterName}.hint`,
-					fallback: hint || '',
+					fallback: hint,
 				});
 			},
 
@@ -137,7 +136,7 @@ export class I18nClass {
 			 * Description (tooltip text) for an input label param.
 			 */
 			inputLabelDescription(
-				{ name: parameterName, description }: { name: string; description: string; },
+				{ name: parameterName, description }: INodeProperties,
 			) {
 				return context.dynamicRender({
 					key: `${credentialPrefix}.${parameterName}.description`,
@@ -149,8 +148,8 @@ export class I18nClass {
 			 * Display name for an option inside an `options` or `multiOptions` param.
 			 */
 			optionsOptionDisplayName(
-				{ name: parameterName }: { name: string; },
-				{ value: optionName, name: displayName }: { value: string; name: string; },
+				{ name: parameterName }: INodeProperties,
+				{ value: optionName, name: displayName }: INodePropertyOptions,
 			) {
 				return context.dynamicRender({
 					key: `${credentialPrefix}.${parameterName}.options.${optionName}.displayName`,
@@ -162,8 +161,8 @@ export class I18nClass {
 			 * Description for an option inside an `options` or `multiOptions` param.
 			 */
 			optionsOptionDescription(
-				{ name: parameterName }: { name: string; },
-				{ value: optionName, description }: { value: string; description: string; },
+				{ name: parameterName }: INodeProperties,
+				{ value: optionName, description }: INodePropertyOptions,
 			) {
 				return context.dynamicRender({
 					key: `${credentialPrefix}.${parameterName}.options.${optionName}.description`,
@@ -175,11 +174,11 @@ export class I18nClass {
 			 * Placeholder for a `string` param.
 			 */
 			placeholder(
-				{ name: parameterName, placeholder }: { name: string; placeholder?: string; },
+				{ name: parameterName, placeholder }: INodeProperties,
 			) {
 				return context.dynamicRender({
 					key: `${credentialPrefix}.${parameterName}.placeholder`,
-					fallback: placeholder || '',
+					fallback: placeholder,
 				});
 			},
 		};
@@ -200,7 +199,7 @@ export class I18nClass {
 			 * Display name for an input label, whether top-level or nested.
 			 */
 			inputLabelDisplayName(
-				parameter: { name: string; displayName: string; type: string },
+				parameter: INodeProperties,
 				path: string,
 			) {
 				const middleKey = deriveMiddleKey(path, parameter);
@@ -215,7 +214,7 @@ export class I18nClass {
 			 * Description (tooltip text) for an input label, whether top-level or nested.
 			 */
 			inputLabelDescription(
-				parameter: { name: string; description: string; type: string },
+				parameter: INodeProperties,
 				path: string,
 			) {
 				const middleKey = deriveMiddleKey(path, parameter);
@@ -230,7 +229,7 @@ export class I18nClass {
 			 * Hint for an input, whether top-level or nested.
 			 */
 			hint(
-				parameter: { name: string; hint: string; type: string },
+				parameter: INodeProperties,
 				path: string,
 			) {
 				const middleKey = deriveMiddleKey(path, parameter);
@@ -248,7 +247,7 @@ export class I18nClass {
 			 * - For a `collection` or `fixedCollection`, the placeholder is the button text.
 			 */
 			placeholder(
-				parameter: { name: string; placeholder?: string; type: string },
+				parameter: INodeProperties,
 				path: string,
 			) {
 				let middleKey = parameter.name;
@@ -260,7 +259,7 @@ export class I18nClass {
 
 				return context.dynamicRender({
 					key: `${initialKey}.${middleKey}.placeholder`,
-					fallback: parameter.placeholder || '',
+					fallback: parameter.placeholder,
 				});
 			},
 
@@ -269,8 +268,8 @@ export class I18nClass {
 			 * whether top-level or nested.
 			 */
 			optionsOptionDisplayName(
-				parameter: { name: string; },
-				{ value: optionName, name: displayName }: { value: string; name: string; },
+				parameter: INodeProperties,
+				{ value: optionName, name: displayName }: INodePropertyOptions,
 				path: string,
 			) {
 				let middleKey = parameter.name;
@@ -291,8 +290,8 @@ export class I18nClass {
 			 * whether top-level or nested.
 			 */
 			optionsOptionDescription(
-				parameter: { name: string; },
-				{ value: optionName, description }: { value: string; description: string; },
+				parameter: INodeProperties,
+				{ value: optionName, description }: INodePropertyOptions,
 				path: string,
 			) {
 				let middleKey = parameter.name;
@@ -314,8 +313,8 @@ export class I18nClass {
 			 * be nested in a `collection` or in a `fixedCollection`.
 			 */
 			collectionOptionDisplayName(
-				parameter: { name: string; },
-				{ name: optionName, displayName }: { name: string; displayName: string; },
+				parameter: INodeProperties,
+				{ name: optionName, displayName }: INodePropertyCollection,
 				path: string,
 			) {
 				let middleKey = parameter.name;
@@ -340,7 +339,7 @@ export class I18nClass {
 			) {
 				return context.dynamicRender({
 					key: `${initialKey}.${parameterName}.multipleValueButtonText`,
-					fallback: typeOptions!.multipleValueButtonText!,
+					fallback: typeOptions?.multipleValueButtonText,
 				});
 			},