refactor(editor): Migrate FixedCollectionParameter to composition API

packages/editor-ui/src/components/FixedCollectionParameter.test.ts

@@ -0,0 +1,83 @@
+import { renderComponent } from '@/__tests__/render';
+import FixedCollectionParameter from './FixedCollectionParameter.vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { createAppModals } from '@/__tests__/utils';
+
+describe('FixedCollectionParameter', () => {
+	beforeEach(() => {
+		createAppModals();
+		const pinia = createPinia();
+		setActivePinia(pinia);
+	});
+
+	it('renders default options correctly', () => {
+		const { html } = renderComponent(FixedCollectionParameter, {
+			global: {
+				stubs: ['ParameterInputList'],
+			},
+			props: {
+				parameter: {
+					displayName: 'Categories',
+					name: 'categories',
+					placeholder: 'Add Category',
+					type: 'fixedCollection',
+					default: {},
+					typeOptions: { multipleValues: true },
+					options: [
+						{
+							name: 'categories',
+							displayName: 'Categories',
+							values: [
+								{
+									displayName: 'Category',
+									name: 'category',
+									type: 'string',
+									default: '',
+									description: 'Category to add',
+									required: true,
+								},
+								{
+									displayName: 'Description',
+									name: 'description',
+									type: 'string',
+									default: '',
+									description: "Describe your category if it's not obvious",
+								},
+							],
+						},
+					],
+				},
+				nodeValues: {
+					color: '#ff0000',
+					alwaysOutputData: false,
+					executeOnce: false,
+					notesInFlow: false,
+					onError: 'stopWorkflow',
+					retryOnFail: false,
+					maxTries: 3,
+					waitBetweenTries: 1000,
+					notes: '',
+					parameters: {
+						inputText: '',
+						categories: {
+							categories: [
+								{ category: 'One', description: 'Category one' },
+								{ category: 'Two', description: 'New Category two' },
+							],
+						},
+						options: {},
+					},
+				},
+				path: 'parameters.categories',
+				values: {
+					categories: [
+						{ category: 'One', description: 'Category one' },
+						{ category: 'Two', description: 'New Category two' },
+					],
+				},
+				isReadonly: false,
+			},
+		});
+		console.log(html);
+	});
+});

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

@@ -1,159 +1,148 @@
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
+import { useI18n } from '@/composables/useI18n';
-import type { PropType } from 'vue';
+import { onMounted, watch } from 'vue';
+import { deepCopy, isINodePropertyCollectionList } from 'n8n-workflow';
+import type { INodeParameters, INodeProperties, INodePropertyCollection } from 'n8n-workflow';
+import { computed, ref } from 'vue';
+import { get } from 'lodash-es';
 import type { IUpdateInformation } from '@/Interface';
 
-import type { INodeParameters, INodeProperties, INodePropertyCollection } from 'n8n-workflow';
+interface Props {
-import { deepCopy, isINodePropertyCollectionList } from 'n8n-workflow';
+	nodeValues: INodeParameters;
+	parameter: INodeProperties;
+	path: string;
+	values?: Record<string, INodeParameters[]>;
+	isReadOnly?: boolean;
+}
 
-import { get } from 'lodash-es';
+const props = withDefaults(defineProps<Props>(), {
+	values: () => ({}),
+	isReadOnly: false,
+});
 
-export default defineComponent({
+const emit = defineEmits<{
-	name: 'FixedCollectionParameter',
+	valueChanged: [value: IUpdateInformation];
-	props: {
+}>();
-		nodeValues: {
+
-			type: Object as PropType<INodeParameters>,
+const i18n = useI18n();
-			required: true,
+
-		},
+const selectedOption = ref<string | undefined>(undefined);
-		parameter: {
+const mutableValues = ref<Record<string, INodeParameters[]>>(deepCopy(props.values));
-			type: Object as PropType<INodeProperties>,
+
-			required: true,
+const placeholderText = computed(() => {
-		},
+	const placeholder = i18n.nodeText().placeholder(props.parameter, props.path);
-		path: {
+	return placeholder ? placeholder : i18n.baseText('fixedCollectionParameter.choose');
-			type: String,
+});
-			required: true,
+
-		},
+const getProperties = computed(() => {
-		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) {
+	for (const name of propertyNames.value) {
-				tempProperties = this.getOptionProperties(name);
+		tempProperties = getOptionProperties(name);
 		if (tempProperties !== undefined) {
 			returnProperties.push(tempProperties);
 		}
 	}
 	return returnProperties;
-		},
+});
-		multipleValues(): boolean {
+
-			return !!this.parameter.typeOptions?.multipleValues;
+const parameterOptions = computed(() => {
-		},
+	if (multipleValues.value && isINodePropertyCollectionList(props.parameter.options)) {
-		parameterOptions(): INodePropertyCollection[] {
+		return props.parameter.options;
-			if (this.multipleValues && isINodePropertyCollectionList(this.parameter.options)) {
-				return this.parameter.options;
 	}
 
-			return (this.parameter.options as INodePropertyCollection[]).filter((option) => {
+	return (props.parameter.options as INodePropertyCollection[]).filter((option) => {
-				return !this.propertyNames.includes(option.name);
+		return !propertyNames.value.includes(option.name);
 	});
+});
+
+const multipleValues = computed(() => !!props.parameter.typeOptions?.multipleValues);
+const propertyNames = computed(() => Object.keys(mutableValues.value || {}));
+const sortable = computed(() => !!props.parameter.typeOptions?.sortable);
+
+// TODO: Test this
+watch(
+	() => props.values,
+	(newValues: Record<string, INodeParameters[]>) => {
+		mutableValues.value = deepCopy(newValues);
 	},
-		propertyNames(): string[] {
+	{ deep: true },
-			return Object.keys(this.mutableValues || {});
+);
-		},
+
-		sortable(): boolean {
+const deleteOption = (optionName: string, index?: number) => {
-			return !!this.parameter.typeOptions?.sortable;
+	const currentOptionsOfSameType = mutableValues.value[optionName];
-		},
-	},
-	watch: {
-		values: {
-			handler(newValues: Record<string, INodeParameters[]>) {
-				this.mutableValues = deepCopy(newValues);
-			},
-			deep: true,
-		},
-	},
-	created() {
-		this.mutableValues = deepCopy(this.values);
-	},
-	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', {
+		emit('valueChanged', {
-					name: this.getPropertyPath(optionName, index),
+			name: getPropertyPath(optionName, index),
 			value: undefined,
 		});
 	} else {
 		// it's the only option, so remove the whole type
-				this.$emit('valueChanged', {
+		emit('valueChanged', {
-					name: this.getPropertyPath(optionName),
+			name: getPropertyPath(optionName),
 			value: undefined,
 		});
 	}
-		},
+};
-		getPropertyPath(name: string, index?: number) {
+
-			return `${this.path}.${name}` + (index !== undefined ? `[${index}]` : '');
+const getPropertyPath = (name: string, index?: number) => {
-		},
+	return `${props.path}.${name}` + (index !== undefined ? `[${index}]` : '');
-		getOptionProperties(optionName: string): INodePropertyCollection | undefined {
+};
-			if (isINodePropertyCollectionList(this.parameter.options)) {
+
-				for (const option of this.parameter.options) {
+const getOptionProperties = (optionName: string): INodePropertyCollection | undefined => {
+	if (isINodePropertyCollectionList(props.parameter.options)) {
+		for (const option of props.parameter.options) {
 			if (option.name === optionName) {
 				return option;
 			}
 		}
 	}
 	return undefined;
-		},
+};
-		moveOptionDown(optionName: string, index: number) {
+
-			if (Array.isArray(this.mutableValues[optionName])) {
+const moveOptionDown = (optionName: string, index: number) => {
-				this.mutableValues[optionName].splice(
+	if (Array.isArray(mutableValues.value[optionName])) {
+		mutableValues.value[optionName].splice(
 			index + 1,
 			0,
-					this.mutableValues[optionName].splice(index, 1)[0],
+			mutableValues.value[optionName].splice(index, 1)[0],
 		);
 	}
 
-			const parameterData = {
+	const parameterData: IUpdateInformation = {
-				name: this.getPropertyPath(optionName),
+		name: getPropertyPath(optionName),
-				value: this.mutableValues[optionName],
+		value: mutableValues.value[optionName],
 		type: 'optionsOrderChanged',
 	};
 
-			this.$emit('valueChanged', parameterData);
+	emit('valueChanged', parameterData);
-		},
+};
-		moveOptionUp(optionName: string, index: number) {
+
-			if (Array.isArray(this.mutableValues[optionName])) {
+const moveOptionUp = (optionName: string, index: number) => {
-				this.mutableValues?.[optionName].splice(
+	if (Array.isArray(mutableValues.value[optionName])) {
+		mutableValues.value?.[optionName].splice(
 			index - 1,
 			0,
-					this.mutableValues[optionName].splice(index, 1)[0],
+			mutableValues.value[optionName].splice(index, 1)[0],
 		);
 	}
 
-			const parameterData = {
+	const parameterData: IUpdateInformation = {
-				name: this.getPropertyPath(optionName),
+		name: getPropertyPath(optionName),
-				value: this.mutableValues[optionName],
+		value: mutableValues.value[optionName],
 		type: 'optionsOrderChanged',
 	};
 
-			this.$emit('valueChanged', parameterData);
+	emit('valueChanged', parameterData);
-		},
+};
-		optionSelected(optionName: string) {
+
-			const option = this.getOptionProperties(optionName);
+const optionSelected = (optionName: string) => {
+	const option = getOptionProperties(optionName);
 	if (option === undefined) {
 		return;
 	}
-			const name = `${this.path}.${option.name}`;
+	const name = `${props.path}.${option.name}`;
 
 	const newParameterValue: INodeParameters = {};
 
@@ -169,14 +158,11 @@ export default defineComponent({
 			optionParameter.typeOptions.multipleValues === true
 		) {
 			// Multiple values are allowed so append option to array
-					const multiValue = get(this.nodeValues, [this.path, optionParameter.name], []);
+			const multiValue = get(props.nodeValues, [props.path, optionParameter.name], []);
 
 			if (Array.isArray(optionParameter.default)) {
 				multiValue.push(...deepCopy(optionParameter.default));
-					} else if (
+			} else if (optionParameter.default !== '' && typeof optionParameter.default !== 'object') {
-						optionParameter.default !== '' &&
-						typeof optionParameter.default !== 'object'
-					) {
 				multiValue.push(deepCopy(optionParameter.default));
 			}
 
@@ -188,8 +174,8 @@ export default defineComponent({
 	}
 
 	let newValue;
-			if (this.multipleValues) {
+	if (multipleValues.value) {
-				newValue = get(this.nodeValues, name, []) as INodeParameters[];
+		newValue = get(props.nodeValues, name, []) as INodeParameters[];
 
 		newValue.push(newParameterValue);
 	} else {
@@ -201,14 +187,13 @@ export default defineComponent({
 		value: newValue,
 	};
 
-			this.$emit('valueChanged', parameterData);
+	emit('valueChanged', parameterData);
-			this.selectedOption = undefined;
+	selectedOption.value = undefined;
-		},
+};
-		valueChanged(parameterData: IUpdateInformation) {
+
-			this.$emit('valueChanged', parameterData);
+const valueChanged = (parameterData: IUpdateInformation) => {
-		},
+	emit('valueChanged', parameterData);
-	},
+};
-});
 </script>
 
 <template>
@@ -316,13 +301,13 @@ export default defineComponent({
 				type="tertiary"
 				block
 				data-test-id="fixed-collection-add"
-				:label="getPlaceholderText"
+				:label="placeholderText"
 				@click="optionSelected(parameter.options[0].name)"
 			/>
 			<div v-else class="add-option">
 				<n8n-select
 					v-model="selectedOption"
-					:placeholder="getPlaceholderText"
+					:placeholder="placeholderText"
 					size="small"
 					filterable
 					@update:model-value="optionSelected"