From cb28b5cd60a71ca38cc97ea27105dccc4b3112a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Tue, 5 Nov 2024 19:23:45 +0100
Subject: [PATCH] refactor(editor): Convert MultipleParameter to composition
 API (no-changelog) (#11568)

---
 .../src/components/MultipleParameter.test.ts  |  44 ++++
 .../src/components/MultipleParameter.vue      | 216 ++++++++----------
 .../MultipleParameter.test.ts.snap            |  17 ++
 3 files changed, 159 insertions(+), 118 deletions(-)
 create mode 100644 packages/editor-ui/src/components/MultipleParameter.test.ts
 create mode 100644 packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap

diff --git a/packages/editor-ui/src/components/MultipleParameter.test.ts b/packages/editor-ui/src/components/MultipleParameter.test.ts
new file mode 100644
index 00000000000..9772d0f99d0
--- /dev/null
+++ b/packages/editor-ui/src/components/MultipleParameter.test.ts
@@ -0,0 +1,44 @@
+import { createTestingPinia } from '@pinia/testing';
+
+import { createComponentRenderer } from '@/__tests__/render';
+import MultipleParameter from './MultipleParameter.vue';
+
+describe('MultipleParameter', () => {
+	const renderComponent = createComponentRenderer(MultipleParameter, {
+		props: {
+			path: 'parameters.additionalFields',
+			parameter: {
+				displayName: 'Additional Fields',
+				name: 'additionalFields',
+				type: 'collection',
+				options: [
+					{
+						displayName: 'Currency',
+						name: 'currency',
+						type: 'string',
+						default: 'USD',
+					},
+					{
+						displayName: 'Value',
+						name: 'value',
+						type: 'number',
+					},
+				],
+			},
+			nodeValues: {
+				parameters: {
+					additionalFields: {},
+				},
+			},
+			values: [],
+			isReadOnly: false,
+		},
+		pinia: createTestingPinia({ initialState: {} }),
+	});
+
+	it('should render correctly', () => {
+		const wrapper = renderComponent();
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});
diff --git a/packages/editor-ui/src/components/MultipleParameter.vue b/packages/editor-ui/src/components/MultipleParameter.vue
index a02b341983f..7959e099ef3 100644
--- a/packages/editor-ui/src/components/MultipleParameter.vue
+++ b/packages/editor-ui/src/components/MultipleParameter.vue
@@ -1,133 +1,113 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import type { IUpdateInformation } from '@/Interface';
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { get } from 'lodash-es';
 import type { INodeParameters, INodeProperties } from 'n8n-workflow';
 import { deepCopy } from 'n8n-workflow';
+
+import { useI18n } from '@/composables/useI18n';
+import type { IUpdateInformation } from '@/Interface';
 import CollectionParameter from '@/components/CollectionParameter.vue';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 
-import { get } from 'lodash-es';
+defineOptions({ name: 'MultipleParameter' });
 
-export default defineComponent({
-	name: 'MultipleParameter',
-	components: {
-		CollectionParameter,
-		ParameterInputFull,
+const props = withDefaults(
+	defineProps<{
+		nodeValues: INodeParameters;
+		parameter: INodeProperties;
+		path: string;
+		values?: INodeParameters[];
+		isReadOnly?: boolean;
+	}>(),
+	{
+		values: () => [] as INodeParameters[],
+		isReadOnly: false,
 	},
-	props: {
-		nodeValues: {
-			type: Object as PropType<INodeParameters>,
-			required: true,
-		},
-		parameter: {
-			type: Object as PropType<INodeProperties>,
-			required: true,
-		},
-		path: {
-			type: String,
-			required: true,
-		},
-		values: {
-			type: Array as PropType<INodeParameters[]>,
-			default: () => [],
-		},
-		isReadOnly: {
-			type: Boolean,
-			default: false,
-		},
+);
+
+const emit = defineEmits<{
+	valueChanged: [parameterData: IUpdateInformation];
+}>();
+
+const i18n = useI18n();
+
+const mutableValues = ref<INodeParameters[]>(deepCopy(props.values));
+
+watch(
+	() => props.values,
+	(newValues) => {
+		mutableValues.value = deepCopy(newValues);
 	},
-	data() {
-		return {
-			mutableValues: [] as INodeParameters[],
-		};
-	},
-	computed: {
-		addButtonText(): string {
-			if (
-				!this.parameter.typeOptions ||
-				(this.parameter.typeOptions && !this.parameter.typeOptions.multipleValueButtonText)
-			) {
-				return this.$locale.baseText('multipleParameter.addItem');
-			}
+	{ deep: true },
+);
 
-			return this.$locale.nodeText().multipleValueButtonText(this.parameter);
-		},
-		hideDelete(): boolean {
-			return this.parameter.options?.length === 1;
-		},
-		sortable(): boolean {
-			return !!this.parameter.typeOptions?.sortable;
-		},
-	},
-	watch: {
-		values: {
-			handler(newValues: INodeParameters[]) {
-				this.mutableValues = deepCopy(newValues);
-			},
-			deep: true,
-		},
-	},
-	created() {
-		this.mutableValues = deepCopy(this.values);
-	},
-	methods: {
-		addItem() {
-			const name = this.getPath();
-			const currentValue = get(this.nodeValues, name, []) as INodeParameters[];
+const addButtonText = computed(() => {
+	if (!props.parameter.typeOptions || !props.parameter.typeOptions.multipleValueButtonText) {
+		return i18n.baseText('multipleParameter.addItem');
+	}
 
-			currentValue.push(deepCopy(this.parameter.default as INodeParameters));
-
-			const parameterData = {
-				name,
-				value: currentValue,
-			};
-
-			this.$emit('valueChanged', parameterData);
-		},
-		deleteItem(index: number) {
-			const parameterData = {
-				name: this.getPath(index),
-				value: undefined,
-			};
-
-			this.$emit('valueChanged', parameterData);
-		},
-		getPath(index?: number): string {
-			return this.path + (index !== undefined ? `[${index}]` : '');
-		},
-		moveOptionDown(index: number) {
-			this.mutableValues.splice(index + 1, 0, this.mutableValues.splice(index, 1)[0]);
-
-			const parameterData = {
-				name: this.path,
-				value: this.mutableValues,
-			};
-
-			this.$emit('valueChanged', parameterData);
-		},
-		moveOptionUp(index: number) {
-			this.mutableValues.splice(index - 1, 0, this.mutableValues.splice(index, 1)[0]);
-
-			const parameterData = {
-				name: this.path,
-				value: this.mutableValues,
-			};
-
-			this.$emit('valueChanged', parameterData);
-		},
-		valueChanged(parameterData: IUpdateInformation) {
-			this.$emit('valueChanged', parameterData);
-		},
-	},
+	return i18n.nodeText().multipleValueButtonText(props.parameter);
 });
+
+const hideDelete = computed(() => props.parameter.options?.length === 1);
+
+const sortable = computed(() => !!props.parameter.typeOptions?.sortable);
+
+const addItem = () => {
+	const name = getPath();
+	const currentValue = get(props.nodeValues, name, []) as INodeParameters[];
+
+	currentValue.push(deepCopy(props.parameter.default as INodeParameters));
+
+	const parameterData = {
+		name,
+		value: currentValue,
+	};
+
+	emit('valueChanged', parameterData);
+};
+
+const deleteItem = (index: number) => {
+	const parameterData = {
+		name: getPath(index),
+		value: undefined,
+	};
+
+	emit('valueChanged', parameterData);
+};
+
+const getPath = (index?: number) => {
+	return props.path + (index !== undefined ? `[${index}]` : '');
+};
+
+const moveOptionDown = (index: number) => {
+	mutableValues.value.splice(index + 1, 0, mutableValues.value.splice(index, 1)[0]);
+
+	emit('valueChanged', {
+		name: props.path,
+		value: mutableValues.value,
+	});
+};
+
+const moveOptionUp = (index: number) => {
+	mutableValues.value.splice(index - 1, 0, mutableValues.value.splice(index, 1)[0]);
+
+	emit('valueChanged', {
+		name: props.path,
+		value: mutableValues.value,
+	});
+};
+
+const valueChanged = (parameterData: IUpdateInformation) => {
+	emit('valueChanged', parameterData);
+};
 </script>
 
 <template>
 	<div class="duplicate-parameter" @keydown.stop>
 		<n8n-input-label
-			:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-			:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
+			:label="i18n.nodeText().inputLabelDisplayName(parameter, path)"
+			:tooltip-text="i18n.nodeText().inputLabelDescription(parameter, path)"
 			:underline="true"
 			size="small"
 			color="text-dark"
@@ -142,7 +122,7 @@ export default defineComponent({
 			<div v-if="!isReadOnly" class="delete-item clickable">
 				<font-awesome-icon
 					icon="trash"
-					:title="$locale.baseText('multipleParameter.deleteItem')"
+					:title="i18n.baseText('multipleParameter.deleteItem')"
 					@click="deleteItem(index)"
 				/>
 				<div v-if="sortable">
@@ -150,14 +130,14 @@ export default defineComponent({
 						v-if="index !== 0"
 						icon="angle-up"
 						class="clickable"
-						:title="$locale.baseText('multipleParameter.moveUp')"
+						:title="i18n.baseText('multipleParameter.moveUp')"
 						@click="moveOptionUp(index)"
 					/>
 					<font-awesome-icon
 						v-if="index !== mutableValues.length - 1"
 						icon="angle-down"
 						class="clickable"
-						:title="$locale.baseText('multipleParameter.moveDown')"
+						:title="i18n.baseText('multipleParameter.moveDown')"
 						@click="moveOptionDown(index)"
 					/>
 				</div>
@@ -194,7 +174,7 @@ export default defineComponent({
 				class="no-items-exist"
 			>
 				<n8n-text size="small">{{
-					$locale.baseText('multipleParameter.currentlyNoItemsExist')
+					i18n.baseText('multipleParameter.currentlyNoItemsExist')
 				}}</n8n-text>
 			</div>
 			<n8n-button
diff --git a/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap
new file mode 100644
index 00000000000..5321a5b16a4
--- /dev/null
+++ b/packages/editor-ui/src/components/__snapshots__/MultipleParameter.test.ts.snap
@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MultipleParameter > should render correctly 1`] = `
+"<div data-v-a47e4507="" class="duplicate-parameter">
+  <div data-v-a47e4507="" class="container" data-test-id="input-label"><label class="n8n-input-label inputLabel heading underline small">
+      <div class="title"><span class="n8n-text text-dark size-small bold">Additional Fields <!--v-if--></span></div>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </label></div>
+  <div data-v-a47e4507="" class="add-item-wrapper">
+    <div data-v-a47e4507="" class="no-items-exist"><span data-v-a47e4507="" class="n8n-text size-small regular">Currently no items exist</span></div><button data-v-a47e4507="" class="button button tertiary medium block" aria-live="polite">
+      <!--v-if--><span>Add item</span>
+    </button>
+  </div>
+</div>"
+`;