From fcdeb0f5d89ebbe1ec458f282a32bd682384592a Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 29 Aug 2024 17:01:43 +0200
Subject: [PATCH] refactor(editor): Convert ResourceLocator to composition API
 (no-changelog) (#10526)

---
 .../ResourceLocator/ResourceLocator.vue       | 1512 ++++++++---------
 .../ResourceLocatorDropdown.vue               |  343 ++--
 .../WorkflowSelectorParameterInput.vue        |    6 +-
 3 files changed, 921 insertions(+), 940 deletions(-)

diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 2723c8719..19e7ef34c 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -1,37 +1,41 @@
-<script lang="ts">
+<script setup lang="ts">
 import type { DynamicNodeParameters, IResourceLocatorResultExpanded } from '@/Interface';
 import DraggableTarget from '@/components/DraggableTarget.vue';
 import ExpressionParameterInput from '@/components/ExpressionParameterInput.vue';
 import ParameterIssues from '@/components/ParameterIssues.vue';
-import { useRootStore } from '@/stores/root.store';
+import { useDebounce } from '@/composables/useDebounce';
+import { useI18n } from '@/composables/useI18n';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { ndvEventBus } from '@/event-bus';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useRootStore } from '@/stores/root.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { getAppNameFromNodeName, getMainAuthField, hasOnlyListMode } from '@/utils/nodeTypesUtils';
+import {
+	getAppNameFromNodeName,
+	getMainAuthField,
+	hasOnlyListMode as hasOnlyListModeUtil,
+} from '@/utils/nodeTypesUtils';
 import { isResourceLocatorValue } from '@/utils/typeGuards';
 import stringify from 'fast-json-stable-stringify';
 import type { EventBus } from 'n8n-design-system/utils';
 import { createEventBus } from 'n8n-design-system/utils';
 import type {
 	INode,
-	INodeCredentials,
 	INodeListSearchItems,
 	INodeParameterResourceLocator,
 	INodeParameters,
 	INodeProperties,
 	INodePropertyMode,
+	INodePropertyModeTypeOptions,
 	NodeParameterValue,
 } from 'n8n-workflow';
-import { mapStores } from 'pinia';
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
-import ResourceLocatorDropdown from './ResourceLocatorDropdown.vue';
-import { useDebounce } from '@/composables/useDebounce';
-import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { computed, nextTick, onBeforeUnmount, onMounted, type Ref, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import { ndvEventBus } from '@/event-bus';
-import { OnClickOutside } from '@vueuse/components';
+import ResourceLocatorDropdown from './ResourceLocatorDropdown.vue';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { onClickOutside, type VueInstance } from '@vueuse/core';
 
 interface IResourceLocatorQuery {
 	results: INodeListSearchItems[];
@@ -40,790 +44,766 @@ interface IResourceLocatorQuery {
 	loading: boolean;
 }
 
-export default defineComponent({
-	name: 'ResourceLocator',
-	components: {
-		DraggableTarget,
-		ExpressionParameterInput,
-		ParameterIssues,
-		ResourceLocatorDropdown,
-		OnClickOutside,
+type Props = {
+	modelValue: INodeParameterResourceLocator;
+	parameter: INodeProperties;
+	path: string;
+	loadOptionsMethod?: string;
+	node?: INode;
+	inputSize?: 'mini' | 'small' | 'medium' | 'large' | 'xlarge';
+	parameterIssues?: string[];
+	dependentParametersValues?: string | null;
+	displayTitle?: string;
+	isReadOnly?: boolean;
+	expressionComputedValue: unknown;
+	expressionDisplayValue?: string;
+	forceShowExpression?: boolean;
+	isValueExpression?: boolean;
+	expressionEditDialogVisible?: boolean;
+	eventBus?: EventBus;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	node: undefined,
+	loadOptionsMethod: undefined,
+	inputSize: 'small',
+	parameterIssues: () => [],
+	dependentParametersValues: null,
+	displayTitle: '',
+	isReadOnly: false,
+	expressionDisplayValue: '',
+	forceShowExpression: false,
+	isValueExpression: false,
+	expressionEditDialogVisible: false,
+	eventBus: () => createEventBus(),
+});
+const emit = defineEmits<{
+	'update:modelValue': [value: INodeParameterResourceLocator];
+	drop: [value: string];
+	blur: [];
+	modalOpenerClick: [];
+}>();
+
+const router = useRouter();
+const workflowHelpers = useWorkflowHelpers({ router });
+const { callDebounced } = useDebounce();
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const resourceDropdownVisible = ref(false);
+const resourceDropdownHiding = ref(false);
+const searchFilter = ref('');
+const cachedResponses = ref<Record<string, IResourceLocatorQuery>>({});
+const hasCompletedASearch = ref(false);
+const width = ref(0);
+const inputRef = ref<HTMLInputElement>();
+const containerRef = ref<HTMLDivElement>();
+const dropdownRef = ref<InstanceType<typeof ResourceLocatorDropdown>>();
+
+const nodeTypesStore = useNodeTypesStore();
+const ndvStore = useNDVStore();
+const rootStore = useRootStore();
+const uiStore = useUIStore();
+const workflowsStore = useWorkflowsStore();
+
+const appName = computed(() => {
+	if (!props.node) {
+		return '';
+	}
+
+	const nodeType = nodeTypesStore.getNodeType(props.node.type);
+	return getAppNameFromNodeName(nodeType?.displayName ?? '');
+});
+
+const selectedMode = computed(() => {
+	if (typeof props.modelValue !== 'object') {
+		// legacy mode
+		return '';
+	}
+
+	if (!props.modelValue) {
+		return props.parameter.modes ? props.parameter.modes[0].name : '';
+	}
+
+	return props.modelValue.mode;
+});
+
+const isListMode = computed(() => selectedMode.value === 'list');
+
+const hasCredential = computed(() => {
+	const node = ndvStore.activeNode;
+	if (!node) {
+		return false;
+	}
+	return !!(node?.credentials && Object.keys(node.credentials).length === 1);
+});
+
+const credentialsNotSet = computed(() => {
+	if (!props.node) return false;
+	const nodeType = nodeTypesStore.getNodeType(props.node.type);
+	if (nodeType) {
+		const usesCredentials = nodeType.credentials !== undefined && nodeType.credentials.length > 0;
+		if (usesCredentials && !props.node.credentials) {
+			return true;
+		}
+	}
+	return false;
+});
+
+const inputPlaceholder = computed(() => {
+	if (currentMode.value.placeholder) {
+		return currentMode.value.placeholder;
+	}
+	const defaults: { [key: string]: string } = {
+		list: i18n.baseText('resourceLocator.mode.list.placeholder'),
+		id: i18n.baseText('resourceLocator.id.placeholder'),
+		url: i18n.baseText('resourceLocator.url.placeholder'),
+	};
+
+	return defaults[selectedMode.value] ?? '';
+});
+
+const currentMode = computed<INodePropertyMode>(
+	() => findModeByName(selectedMode.value) ?? ({} as INodePropertyMode),
+);
+
+const hasMultipleModes = computed(() => {
+	return props.parameter.modes && props.parameter.modes.length > 1;
+});
+
+const hasOnlyListMode = computed(() => hasOnlyListModeUtil(props.parameter));
+const valueToDisplay = computed<NodeParameterValue>(() => {
+	if (typeof props.modelValue !== 'object') {
+		return props.modelValue;
+	}
+
+	if (isListMode.value) {
+		return props.modelValue?.cachedResultName ?? props.modelValue?.value ?? '';
+	}
+
+	return props.modelValue?.value ?? '';
+});
+
+const urlValue = computed(() => {
+	if (isListMode.value && typeof props.modelValue === 'object') {
+		return props.modelValue?.cachedResultUrl ?? null;
+	}
+
+	if (selectedMode.value === 'url') {
+		if (
+			props.isValueExpression &&
+			typeof props.expressionComputedValue === 'string' &&
+			props.expressionComputedValue.startsWith('http')
+		) {
+			return props.expressionComputedValue;
+		}
+
+		if (typeof valueToDisplay.value === 'string' && valueToDisplay.value.startsWith('http')) {
+			return valueToDisplay.value;
+		}
+	}
+
+	if (currentMode.value.url) {
+		const value = props.isValueExpression ? props.expressionComputedValue : valueToDisplay.value;
+		if (typeof value === 'string') {
+			const expression = currentMode.value.url.replace(/\{\{\$value\}\}/g, value);
+			const resolved = workflowHelpers.resolveExpression(expression);
+
+			return typeof resolved === 'string' ? resolved : null;
+		}
+	}
+
+	return null;
+});
+
+const currentRequestParams = computed(() => {
+	return {
+		parameters: props.node?.parameters ?? {},
+		credentials: props.node?.credentials ?? {},
+		filter: searchFilter.value,
+	};
+});
+
+const currentRequestKey = computed(() => {
+	const cacheKeys = { ...currentRequestParams.value };
+	cacheKeys.parameters = Object.keys(props.node?.parameters ?? {}).reduce(
+		(accu: INodeParameters, param) => {
+			if (param !== props.parameter.name && props.node?.parameters) {
+				accu[param] = props.node.parameters[param];
+			}
+
+			return accu;
+		},
+		{},
+	);
+	return stringify(cacheKeys);
+});
+
+const currentResponse = computed(() => cachedResponses.value[currentRequestKey.value] ?? null);
+
+const currentQueryResults = computed<IResourceLocatorResultExpanded[]>(() => {
+	const results = currentResponse.value?.results ?? [];
+
+	return results.map(
+		(result: INodeListSearchItems): IResourceLocatorResultExpanded => ({
+			...result,
+			...(result.name && result.url ? { linkAlt: getLinkAlt(result.name) } : {}),
+		}),
+	);
+});
+
+const currentQueryHasMore = computed(() => !!currentResponse.value?.nextPageToken);
+
+const currentQueryLoading = computed(
+	() =>
+		(requiresSearchFilter.value && searchFilter.value === '') ||
+		!currentResponse.value ||
+		!!currentResponse.value?.loading,
+);
+
+const currentQueryError = computed(() => {
+	return !!(currentResponse.value && currentResponse.value.error);
+});
+
+const isSearchable = computed(() => !!getPropertyArgument(currentMode.value, 'searchable'));
+
+const requiresSearchFilter = computed(
+	() => !!getPropertyArgument(currentMode.value, 'searchFilterRequired'),
+);
+
+watch(currentQueryError, (curr, prev) => {
+	if (resourceDropdownVisible.value && curr && !prev) {
+		if (inputRef.value) {
+			inputRef.value.focus();
+		}
+	}
+});
+
+watch(
+	() => props.isValueExpression,
+	(newValue) => {
+		if (newValue) {
+			switchFromListMode();
+		}
 	},
-	props: {
-		parameter: {
-			type: Object as PropType<INodeProperties>,
-			required: true,
-		},
-		modelValue: {
-			type: Object as PropType<INodeParameterResourceLocator>,
-		},
-		inputSize: {
-			type: String,
-			default: 'small',
-			validator: (size: string) => {
-				return ['mini', 'small', 'medium', 'large', 'xlarge'].includes(size);
+);
+
+watch(currentMode, (mode) => {
+	if (
+		mode.extractValue?.regex &&
+		isResourceLocatorValue(props.modelValue) &&
+		props.modelValue.__regex !== mode.extractValue.regex
+	) {
+		emit('update:modelValue', { ...props.modelValue, __regex: mode.extractValue.regex as string });
+	}
+});
+
+watch(
+	() => props.dependentParametersValues,
+	(currentValue, oldValue) => {
+		const isUpdated = oldValue !== null && currentValue !== null && oldValue !== currentValue;
+		// Reset value if dependent parameters change
+		if (
+			isUpdated &&
+			props.modelValue &&
+			isResourceLocatorValue(props.modelValue) &&
+			props.modelValue.value !== ''
+		) {
+			emit('update:modelValue', {
+				...props.modelValue,
+				cachedResultName: '',
+				cachedResultUrl: '',
+				value: '',
+			});
+		}
+	},
+);
+
+onMounted(() => {
+	props.eventBus.on('refreshList', refreshList);
+	window.addEventListener('resize', setWidth);
+
+	useNDVStore().$subscribe(() => {
+		// Update the width when main panel dimension change
+		setWidth();
+	});
+
+	setTimeout(() => {
+		setWidth();
+	}, 0);
+});
+
+onBeforeUnmount(() => {
+	props.eventBus.off('refreshList', refreshList);
+	window.removeEventListener('resize', setWidth);
+});
+
+onClickOutside(dropdownRef as Ref<VueInstance>, hideResourceDropdown);
+
+function setWidth() {
+	if (containerRef.value) {
+		width.value = containerRef.value.offsetWidth;
+	}
+}
+
+function getLinkAlt(entity: NodeParameterValue) {
+	if (selectedMode.value === 'list' && entity) {
+		return i18n.baseText('resourceLocator.openSpecificResource', {
+			interpolate: { entity: entity.toString(), appName: appName.value },
+		});
+	}
+	return i18n.baseText('resourceLocator.openResource', {
+		interpolate: { appName: appName.value },
+	});
+}
+
+function refreshList() {
+	cachedResponses.value = {};
+	trackEvent('User refreshed resource locator list');
+}
+
+function onKeyDown(e: KeyboardEvent) {
+	if (resourceDropdownVisible.value && !isSearchable.value) {
+		props.eventBus.emit('keyDown', e);
+	}
+}
+
+function openResource(url: string) {
+	window.open(url, '_blank');
+	trackEvent('User clicked resource locator link');
+}
+
+function getPropertyArgument(
+	parameter: INodePropertyMode,
+	argumentName: keyof INodePropertyModeTypeOptions,
+): string | number | boolean | undefined {
+	return parameter.typeOptions?.[argumentName];
+}
+
+function openCredential(): void {
+	const node = ndvStore.activeNode;
+	if (!node?.credentials) {
+		return;
+	}
+	const credentialKey = Object.keys(node.credentials)[0];
+	if (!credentialKey) {
+		return;
+	}
+	const id = node.credentials[credentialKey].id;
+	if (!id) {
+		return;
+	}
+	uiStore.openExistingCredential(id);
+}
+
+function createNewCredential(): void {
+	if (!props.node) return;
+	const nodeType = nodeTypesStore.getNodeType(props.node.type);
+	if (!nodeType) {
+		return;
+	}
+
+	const defaultCredentialType = nodeType.credentials?.[0].name ?? '';
+	const mainAuthType = getMainAuthField(nodeType);
+	const showAuthOptions =
+		mainAuthType !== null &&
+		Array.isArray(mainAuthType.options) &&
+		mainAuthType.options?.length > 0;
+
+	ndvEventBus.emit('credential.createNew', {
+		type: defaultCredentialType,
+		showAuthOptions,
+	});
+}
+
+function findModeByName(name: string): INodePropertyMode | null {
+	if (props.parameter.modes) {
+		return props.parameter.modes.find((mode: INodePropertyMode) => mode.name === name) ?? null;
+	}
+	return null;
+}
+
+function getModeLabel(mode: INodePropertyMode): string | null {
+	if (mode.name === 'id' || mode.name === 'url' || mode.name === 'list') {
+		return i18n.baseText(`resourceLocator.mode.${mode.name}`);
+	}
+
+	return mode.displayName;
+}
+
+function onInputChange(value: NodeParameterValue): void {
+	const params: INodeParameterResourceLocator = { __rl: true, value, mode: selectedMode.value };
+	if (isListMode.value) {
+		const resource = currentQueryResults.value.find((result) => result.value === value);
+		if (resource?.name) {
+			params.cachedResultName = resource.name;
+		}
+
+		if (resource?.url) {
+			params.cachedResultUrl = resource.url;
+		}
+	}
+	emit('update:modelValue', params);
+}
+
+function onModeSelected(value: string): void {
+	if (typeof props.modelValue !== 'object') {
+		emit('update:modelValue', { __rl: true, value: props.modelValue, mode: value });
+	} else if (value === 'url' && props.modelValue?.cachedResultUrl) {
+		emit('update:modelValue', {
+			__rl: true,
+			mode: value,
+			value: props.modelValue.cachedResultUrl,
+		});
+	} else if (
+		value === 'id' &&
+		selectedMode.value === 'list' &&
+		props.modelValue &&
+		props.modelValue.value
+	) {
+		emit('update:modelValue', { __rl: true, mode: value, value: props.modelValue.value });
+	} else {
+		emit('update:modelValue', { __rl: true, mode: value, value: '' });
+	}
+
+	trackEvent('User changed resource locator mode', { mode: value });
+}
+
+function trackEvent(event: string, params?: { [key: string]: string }): void {
+	telemetry.track(event, {
+		instance_id: rootStore.instanceId,
+		workflow_id: workflowsStore.workflowId,
+		node_type: props.node?.type,
+		resource: props.node?.parameters.resource,
+		operation: props.node?.parameters.operation,
+		field_name: props.parameter.name,
+		...params,
+	});
+}
+
+function onDrop(data: string) {
+	switchFromListMode();
+	emit('drop', data);
+}
+
+function onSearchFilter(filter: string) {
+	searchFilter.value = filter;
+	loadResourcesDebounced();
+}
+
+async function loadInitialResources(): Promise<void> {
+	if (!currentResponse.value || currentResponse.value.error) {
+		searchFilter.value = '';
+		await loadResources();
+	}
+}
+
+function loadResourcesDebounced() {
+	if (currentResponse.value?.error) {
+		// Clear error response immediately when retrying to show loading state
+		delete cachedResponses.value[currentRequestKey.value];
+	}
+
+	void callDebounced(loadResources, {
+		debounceTime: 1000,
+		trailing: true,
+	});
+}
+
+function setResponse(paramsKey: string, response: Partial<IResourceLocatorQuery>) {
+	cachedResponses.value = {
+		...cachedResponses.value,
+		[paramsKey]: { ...cachedResponses.value[paramsKey], ...response },
+	};
+}
+
+async function loadResources() {
+	const params = currentRequestParams.value;
+	const paramsKey = currentRequestKey.value;
+	const cachedResponse = cachedResponses.value[paramsKey];
+
+	if (credentialsNotSet.value) {
+		setResponse(paramsKey, { error: true });
+		return;
+	}
+
+	if (requiresSearchFilter.value && !params.filter) {
+		return;
+	}
+
+	if (!props.node) {
+		return;
+	}
+
+	let paginationToken: string | undefined;
+
+	try {
+		if (cachedResponse) {
+			const nextPageToken = cachedResponse.nextPageToken as string;
+			if (nextPageToken) {
+				paginationToken = nextPageToken;
+				setResponse(paramsKey, { loading: true });
+			} else if (cachedResponse.error) {
+				setResponse(paramsKey, { error: false, loading: true });
+			} else {
+				return; // end of results
+			}
+		} else {
+			setResponse(paramsKey, {
+				loading: true,
+				error: false,
+				results: [],
+				nextPageToken: null,
+			});
+		}
+
+		const resolvedNodeParameters = workflowHelpers.resolveRequiredParameters(
+			props.parameter,
+			params.parameters,
+		) as INodeParameters;
+		const loadOptionsMethod = getPropertyArgument(currentMode.value, 'searchListMethod') as string;
+
+		const requestParams: DynamicNodeParameters.ResourceLocatorResultsRequest = {
+			nodeTypeAndVersion: {
+				name: props.node.type,
+				version: props.node.typeVersion,
 			},
-		},
-		parameterIssues: {
-			type: Array as PropType<string[]>,
-			default: () => [],
-		},
-		dependentParametersValues: {
-			type: [String, null] as PropType<string | null>,
-			default: null,
-		},
-		displayTitle: {
-			type: String,
-			default: '',
-		},
-		expressionComputedValue: {
-			type: {} as PropType<unknown>,
-		},
-		isReadOnly: {
-			type: Boolean,
-			default: false,
-		},
-		expressionDisplayValue: {
-			type: String,
-			default: '',
-		},
-		forceShowExpression: {
-			type: Boolean,
-			default: false,
-		},
-		isValueExpression: {
-			type: Boolean,
-			default: false,
-		},
-		expressionEditDialogVisible: {
-			type: Boolean,
-			default: false,
-		},
-		node: {
-			type: Object as PropType<INode>,
-		},
-		path: {
-			type: String,
-			required: true,
-		},
-		loadOptionsMethod: {
-			type: String,
-		},
-		eventBus: {
-			type: Object as PropType<EventBus>,
-			default: () => createEventBus(),
-		},
-	},
-	setup() {
-		const router = useRouter();
-		const workflowHelpers = useWorkflowHelpers({ router });
-
-		const { callDebounced } = useDebounce();
-
-		return { callDebounced, workflowHelpers };
-	},
-	data() {
-		return {
-			resourceDropdownVisible: false,
-			resourceDropdownHiding: false,
-			searchFilter: '',
-			cachedResponses: {} as { [key: string]: IResourceLocatorQuery },
-			hasCompletedASearch: false,
-			width: 0,
+			path: props.path,
+			methodName: loadOptionsMethod,
+			currentNodeParameters: resolvedNodeParameters,
+			credentials: props.node.credentials,
 		};
-	},
-	computed: {
-		...mapStores(useNodeTypesStore, useNDVStore, useRootStore, useUIStore, useWorkflowsStore),
-		appName(): string {
-			if (!this.node) {
-				return '';
-			}
 
-			const nodeType = this.nodeTypesStore.getNodeType(this.node.type);
-			return getAppNameFromNodeName(nodeType?.displayName || '');
-		},
-		selectedMode(): string {
-			if (typeof this.modelValue !== 'object') {
-				// legacy mode
-				return '';
-			}
+		if (params.filter) {
+			requestParams.filter = params.filter;
+		}
 
-			if (!this.modelValue) {
-				return this.parameter.modes ? this.parameter.modes[0].name : '';
-			}
+		if (paginationToken) {
+			requestParams.paginationToken = paginationToken;
+		}
 
-			return this.modelValue.mode;
-		},
-		isListMode(): boolean {
-			return this.selectedMode === 'list';
-		},
-		hasCredential(): boolean {
-			const node = this.ndvStore.activeNode;
-			if (!node) {
-				return false;
-			}
-			return !!(node?.credentials && Object.keys(node.credentials).length === 1);
-		},
-		credentialsNotSet(): boolean {
-			if (!this.node) return false;
-			const nodeType = this.nodeTypesStore.getNodeType(this.node.type);
-			if (nodeType) {
-				const usesCredentials =
-					nodeType.credentials !== undefined && nodeType.credentials.length > 0;
-				if (usesCredentials && !this.node?.credentials) {
-					return true;
-				}
-			}
-			return false;
-		},
-		inputPlaceholder(): string {
-			if (this.currentMode.placeholder) {
-				return this.currentMode.placeholder;
-			}
-			const defaults: { [key: string]: string } = {
-				list: this.$locale.baseText('resourceLocator.mode.list.placeholder'),
-				id: this.$locale.baseText('resourceLocator.id.placeholder'),
-				url: this.$locale.baseText('resourceLocator.url.placeholder'),
-			};
+		const response = await nodeTypesStore.getResourceLocatorResults(requestParams);
 
-			return defaults[this.selectedMode] || '';
-		},
-		currentMode(): INodePropertyMode {
-			return this.findModeByName(this.selectedMode) || ({} as INodePropertyMode);
-		},
-		hasMultipleModes(): boolean {
-			return this.parameter.modes && this.parameter.modes.length > 1 ? true : false;
-		},
-		hasOnlyListMode(): boolean {
-			return hasOnlyListMode(this.parameter);
-		},
-		valueToDisplay(): NodeParameterValue {
-			if (typeof this.modelValue !== 'object') {
-				return this.modelValue;
-			}
-
-			if (this.isListMode) {
-				return this.modelValue ? this.modelValue.cachedResultName || this.modelValue.value : '';
-			}
-
-			return this.modelValue ? this.modelValue.value : '';
-		},
-		urlValue(): string | null {
-			if (this.isListMode && typeof this.modelValue === 'object') {
-				return this.modelValue?.cachedResultUrl || null;
-			}
-
-			if (this.selectedMode === 'url') {
-				if (
-					this.isValueExpression &&
-					typeof this.expressionComputedValue === 'string' &&
-					this.expressionComputedValue.startsWith('http')
-				) {
-					return this.expressionComputedValue;
-				}
-
-				if (typeof this.valueToDisplay === 'string' && this.valueToDisplay.startsWith('http')) {
-					return this.valueToDisplay;
-				}
-			}
-
-			if (this.currentMode.url) {
-				const value = this.isValueExpression ? this.expressionComputedValue : this.valueToDisplay;
-				if (typeof value === 'string') {
-					const expression = this.currentMode.url.replace(/\{\{\$value\}\}/g, value);
-					const resolved = this.workflowHelpers.resolveExpression(expression);
-
-					return typeof resolved === 'string' ? resolved : null;
-				}
-			}
-
-			return null;
-		},
-		currentRequestParams(): {
-			parameters: INodeParameters;
-			credentials: INodeCredentials | undefined;
-			filter: string;
-		} {
-			return {
-				parameters: this.node?.parameters ?? {},
-				credentials: this.node?.credentials ?? {},
-				filter: this.searchFilter,
-			};
-		},
-		currentRequestKey(): string {
-			const cacheKeys = { ...this.currentRequestParams };
-			cacheKeys.parameters = Object.keys(this.node ? this.node.parameters : {}).reduce(
-				(accu: INodeParameters, param) => {
-					if (param !== this.parameter.name && this.node?.parameters) {
-						accu[param] = this.node.parameters[param];
-					}
-
-					return accu;
-				},
-				{},
-			);
-			return stringify(cacheKeys);
-		},
-		currentResponse(): IResourceLocatorQuery | null {
-			return this.cachedResponses[this.currentRequestKey] || null;
-		},
-		currentQueryResults(): IResourceLocatorResultExpanded[] {
-			const results = this.currentResponse?.results ?? [];
-
-			return results.map(
-				(result: INodeListSearchItems): IResourceLocatorResultExpanded => ({
-					...result,
-					...(result.name && result.url ? { linkAlt: this.getLinkAlt(result.name) } : {}),
-				}),
-			);
-		},
-		currentQueryHasMore(): boolean {
-			return !!this.currentResponse?.nextPageToken;
-		},
-		currentQueryLoading(): boolean {
-			if (this.requiresSearchFilter && this.searchFilter === '') {
-				return false;
-			}
-			if (!this.currentResponse) {
-				return true;
-			}
-			return !!(this.currentResponse && this.currentResponse.loading);
-		},
-		currentQueryError(): boolean {
-			return !!(this.currentResponse && this.currentResponse.error);
-		},
-		isSearchable(): boolean {
-			return !!this.getPropertyArgument(this.currentMode, 'searchable');
-		},
-		requiresSearchFilter(): boolean {
-			return !!this.getPropertyArgument(this.currentMode, 'searchFilterRequired');
-		},
-	},
-	watch: {
-		currentQueryError(curr: boolean, prev: boolean) {
-			if (this.resourceDropdownVisible && curr && !prev) {
-				const inputRef = this.$refs.input as HTMLInputElement | undefined;
-				if (inputRef) {
-					inputRef.focus();
-				}
-			}
-		},
-		isValueExpression(newValue: boolean) {
-			if (newValue) {
-				this.switchFromListMode();
-			}
-		},
-		currentMode(mode: INodePropertyMode) {
-			if (
-				mode.extractValue?.regex &&
-				isResourceLocatorValue(this.modelValue) &&
-				this.modelValue.__regex !== mode.extractValue.regex
-			) {
-				this.$emit('update:modelValue', { ...this.modelValue, __regex: mode.extractValue.regex });
-			}
-		},
-		dependentParametersValues(currentValue, oldValue) {
-			const isUpdated = oldValue !== null && currentValue !== null && oldValue !== currentValue;
-			// Reset value if dependent parameters change
-			if (
-				isUpdated &&
-				this.modelValue &&
-				isResourceLocatorValue(this.modelValue) &&
-				this.modelValue.value !== ''
-			) {
-				this.$emit('update:modelValue', {
-					...this.modelValue,
-					cachedResultName: '',
-					cachedResultUrl: '',
-					value: '',
-				});
-			}
-		},
-	},
-	mounted() {
-		this.eventBus.on('refreshList', this.refreshList);
-		window.addEventListener('resize', this.setWidth);
-
-		useNDVStore().$subscribe((_mutation, _state) => {
-			// Update the width when main panel dimension change
-			this.setWidth();
+		setResponse(paramsKey, {
+			results: (cachedResponse?.results ?? []).concat(response.results),
+			nextPageToken: response.paginationToken ?? null,
+			loading: false,
+			error: false,
 		});
 
-		setTimeout(() => {
-			this.setWidth();
-		}, 0);
-	},
-	beforeUnmount() {
-		this.eventBus.off('refreshList', this.refreshList);
-		window.removeEventListener('resize', this.setWidth);
-	},
-	methods: {
-		setWidth() {
-			const containerRef = this.$refs.container as HTMLElement | undefined;
-			if (containerRef) {
-				this.width = containerRef?.offsetWidth;
-			}
-		},
-		getLinkAlt(entity: NodeParameterValue) {
-			if (this.selectedMode === 'list' && entity) {
-				return this.$locale.baseText('resourceLocator.openSpecificResource', {
-					interpolate: { entity: entity.toString(), appName: this.appName },
-				});
-			}
-			return this.$locale.baseText('resourceLocator.openResource', {
-				interpolate: { appName: this.appName },
+		if (params.filter && !hasCompletedASearch.value) {
+			hasCompletedASearch.value = true;
+			trackEvent('User searched resource locator list');
+		}
+	} catch (e) {
+		setResponse(paramsKey, {
+			loading: false,
+			error: true,
+		});
+	}
+}
+
+function onInputFocus(): void {
+	if (!isListMode.value || resourceDropdownVisible.value) {
+		return;
+	}
+
+	void loadInitialResources();
+	showResourceDropdown();
+}
+
+function switchFromListMode(): void {
+	if (isListMode.value && props.parameter.modes && props.parameter.modes.length > 1) {
+		const mode =
+			findModeByName('id') ?? props.parameter.modes.filter(({ name }) => name !== 'list')[0];
+
+		if (mode) {
+			emit('update:modelValue', {
+				__rl: true,
+				value:
+					props.modelValue && typeof props.modelValue === 'object' ? props.modelValue.value : '',
+				mode: mode.name,
 			});
-		},
-		refreshList() {
-			this.cachedResponses = {};
-			this.trackEvent('User refreshed resource locator list');
-		},
-		onKeyDown(e: KeyboardEvent) {
-			if (this.resourceDropdownVisible && !this.isSearchable) {
-				this.eventBus.emit('keyDown', e);
-			}
-		},
-		openResource(url: string) {
-			window.open(url, '_blank');
-			this.trackEvent('User clicked resource locator link');
-		},
-		getPropertyArgument(
-			parameter: INodePropertyMode,
-			argumentName: string,
-		): string | number | boolean | undefined {
-			if (parameter.typeOptions === undefined) {
-				return undefined;
-			}
+		}
+	}
+}
 
-			// @ts-ignore
-			if (parameter.typeOptions[argumentName] === undefined) {
-				return undefined;
-			}
+function hideResourceDropdown() {
+	if (!resourceDropdownVisible.value) {
+		return;
+	}
 
-			// @ts-ignore
-			return parameter.typeOptions[argumentName];
-		},
-		openCredential(): void {
-			const node = this.ndvStore.activeNode;
-			if (!node?.credentials) {
-				return;
-			}
-			const credentialKey = Object.keys(node.credentials)[0];
-			if (!credentialKey) {
-				return;
-			}
-			const id = node.credentials[credentialKey].id;
-			if (!id) {
-				return;
-			}
-			this.uiStore.openExistingCredential(id);
-		},
-		createNewCredential(): void {
-			if (!this.node) return;
-			const nodeType = this.nodeTypesStore.getNodeType(this.node.type);
-			if (!nodeType) {
-				return;
-			}
+	resourceDropdownVisible.value = false;
+	resourceDropdownHiding.value = true;
 
-			const defaultCredentialType = nodeType.credentials?.[0].name ?? '';
-			const mainAuthType = getMainAuthField(nodeType);
-			const showAuthOptions =
-				mainAuthType !== null &&
-				Array.isArray(mainAuthType.options) &&
-				mainAuthType.options?.length > 0;
+	void nextTick(() => {
+		inputRef.value?.blur();
+		resourceDropdownHiding.value = false;
+	});
+}
 
-			ndvEventBus.emit('credential.createNew', {
-				type: defaultCredentialType,
-				showAuthOptions,
-			});
-		},
-		findModeByName(name: string): INodePropertyMode | null {
-			if (this.parameter.modes) {
-				return this.parameter.modes.find((mode: INodePropertyMode) => mode.name === name) || null;
-			}
-			return null;
-		},
-		getModeLabel(mode: INodePropertyMode): string | null {
-			if (mode.name === 'id' || mode.name === 'url' || mode.name === 'list') {
-				return this.$locale.baseText(`resourceLocator.mode.${mode.name}`);
-			}
+function showResourceDropdown() {
+	if (resourceDropdownVisible.value || resourceDropdownHiding.value) {
+		return;
+	}
 
-			return mode.displayName;
-		},
-		onInputChange(value: string): void {
-			const params: INodeParameterResourceLocator = { __rl: true, value, mode: this.selectedMode };
-			if (this.isListMode) {
-				const resource = this.currentQueryResults.find((resource) => resource.value === value);
-				if (resource?.name) {
-					params.cachedResultName = resource.name;
-				}
+	resourceDropdownVisible.value = true;
+}
 
-				if (resource?.url) {
-					params.cachedResultUrl = resource.url;
-				}
-			}
-			this.$emit('update:modelValue', params);
-		},
-		onModeSelected(value: string): void {
-			if (typeof this.modelValue !== 'object') {
-				this.$emit('update:modelValue', { __rl: true, value: this.modelValue, mode: value });
-			} else if (value === 'url' && this.modelValue?.cachedResultUrl) {
-				this.$emit('update:modelValue', {
-					__rl: true,
-					mode: value,
-					value: this.modelValue.cachedResultUrl,
-				});
-			} else if (
-				value === 'id' &&
-				this.selectedMode === 'list' &&
-				this.modelValue &&
-				this.modelValue.value
-			) {
-				this.$emit('update:modelValue', { __rl: true, mode: value, value: this.modelValue.value });
-			} else {
-				this.$emit('update:modelValue', { __rl: true, mode: value, value: '' });
-			}
+function onListItemSelected(value: NodeParameterValue) {
+	onInputChange(value);
+	hideResourceDropdown();
+}
 
-			this.trackEvent('User changed resource locator mode', { mode: value });
-		},
-		trackEvent(event: string, params?: { [key: string]: string }): void {
-			this.$telemetry.track(event, {
-				instance_id: this.rootStore.instanceId,
-				workflow_id: this.workflowsStore.workflowId,
-				node_type: this.node?.type,
-				resource: this.node?.parameters && this.node.parameters.resource,
-				operation: this.node?.parameters && this.node.parameters.operation,
-				field_name: this.parameter.name,
-				...params,
-			});
-		},
-		onDrop(data: string) {
-			this.switchFromListMode();
-			this.$emit('drop', data);
-		},
-		onSearchFilter(filter: string) {
-			this.searchFilter = filter;
-			this.loadResourcesDebounced();
-		},
-		async loadInitialResources(): Promise<void> {
-			if (!this.currentResponse || (this.currentResponse && this.currentResponse.error)) {
-				this.searchFilter = '';
-				await this.loadResources();
-			}
-		},
-		loadResourcesDebounced() {
-			if (this.currentResponse?.error) {
-				// Clear error response immediately when retrying to show loading state
-				delete this.cachedResponses[this.currentRequestKey];
-			}
-
-			void this.callDebounced(this.loadResources, {
-				debounceTime: 1000,
-				trailing: true,
-			});
-		},
-		setResponse(paramsKey: string, props: Partial<IResourceLocatorQuery>) {
-			this.cachedResponses = {
-				...this.cachedResponses,
-				[paramsKey]: { ...this.cachedResponses[paramsKey], ...props },
-			};
-		},
-		async loadResources() {
-			const params = this.currentRequestParams;
-			const paramsKey = this.currentRequestKey;
-			const cachedResponse = this.cachedResponses[paramsKey];
-
-			if (this.credentialsNotSet) {
-				this.setResponse(paramsKey, { error: true });
-				return;
-			}
-
-			if (this.requiresSearchFilter && !params.filter) {
-				return;
-			}
-
-			if (!this.node) {
-				return;
-			}
-
-			let paginationToken: string | undefined;
-
-			try {
-				if (cachedResponse) {
-					const nextPageToken = cachedResponse.nextPageToken as string;
-					if (nextPageToken) {
-						paginationToken = nextPageToken;
-						this.setResponse(paramsKey, { loading: true });
-					} else if (cachedResponse.error) {
-						this.setResponse(paramsKey, { error: false, loading: true });
-					} else {
-						return; // end of results
-					}
-				} else {
-					this.setResponse(paramsKey, {
-						loading: true,
-						error: false,
-						results: [],
-						nextPageToken: null,
-					});
-				}
-
-				const resolvedNodeParameters = this.workflowHelpers.resolveRequiredParameters(
-					this.parameter,
-					params.parameters,
-				) as INodeParameters;
-				const loadOptionsMethod = this.getPropertyArgument(
-					this.currentMode,
-					'searchListMethod',
-				) as string;
-
-				const requestParams: DynamicNodeParameters.ResourceLocatorResultsRequest = {
-					nodeTypeAndVersion: {
-						name: this.node.type,
-						version: this.node.typeVersion,
-					},
-					path: this.path,
-					methodName: loadOptionsMethod,
-					currentNodeParameters: resolvedNodeParameters,
-					credentials: this.node.credentials,
-				};
-
-				if (params.filter) {
-					requestParams.filter = params.filter;
-				}
-
-				if (paginationToken) {
-					requestParams.paginationToken = paginationToken;
-				}
-
-				const response = await this.nodeTypesStore.getResourceLocatorResults(requestParams);
-
-				this.setResponse(paramsKey, {
-					results: (cachedResponse ? cachedResponse.results : []).concat(response.results),
-					nextPageToken: response.paginationToken || null,
-					loading: false,
-					error: false,
-				});
-
-				if (params.filter && !this.hasCompletedASearch) {
-					this.hasCompletedASearch = true;
-					this.trackEvent('User searched resource locator list');
-				}
-			} catch (e) {
-				this.setResponse(paramsKey, {
-					loading: false,
-					error: true,
-				});
-			}
-		},
-		onInputFocus(): void {
-			if (!this.isListMode || this.resourceDropdownVisible) {
-				return;
-			}
-
-			void this.loadInitialResources();
-			this.showResourceDropdown();
-		},
-		switchFromListMode(): void {
-			if (this.isListMode && this.parameter.modes && this.parameter.modes.length > 1) {
-				let mode = this.findModeByName('id');
-				if (!mode) {
-					mode = this.parameter.modes.filter((mode) => mode.name !== 'list')[0];
-				}
-
-				if (mode) {
-					this.$emit('update:modelValue', {
-						__rl: true,
-						value:
-							this.modelValue && typeof this.modelValue === 'object' ? this.modelValue.value : '',
-						mode: mode.name,
-					});
-				}
-			}
-		},
-		onDropdownHide() {
-			if (!this.currentQueryError) {
-				this.hideResourceDropdown();
-			}
-		},
-		hideResourceDropdown() {
-			if (!this.resourceDropdownVisible) {
-				return;
-			}
-
-			this.resourceDropdownVisible = false;
-
-			const inputRef = this.$refs.input as HTMLInputElement | undefined;
-			this.resourceDropdownHiding = true;
-			void this.$nextTick(() => {
-				inputRef?.blur?.();
-				this.resourceDropdownHiding = false;
-			});
-		},
-		showResourceDropdown() {
-			if (this.resourceDropdownVisible || this.resourceDropdownHiding) {
-				return;
-			}
-
-			this.resourceDropdownVisible = true;
-		},
-		onListItemSelected(value: string) {
-			this.onInputChange(value);
-			this.hideResourceDropdown();
-		},
-		onInputBlur() {
-			if (!this.isSearchable || this.currentQueryError) {
-				this.hideResourceDropdown();
-			}
-			this.$emit('blur');
-		},
-	},
-});
+function onInputBlur() {
+	if (!isSearchable.value || currentQueryError.value) {
+		hideResourceDropdown();
+	}
+	emit('blur');
+}
 </script>
 
 <template>
 	<div
-		ref="container"
+		ref="containerRef"
 		class="resource-locator"
 		:data-test-id="`resource-locator-${parameter.name}`"
 	>
-		<OnClickOutside @trigger="hideResourceDropdown">
-			<ResourceLocatorDropdown
-				ref="dropdown"
-				:model-value="modelValue ? modelValue.value : ''"
-				:show="resourceDropdownVisible"
-				:filterable="isSearchable"
-				:filter-required="requiresSearchFilter"
-				:resources="currentQueryResults"
-				:loading="currentQueryLoading"
-				:filter="searchFilter"
-				:has-more="currentQueryHasMore"
-				:error-view="currentQueryError"
-				:width="width"
-				:event-bus="eventBus"
-				@update:model-value="onListItemSelected"
-				@filter="onSearchFilter"
-				@load-more="loadResourcesDebounced"
+		<ResourceLocatorDropdown
+			ref="dropdownRef"
+			:model-value="modelValue ? modelValue.value : ''"
+			:show="resourceDropdownVisible"
+			:filterable="isSearchable"
+			:filter-required="requiresSearchFilter"
+			:resources="currentQueryResults"
+			:loading="currentQueryLoading"
+			:filter="searchFilter"
+			:has-more="currentQueryHasMore"
+			:error-view="currentQueryError"
+			:width="width"
+			:event-bus="eventBus"
+			@update:model-value="onListItemSelected"
+			@filter="onSearchFilter"
+			@load-more="loadResourcesDebounced"
+		>
+			<template #error>
+				<div :class="$style.error" data-test-id="rlc-error-container">
+					<n8n-text color="text-dark" align="center" tag="div">
+						{{ $locale.baseText('resourceLocator.mode.list.error.title') }}
+					</n8n-text>
+					<n8n-text v-if="hasCredential || credentialsNotSet" size="small" color="text-base">
+						{{ $locale.baseText('resourceLocator.mode.list.error.description.part1') }}
+						<a v-if="credentialsNotSet" @click="createNewCredential">{{
+							$locale.baseText('resourceLocator.mode.list.error.description.part2.noCredentials')
+						}}</a>
+						<a v-else-if="hasCredential" @click="openCredential">{{
+							$locale.baseText('resourceLocator.mode.list.error.description.part2.hasCredentials')
+						}}</a>
+					</n8n-text>
+				</div>
+			</template>
+			<div
+				:class="{
+					[$style.resourceLocator]: true,
+					[$style.multipleModes]: hasMultipleModes,
+				}"
 			>
-				<template #error>
-					<div :class="$style.error" data-test-id="rlc-error-container">
-						<n8n-text color="text-dark" align="center" tag="div">
-							{{ $locale.baseText('resourceLocator.mode.list.error.title') }}
-						</n8n-text>
-						<n8n-text v-if="hasCredential || credentialsNotSet" size="small" color="text-base">
-							{{ $locale.baseText('resourceLocator.mode.list.error.description.part1') }}
-							<a v-if="credentialsNotSet" @click="createNewCredential">{{
-								$locale.baseText('resourceLocator.mode.list.error.description.part2.noCredentials')
-							}}</a>
-							<a v-else-if="hasCredential" @click="openCredential">{{
-								$locale.baseText('resourceLocator.mode.list.error.description.part2.hasCredentials')
-							}}</a>
-						</n8n-text>
-					</div>
-				</template>
-				<div
-					:class="{
-						[$style.resourceLocator]: true,
-						[$style.multipleModes]: hasMultipleModes,
-					}"
-				>
-					<div :class="$style.background"></div>
-					<div v-if="hasMultipleModes" :class="$style.modeSelector">
-						<n8n-select
-							:model-value="selectedMode"
-							:size="inputSize"
-							:disabled="isReadOnly"
-							:placeholder="$locale.baseText('resourceLocator.modeSelector.placeholder')"
-							data-test-id="rlc-mode-selector"
-							@update:model-value="onModeSelected"
+				<div :class="$style.background"></div>
+				<div v-if="hasMultipleModes" :class="$style.modeSelector">
+					<n8n-select
+						:model-value="selectedMode"
+						:size="inputSize"
+						:disabled="isReadOnly"
+						:placeholder="$locale.baseText('resourceLocator.modeSelector.placeholder')"
+						data-test-id="rlc-mode-selector"
+						@update:model-value="onModeSelected"
+					>
+						<n8n-option
+							v-for="mode in parameter.modes"
+							:key="mode.name"
+							:value="mode.name"
+							:label="getModeLabel(mode)"
+							:disabled="isValueExpression && mode.name === 'list'"
+							:title="
+								isValueExpression && mode.name === 'list'
+									? $locale.baseText('resourceLocator.mode.list.disabled.title')
+									: ''
+							"
 						>
-							<n8n-option
-								v-for="mode in parameter.modes"
-								:key="mode.name"
-								:value="mode.name"
-								:label="getModeLabel(mode)"
-								:disabled="isValueExpression && mode.name === 'list'"
-								:title="
-									isValueExpression && mode.name === 'list'
-										? $locale.baseText('resourceLocator.mode.list.disabled.title')
-										: ''
-								"
-							>
-								{{ getModeLabel(mode) }}
-							</n8n-option>
-						</n8n-select>
-					</div>
+							{{ getModeLabel(mode) }}
+						</n8n-option>
+					</n8n-select>
+				</div>
 
-					<div :class="$style.inputContainer" data-test-id="rlc-input-container">
-						<DraggableTarget
-							type="mapping"
-							:disabled="hasOnlyListMode"
-							:sticky="true"
-							:sticky-offset="isValueExpression ? [26, 3] : [3, 3]"
-							@drop="onDrop"
-						>
-							<template #default="{ droppable, activeDrop }">
-								<div
-									:class="{
-										[$style.listModeInputContainer]: isListMode,
-										[$style.droppable]: droppable,
-										[$style.activeDrop]: activeDrop,
-									}"
-									@keydown.stop="onKeyDown"
+				<div :class="$style.inputContainer" data-test-id="rlc-input-container">
+					<DraggableTarget
+						type="mapping"
+						:disabled="hasOnlyListMode"
+						:sticky="true"
+						:sticky-offset="isValueExpression ? [26, 3] : [3, 3]"
+						@drop="onDrop"
+					>
+						<template #default="{ droppable, activeDrop }">
+							<div
+								:class="{
+									[$style.listModeInputContainer]: isListMode,
+									[$style.droppable]: droppable,
+									[$style.activeDrop]: activeDrop,
+								}"
+								@keydown.stop="onKeyDown"
+							>
+								<ExpressionParameterInput
+									v-if="isValueExpression || forceShowExpression"
+									ref="inputRef"
+									:model-value="expressionDisplayValue"
+									:path="path"
+									:rows="3"
+									@update:model-value="onInputChange"
+									@modal-opener-click="emit('modalOpenerClick')"
+								/>
+								<n8n-input
+									v-else
+									ref="inputRef"
+									:class="{ [$style.selectInput]: isListMode }"
+									:size="inputSize"
+									:model-value="valueToDisplay"
+									:disabled="isReadOnly"
+									:readonly="isListMode"
+									:title="displayTitle"
+									:placeholder="inputPlaceholder"
+									type="text"
+									data-test-id="rlc-input"
+									@update:model-value="onInputChange"
+									@focus="onInputFocus"
+									@blur="onInputBlur"
 								>
-									<ExpressionParameterInput
-										v-if="isValueExpression || forceShowExpression"
-										ref="input"
-										:model-value="expressionDisplayValue"
-										:path="path"
-										:rows="3"
-										@update:model-value="onInputChange"
-										@modal-opener-click="$emit('modalOpenerClick')"
-									/>
-									<n8n-input
-										v-else
-										ref="input"
-										:class="{ [$style.selectInput]: isListMode }"
-										:size="inputSize"
-										:model-value="valueToDisplay"
-										:disabled="isReadOnly"
-										:readonly="isListMode"
-										:title="displayTitle"
-										:placeholder="inputPlaceholder"
-										type="text"
-										data-test-id="rlc-input"
-										@update:model-value="onInputChange"
-										@focus="onInputFocus"
-										@blur="onInputBlur"
-									>
-										<template v-if="isListMode" #suffix>
-											<i
-												:class="{
-													['el-input__icon']: true,
-													['el-icon-arrow-down']: true,
-													[$style.selectIcon]: true,
-													[$style.isReverse]: resourceDropdownVisible,
-												}"
-											/>
-										</template>
-									</n8n-input>
-								</div>
-							</template>
-						</DraggableTarget>
-						<ParameterIssues
-							v-if="parameterIssues && parameterIssues.length"
-							:issues="parameterIssues"
-							:class="$style['parameter-issues']"
-						/>
-						<div v-else-if="urlValue" :class="$style.openResourceLink">
-							<n8n-link theme="text" @click.stop="openResource(urlValue)">
-								<font-awesome-icon icon="external-link-alt" :title="getLinkAlt(valueToDisplay)" />
-							</n8n-link>
-						</div>
+									<template v-if="isListMode" #suffix>
+										<i
+											:class="{
+												['el-input__icon']: true,
+												['el-icon-arrow-down']: true,
+												[$style.selectIcon]: true,
+												[$style.isReverse]: resourceDropdownVisible,
+											}"
+										/>
+									</template>
+								</n8n-input>
+							</div>
+						</template>
+					</DraggableTarget>
+					<ParameterIssues
+						v-if="parameterIssues && parameterIssues.length"
+						:issues="parameterIssues"
+						:class="$style['parameter-issues']"
+					/>
+					<div v-else-if="urlValue" :class="$style.openResourceLink">
+						<n8n-link theme="text" @click.stop="openResource(urlValue)">
+							<font-awesome-icon icon="external-link-alt" :title="getLinkAlt(valueToDisplay)" />
+						</n8n-link>
 					</div>
 				</div>
-			</ResourceLocatorDropdown>
-		</OnClickOutside>
+			</div>
+		</ResourceLocatorDropdown>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
index 658f2da9d..01c7b4071 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -1,191 +1,190 @@
-<script lang="ts">
+<script setup lang="ts">
 import type { IResourceLocatorResultExpanded } from '@/Interface';
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
+import { N8nLoading } from 'n8n-design-system';
 import type { EventBus } from 'n8n-design-system/utils';
 import { createEventBus } from 'n8n-design-system/utils';
 import type { NodeParameterValue } from 'n8n-workflow';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 const SEARCH_BAR_HEIGHT_PX = 40;
 const SCROLL_MARGIN_PX = 10;
 
-export default defineComponent({
-	name: 'ResourceLocatorDropdown',
-	props: {
-		modelValue: {
-			type: [String, Number] as PropType<NodeParameterValue>,
-		},
-		show: {
-			type: Boolean,
-			default: false,
-		},
-		resources: {
-			type: Array as PropType<IResourceLocatorResultExpanded[]>,
-		},
-		filterable: {
-			type: Boolean,
-		},
-		loading: {
-			type: Boolean,
-		},
-		filter: {
-			type: String,
-		},
-		hasMore: {
-			type: Boolean,
-		},
-		errorView: {
-			type: Boolean,
-		},
-		filterRequired: {
-			type: Boolean,
-		},
-		width: {
-			type: Number,
-		},
-		eventBus: {
-			type: Object as PropType<EventBus>,
-			default: () => createEventBus(),
-		},
-	},
-	emits: ['update:modelValue', 'loadMore', 'filter'],
-	data() {
-		return {
-			hoverIndex: 0,
-			showHoverUrl: false,
-		};
-	},
-	computed: {
-		sortedResources(): IResourceLocatorResultExpanded[] {
-			const seen = new Set();
-			const { selected, notSelected } = (this.resources ?? []).reduce(
-				(acc, item: IResourceLocatorResultExpanded) => {
-					if (seen.has(item.value)) {
-						return acc;
-					}
-					seen.add(item.value);
+type Props = {
+	modelValue?: NodeParameterValue;
+	resources?: IResourceLocatorResultExpanded[];
+	show?: boolean;
+	filterable?: boolean;
+	loading?: boolean;
+	filter?: string;
+	hasMore?: boolean;
+	errorView?: boolean;
+	filterRequired?: boolean;
+	width?: number;
+	eventBus?: EventBus;
+};
 
-					if (this.modelValue && item.value === this.modelValue) {
-						acc.selected = item;
-					} else {
-						acc.notSelected.push(item);
-					}
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: undefined,
+	resources: () => [],
+	show: false,
+	filterable: false,
+	loading: false,
+	filter: '',
+	hasMore: false,
+	errorView: false,
+	filterRequired: false,
+	width: undefined,
+	eventBus: () => createEventBus(),
+});
 
-					return acc;
-				},
-				{
-					selected: null as IResourceLocatorResultExpanded | null,
-					notSelected: [] as IResourceLocatorResultExpanded[],
-				},
-			);
+const emit = defineEmits<{
+	'update:modelValue': [value: NodeParameterValue];
+	loadMore: [];
+	filter: [filter: string];
+}>();
 
-			if (selected) {
-				return [selected, ...notSelected];
+const hoverIndex = ref(0);
+const showHoverUrl = ref(false);
+const searchRef = ref<HTMLInputElement>();
+const resultsContainerRef = ref<HTMLDivElement>();
+const itemsRef = ref<HTMLDivElement[]>([]);
+
+const sortedResources = computed<IResourceLocatorResultExpanded[]>(() => {
+	const seen = new Set();
+	const { selected, notSelected } = props.resources.reduce(
+		(acc, item: IResourceLocatorResultExpanded) => {
+			if (seen.has(item.value)) {
+				return acc;
+			}
+			seen.add(item.value);
+
+			if (props.modelValue && item.value === props.modelValue) {
+				acc.selected = item;
+			} else {
+				acc.notSelected.push(item);
 			}
 
-			return notSelected;
+			return acc;
 		},
-	},
-	watch: {
-		show(value) {
-			if (value) {
-				this.hoverIndex = 0;
-				this.showHoverUrl = false;
+		{
+			selected: null as IResourceLocatorResultExpanded | null,
+			notSelected: [] as IResourceLocatorResultExpanded[],
+		},
+	);
 
-				setTimeout(() => {
-					if (value && this.filterable && this.$refs.search) {
-						(this.$refs.search as HTMLElement).focus();
-					}
-				}, 0);
-			}
-		},
-		loading() {
-			setTimeout(() => this.onResultsEnd(), 0); // in case of filtering
-		},
-	},
-	mounted() {
-		this.eventBus.on('keyDown', this.onKeyDown);
-	},
-	beforeUnmount() {
-		this.eventBus.off('keyDown', this.onKeyDown);
-	},
-	methods: {
-		openUrl(event: MouseEvent, url: string) {
-			event.preventDefault();
-			event.stopPropagation();
+	if (selected) {
+		return [selected, ...notSelected];
+	}
 
-			window.open(url, '_blank');
-		},
-		onKeyDown(e: KeyboardEvent) {
-			const containerRef = this.$refs.resultsContainer as HTMLElement | undefined;
+	return notSelected;
+});
 
-			if (e.key === 'ArrowDown') {
-				if (this.hoverIndex < this.sortedResources.length - 1) {
-					this.hoverIndex++;
-
-					const itemRefs = this.$refs[`item-${this.hoverIndex}`] as HTMLElement[] | undefined;
-					if (containerRef && Array.isArray(itemRefs) && itemRefs.length === 1) {
-						const item = itemRefs[0];
-						if (
-							item.offsetTop + item.clientHeight >
-							containerRef.scrollTop + containerRef.offsetHeight
-						) {
-							const top = item.offsetTop - containerRef.offsetHeight + item.clientHeight;
-							containerRef.scrollTo({ top });
-						}
-					}
-				}
-			} else if (e.key === 'ArrowUp') {
-				if (this.hoverIndex > 0) {
-					this.hoverIndex--;
-
-					const searchOffset = this.filterable ? SEARCH_BAR_HEIGHT_PX : 0;
-					const itemRefs = this.$refs[`item-${this.hoverIndex}`] as HTMLElement[] | undefined;
-					if (containerRef && Array.isArray(itemRefs) && itemRefs.length === 1) {
-						const item = itemRefs[0];
-						if (item.offsetTop <= containerRef.scrollTop + searchOffset) {
-							containerRef.scrollTo({ top: item.offsetTop - searchOffset });
-						}
-					}
-				}
-			} else if (e.key === 'Enter') {
-				this.$emit('update:modelValue', this.sortedResources[this.hoverIndex].value);
-			}
-		},
-		onFilterInput(value: string) {
-			this.$emit('filter', value);
-		},
-		onItemClick(selected: string | number | boolean) {
-			this.$emit('update:modelValue', selected);
-		},
-		onItemHover(index: number) {
-			this.hoverIndex = index;
+watch(
+	() => props.show,
+	(value) => {
+		if (value) {
+			hoverIndex.value = 0;
+			showHoverUrl.value = false;
 
 			setTimeout(() => {
-				if (this.hoverIndex === index) {
-					this.showHoverUrl = true;
+				if (value && props.filterable && searchRef.value) {
+					searchRef.value.focus();
 				}
-			}, 250);
-		},
-		onItemHoverLeave() {
-			this.showHoverUrl = false;
-		},
-		onResultsEnd() {
-			if (this.loading || !this.hasMore) {
-				return;
-			}
-
-			const containerRef = this.$refs.resultsContainer as HTMLElement | undefined;
-			if (containerRef) {
-				const diff =
-					containerRef.offsetHeight - (containerRef.scrollHeight - containerRef.scrollTop);
-				if (diff > -SCROLL_MARGIN_PX && diff < SCROLL_MARGIN_PX) {
-					this.$emit('loadMore');
-				}
-			}
-		},
+			}, 0);
+		}
 	},
+);
+
+watch(
+	() => props.loading,
+	() => {
+		setTimeout(() => onResultsEnd(), 0); // in case of filtering
+	},
+);
+onMounted(() => {
+	props.eventBus.on('keyDown', onKeyDown);
 });
+
+onBeforeUnmount(() => {
+	props.eventBus.off('keyDown', onKeyDown);
+});
+
+function openUrl(event: MouseEvent, url: string) {
+	event.preventDefault();
+	event.stopPropagation();
+
+	window.open(url, '_blank');
+}
+
+function onKeyDown(e: KeyboardEvent) {
+	if (e.key === 'ArrowDown') {
+		if (hoverIndex.value < sortedResources.value.length - 1) {
+			hoverIndex.value++;
+
+			if (resultsContainerRef.value && itemsRef.value.length === 1) {
+				const item = itemsRef.value[0];
+				if (
+					item.offsetTop + item.clientHeight >
+					resultsContainerRef.value.scrollTop + resultsContainerRef.value.offsetHeight
+				) {
+					const top = item.offsetTop - resultsContainerRef.value.offsetHeight + item.clientHeight;
+					resultsContainerRef.value.scrollTo({ top });
+				}
+			}
+		}
+	} else if (e.key === 'ArrowUp') {
+		if (hoverIndex.value > 0) {
+			hoverIndex.value--;
+
+			const searchOffset = props.filterable ? SEARCH_BAR_HEIGHT_PX : 0;
+			if (resultsContainerRef.value && itemsRef.value.length === 1) {
+				const item = itemsRef.value[0];
+				if (item.offsetTop <= resultsContainerRef.value.scrollTop + searchOffset) {
+					resultsContainerRef.value.scrollTo({ top: item.offsetTop - searchOffset });
+				}
+			}
+		}
+	} else if (e.key === 'Enter') {
+		emit('update:modelValue', sortedResources.value[hoverIndex.value].value);
+	}
+}
+
+function onFilterInput(value: string) {
+	emit('filter', value);
+}
+
+function onItemClick(selected: string | number | boolean) {
+	emit('update:modelValue', selected);
+}
+
+function onItemHover(index: number) {
+	hoverIndex.value = index;
+
+	setTimeout(() => {
+		if (hoverIndex.value === index) {
+			showHoverUrl.value = true;
+		}
+	}, 250);
+}
+
+function onItemHoverLeave() {
+	showHoverUrl.value = false;
+}
+
+function onResultsEnd() {
+	if (props.loading || !props.loading) {
+		return;
+	}
+
+	if (resultsContainerRef.value) {
+		const diff =
+			resultsContainerRef.value.offsetHeight -
+			(resultsContainerRef.value.scrollHeight - resultsContainerRef.value.scrollTop);
+		if (diff > -SCROLL_MARGIN_PX && diff < SCROLL_MARGIN_PX) {
+			emit('loadMore');
+		}
+	}
+}
 </script>
 
 <template>
@@ -201,8 +200,8 @@ export default defineComponent({
 			<slot name="error"></slot>
 		</div>
 		<div v-if="filterable && !errorView" :class="$style.searchInput" @keydown="onKeyDown">
-			<n8n-input
-				ref="search"
+			<N8nInput
+				ref="searchRef"
 				:model-value="filter"
 				:clearable="true"
 				:placeholder="$locale.baseText('resourceLocator.search.placeholder')"
@@ -212,7 +211,7 @@ export default defineComponent({
 				<template #prefix>
 					<font-awesome-icon :class="$style.searchIcon" icon="search" />
 				</template>
-			</n8n-input>
+			</N8nInput>
 		</div>
 		<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
 			{{ $locale.baseText('resourceLocator.mode.list.searchRequired') }}
@@ -225,14 +224,14 @@ export default defineComponent({
 		</div>
 		<div
 			v-else-if="!errorView"
-			ref="resultsContainer"
+			ref="resultsContainerRef"
 			:class="$style.container"
 			@scroll="onResultsEnd"
 		>
 			<div
 				v-for="(result, i) in sortedResources"
 				:key="result.value.toString()"
-				:ref="`item-${i}`"
+				ref="itemsRef"
 				:class="{
 					[$style.resourceItem]: true,
 					[$style.selected]: result.value === modelValue,
@@ -257,7 +256,7 @@ export default defineComponent({
 			</div>
 			<div v-if="loading && !errorView">
 				<div v-for="i in 3" :key="i" :class="$style.loadingItem">
-					<n8n-loading :class="$style.loader" variant="p" :rows="1" />
+					<N8nLoading :class="$style.loader" variant="p" :rows="1" />
 				</div>
 			</div>
 		</div>
diff --git a/packages/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue b/packages/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
index 41ba8d1a1..5051e095d 100644
--- a/packages/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
+++ b/packages/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
@@ -108,7 +108,9 @@ function setWidth() {
 	}
 }
 
-function onInputChange(value: string): void {
+function onInputChange(value: NodeParameterValue): void {
+	if (typeof value !== 'string') return;
+
 	const params: INodeParameterResourceLocator = { __rl: true, value, mode: selectedMode.value };
 	if (isListMode.value) {
 		const resource = workflowsStore.getWorkflowById(value);
@@ -119,7 +121,7 @@ function onInputChange(value: string): void {
 	emit('update:modelValue', params);
 }
 
-function onListItemSelected(value: string) {
+function onListItemSelected(value: NodeParameterValue) {
 	onInputChange(value);
 	hideDropdown();
 }