Skip to content

Commit

Permalink
refactor(editor): restrict mapping discoverability tooltip showing on…
Browse files Browse the repository at this point in the history 
…ly 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 3d93ccf.

* fix(editor): move nullish coalescing into called function
  • Loading branch information
@cstuncsik
cstuncsik authored Nov 3, 2022
1 parent d944a38 commit 78c024b
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 51 deletions.
4 changes: 2 additions & 2 deletions packages/editor-ui/src/components/ParameterInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
54 changes: 36 additions & 18 deletions packages/editor-ui/src/components/ParameterInputFull.vue
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -59,7 +59,7 @@
</template>

<script lang="ts">
import Vue from 'vue';
import Vue, { PropType } from 'vue';
import {
IN8nButton,
Expand All @@ -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";
Expand All @@ -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 = [
Expand All @@ -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';
},
Expand All @@ -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: {
Expand Down
3 changes: 0 additions & 3 deletions packages/editor-ui/src/components/ParameterInputWrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,6 @@ export default mixins(
value: {
type: [String, Number, Boolean, Array, Object] as PropType<NodeParameterValueType>,
},
hideLabel: {
type: Boolean,
},
droppable: {
type: Boolean,
},
Expand Down
55 changes: 27 additions & 28 deletions packages/editor-ui/src/plugins/i18n/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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', {
Expand Down Expand Up @@ -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 ?? '';
}

/**
Expand All @@ -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({
Expand All @@ -125,19 +124,19 @@ 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,
});
},

/**
* 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`,
Expand All @@ -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`,
Expand All @@ -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`,
Expand All @@ -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,
});
},
};
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -260,7 +259,7 @@ export class I18nClass {

return context.dynamicRender({
key: `${initialKey}.${middleKey}.placeholder`,
fallback: parameter.placeholder || '',
fallback: parameter.placeholder,
});
},

Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -340,7 +339,7 @@ export class I18nClass {
) {
return context.dynamicRender({
key: `${initialKey}.${parameterName}.multipleValueButtonText`,
fallback: typeOptions!.multipleValueButtonText!,
fallback: typeOptions?.multipleValueButtonText,
});
},

Expand Down

0 comments on commit 78c024b

Please sign in to comment.