N8N-4175 resource locator component

packages/core/src/NodeExecuteFunctions.ts

@@ -51,14 +51,14 @@ import {
 	NodeApiError,
 	NodeHelpers,
 	NodeOperationError,
-	NodeParameterValue,
 	Workflow,
 	WorkflowActivateMode,
 	WorkflowDataProxy,
 	WorkflowExecuteMode,
 	LoggerProxy as Logger,
 	IExecuteData,
 	OAuth2GrantType,
+	NodeParameterValueType,
 } from 'n8n-workflow';
 
 import { Agent } from 'https';
@@ -1621,9 +1621,7 @@ export function getNode(node: INode): INode {
  * Clean up parameter data to make sure that only valid data gets returned
  * INFO: Currently only converts Luxon Dates as we know for sure it will not be breaking
  */
-function cleanupParameterData(
-	inputData: NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[],
-): NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[] {
+function cleanupParameterData(inputData: NodeParameterValueType): NodeParameterValueType {
 	if (inputData === null || inputData === undefined) {
 		return inputData;
 	}
@@ -1640,7 +1638,9 @@ function cleanupParameterData(
 
 	if (typeof inputData === 'object') {
 		Object.keys(inputData).forEach((key) => {
-			inputData[key] = cleanupParameterData(inputData[key]);
+			inputData[key as keyof typeof inputData] = cleanupParameterData(
+				inputData[key as keyof typeof inputData],
+			);
 		});
 	}
 
@@ -1674,7 +1674,7 @@ export function getNodeParameter(
 	additionalKeys: IWorkflowDataProxyAdditionalKeys,
 	executeData?: IExecuteData,
 	fallbackValue?: any,
-): NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[] | object {
+): NodeParameterValueType | object {
 	const nodeType = workflow.nodeTypes.getByNameAndVersion(node.type, node.typeVersion);
 	if (nodeType === undefined) {
 		throw new Error(`Node type "${node.type}" is not known so can not return paramter value!`);
@@ -1880,12 +1880,7 @@ export function getExecutePollFunctions(
 			getNodeParameter: (
 				parameterName: string,
 				fallbackValue?: any,
-			):
-				| NodeParameterValue
-				| INodeParameters
-				| NodeParameterValue[]
-				| INodeParameters[]
-				| object => {
+			): NodeParameterValueType | object => {
 				const runExecutionData: IRunExecutionData | null = null;
 				const itemIndex = 0;
 				const runIndex = 0;
@@ -2035,12 +2030,7 @@ export function getExecuteTriggerFunctions(
 			getNodeParameter: (
 				parameterName: string,
 				fallbackValue?: any,
-			):
-				| NodeParameterValue
-				| INodeParameters
-				| NodeParameterValue[]
-				| INodeParameters[]
-				| object => {
+			): NodeParameterValueType | object => {
 				const runExecutionData: IRunExecutionData | null = null;
 				const itemIndex = 0;
 				const runIndex = 0;
@@ -2251,12 +2241,7 @@ export function getExecuteFunctions(
 				parameterName: string,
 				itemIndex: number,
 				fallbackValue?: any,
-			):
-				| NodeParameterValue
-				| INodeParameters
-				| NodeParameterValue[]
-				| INodeParameters[]
-				| object => {
+			): NodeParameterValueType | object => {
 				return getNodeParameter(
 					workflow,
 					runExecutionData,
@@ -2525,12 +2510,7 @@ export function getExecuteSingleFunctions(
 			getNodeParameter: (
 				parameterName: string,
 				fallbackValue?: any,
-			):
-				| NodeParameterValue
-				| INodeParameters
-				| NodeParameterValue[]
-				| INodeParameters[]
-				| object => {
+			): NodeParameterValueType | object => {
 				return getNodeParameter(
 					workflow,
 					runExecutionData,
@@ -2676,13 +2656,7 @@ export function getLoadOptionsFunctions(
 			},
 			getCurrentNodeParameter: (
 				parameterPath: string,
-			):
-				| NodeParameterValue
-				| INodeParameters
-				| NodeParameterValue[]
-				| INodeParameters[]
-				| object
-				| undefined => {
+			): NodeParameterValueType | object | undefined => {
 				const nodeParameters = additionalData.currentNodeParameters;
 
 				if (parameterPath.charAt(0) === '&') {
@@ -2700,12 +2674,7 @@ export function getLoadOptionsFunctions(
 			getNodeParameter: (
 				parameterName: string,
 				fallbackValue?: any,
-			):
-				| NodeParameterValue
-				| INodeParameters
-				| NodeParameterValue[]
-				| INodeParameters[]
-				| object => {
+			): NodeParameterValueType | object => {
 				const runExecutionData: IRunExecutionData | null = null;
 				const itemIndex = 0;
 				const runIndex = 0;
@@ -2831,12 +2800,7 @@ export function getExecuteHookFunctions(
 			getNodeParameter: (
 				parameterName: string,
 				fallbackValue?: any,
-			):
-				| NodeParameterValue
-				| INodeParameters
-				| NodeParameterValue[]
-				| INodeParameters[]
-				| object => {
+			): NodeParameterValueType | object => {
 				const runExecutionData: IRunExecutionData | null = null;
 				const itemIndex = 0;
 				const runIndex = 0;
@@ -2994,12 +2958,7 @@ export function getExecuteWebhookFunctions(
 			getNodeParameter: (
 				parameterName: string,
 				fallbackValue?: any,
-			):
-				| NodeParameterValue
-				| INodeParameters
-				| NodeParameterValue[]
-				| INodeParameters[]
-				| object => {
+			): NodeParameterValueType | object => {
 				const runExecutionData: IRunExecutionData | null = null;
 				const itemIndex = 0;
 				const runIndex = 0;

packages/design-system/theme/src/input.scss

@@ -116,7 +116,7 @@
 		height: var.$input-height;
 		line-height: var.$input-height;
 		outline: none;
-		padding: 0 var(--spacing-xs);
+		padding: 0 var(--spacing-xs) 0 var(--spacing-2xs);
 		transition: var.$border-transition-base;
 		width: 100%;
 

packages/editor-ui/src/components/DraggableTarget.vue

@@ -59,7 +59,7 @@ export default Vue.extend({
 
 				this.hovering = e.clientX >= dim.left && e.clientX <= dim.right && e.clientY >= dim.top && e.clientY <= dim.bottom;
 
-				if (this.sticky && this.hovering) {
+				if (!this.disabled && this.sticky && this.hovering) {
 					this.$store.commit('ui/setDraggableStickyPos', [dim.left + this.stickyOffset, dim.top + this.stickyOffset]);
 				}
 			}

packages/editor-ui/src/components/MainSidebar.vue

@@ -649,7 +649,7 @@ export default mixins(
 		height: 35px;
 		line-height: 35px;
 		color: $--custom-dialog-text-color;
-		--menu-item-hover-fill: var(--color-primary-tint-3);
+		--menu-item-hover-fill: var(--color-background-base);
 
 		.item-title {
 			position: absolute;
@@ -669,7 +669,7 @@ export default mixins(
 	.el-menu {
 		border: none;
 		font-size: 14px;
-		--menu-item-hover-fill: var(--color-primary-tint-3);
+		--menu-item-hover-fill: var(--color-background-base);
 
 		.el-menu--collapse {
 			width: 75px;

packages/editor-ui/src/components/ParameterInput.vue

@@ -2,7 +2,7 @@
 	<div @keydown.stop :class="parameterInputClasses">
 		<expression-edit
 			:dialogVisible="expressionEditDialogVisible"
-			:value="value"
+			:value="isResourceLocatorParameter ? value.value || '' : value"
 			:parameter="parameter"
 			:path="path"
 			:eventSource="eventSource || 'ndv'"
@@ -14,16 +14,35 @@
 			:style="parameterInputWrapperStyle"
 			@click="openExpressionEdit"
 		>
+			<resource-locator
+				v-if="isResourceLocatorParameter"
+				ref="resourceLocator"
+				:parameter="parameter"
+				:value="typeof value === 'string' ? value : value.value"
+				:mode="value.mode || ''"
+				:displayValue="displayValue"
+				:displayTitle="displayTitle"
+				:parameterInputClasses="parameterInputClasses"
+				:expressionDisplayValue="expressionDisplayValue"
+				:isValueExpression="isValueExpression"
+				:isReadOnly="isReadOnly"
+				:parameterIssues="getIssues"
+				:droppable="droppable"
+				@valueChanged="valueChanged"
+				@modeChanged="valueChanged"
+				@focus="setFocus"
+				@blur="onBlur"
+				@drop="onDrop"
+			></resource-locator>
 			<n8n-input
-				v-if="isValueExpression || droppable || forceShowExpression"
+				v-else-if="isValueExpression || droppable || forceShowExpression"
 				:size="inputSize"
 				:type="getStringInputType"
 				:rows="getArgument('rows')"
 				:value="activeDrop || forceShowExpression? '': expressionDisplayValue"
 				:title="displayTitle"
 				@keydown.stop
 			/>
-
 			<div
 				v-else-if="
 					['json', 'string'].includes(parameter.type) ||
@@ -270,7 +289,6 @@ import {
 import {
 	NodeHelpers,
 	NodeParameterValue,
-	IHttpRequestOptions,
 	ILoadOptions,
 	INodeParameters,
 	INodePropertyOptions,
@@ -284,6 +302,7 @@ import NodeCredentials from '@/components/NodeCredentials.vue';
 import ScopesNotice from '@/components/ScopesNotice.vue';
 import ParameterOptions from '@/components/ParameterOptions.vue';
 import ParameterIssues from '@/components/ParameterIssues.vue';
+import ResourceLocator from '@/components/ResourceLocator/ResourceLocator.vue';
 // @ts-ignore
 import PrismEditor from 'vue-prism-editor';
 import TextEdit from '@/components/TextEdit.vue';
@@ -314,6 +333,7 @@ export default mixins(
 			ScopesNotice,
 			ParameterOptions,
 			ParameterIssues,
+			ResourceLocator,
 			TextEdit,
 		},
 		props: [
@@ -330,6 +350,7 @@ export default mixins(
 			'activeDrop',
 			'droppable',
 			'forceShowExpression',
+			'isValueExpression',
 		],
 		data () {
 			return {
@@ -455,7 +476,7 @@ export default mixins(
 
 				let returnValue;
 				if (this.isValueExpression === false) {
-					returnValue = this.value;
+					returnValue = this.isResourceLocatorParameter ? this.value.value : this.value;
 				} else {
 					returnValue = this.expressionValueComputed;
 				}
@@ -514,12 +535,12 @@ export default mixins(
 				let computedValue: NodeParameterValue;
 
 				try {
-					computedValue = this.resolveExpression(this.value) as NodeParameterValue;
+					computedValue = this.resolveExpression(this.value.value || this.value) as NodeParameterValue;
 				} catch (error) {
 					computedValue = `[${this.$locale.baseText('parameterInput.error')}}: ${error.message}]`;
 				}
 
-				// Try to convert it into the corret type
+				// Try to convert it into the correct type
 				if (this.parameter.type === 'number') {
 					computedValue = parseInt(computedValue as string, 10);
 					if (isNaN(computedValue)) {
@@ -614,15 +635,6 @@ export default mixins(
 			isEditor (): boolean {
 				return ['code', 'json'].includes(this.editorType);
 			},
-			isValueExpression () {
-				if (this.parameter.noDataExpression === true) {
-					return false;
-				}
-				if (typeof this.value === 'string' && this.value.charAt(0) === '=') {
-					return true;
-				}
-				return false;
-			},
 			editorType (): string {
 				return this.getArgument('editor') as string;
 			},
@@ -687,6 +699,9 @@ export default mixins(
 			workflow (): Workflow {
 				return this.getWorkflow();
 			},
+			isResourceLocatorParameter (): boolean {
+				return this.parameter.type === 'resourceLocator';
+			},
 		},
 		methods: {
 			credentialSelected (updateInformation: INodeUpdatePropertiesInformation) {
@@ -804,7 +819,8 @@ export default mixins(
 				return this.parameter.typeOptions[argumentName];
 			},
 			expressionUpdated (value: string) {
-				this.valueChanged(value);
+				const val = this.isResourceLocatorParameter ? { value, mode: this.value.mode } : value;
+				this.valueChanged(val);
 			},
 			openExpressionEdit() {
 				if (this.areExpressionsDisabled) {
@@ -820,6 +836,9 @@ export default mixins(
 			onBlur () {
 				this.$emit('blur');
 			},
+			onDrop(data: string) {
+				this.$emit('drop', data);
+			},
 			setFocus () {
 				if (this.isValueExpression) {
 					this.expressionEditDialogVisible = true;
@@ -845,7 +864,7 @@ export default mixins(
 				// Set focus on field
 				setTimeout(() => {
 					// @ts-ignore
-					if (this.$refs.inputField) {
+					if (this.$refs.inputField && this.$refs.inputField.$el) {
 						// @ts-ignore
 						this.$refs.inputField.focus();
 					}
@@ -872,7 +891,7 @@ export default mixins(
 
 				this.$emit('textInput', parameterData);
 			},
-			valueChanged (value: string[] | string | number | boolean | Date | null) {
+			valueChanged (value: string[] | string | number | boolean | Date | {} | null) {
 				if (this.parameter.name === 'nodeCredentialType') {
 					this.activeCredentialType = value as string;
 				}
@@ -917,9 +936,10 @@ export default mixins(
 					this.expressionEditDialogVisible = true;
 				} else if (command === 'addExpression') {
 					if (this.parameter.type === 'number' || this.parameter.type === 'boolean') {
-						this.valueChanged(`={{${this.value}}}`);
-					}
-					else {
+						this.valueChanged({ value: `={{${this.value}}}`, mode: this.value.mode });
+					} else if (this.isResourceLocatorParameter) {
+						this.valueChanged({ value: `=${this.value.value}`, mode: this.value.mode });
+					} else {
 						this.valueChanged(`=${this.value}`);
 					}
 
@@ -935,7 +955,11 @@ export default mixins(
 							.filter((value) => (this.parameterOptions || []).find((option) => option.value === value));
 					}
 
-					this.valueChanged(typeof value !== 'undefined' ? value : null);
+					if (this.isResourceLocatorParameter) {
+						this.valueChanged({ value, mode: this.value.mode });
+					} else {
+						this.valueChanged(typeof value !== 'undefined' ? value : null);
+					}
 				} else if (command === 'refreshOptions') {
 					this.loadRemoteParameterOptions();
 				}