mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Csaba Tuncsik 2022-11-01 16:31:21 +01:00
parent 6c2c621f1d
commit 8b82d724f5
2 changed files with 40 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
packages/editor-ui/src/components/ParameterInputFull.vue
View file

@ -59,7 +59,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue, { PropType } from 'vue';
import { import {
IN8nButton, IN8nButton,
@ -68,15 +68,15 @@ import {
IUpdateInformation, IUpdateInformation,
} from '@/Interface'; } from '@/Interface';
import ParameterOptions from './ParameterOptions.vue'; import ParameterOptions from '@/components/ParameterOptions.vue';
import DraggableTarget from '@/components/DraggableTarget.vue'; import DraggableTarget from '@/components/DraggableTarget.vue';
import mixins from 'vue-typed-mixins'; 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 { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
import { hasExpressionMapping } from './helpers'; import { hasExpressionMapping } from '@/components/helpers';
import ParameterInputWrapper from './ParameterInputWrapper.vue'; import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
import { hasOnlyListMode } from './ResourceLocator/helpers'; import { hasOnlyListMode } from '@/components/ResourceLocator/helpers';
import { INodePropertyMode } from 'n8n-workflow'; import { INodeParameters, INodeProperties, INodePropertyMode } from 'n8n-workflow';
import { isResourceLocatorValue } from '@/typeGuards'; import { isResourceLocatorValue } from '@/typeGuards';
import { BaseTextKey } from "@/plugins/i18n"; import { BaseTextKey } from "@/plugins/i18n";
@ -98,14 +98,31 @@ export default mixins(
dataMappingTooltipButtons: [] as IN8nButton[], dataMappingTooltipButtons: [] as IN8nButton[],
}; };
}, },
props: [ props: {
'displayOptions', displayOptions: {
'isReadOnly', type: Boolean,
'parameter', default: false,
'path', },
'value', isReadOnly: {
'hideLabel', type: Boolean,
], default: false,
},
parameter: {
type: Object as PropType<INodeProperties>,
required: true,
},
path: {
type: String,
required: true,
},
value: {
type: [Number, String, Boolean, Array, Object] as PropType<INodeParameters>,
},
hideLabel: {
type: Boolean,
default: false,
},
},
created() { created() {
const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this); const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this);
this.dataMappingTooltipButtons = [ this.dataMappingTooltipButtons = [
@ -126,6 +143,9 @@ export default mixins(
hint (): string | null { hint (): string | null {
return this.$locale.nodeText().hint(this.parameter, this.path); return this.$locale.nodeText().hint(this.parameter, this.path);
}, },
isInputTypeMappable (): boolean {
return this.parameter.type === 'string';
},
isResourceLocator (): boolean { isResourceLocator (): boolean {
return this.parameter.type === 'resourceLocator'; return this.parameter.type === 'resourceLocator';
}, },
@ -142,7 +162,7 @@ export default mixins(
return this.$store.getters['ndv/inputPanelDisplayMode']; return this.$store.getters['ndv/inputPanelDisplayMode'];
}, },
showMappingTooltip (): boolean { showMappingTooltip (): boolean {
return this.focused && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true'; return this.focused && this.isInputTypeMappable && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
}, },
}, },
methods: { methods: {

9
packages/editor-ui/src/plugins/i18n/index.ts
View file

@ -1,8 +1,7 @@
import _Vue from "vue"; import Vue from 'vue';
import axios from 'axios'; import axios from 'axios';
import VueI18n from 'vue-i18n'; import VueI18n from 'vue-i18n';
import { Store } from "vuex"; import { Store } from "vuex";
import Vue from 'vue';
import { INodeTranslationHeaders, IRootState } from '@/Interface'; import { INodeTranslationHeaders, IRootState } from '@/Interface';
import { import {
deriveMiddleKey, deriveMiddleKey,
@ -22,7 +21,7 @@ locale.use('en');
export let i18n: I18nClass; 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); i18n = new I18nClass(store);
Object.defineProperty(vue, '$locale', { Object.defineProperty(vue, '$locale', {
@ -230,14 +229,14 @@ export class I18nClass {
* Hint for an input, whether top-level or nested. * Hint for an input, whether top-level or nested.
*/ */
hint( hint(
parameter: { name: string; hint: string; type: string }, parameter: INodeProperties,
path: string, path: string,
) { ) {
const middleKey = deriveMiddleKey(path, parameter); const middleKey = deriveMiddleKey(path, parameter);
return context.dynamicRender({ return context.dynamicRender({
key: `${initialKey}.${middleKey}.hint`, key: `${initialKey}.${middleKey}.hint`,
fallback: parameter.hint, fallback: parameter.hint || '',
}); });
}, },