mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +00:00
feat(editor): update expressions display (#4171)
* N8n 4673 expressions res1 (#4149) * hide hints if necessary * refactor out parameter input * refactor param input in creds * remove any * add expression result before * update case * add types * fix spacing * update types * update expr * update parameter input * update param input * update param input * remove import * fix typo * update value * fix drop for rl * add state to track hovering item * add hover behavior to resolve values * update index * fix run selector bug * add run item to eval expr * add paired item mappings * fix rec bug * Fix for loops * handle pinned data * add missing pinned * fix bug * support parent * add input * map back from output * clean up * fix output bug * fix branching bug * update preview * only if expr * fix output * fix expr eval for outputs * add default hover state * fix hover state * fix branching * hide hint if expr * remove duplicate logic * update style * allow opening expr in demo * update expr * update row hover * update param name * clean up * update hovering state * update default output * fix duplicate import * update hover behavior * update package lock * fix pinned data case * address case when no input
This commit is contained in:
Mutasem Aldmour
210
packages/editor-ui/src/components/ParameterInputWrapper.vue
Normal file
210
packages/editor-ui/src/components/ParameterInputWrapper.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div>
|
||||
<parameter-input
|
||||
ref="param"
|
||||
:inputSize="inputSize"
|
||||
:parameter="parameter"
|
||||
:value="value"
|
||||
:path="path"
|
||||
:isReadOnly="isReadOnly"
|
||||
:droppable="droppable"
|
||||
:activeDrop="activeDrop"
|
||||
:forceShowExpression="forceShowExpression"
|
||||
:hideIssues="hideIssues"
|
||||
:documentationUrl="documentationUrl"
|
||||
:errorHighlight="errorHighlight"
|
||||
:isForCredential="isForCredential"
|
||||
:eventSource="eventSource"
|
||||
:expressionEvaluated="expressionValueComputed"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@drop="onDrop"
|
||||
@textInput="onTextInput"
|
||||
@valueChanged="onValueChanged" />
|
||||
<input-hint v-if="expressionOutput || parameterHint" :class="$style.hint" :highlight="!!(expressionOutput && targetItem)" :hint="expressionOutput || parameterHint" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue, { PropType } from 'vue';
|
||||
|
||||
import ParameterInput from '@/components/ParameterInput.vue';
|
||||
import InputHint from './ParameterInputHint.vue';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import { showMessage } from './mixins/showMessage';
|
||||
import { INodeProperties, INodePropertyMode, IRunData, isResourceLocatorValue, NodeParameterValue, NodeParameterValueType } from 'n8n-workflow';
|
||||
import { INodeUi, IUiState, IUpdateInformation, TargetItem } from '@/Interface';
|
||||
import { workflowHelpers } from './mixins/workflowHelpers';
|
||||
import { isValueExpression } from './helpers';
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
workflowHelpers,
|
||||
)
|
||||
.extend({
|
||||
name: 'parameter-input-wrapper',
|
||||
components: {
|
||||
ParameterInput,
|
||||
InputHint,
|
||||
},
|
||||
mounted() {
|
||||
this.$on('optionSelected', this.optionSelected);
|
||||
},
|
||||
props: {
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
},
|
||||
parameter: {
|
||||
type: Object as PropType<INodeProperties>,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
},
|
||||
value: {
|
||||
type: [String, Number, Boolean, Array, Object] as PropType<NodeParameterValueType>,
|
||||
},
|
||||
hideLabel: {
|
||||
type: Boolean,
|
||||
},
|
||||
droppable: {
|
||||
type: Boolean,
|
||||
},
|
||||
activeDrop: {
|
||||
type: Boolean,
|
||||
},
|
||||
forceShowExpression: {
|
||||
type: Boolean,
|
||||
},
|
||||
hint: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
inputSize: {
|
||||
type: String,
|
||||
},
|
||||
hideIssues: {
|
||||
type: Boolean,
|
||||
},
|
||||
documentationUrl: {
|
||||
type: String as PropType<string | undefined>,
|
||||
},
|
||||
errorHighlight: {
|
||||
type: Boolean,
|
||||
},
|
||||
isForCredential: {
|
||||
type: Boolean,
|
||||
},
|
||||
eventSource: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isValueExpression () {
|
||||
return isValueExpression(this.parameter, this.value);
|
||||
},
|
||||
activeNode(): INodeUi | null {
|
||||
return this.$store.getters.activeNode;
|
||||
},
|
||||
selectedRLMode(): INodePropertyMode | undefined {
|
||||
if (typeof this.value !== 'object' ||this.parameter.type !== 'resourceLocator' || !isResourceLocatorValue(this.value)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const mode = this.value.mode;
|
||||
if (mode) {
|
||||
return this.parameter.modes?.find((m: INodePropertyMode) => m.name === mode);
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
parameterHint(): string | undefined {
|
||||
if (this.isValueExpression) {
|
||||
return undefined;
|
||||
}
|
||||
if (this.selectedRLMode && this.selectedRLMode.hint) {
|
||||
return this.selectedRLMode.hint;
|
||||
}
|
||||
|
||||
return this.hint;
|
||||
},
|
||||
targetItem(): TargetItem | null {
|
||||
return this.$store.getters['ui/hoveringItem'];
|
||||
},
|
||||
expressionValueComputed (): string | null {
|
||||
const inputNodeName: string | undefined = this.$store.getters['ui/ndvInputNodeName'];
|
||||
const value = isResourceLocatorValue(this.value)? this.value.value: this.value;
|
||||
if (this.activeNode === null || !this.isValueExpression || typeof value !== 'string') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const inputRunIndex: number | undefined = this.$store.getters['ui/ndvInputRunIndex'];
|
||||
const inputBranchIndex: number | undefined = this.$store.getters['ui/ndvInputBranchIndex'];
|
||||
|
||||
let computedValue: NodeParameterValue;
|
||||
try {
|
||||
const targetItem = this.targetItem ?? undefined;
|
||||
computedValue = this.resolveExpression(value, undefined, {targetItem, inputNodeName, inputRunIndex, inputBranchIndex});
|
||||
if (computedValue === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (typeof computedValue === 'string' && computedValue.trim().length === 0) {
|
||||
computedValue = this.$locale.baseText('parameterInput.emptyString');
|
||||
}
|
||||
} catch (error) {
|
||||
computedValue = `[${this.$locale.baseText('parameterInput.error')}}: ${error.message}]`;
|
||||
}
|
||||
|
||||
return typeof computedValue === 'string' ? computedValue : JSON.stringify(computedValue);
|
||||
},
|
||||
expressionOutput(): string | null {
|
||||
if (this.isValueExpression && this.expressionValueComputed) {
|
||||
const inputData = this.$store.getters['ui/ndvInputData'];
|
||||
if (!inputData || (inputData && inputData.length <= 1)) {
|
||||
return this.expressionValueComputed;
|
||||
}
|
||||
|
||||
return this.$locale.baseText(`parameterInput.expressionResult`, {
|
||||
interpolate: {
|
||||
result: this.expressionValueComputed,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onFocus() {
|
||||
this.$emit('focus');
|
||||
},
|
||||
onBlur() {
|
||||
this.$emit('blur');
|
||||
},
|
||||
onDrop(data: string) {
|
||||
this.$emit('drop', data);
|
||||
},
|
||||
optionSelected(command: string) {
|
||||
if (this.$refs.param) {
|
||||
(this.$refs.param as Vue).$emit('optionSelected', command);
|
||||
}
|
||||
},
|
||||
onValueChanged(parameterData: IUpdateInformation) {
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
onTextInput(parameterData: IUpdateInformation) {
|
||||
this.$emit('textInput', parameterData);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.hint {
|
||||
margin-top: var(--spacing-4xs);
|
||||
}
|
||||
|
||||
.hovering {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user