N8 n 4179 resource locator list mode

packages/design-system/src/components/N8nButton/Button.vue

@@ -372,6 +372,10 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
 		--button-hover-color: var(--color-success);
 	}
 
+	&.tertiary {
+		--button-hover-color: var(--color-primary);
+	}
+
 	&.warning {
 		--button-color: var(--color-warning);
 		--button-active-color: var(--color-warning);

packages/design-system/src/components/N8nInput/Input.vue

@@ -52,6 +52,9 @@ export default Vue.extend({
 		disabled: {
 			type: Boolean,
 		},
+		readonly: {
+			type: Boolean,
+		},
 		clearable: {
 			type: Boolean,
 		},

packages/design-system/src/components/N8nLink/Link.vue

@@ -72,6 +72,10 @@ export default Vue.extend({
 .text {
 	color: var(--color-text-base);
 
+	&:hover {
+		color: var(--color-primary);
+	}
+
 	&:active {
 		color: saturation(--color-primary-h, --color-primary-s, --color-primary-l, -(30%));
 	}

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

@@ -133,7 +133,7 @@
 	@include mixins.e(suffix) {
 		position: absolute;
 		height: 100%;
-		right: 10px;
+		right: var(--spacing-2xs);
 		top: 0;
 		text-align: center;
 		color: var(--color-text-light);

packages/editor-ui/package.json

@@ -100,6 +100,7 @@
     "vue-template-compiler": "~2.6.11",
     "vue-typed-mixins": "^0.2.0",
     "vue2-touch-events": "^3.2.1",
+    "fast-json-stable-stringify": "^2.1.0",
     "vuex": "^3.1.1"
   }
 }

packages/editor-ui/src/Interface.ts

@@ -23,6 +23,7 @@ import {
 	IWorkflowSettings as IWorkflowSettingsWorkflow,
 	WorkflowExecuteMode,
 	PublicInstalledPackage,
+	INodeListSearchItems,
 } from 'n8n-workflow';
 import { FAKE_DOOR_FEATURES } from './constants';
 
@@ -1072,3 +1073,18 @@ export interface ITab {
 	align?: 'right';
 	tooltip?: string;
 }
+
+export interface IResourceLocatorReqParams {
+	nodeTypeAndVersion: INodeTypeNameVersion;
+	path: string;
+	methodName?: string;
+	searchList?: ILoadOptions;
+	currentNodeParameters: INodeParameters;
+	credentials?: INodeCredentials;
+	filter?: string;
+	paginationToken?: unknown;
+}
+
+export interface IResourceLocatorResultExpanded extends INodeListSearchItems {
+	linkAlt?: string;
+}

packages/editor-ui/src/api/nodeTypes.ts

@@ -1,11 +1,14 @@
 import { makeRestApiRequest } from './helpers';
 import type {
 	INodeTranslationHeaders,
+	IResourceLocatorReqParams,
 	IRestApiContext,
 } from '@/Interface';
 import type {
+	IDataObject,
 	ILoadOptions,
 	INodeCredentials,
+	INodeListSearchResult,
 	INodeParameters,
 	INodePropertyOptions,
 	INodeTypeDescription,
@@ -45,3 +48,11 @@ export async function getNodeParameterOptions(
 ): Promise<INodePropertyOptions[]> {
 	return makeRestApiRequest(context, 'GET', '/node-parameter-options', sendData);
 }
+
+export async function getResourceLocatorResults(
+	context: IRestApiContext,
+	sendData: IResourceLocatorReqParams,
+): Promise<INodeListSearchResult> {
+	return makeRestApiRequest(context, 'GET', '/nodes-list-search', sendData as unknown as IDataObject);
+}
+

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

@@ -23,8 +23,9 @@ import {
 
 import mixins from "vue-typed-mixins";
 import { genericHelpers } from "@/components/mixins/genericHelpers";
+import { debounceHelper } from "./mixins/debounce";
 
-export default mixins(genericHelpers).extend({
+export default mixins(genericHelpers, debounceHelper).extend({
 	name: "BreakpointsObserver",
 	props: [
 		"valueXS",
@@ -98,4 +99,4 @@ export default mixins(genericHelpers).extend({
 		},
 	},
 });
-</script>
+</script>

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

@@ -110,7 +110,7 @@ export default mixins(
 		},
 
 		editCredential (credential: ICredentialsResponse) {
-			this.$store.dispatch('ui/openExisitngCredential', { id: credential.id});
+			this.$store.dispatch('ui/openExistingCredential', { id: credential.id});
 			this.$telemetry.track('User opened Credential modal', { credential_type: credential.type, source: 'primary_menu', new_credential: false, workflow_id: this.$store.getters.workflowId });
 		},
 

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

@@ -53,10 +53,12 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
 
 import mixins from 'vue-typed-mixins';
 import { hasExpressionMapping } from './helpers';
+import { debounceHelper } from './mixins/debounce';
 
 export default mixins(
 	externalHooks,
 	genericHelpers,
+	debounceHelper,
 ).extend({
 	name: 'ExpressionEdit',
 	props: [

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

@@ -304,7 +304,7 @@ export default mixins(
 
 		editCredential(credentialType: string): void {
 			const { id } = this.node.credentials[credentialType];
-			this.$store.dispatch('ui/openExisitngCredential', { id });
+			this.$store.dispatch('ui/openExistingCredential', { id });
 
 			this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: false, workflow_id: this.$store.getters.workflowId });
 

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

@@ -2,7 +2,7 @@
 	<div @keydown.stop :class="parameterInputClasses">
 		<expression-edit
 			:dialogVisible="expressionEditDialogVisible"
-			:value="isResourceLocatorParameter ? value.value || '' : value"
+			:value="isResourceLocatorParameter ? (value ? value.value : '') : value"
 			:parameter="parameter"
 			:path="path"
 			:eventSource="eventSource || 'ndv'"
@@ -18,22 +18,20 @@
 				v-if="isResourceLocatorParameter"
 				ref="resourceLocator"
 				:parameter="parameter"
-				:value="typeof value === 'string' ? value : value.value"
-				:mode="value.mode || ''"
-				:displayValue="displayValue"
+				:value="value"
 				:displayTitle="displayTitle"
-				:parameterInputClasses="parameterInputClasses"
 				:expressionDisplayValue="expressionDisplayValue"
 				:isValueExpression="isValueExpression"
 				:isReadOnly="isReadOnly"
 				:parameterIssues="getIssues"
 				:droppable="droppable"
-				@valueChanged="valueChanged"
-				@modeChanged="valueChanged"
+				:node="node"
+				:path="path"
+				@input="valueChanged"
 				@focus="setFocus"
 				@blur="onBlur"
-				@drop="onDrop"
-			></resource-locator>
+				@drop="onResourceLocatorDrop"
+			/>
 			<n8n-input
 				v-else-if="isValueExpression || droppable || forceShowExpression"
 				:size="inputSize"
@@ -98,7 +96,7 @@
 					<div slot="suffix" class="expand-input-icon-container">
 						<font-awesome-icon
 							v-if="!isReadOnly"
-							icon="external-link-alt"
+							icon="expand-alt"
 							class="edit-window-button clickable"
 							:title="$locale.baseText('parameterInput.openEditWindow')"
 							@click="displayEditDialog()"
@@ -278,7 +276,7 @@
 			/>
 		</div>
 
-		<parameter-issues v-if="parameter.type !== 'credentialsSelect'" :issues="getIssues" />
+		<parameter-issues v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter" :issues="getIssues" />
 	</div>
 </template>
 
@@ -317,7 +315,8 @@ import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import mixins from 'vue-typed-mixins';
 import { CUSTOM_API_CALL_KEY } from '@/constants';
 import { mapGetters } from 'vuex';
-import { hasExpressionMapping } from './helpers';
+import { hasExpressionMapping, isValueExpression } from './helpers';
+import { isResourceLocatorValue } from '@/typeGuards';
 
 export default mixins(
 	externalHooks,
@@ -326,7 +325,7 @@ export default mixins(
 	workflowHelpers,
 )
 	.extend({
-		name: 'ParameterInput',
+		name: 'parameter-input',
 		components: {
 			CodeEdit,
 			ExpressionEdit,
@@ -353,7 +352,6 @@ export default mixins(
 			'activeDrop',
 			'droppable',
 			'forceShowExpression',
-			'isValueExpression',
 		],
 		data () {
 			return {
@@ -415,6 +413,9 @@ export default mixins(
 		},
 		computed: {
 			...mapGetters('credentials', ['allCredentialTypes']),
+			isValueExpression(): boolean {
+				return isValueExpression(this.parameter, this.value);
+			},
 			areExpressionsDisabled(): boolean {
 				return this.$store.getters['ui/areExpressionsDisabled'];
 			},
@@ -479,7 +480,7 @@ export default mixins(
 
 				let returnValue;
 				if (this.isValueExpression === false) {
-					returnValue = this.isResourceLocatorParameter ? this.value.value : this.value;
+					returnValue = this.isResourceLocatorParameter ? (this.value ? this.value.value: '') : this.value;
 				} else {
 					returnValue = this.expressionValueComputed;
 				}
@@ -670,7 +671,7 @@ export default mixins(
 				const styles = {
 					width: '100%',
 				};
-				if (this.parameter.type === 'credentialsSelect') {
+				if (this.parameter.type === 'credentialsSelect' || this.isResourceLocatorParameter) {
 					return styles;
 				}
 				if (this.getIssues.length) {
@@ -744,9 +745,9 @@ export default mixins(
 				this.remoteParameterOptions.length = 0;
 
 				// Get the resolved parameter values of the current node
-				const currentNodeParameters = this.$store.getters.activeNode.parameters;
 
 				try {
+					const currentNodeParameters = (this.$store.getters.activeNode as INodeUi).parameters;
 					const resolvedNodeParameters = this.resolveParameter(currentNodeParameters) as INodeParameters;
 					const loadOptionsMethod = this.getArgument('loadOptionsMethod') as string | undefined;
 					const loadOptions = this.getArgument('loadOptions') as ILoadOptions | undefined;
@@ -834,7 +835,7 @@ export default mixins(
 			onBlur () {
 				this.$emit('blur');
 			},
-			onDrop(data: string) {
+			onResourceLocatorDrop(data: string) {
 				this.$emit('drop', data);
 			},
 			setFocus () {
@@ -936,7 +937,11 @@ export default mixins(
 					if (this.parameter.type === 'number' || this.parameter.type === 'boolean') {
 						this.valueChanged({ value: `={{${this.value}}}`, mode: this.value.mode });
 					} else if (this.isResourceLocatorParameter) {
-						this.valueChanged({ value: `=${this.value.value}`, mode: this.value.mode });
+						if (isResourceLocatorValue(this.value)) {
+							this.valueChanged({ value: `=${this.value.value}`, mode: this.value.mode });
+						} else {
+							this.valueChanged({ value: `=${this.value}`, mode: '' });
+						}
 					} else {
 						this.valueChanged(`=${this.value}`);
 					}
@@ -959,6 +964,12 @@ export default mixins(
 						this.valueChanged(typeof value !== 'undefined' ? value : null);
 					}
 				} else if (command === 'refreshOptions') {
+					if (this.isResourceLocatorParameter) {
+						const resourceLocator = this.$refs.resourceLocator;
+						if (resourceLocator) {
+							(resourceLocator as Vue).$emit('refreshList');
+						}
+					}
 					this.loadRemoteParameterOptions();
 				}