From 69d900774f7eb83c7fdb27c49ea27f47009999de Mon Sep 17 00:00:00 2001
From: Shireen Missi <shireen@n8n.io>
Date: Tue, 5 Nov 2024 10:15:07 +0000
Subject: [PATCH 1/5] migrate FixedCollectionParameter to composition API

---
 .../components/FixedCollectionParameter.vue   | 379 +++++++++---------
 1 file changed, 180 insertions(+), 199 deletions(-)

diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 98c5ef5971abc..6eacccb980425 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -1,6 +1,4 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
+<script lang="ts" setup>
 import type { IUpdateInformation } from '@/Interface';
 
 import type { INodeParameters, INodeProperties, INodePropertyCollection } from 'n8n-workflow';
@@ -8,213 +6,196 @@ import { deepCopy, isINodePropertyCollectionList } from 'n8n-workflow';
 
 import { get } from 'lodash-es';
 
-export default defineComponent({
-	name: 'FixedCollectionParameter',
-	props: {
-		nodeValues: {
-			type: Object as PropType<INodeParameters>,
-			required: true,
-		},
-		parameter: {
-			type: Object as PropType<INodeProperties>,
-			required: true,
-		},
-		path: {
-			type: String,
-			required: true,
-		},
-		values: {
-			type: Object as PropType<Record<string, INodeParameters[]>>,
-			default: () => ({}),
-		},
-		isReadOnly: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			selectedOption: undefined,
-			mutableValues: {} as Record<string, INodeParameters[]>,
-		};
-	},
-	computed: {
-		getPlaceholderText(): string {
-			const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
-			return placeholder ? placeholder : this.$locale.baseText('fixedCollectionParameter.choose');
-		},
-		getProperties(): INodePropertyCollection[] {
-			const returnProperties = [];
-			let tempProperties;
-			for (const name of this.propertyNames) {
-				tempProperties = this.getOptionProperties(name);
-				if (tempProperties !== undefined) {
-					returnProperties.push(tempProperties);
-				}
-			}
-			return returnProperties;
-		},
-		multipleValues(): boolean {
-			return !!this.parameter.typeOptions?.multipleValues;
-		},
-		parameterOptions(): INodePropertyCollection[] {
-			if (this.multipleValues && isINodePropertyCollectionList(this.parameter.options)) {
-				return this.parameter.options;
-			}
+import { computed, ref, watch, onBeforeMount } from 'vue';
+import { useI18n } from '@/composables/useI18n';
 
-			return (this.parameter.options as INodePropertyCollection[]).filter((option) => {
-				return !this.propertyNames.includes(option.name);
-			});
-		},
-		propertyNames(): string[] {
-			return Object.keys(this.mutableValues || {});
-		},
-		sortable(): boolean {
-			return !!this.parameter.typeOptions?.sortable;
-		},
-	},
-	watch: {
-		values: {
-			handler(newValues: Record<string, INodeParameters[]>) {
-				this.mutableValues = deepCopy(newValues);
-			},
-			deep: true,
-		},
-	},
-	created() {
-		this.mutableValues = deepCopy(this.values);
+const locale = useI18n();
+
+const props = defineProps<{
+	nodeValues: INodeParameters;
+	parameter: INodeProperties;
+	path: string;
+	values: Record<string, INodeParameters[]>;
+	isReadOnly: boolean | undefined;
+}>();
+
+const emit = defineEmits<{
+	valueChanged: [value?: any];
+}>();
+
+const getPlaceholderText = computed(() => {
+	const placeholder = locale.nodeText().placeholder(props.parameter, props.path);
+	return placeholder ? placeholder : locale.baseText('fixedCollectionParameter.choose');
+});
+const mutableValues = ref({} as Record<string, INodeParameters[]>);
+const selectedOption = ref<string | null | undefined>(null);
+const propertyNames = computed(() => {
+	return Object.keys(mutableValues.value || {});
+});
+const getProperties = computed(() => {
+	const returnProperties = [];
+	let tempProperties;
+	for (const name of propertyNames.value) {
+		tempProperties = getOptionProperties(name);
+		if (tempProperties !== undefined) {
+			returnProperties.push(tempProperties);
+		}
+	}
+	return returnProperties;
+});
+const multipleValues = computed(() => {
+	return !!props.parameter.typeOptions?.multipleValues;
+});
+const parameterOptions = computed(() => {
+	if (multipleValues && isINodePropertyCollectionList(props.parameter.options)) {
+		return props.parameter.options;
+	}
+
+	return (props.parameter.options as INodePropertyCollection[]).filter((option) => {
+		return !propertyNames.value.includes(option.name);
+	});
+});
+
+const sortable = computed(() => {
+	return !!props.parameter.typeOptions?.sortable;
+});
+
+watch(
+	() => props.values,
+	(newValues: Record<string, INodeParameters[]>) => {
+		mutableValues.value = deepCopy(newValues);
 	},
-	methods: {
-		deleteOption(optionName: string, index?: number) {
-			const currentOptionsOfSameType = this.mutableValues[optionName];
-			if (!currentOptionsOfSameType || currentOptionsOfSameType.length > 1) {
-				// it's not the only option of this type, so just remove it.
-				this.$emit('valueChanged', {
-					name: this.getPropertyPath(optionName, index),
-					value: undefined,
-				});
-			} else {
-				// it's the only option, so remove the whole type
-				this.$emit('valueChanged', {
-					name: this.getPropertyPath(optionName),
-					value: undefined,
-				});
-			}
-		},
-		getPropertyPath(name: string, index?: number) {
-			return `${this.path}.${name}` + (index !== undefined ? `[${index}]` : '');
-		},
-		getOptionProperties(optionName: string): INodePropertyCollection | undefined {
-			if (isINodePropertyCollectionList(this.parameter.options)) {
-				for (const option of this.parameter.options) {
-					if (option.name === optionName) {
-						return option;
-					}
-				}
-			}
-			return undefined;
-		},
-		moveOptionDown(optionName: string, index: number) {
-			if (Array.isArray(this.mutableValues[optionName])) {
-				this.mutableValues[optionName].splice(
-					index + 1,
-					0,
-					this.mutableValues[optionName].splice(index, 1)[0],
-				);
+	{ deep: true },
+);
+onBeforeMount(() => {
+	mutableValues.value = deepCopy(props.values);
+});
+const deleteOption = (optionName: string, index?: number) => {
+	const currentOptionsOfSameType = mutableValues.value[optionName];
+	if (!currentOptionsOfSameType || currentOptionsOfSameType.length > 1) {
+		// it's not the only option of this type, so just remove it.
+		emit('valueChanged', {
+			name: getPropertyPath(optionName, index),
+			value: undefined,
+		});
+	} else {
+		// it's the only option, so remove the whole type
+		emit('valueChanged', {
+			name: getPropertyPath(optionName),
+			value: undefined,
+		});
+	}
+};
+const getPropertyPath = (name: string, index?: number) => {
+	return `${props.path}.${name}` + (index !== undefined ? `[${index}]` : '');
+};
+const getOptionProperties = (optionName: string) => {
+	if (isINodePropertyCollectionList(props.parameter.options)) {
+		for (const option of props.parameter.options) {
+			if (option.name === optionName) {
+				return option;
 			}
+		}
+	}
+	return undefined;
+};
+const moveOptionDown = (optionName: string, index: number) => {
+	if (Array.isArray(mutableValues.value[optionName])) {
+		mutableValues.value[optionName].splice(
+			index + 1,
+			0,
+			mutableValues.value[optionName].splice(index, 1)[0],
+		);
+	}
 
-			const parameterData = {
-				name: this.getPropertyPath(optionName),
-				value: this.mutableValues[optionName],
-				type: 'optionsOrderChanged',
-			};
-
-			this.$emit('valueChanged', parameterData);
-		},
-		moveOptionUp(optionName: string, index: number) {
-			if (Array.isArray(this.mutableValues[optionName])) {
-				this.mutableValues?.[optionName].splice(
-					index - 1,
-					0,
-					this.mutableValues[optionName].splice(index, 1)[0],
-				);
-			}
+	const parameterData = {
+		name: getPropertyPath(optionName),
+		value: mutableValues.value[optionName],
+		type: 'optionsOrderChanged',
+	};
+
+	emit('valueChanged', parameterData);
+};
+const moveOptionUp = (optionName: string, index: number) => {
+	if (Array.isArray(mutableValues.value[optionName])) {
+		mutableValues.value?.[optionName].splice(
+			index - 1,
+			0,
+			mutableValues.value[optionName].splice(index, 1)[0],
+		);
+	}
 
-			const parameterData = {
-				name: this.getPropertyPath(optionName),
-				value: this.mutableValues[optionName],
-				type: 'optionsOrderChanged',
-			};
-
-			this.$emit('valueChanged', parameterData);
-		},
-		optionSelected(optionName: string) {
-			const option = this.getOptionProperties(optionName);
-			if (option === undefined) {
-				return;
-			}
-			const name = `${this.path}.${option.name}`;
-
-			const newParameterValue: INodeParameters = {};
-
-			for (const optionParameter of option.values) {
-				if (
-					optionParameter.type === 'fixedCollection' &&
-					optionParameter.typeOptions !== undefined &&
-					optionParameter.typeOptions.multipleValues === true
-				) {
-					newParameterValue[optionParameter.name] = {};
-				} else if (
-					optionParameter.typeOptions !== undefined &&
-					optionParameter.typeOptions.multipleValues === true
-				) {
-					// Multiple values are allowed so append option to array
-					const multiValue = get(this.nodeValues, [this.path, optionParameter.name], []);
-
-					if (Array.isArray(optionParameter.default)) {
-						multiValue.push(...deepCopy(optionParameter.default));
-					} else if (
-						optionParameter.default !== '' &&
-						typeof optionParameter.default !== 'object'
-					) {
-						multiValue.push(deepCopy(optionParameter.default));
-					}
-
-					newParameterValue[optionParameter.name] = multiValue;
-				} else {
-					// Add a new option
-					newParameterValue[optionParameter.name] = deepCopy(optionParameter.default);
-				}
+	const parameterData = {
+		name: getPropertyPath(optionName),
+		value: mutableValues.value[optionName],
+		type: 'optionsOrderChanged',
+	};
+
+	emit('valueChanged', parameterData);
+};
+const optionSelected = (optionName: string) => {
+	const option = getOptionProperties(optionName);
+	if (option === undefined) {
+		return;
+	}
+	const name = `${props.path}.${option.name}`;
+
+	const newParameterValue: INodeParameters = {};
+
+	for (const optionParameter of option.values) {
+		if (
+			optionParameter.type === 'fixedCollection' &&
+			optionParameter.typeOptions !== undefined &&
+			optionParameter.typeOptions.multipleValues === true
+		) {
+			newParameterValue[optionParameter.name] = {};
+		} else if (
+			optionParameter.typeOptions !== undefined &&
+			optionParameter.typeOptions.multipleValues === true
+		) {
+			// Multiple values are allowed so append option to array
+			const multiValue = get(props.nodeValues, [props.path, optionParameter.name], []);
+
+			if (Array.isArray(optionParameter.default)) {
+				multiValue.push(...deepCopy(optionParameter.default));
+			} else if (optionParameter.default !== '' && typeof optionParameter.default !== 'object') {
+				multiValue.push(deepCopy(optionParameter.default));
 			}
 
-			let newValue;
-			if (this.multipleValues) {
-				newValue = get(this.nodeValues, name, []) as INodeParameters[];
+			newParameterValue[optionParameter.name] = multiValue;
+		} else {
+			// Add a new option
+			newParameterValue[optionParameter.name] = deepCopy(optionParameter.default);
+		}
+	}
 
-				newValue.push(newParameterValue);
-			} else {
-				newValue = newParameterValue;
-			}
+	let newValue;
+	if (multipleValues) {
+		newValue = get(props.nodeValues, name, []) as INodeParameters[];
 
-			const parameterData = {
-				name,
-				value: newValue,
-			};
-
-			this.$emit('valueChanged', parameterData);
-			this.selectedOption = undefined;
-		},
-		valueChanged(parameterData: IUpdateInformation) {
-			this.$emit('valueChanged', parameterData);
-		},
-	},
-});
+		newValue.push(newParameterValue);
+	} else {
+		newValue = newParameterValue;
+	}
+
+	const parameterData = {
+		name,
+		value: newValue,
+	};
+
+	emit('valueChanged', parameterData);
+	selectedOption.value = undefined;
+};
+
+const valueChanged = (parameterData: IUpdateInformation) => {
+	emit('valueChanged', parameterData);
+};
 </script>
 
 <template>
-	<div
+	<LazyFixedCollectionParameter
 		class="fixed-collection-parameter"
-		:data-test-id="`fixed-collection-${parameter.name}`"
+		:data-test-id="`fixed-collection-${props.parameter?.name}`"
 		@keydown.stop
 	>
 		<div v-if="getProperties.length === 0" class="no-items-exist">
@@ -293,7 +274,7 @@ export default defineComponent({
 							text
 							size="mini"
 							icon="trash"
-							:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
+							:title="locale.baseText('fixedCollectionParameter.deleteItem')"
 							@click="deleteOption(property.name)"
 						></n8n-icon-button>
 					</div>
@@ -336,7 +317,7 @@ export default defineComponent({
 				</n8n-select>
 			</div>
 		</div>
-	</div>
+	</LazyFixedCollectionParameter>
 </template>
 
 <style scoped lang="scss">

From 0ea23dccd2c73fe97a1b616d325c714adbeacdc3 Mon Sep 17 00:00:00 2001
From: Shireen Missi <shireen@n8n.io>
Date: Tue, 5 Nov 2024 13:59:09 +0000
Subject: [PATCH 2/5] fixed linting issues

---
 .../components/FixedCollectionParameter.vue   | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 6eacccb980425..1671eaf139e56 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -1,7 +1,12 @@
 <script lang="ts" setup>
 import type { IUpdateInformation } from '@/Interface';
 
-import type { INodeParameters, INodeProperties, INodePropertyCollection } from 'n8n-workflow';
+import type {
+	INodeParameters,
+	INodeProperties,
+	INodePropertyCollection,
+	NodeParameterValueType,
+} from 'n8n-workflow';
 import { deepCopy, isINodePropertyCollectionList } from 'n8n-workflow';
 
 import { get } from 'lodash-es';
@@ -11,16 +16,26 @@ import { useI18n } from '@/composables/useI18n';
 
 const locale = useI18n();
 
-const props = defineProps<{
-	nodeValues: INodeParameters;
-	parameter: INodeProperties;
+const props = withDefaults(
+	defineProps<{
+		nodeValues: INodeParameters;
+		parameter: INodeProperties;
+		path: string;
+		values?: Record<string, INodeParameters[]>;
+		isReadOnly?: boolean;
+	}>(),
+	{
+		values: () => ({}),
+		isReadOnly: false,
+	},
+);
+type ValueChangedEvent = {
 	path: string;
-	values: Record<string, INodeParameters[]>;
-	isReadOnly: boolean | undefined;
-}>();
-
+	value: NodeParameterValueType;
+	type?: 'optionsOrderChanged';
+};
 const emit = defineEmits<{
-	valueChanged: [value?: any];
+	valueChanged: [value?: ValueChangedEvent];
 }>();
 
 const getPlaceholderText = computed(() => {
@@ -47,11 +62,11 @@ const multipleValues = computed(() => {
 	return !!props.parameter.typeOptions?.multipleValues;
 });
 const parameterOptions = computed(() => {
-	if (multipleValues && isINodePropertyCollectionList(props.parameter.options)) {
+	if (multipleValues.value && isINodePropertyCollectionList(props.parameter.options)) {
 		return props.parameter.options;
 	}
 
-	return (props.parameter.options as INodePropertyCollection[]).filter((option) => {
+	return (props.parameter.options ?? []).filter((option) => {
 		return !propertyNames.value.includes(option.name);
 	});
 });
@@ -169,8 +184,8 @@ const optionSelected = (optionName: string) => {
 		}
 	}
 
-	let newValue;
-	if (multipleValues) {
+	let newValue: NodeParameterValueType;
+	if (multipleValues.value) {
 		newValue = get(props.nodeValues, name, []) as INodeParameters[];
 
 		newValue.push(newParameterValue);

From 40ddf749bc71d433f98141037fbb1565939a1a65 Mon Sep 17 00:00:00 2001
From: Shireen Missi <shireen@n8n.io>
Date: Tue, 5 Nov 2024 17:42:32 +0000
Subject: [PATCH 3/5] Add Tests

---
 .../FixedCollectionParameter.test.ts          | 82 +++++++++++++++++++
 .../components/FixedCollectionParameter.vue   | 27 +++---
 2 files changed, 93 insertions(+), 16 deletions(-)
 create mode 100644 packages/editor-ui/src/components/FixedCollectionParameter.test.ts

diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.test.ts b/packages/editor-ui/src/components/FixedCollectionParameter.test.ts
new file mode 100644
index 0000000000000..441d92bbfab5a
--- /dev/null
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.test.ts
@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils';
+import FixedCollectionParameter from '@/components/FixedCollectionParameter.vue';
+import { createTestingPinia } from '@pinia/testing';
+import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import { STORES } from '@/constants';
+import { setActivePinia } from 'pinia';
+
+describe('FixedCollectionParameter.vue', () => {
+	const pinia = createTestingPinia({
+		initialState: {
+			[STORES.SETTINGS]: {
+				settings: SETTINGS_STORE_DEFAULT_STATE.settings,
+			},
+		},
+	});
+	setActivePinia(pinia);
+	let props: any;
+
+	beforeEach(() => {
+		props = {
+			nodeValues: {},
+			parameter: {
+				typeOptions: { multipleValues: true, sortable: true },
+				options: [{ name: 'values', values: [] }],
+			},
+			path: 'some.path',
+			values: {},
+			isReadOnly: false,
+		};
+		vi.mock('n8n-workflow', async () => {
+			const original = await vi.importActual('n8n-workflow');
+			return {
+				...original,
+				isINodePropertyCollectionList: vi.fn(() => true),
+			};
+		});
+	});
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('renders the component', () => {
+		const wrapper = mount(FixedCollectionParameter, { props });
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('computes placeholder text correctly', () => {
+		const wrapper = mount(FixedCollectionParameter, { props });
+		expect(wrapper.vm.getPlaceholderText).toBe('Choose...');
+	});
+
+	it('emits valueChanged event on option deletion', async () => {
+		const wrapper = mount(FixedCollectionParameter, { props });
+		await wrapper.vm.deleteOption('option1', 0);
+		expect(wrapper.emitted().valueChanged).toBeTruthy();
+	});
+
+	it('emits valueChanged event on option order change (moveOptionUp)', async () => {
+		const wrapper = mount(FixedCollectionParameter, { props });
+		await wrapper.vm.moveOptionUp('option1', 1);
+		expect(wrapper.emitted().valueChanged).toBeTruthy();
+	});
+
+	it('updates mutableValues when values prop changes', async () => {
+		const wrapper = mount(FixedCollectionParameter, { props });
+		const newValues = {
+			option1: [{ name: 'newOption', value: 'newValue' }],
+		};
+		await wrapper.setProps({ values: newValues });
+		expect(wrapper.vm.mutableValues).toEqual(newValues);
+	});
+
+	it('computes parameterOptions correctly when multiple values allowed', () => {
+		const wrapper = mount(FixedCollectionParameter, { props });
+		expect(wrapper.vm.parameterOptions).toContainEqual({ name: 'values', values: [] });
+	});
+
+	it('computes sortable correctly based on props', () => {
+		const wrapper = mount(FixedCollectionParameter, { props });
+		expect(wrapper.vm.sortable).toBe(true);
+	});
+});
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 1671eaf139e56..4b97b631ea163 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -1,12 +1,7 @@
 <script lang="ts" setup>
 import type { IUpdateInformation } from '@/Interface';
 
-import type {
-	INodeParameters,
-	INodeProperties,
-	INodePropertyCollection,
-	NodeParameterValueType,
-} from 'n8n-workflow';
+import type { INodeParameters, INodeProperties, NodeParameterValueType } from 'n8n-workflow';
 import { deepCopy, isINodePropertyCollectionList } from 'n8n-workflow';
 
 import { get } from 'lodash-es';
@@ -30,12 +25,12 @@ const props = withDefaults(
 	},
 );
 type ValueChangedEvent = {
-	path: string;
+	name: string;
 	value: NodeParameterValueType;
 	type?: 'optionsOrderChanged';
 };
 const emit = defineEmits<{
-	valueChanged: [value?: ValueChangedEvent];
+	valueChanged: [value: ValueChangedEvent];
 }>();
 
 const getPlaceholderText = computed(() => {
@@ -123,7 +118,7 @@ const moveOptionDown = (optionName: string, index: number) => {
 		);
 	}
 
-	const parameterData = {
+	const parameterData: ValueChangedEvent = {
 		name: getPropertyPath(optionName),
 		value: mutableValues.value[optionName],
 		type: 'optionsOrderChanged',
@@ -140,7 +135,7 @@ const moveOptionUp = (optionName: string, index: number) => {
 		);
 	}
 
-	const parameterData = {
+	const parameterData: ValueChangedEvent = {
 		name: getPropertyPath(optionName),
 		value: mutableValues.value[optionName],
 		type: 'optionsOrderChanged',
@@ -215,7 +210,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 	>
 		<div v-if="getProperties.length === 0" class="no-items-exist">
 			<n8n-text size="small">{{
-				$locale.baseText('fixedCollectionParameter.currentlyNoItemsExist')
+				locale.baseText('fixedCollectionParameter.currentlyNoItemsExist')
 			}}</n8n-text>
 		</div>
 
@@ -226,7 +221,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 		>
 			<n8n-input-label
 				v-if="property.displayName !== '' && parameter.options && parameter.options.length !== 1"
-				:label="$locale.nodeText().inputLabelDisplayName(property, path)"
+				:label="locale.nodeText().inputLabelDisplayName(property, path)"
 				:underline="true"
 				size="small"
 				color="text-dark"
@@ -246,7 +241,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 								text
 								size="mini"
 								icon="trash"
-								:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
+								:title="locale.baseText('fixedCollectionParameter.deleteItem')"
 								@click="deleteOption(property.name, index)"
 							></n8n-icon-button>
 							<n8n-icon-button
@@ -255,7 +250,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 								text
 								size="mini"
 								icon="angle-up"
-								:title="$locale.baseText('fixedCollectionParameter.moveUp')"
+								:title="locale.baseText('fixedCollectionParameter.moveUp')"
 								@click="moveOptionUp(property.name, index)"
 							></n8n-icon-button>
 							<n8n-icon-button
@@ -264,7 +259,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 								text
 								size="mini"
 								icon="angle-down"
-								:title="$locale.baseText('fixedCollectionParameter.moveDown')"
+								:title="locale.baseText('fixedCollectionParameter.moveDown')"
 								@click="moveOptionDown(property.name, index)"
 							></n8n-icon-button>
 						</div>
@@ -326,7 +321,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 					<n8n-option
 						v-for="item in parameterOptions"
 						:key="item.name"
-						:label="$locale.nodeText().collectionOptionDisplayName(parameter, item, path)"
+						:label="locale.nodeText().collectionOptionDisplayName(parameter, item, path)"
 						:value="item.name"
 					></n8n-option>
 				</n8n-select>

From 264df4d58d98ccf3cc4e8caf06a7a9b5a9e2d6f4 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 6 Nov 2024 10:25:06 +0100
Subject: [PATCH 4/5] Fix final TS issue

---
 .../src/components/FixedCollectionParameter.vue      | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 4b97b631ea163..bac104a5e5322 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -40,7 +40,7 @@ const getPlaceholderText = computed(() => {
 const mutableValues = ref({} as Record<string, INodeParameters[]>);
 const selectedOption = ref<string | null | undefined>(null);
 const propertyNames = computed(() => {
-	return Object.keys(mutableValues.value || {});
+	return new Set(Object.keys(mutableValues.value || {}));
 });
 const getProperties = computed(() => {
 	const returnProperties = [];
@@ -57,12 +57,14 @@ const multipleValues = computed(() => {
 	return !!props.parameter.typeOptions?.multipleValues;
 });
 const parameterOptions = computed(() => {
-	if (multipleValues.value && isINodePropertyCollectionList(props.parameter.options)) {
+	if (!isINodePropertyCollectionList(props.parameter.options)) return [];
+
+	if (multipleValues.value) {
 		return props.parameter.options;
 	}
 
 	return (props.parameter.options ?? []).filter((option) => {
-		return !propertyNames.value.includes(option.name);
+		return !propertyNames.value.has(option.name);
 	});
 });
 
@@ -203,7 +205,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 </script>
 
 <template>
-	<LazyFixedCollectionParameter
+	<div
 		class="fixed-collection-parameter"
 		:data-test-id="`fixed-collection-${props.parameter?.name}`"
 		@keydown.stop
@@ -327,7 +329,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 				</n8n-select>
 			</div>
 		</div>
-	</LazyFixedCollectionParameter>
+	</div>
 </template>
 
 <style scoped lang="scss">

From a2802e0a07db6f24c92854db8b9034fa93e1019c Mon Sep 17 00:00:00 2001
From: Shireen Missi <94372015+ShireenMissi@users.noreply.github.com>
Date: Wed, 6 Nov 2024 10:47:16 +0000
Subject: [PATCH 5/5] Update
 packages/editor-ui/src/components/FixedCollectionParameter.test.ts

---
 .../editor-ui/src/components/FixedCollectionParameter.test.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.test.ts b/packages/editor-ui/src/components/FixedCollectionParameter.test.ts
index 441d92bbfab5a..71376a3009c8c 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.test.ts
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.test.ts
@@ -14,7 +14,7 @@ describe('FixedCollectionParameter.vue', () => {
 		},
 	});
 	setActivePinia(pinia);
-	let props: any;
+	let props = {};
 
 	beforeEach(() => {
 		props = {