mirror of
https://github.com/n8n-io/n8n.git
synced 2024-09-20 06:47:32 -07:00
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 3d93ccf0cf
.
* fix(editor): move nullish coalescing into called function
This commit is contained in:
parent
d944a3884c
commit
78c024b247
|
@ -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);
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -64,9 +64,6 @@ export default mixins(
|
|||
value: {
|
||||
type: [String, Number, Boolean, Array, Object] as PropType<NodeParameterValueType>,
|
||||
},
|
||||
hideLabel: {
|
||||
type: Boolean,
|
||||
},
|
||||
droppable: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in a new issue