feat: add resource locator parameter (#3932)

* ✨ Added resource locator interfaces to `n8n-workflow` package

* ✅ Updating Trello node to use resource locator property type

* ✨ Added resource locator prop to Delete Board` Trello operation

* ✔️ Fiixing linting errors in Trello node

* ✨ Added list mode to Trello test node

* ⚡ Updating resource locator modes interface

* ⚡ Updating Trello test node validation messages and placeholders

* N8N-4175 resource locator component (#3812)

* ✨ Implemented initial version of resource locator component

* ✨ Implemented front-end validation for resource locator component. Improved responsiveness. Minor refactoring.

* ⚡ Setting resource locator default state to list. Updating hover states and expand icon.

* 🔨 Moving resource locator component to `ParameterInput` from `ParameterInputFull

* 🔨 Moving `ResourceLocator` to a separate Vue component

* 🔨 Implementing expression and drag'n'drop support in ResourceLocator` component

* 🔨 Cleaning up `ResourceLocator` component code

* ✨ Implemented resource locator selected mode persistance

* 💄 Minor refactoring and fixes in `ResourceLocator`

* 🔨 Updating `ResourceLocator` front-end validation logic

* ⚡ Saving resource locator mode in node parameters

* 💄 Updating the `ResourceLocator` component based on the design review

* 🐛 Fixing resource locator mode parameters handling when loading node parameter values on front-end

* 💄 Removing leftover unused CSS

* ⚡ Updating interfaces to support resource locator value types

* ⚡ Updating `ResourceLocator` component to work with object parameter values

* 🔨 Cleaning up `ResourceLocator` and related components code

* ⚡ Preventing `DraggableTarget` to be sticky if disabled

* 🐛 Fixing a bug with resource locator value parameter

* 👌 Adding new type alias for all possible node parameter value types

* 👌 Updating `ResourceLocator` and related components based on PR review feedback

* ⚡ Adding disabled mode to `ResourceLocator` component, fixing expression handling, minor refactoring.

* 💄 Updating disabled state styling in `ResourceLocator` component

* ⚡ Setting correct default value for test node and removing unnecessary logic

* 💄 Added regex URL validation to Trello test node

* ✨ Updating Trello test node with another (list mode only) test case

* ✔️ Fixing linting error in Trello node

* 🔨 Removing hardcoded custom modes and modes order

* Add value extractor to routing node (#3777)

* ✨ add value extractor to routing node

* ✨ add value extractor to property modes

* 🔊 improve error logging for value extractor

* 🔥 remove old extractValue methods from RoutingNode

* ⚡ extractValue inside getNodeParameter

* 🔥 remove extract value test from RoutingNode

* ✨ make value extraction optional

* 🥅 move extract value so proper error messages are sent

* 🚨 readd accidentally removed eslint-disable

* ✨ add resource locator support extractValue

* 🚨 remove unused import

* 🐛 fix getting value of resource locator

* 💄 Updating resource locator component styling and handling reset value action

* ✨ create v2 of Trello node for resource locator

* 💄 Updating ResourceLocator droppable & activeDrop classes and removing input padding-right

* ⚡ Updating Trello test node with single-mode test case

* ⚡ Updating field names in Trello node to avoid name clash

* 💄 Updating test Trello node mode order and board:update parameter name

* 💄 Updating test node parameter names and display options

* List mode search endpoint (#3936)

* 🚧 super basic version of the search endpoint

This version is built using a hacked up version of the Google Drive
node. I need to properly create a v2 for it but it's does work.

* 🚧 fixed up type errors and return urls

* ✨ add v3 of Google Drive node with RLC

* ✨ add RLC to Google Drive Shared Drive operations

* ♻️ address some small changes requested in review

* 🐛 move list search out of /nodes/ and add check for required param

* ✨ google drive folder search

* ✨ google drive search sort by name

* ✨ add searchable flag for RLC

* ✏️ fix google drive wording for v3

* Trello and Airtable search backend (#3974)

* ✨ add search to Trello boards

* ✨ add RLC to Trello cards

* ♻️ use new versioning system for Trello v2

* 🐛 move list search out of /nodes/ and add check for required param

* ✨ re-add trello search methods

* 🥅 throw error if RLC search isn't sent a method name

This will likely be removed when the declarative style of search has
been added.

* ✨ add requires filter field to RLC search

* ✨ add searchable flag to Trello searches

* ✨ add RLC for cardId and boardId on all operations

* ✨ add ID and URL RLC to Airtable

* N8 n 4179 resource locator list mode (#3933)

* ✨ Implemented initial version of list mode dropdown

* ✨ Handling mode switching and expression support in list mode

* 🔨 Removing `sortedModes` references

* ⚡ Fixing list mode UI after latest mege

* 💄 Updating padding-right for input fields with suffix slots

* ✨ Minor fixes to validation, mode switching logic and styling

* update error

* 2 or more regex

* update regex to be more strict

* remove expr colors

* update hint

* 🚧 super basic version of the search endpoint

This version is built using a hacked up version of the Google Drive
node. I need to properly create a v2 for it but it's does work.

* 🚧 fixed up type errors and return urls

* begin list impl

* ✨ add v3 of Google Drive node with RLC

* fix ts issue

* introduce dropdown

* add more behavior

* update design

* show search

* add filtering

* push up selected

* add keyboard nav

* add loading

* add caching

* remove console

* fix build issues

* add debounce

* fix click

* keep event on focus

* fix input size bug

* add resource locator type

* update type

* update interface

* update resource locator types

* ✨ add search to Trello boards

* ✨ add RLC to Google Drive Shared Drive operations

* update

* update name

* add package

* use stringify pckg

* handle long vals

* fix bug in url id modes

* remove console log

* add lazy loading

* add lazy loading on filtering

* clean up

* make search clearable

* add error state

* ✨ add RLC to Trello cards

* ♻️ address some small changes requested in review

* ♻️ use new versioning system for Trello v2

* refactor a bit

* fix how loading happens

* clear after blur

* update api

* comment out test code

* update api

* relaod in case of error

* update endpoint

* 🐛 move list search out of /nodes/ and add check for required param

* 🐛 move list search out of /nodes/ and add check for required param

* update req handling

* update endpoint

* ✨ re-add trello search methods

* 🥅 throw error if RLC search isn't sent a method name

This will likely be removed when the declarative style of search has
been added.

* get api to work

* update scroll handling

* ✨ google drive folder search

* ✨ add requires filter field to RLC search

* ✨ google drive search sort by name

* remove console

* ✨ add searchable flag for RLC

* ✨ add searchable flag to Trello searches

* update searchable

* ✨ add RLC for cardId and boardId on all operations

* ✨ add ID and URL RLC to Airtable

* fix up search

* remove extra padding

* add link button

* update popper pos

* format

* fix formating

* update mode change

* add name urls

* update regex and errors

* upate error

* update errors

* update airtable regex

* update trello regex rules

* udpate param name

* update

* update param

* update param

* update drive node

* update params

* add keyboard nav

* fix bug

* update airtable default mode

* fix default value issue

* hide long selected value

* update duplicate reqs

* update node

* clean up impl

* dedupe resources

* fix up nv

* resort params

* update icon

* set placeholders

* default to id mode

* add telemetry

* add refresh opt

* clean up tmp val

* revert test change

* make placeholder optional

* update validation

* remove description as param hint

* support more general values

* fix links on long names

* update resource item styles

* update pos

* update icon color

* update link alt

* check if required

* move validation to workflow

* update naming

* only show warning at param level

* show right border on focus

* fix hover on all item

* fix long  names bug

* fix expr bug

* add expr

* update legacy mode

* fix up impl

* clean up node types

* clean up types

* remove unnessary type

* clean up types

* clean up types

* clean up types

* clea n up localizaiton

* remove unused key

* clean up helpers

* clean up paraminput

* clean up paraminputfull

* refactor into one loop

* update component

* update class names

* update prop types

* update name cases

* update casing

* clean up classes

* clean up resource locator

* update drop handling

* update mode

* add url for link mode

* clear value by default

* add placeholder

* remove legacy hint

* handle expr in legacy

* fix typos

* revert padding change

* fix up spacing

* update to link component

* support urls for id

* fix replacement

* build

Co-authored-by: Milorad Filipovic <milorad@n8n.io>
Co-authored-by: Valya Bullions <valya@n8n.io>

* refactor: Resource locator review changes (#4109)

* ✨ Implemented initial version of list mode dropdown

* ✨ Handling mode switching and expression support in list mode

* 🔨 Removing `sortedModes` references

* ⚡ Fixing list mode UI after latest mege

* 💄 Updating padding-right for input fields with suffix slots

* ✨ Minor fixes to validation, mode switching logic and styling

* update error

* 2 or more regex

* update regex to be more strict

* remove expr colors

* update hint

* 🚧 super basic version of the search endpoint

This version is built using a hacked up version of the Google Drive
node. I need to properly create a v2 for it but it's does work.

* 🚧 fixed up type errors and return urls

* begin list impl

* ✨ add v3 of Google Drive node with RLC

* fix ts issue

* introduce dropdown

* add more behavior

* update design

* show search

* add filtering

* push up selected

* add keyboard nav

* add loading

* add caching

* remove console

* fix build issues

* add debounce

* fix click

* keep event on focus

* fix input size bug

* add resource locator type

* update type

* update interface

* update resource locator types

* ✨ add search to Trello boards

* ✨ add RLC to Google Drive Shared Drive operations

* update

* update name

* add package

* use stringify pckg

* handle long vals

* fix bug in url id modes

* remove console log

* add lazy loading

* add lazy loading on filtering

* clean up

* make search clearable

* add error state

* ✨ add RLC to Trello cards

* ♻️ address some small changes requested in review

* ♻️ use new versioning system for Trello v2

* refactor a bit

* fix how loading happens

* clear after blur

* update api

* comment out test code

* update api

* relaod in case of error

* update endpoint

* 🐛 move list search out of /nodes/ and add check for required param

* 🐛 move list search out of /nodes/ and add check for required param

* update req handling

* update endpoint

* ✨ re-add trello search methods

* 🥅 throw error if RLC search isn't sent a method name

This will likely be removed when the declarative style of search has
been added.

* get api to work

* update scroll handling

* ✨ google drive folder search

* ✨ add requires filter field to RLC search

* ✨ google drive search sort by name

* remove console

* ✨ add searchable flag for RLC

* ✨ add searchable flag to Trello searches

* update searchable

* ✨ add RLC for cardId and boardId on all operations

* ✨ add ID and URL RLC to Airtable

* fix up search

* remove extra padding

* add link button

* update popper pos

* format

* fix formating

* update mode change

* add name urls

* update regex and errors

* upate error

* update errors

* update airtable regex

* update trello regex rules

* udpate param name

* update

* update param

* update param

* update drive node

* update params

* add keyboard nav

* fix bug

* update airtable default mode

* fix default value issue

* hide long selected value

* update duplicate reqs

* update node

* clean up impl

* dedupe resources

* fix up nv

* resort params

* update icon

* set placeholders

* default to id mode

* add telemetry

* add refresh opt

* clean up tmp val

* revert test change

* make placeholder optional

* update validation

* remove description as param hint

* support more general values

* fix links on long names

* update resource item styles

* update pos

* update icon color

* update link alt

* check if required

* move validation to workflow

* update naming

* only show warning at param level

* show right border on focus

* fix hover on all item

* fix long  names bug

* ♻️ refactor extractValue to allow multiple props with same name

* ♻️ use correct import for displayParameterPath

* fix expr bug

* add expr

* update legacy mode

* fix up impl

* clean up node types

* clean up types

* ♻️ remove new version of google drive node

* ♻️ removed versioned Trello node for RLC

* remove unnessary type

* ♻️ remove versioned Airtable not for RLC

* clean up types

* clean up types

* clean up types

* clea n up localizaiton

* remove unused key

* clean up helpers

* clean up paraminput

* clean up paraminputfull

* refactor into one loop

* update component

* update class names

* update prop types

* update name cases

* update casing

* clean up classes

* 💬 updated RLC URL regex error wording

* clean up resource locator

* update drop handling

* update mode

* 💬 reword value extractor errors

* 🚨 remove unneeded eslint ignores for RLC modes

* 💬 update Trello 400 error message

* 🚨 re-add removed types in editor-ui

Also ts-ignore something that was clean up in another commit. I've added
a comment to fix after someone else can look at it.

* 💬 remove hints from Google Drive RLCs

* 🥅 rethrow correct errors in Trello node

* ✨ add url for id mode on Google Drive

* 🔥 remove unused Google Drive file

* 🔊 change console.error to use logger instead

* 🔀 fix bad merges

* ♻️ small changes from review

* ♻️ remove ts-ignore

Co-authored-by: Milorad Filipovic <milorad@n8n.io>
Co-authored-by: Mutasem <mutdmour@gmail.com>

* fix build

* update tests

* fix bug with credential card

* update popover component

* fix expressions url

* fix type issue

* format

* update alt

* fix lint issues

* fix eslint issues

Co-authored-by: Milorad Filipovic <milorad@n8n.io>
Co-authored-by: Milorad FIlipović <miloradfilipovic19@gmail.com>
Co-authored-by: Valya <68596159+valya@users.noreply.github.com>
Co-authored-by: Valya Bullions <valya@n8n.io>

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 : '') : value"
 			:parameter="parameter"
 			:path="path"
 			:eventSource="eventSource || 'ndv'"
@@ -14,8 +14,26 @@
 			:style="parameterInputWrapperStyle"
 			@click="openExpressionEdit"
 		>
+			<resource-locator
+				v-if="isResourceLocatorParameter"
+				ref="resourceLocator"
+				:parameter="parameter"
+				:value="value"
+				:displayTitle="displayTitle"
+				:expressionDisplayValue="expressionDisplayValue"
+				:isValueExpression="isValueExpression"
+				:isReadOnly="isReadOnly"
+				:parameterIssues="getIssues"
+				:droppable="droppable"
+				:node="node"
+				:path="path"
+				@input="valueChanged"
+				@focus="setFocus"
+				@blur="onBlur"
+				@drop="onResourceLocatorDrop"
+			/>
 			<n8n-input
-				v-if="isValueExpression || droppable || forceShowExpression"
+				v-else-if="isValueExpression || droppable || forceShowExpression"
 				:size="inputSize"
 				:type="getStringInputType"
 				:rows="getArgument('rows')"
@@ -23,7 +41,6 @@
 				:title="displayTitle"
 				@keydown.stop
 			/>
-
 			<div
 				v-else-if="
 					['json', 'string'].includes(parameter.type) ||
@@ -80,7 +97,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()"
@@ -260,7 +277,7 @@
 			/>
 		</div>
 
-		<parameter-issues v-if="parameter.type !== 'credentialsSelect'" :issues="getIssues" />
+		<parameter-issues v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter" :issues="getIssues" />
 	</div>
 </template>
 
@@ -274,7 +291,6 @@ import {
 import {
 	NodeHelpers,
 	NodeParameterValue,
-	IHttpRequestOptions,
 	ILoadOptions,
 	INodeParameters,
 	INodePropertyOptions,
@@ -288,6 +304,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';
@@ -299,7 +316,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,
@@ -308,7 +326,7 @@ export default mixins(
 	workflowHelpers,
 )
 	.extend({
-		name: 'ParameterInput',
+		name: 'parameter-input',
 		components: {
 			CodeEdit,
 			ExpressionEdit,
@@ -318,6 +336,7 @@ export default mixins(
 			ScopesNotice,
 			ParameterOptions,
 			ParameterIssues,
+			ResourceLocator,
 			TextEdit,
 		},
 		props: [
@@ -395,6 +414,9 @@ export default mixins(
 		},
 		computed: {
 			...mapGetters('credentials', ['allCredentialTypes']),
+			isValueExpression(): boolean {
+				return isValueExpression(this.parameter, this.value);
+			},
 			areExpressionsDisabled(): boolean {
 				return this.$store.getters['ui/areExpressionsDisabled'];
 			},
@@ -459,7 +481,7 @@ export default mixins(
 
 				let returnValue;
 				if (this.isValueExpression === false) {
-					returnValue = this.value;
+					returnValue = this.isResourceLocatorParameter ? (this.value ? this.value.value: '') : this.value;
 				} else {
 					returnValue = this.expressionValueComputed;
 				}
@@ -518,7 +540,7 @@ 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}]`;
 				}
@@ -610,15 +632,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;
 			},
@@ -659,7 +672,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) {
@@ -683,6 +696,9 @@ export default mixins(
 			workflow (): Workflow {
 				return this.getCurrentWorkflow();
 			},
+			isResourceLocatorParameter (): boolean {
+				return this.parameter.type === 'resourceLocator';
+			},
 		},
 		methods: {
 			isRemoteParameterOption(option: INodePropertyOptions) {
@@ -730,9 +746,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;
@@ -803,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) {
@@ -819,6 +836,9 @@ export default mixins(
 			onBlur () {
 				this.$emit('blur');
 			},
+			onResourceLocatorDrop(data: string) {
+				this.$emit('drop', data);
+			},
 			setFocus () {
 				if (this.isValueExpression) {
 					this.expressionEditDialogVisible = true;
@@ -844,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();
 					}
@@ -871,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;
 				}
@@ -916,9 +936,14 @@ 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) {
+						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}`);
 					}
 
@@ -934,8 +959,18 @@ 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') {
+					if (this.isResourceLocatorParameter) {
+						const resourceLocator = this.$refs.resourceLocator;
+						if (resourceLocator) {
+							(resourceLocator as Vue).$emit('refreshList');
+						}
+					}
 					this.loadRemoteParameterOptions();
 				}