feat: Add assignment component with drag and drop to Set node (#8283)

Co-authored-by: Giulio Andreini <andreini@netseven.it>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import DraggableTarget from '@/components/DraggableTarget.vue';
+
+const emit = defineEmits<{ (event: 'drop', value: string): void }>();
+
+const onDrop = (value: string) => {
+	emit('drop', value);
+};
+</script>
+
+<template>
+	<DraggableTarget type="mapping" @drop="onDrop">
+		<template #default="{ droppable, activeDrop }">
+			<div
+				data-test-id="drop-area"
+				:class="{ [$style.area]: true, [$style.active]: activeDrop, [$style.droppable]: droppable }"
+			>
+				<slot :active="activeDrop" :droppable="droppable"></slot>
+			</div>
+		</template>
+	</DraggableTarget>
+</template>
+
+<style lang="scss" module>
+.area {
+	border: dashed 1px var(--color-foreground-dark);
+	border-radius: var(--border-radius-large);
+	background: var(--color-background-light);
+	padding: var(--spacing-s) var(--spacing-m);
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+	font-size: var(--font-size-s);
+	transition: border-color 0.1s ease-in;
+	box-shadow: inset 0 0 0px 1.5px var(--color-background-xlight);
+
+	&:not(.active):hover {
+		border-color: var(--color-ndv-droppable-parameter);
+		background: var(--color-ndv-droppable-parameter-background);
+	}
+}
+
+.droppable {
+	border-color: var(--color-ndv-droppable-parameter);
+	border-width: 1.5px;
+	background: var(--color-ndv-droppable-parameter-background);
+}
+
+.active {
+	border-color: var(--color-success);
+	background: var(--color-ndv-droppable-parameter-active-background);
+}
+</style>

packages/editor-ui/src/components/DropArea/__tests__/DropArea.test.ts

@@ -0,0 +1,40 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import { useNDVStore } from '@/stores/ndv.store';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { fireEvent } from '@testing-library/vue';
+import { createPinia, setActivePinia } from 'pinia';
+import DropArea from '../DropArea.vue';
+
+const renderComponent = createComponentRenderer(DropArea, {
+	pinia: createTestingPinia(),
+});
+
+async function fireDrop(dropArea: HTMLElement): Promise<void> {
+	useNDVStore().draggableStartDragging({
+		type: 'mapping',
+		data: '{{ $json.something }}',
+		dimensions: null,
+	});
+
+	await userEvent.hover(dropArea);
+	await fireEvent.mouseUp(dropArea);
+}
+
+describe('DropArea.vue', () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('renders default state correctly and emits drop events', async () => {
+		const pinia = createPinia();
+		setActivePinia(pinia);
+
+		const { getByTestId, emitted } = renderComponent({ pinia });
+		expect(getByTestId('drop-area')).toBeInTheDocument();
+
+		await fireDrop(getByTestId('drop-area'));
+
+		expect(emitted('drop')).toEqual([['{{ $json.something }}']]);
+	});
+});