feat: Add assignment component with drag and drop to Set node

cypress/e2e/13-pinning.cy.ts

@@ -157,22 +157,24 @@ describe('Data pinning', () => {
 
 		workflowPage.actions.executeWorkflow();
 
-		cy.request('GET', `${BACKEND_BASE_URL}/webhook-test/b0d79ddb-df2d-49b1-8555-9fa2b482608f`).then((response) => {
-			expect(response.status).to.eq(200);
-		});
+		cy.request('GET', `${BACKEND_BASE_URL}/webhook-test/b0d79ddb-df2d-49b1-8555-9fa2b482608f`).then(
+			(response) => {
+				expect(response.status).to.eq(200);
+			},
+		);
 
 		workflowPage.actions.openNode('End');
 
-		ndv.getters.outputTableRow(1).should('exist')
+		ndv.getters.outputTableRow(1).should('exist');
 		ndv.getters.outputTableRow(1).should('have.text', 'pin-overwritten');
 	});
 });
 
 function setExpressionOnStringValueInSet(expression: string) {
 	cy.get('button').contains('Test step').click();
-	cy.get('.fixed-collection-parameter > :nth-child(2) > .button > span').click();
 
-	ndv.getters.nthParam(4).contains('Expression').invoke('show').click();
+	ndv.getters.assignmentCollectionAdd('assignments').click();
+	ndv.getters.assignmentValue('assignments').contains('Expression').invoke('show').click();
 
 	ndv.getters
 		.inlineExpressionEditorInput()

cypress/e2e/14-data-transformation-expressions.cy.ts

@@ -1,4 +1,5 @@
 import { WorkflowPage, NDV } from '../pages';
+import { getVisibleSelect } from '../utils';
 
 const wf = new WorkflowPage();
 const ndv = new NDV();
@@ -104,8 +105,7 @@ describe('Data transformation expressions', () => {
 
 const addEditFields = () => {
 	wf.actions.addNodeToCanvas('Edit Fields', true, true);
-	cy.get('.fixed-collection-parameter > :nth-child(2) > .button > span').click();
-	ndv.getters.parameterInput('include').click(); // shorten output
-	cy.get('div').contains('No Input Fields').click();
-	ndv.getters.nthParam(4).contains('Expression').invoke('show').click();
+	ndv.getters.parameterInput('keepOnlySetFields').click();
+	ndv.getters.assignmentCollectionAdd('assignments').click();
+	ndv.getters.assignmentValue('assignments').contains('Expression').invoke('show').click();
 };

cypress/e2e/16-webhook-node.cy.ts

@@ -181,9 +181,10 @@ describe('Webhook Trigger node', async () => {
 
 		workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
 		workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME);
-		cy.get('.fixed-collection-parameter > :nth-child(2) > .button > span').click();
-		ndv.getters.nthParam(2).type('data');
-		ndv.getters.nthParam(4).invoke('val', cowBase64).trigger('blur');
+		ndv.getters.assignmentCollectionAdd('assignments').click();
+		ndv.getters.assignmentName('assignments').type('data');
+		ndv.getters.assignmentType('assignments').click();
+		ndv.getters.assignmentValue('assignments').paste(cowBase64);
 
 		ndv.getters.backToCanvas().click();
 
@@ -311,9 +312,9 @@ describe('Webhook Trigger node', async () => {
 const addEditFields = () => {
 	workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
 	workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME);
-	cy.get('.fixed-collection-parameter > :nth-child(2) > .button > span').click();
-	ndv.getters.nthParam(2).type('MyValue');
-	ndv.getters.nthParam(3).click();
-	cy.get('div').contains('Number').click();
-	ndv.getters.nthParam(4).type('1234');
+	ndv.getters.assignmentCollectionAdd('assignments').click();
+	ndv.getters.assignmentName('assignments').type('MyValue');
+	ndv.getters.assignmentType('assignments').click();
+	getVisibleSelect().find('li').contains('Number').click();
+	ndv.getters.assignmentValue('assignments').type('1234');
 };

cypress/e2e/5-ndv.cy.ts

@@ -306,7 +306,7 @@ describe('NDV', () => {
 
 		ndv.getters.parameterInput('remoteOptions').click();
 
-		ndv.getters.parameterInputIssues('remoteOptions').realHover({ scrollBehavior: false});
+		ndv.getters.parameterInputIssues('remoteOptions').realHover({ scrollBehavior: false });
 		// Remote options dropdown should not be visible
 		ndv.getters.parameterInput('remoteOptions').find('.el-select').should('not.exist');
 	});
@@ -509,12 +509,12 @@ describe('NDV', () => {
 
 		workflowPage.actions.openNode('Edit Fields (old)');
 		ndv.actions.openSettings();
-		ndv.getters.nodeVersion().should('have.text', 'Set node version 2 (Latest version: 3.2)');
+		ndv.getters.nodeVersion().should('have.text', 'Set node version 2 (Latest version: 3.3)');
 		ndv.actions.close();
 
 		workflowPage.actions.openNode('Edit Fields (latest)');
 		ndv.actions.openSettings();
-		ndv.getters.nodeVersion().should('have.text', 'Edit Fields (Set) node version 3.2 (Latest)');
+		ndv.getters.nodeVersion().should('have.text', 'Edit Fields (Set) node version 3.3 (Latest)');
 		ndv.actions.close();
 
 		workflowPage.actions.openNode('Function');

cypress/fixtures/Test_workflow_ndv_version.json

@@ -37,7 +37,7 @@
 		"id": "93aaadac-55fe-4618-b1eb-f63e61d1446a",
 		"name": "Edit Fields (latest)",
 		"type": "n8n-nodes-base.set",
-		"typeVersion": 3.2,
+		"typeVersion": 3.3,
 		"position": [
 		  1720,
 		  780

cypress/pages/ndv.ts

@@ -94,6 +94,20 @@ export class NDV extends BasePage {
 			this.getters.filterComponent(paramName).getByTestId('filter-remove-condition').eq(index),
 		filterConditionAdd: (paramName: string) =>
 			this.getters.filterComponent(paramName).getByTestId('filter-add-condition'),
+		assignmentCollection: (paramName: string) =>
+			cy.getByTestId(`assignment-collection-${paramName}`),
+		assignmentCollectionAdd: (paramName: string) =>
+			this.getters.assignmentCollection(paramName).getByTestId('assignment-collection-drop-area'),
+		assignment: (paramName: string, index = 0) =>
+			this.getters.assignmentCollection(paramName).getByTestId('assignment').eq(index),
+		assignmentRemove: (paramName: string, index = 0) =>
+			this.getters.assignment(paramName, index).getByTestId('assignment-remove'),
+		assignmentName: (paramName: string, index = 0) =>
+			this.getters.assignment(paramName, index).getByTestId('assignment-name'),
+		assignmentValue: (paramName: string, index = 0) =>
+			this.getters.assignment(paramName, index).getByTestId('assignment-value'),
+		assignmentType: (paramName: string, index = 0) =>
+			this.getters.assignment(paramName, index).getByTestId('assignment-type-select'),
 		searchInput: () => cy.getByTestId('ndv-search'),
 		pagination: () => cy.getByTestId('ndv-data-pagination'),
 		nodeVersion: () => cy.getByTestId('node-version'),
@@ -235,6 +249,9 @@ export class NDV extends BasePage {
 		removeFilterCondition: (paramName: string, index: number) => {
 			this.getters.filterConditionRemove(paramName, index).click();
 		},
+		removeAssignment: (paramName: string, index: number) => {
+			this.getters.assignmentRemove(paramName, index).click();
+		},
 		setInvalidExpression: ({
 			fieldName,
 			invalidExpression,

packages/design-system/src/css/_primitives.scss

@@ -46,6 +46,12 @@
 		var(--prim-color-primary-s),
 		var(--prim-color-primary-l)
 	);
+	--prim-color-primary-alpha-010: hsla(
+		var(--prim-color-primary-h),
+		var(--prim-color-primary-s),
+		var(--prim-color-primary-l),
+		0.1
+	);
 	--prim-color-primary-tint-100: hsl(
 		var(--prim-color-primary-h),
 		var(--prim-color-primary-s),
@@ -93,6 +99,12 @@
 		var(--prim-color-secondary-l),
 		0.25
 	);
+	--prim-color-secondary-alpha-010: hsla(
+		var(--prim-color-secondary-h),
+		var(--prim-color-secondary-s),
+		var(--prim-color-secondary-l),
+		0.1
+	);
 	--prim-color-secondary-tint-100: hsl(
 		var(--prim-color-secondary-h),
 		var(--prim-color-secondary-s),
@@ -140,6 +152,12 @@
 		var(--prim-color-alt-a-l),
 		0.25
 	);
+	--prim-color-alt-a-alpha-015: hsl(
+		var(--prim-color-alt-a-h),
+		var(--prim-color-alt-a-s),
+		var(--prim-color-alt-a-l),
+		0.15
+	);
 	--prim-color-alt-a-tint-300: hsl(
 		var(--prim-color-alt-a-h),
 		var(--prim-color-alt-a-s),

packages/design-system/src/css/_tokens.dark.scss

@@ -131,6 +131,8 @@
 	// NDV
 	--color-run-data-background: var(--prim-gray-800);
 	--color-ndv-droppable-parameter: var(--prim-color-primary);
+	--color-ndv-droppable-parameter-background: var(--prim-color-primary-alpha-010);
+	--color-ndv-droppable-parameter-active-background: var(--prim-color-alt-a-alpha-015);
 	--color-ndv-back-font: var(--prim-gray-0);
 	--color-ndv-ouptut-error-font: var(--prim-color-alt-c-tint-150);
 

packages/design-system/src/css/_tokens.scss

@@ -201,6 +201,8 @@
 	// NDV
 	--color-run-data-background: var(--color-background-base);
 	--color-ndv-droppable-parameter: var(--color-secondary);
+	--color-ndv-droppable-parameter-background: var(--prim-color-secondary-alpha-010);
+	--color-ndv-droppable-parameter-active-background: var(--prim-color-alt-a-alpha-015);
 	--color-ndv-back-font: var(--prim-gray-0);
 	--color-ndv-ouptut-error-font: var(--prim-color-alt-c);
 

packages/editor-ui/src/Interface.ts

@@ -1235,8 +1235,8 @@ export interface NDVState {
 		isDragging: boolean;
 		type: string;
 		data: string;
-		activeTargetId: string | null;
-		stickyPosition: null | XYPosition;
+		dimensions: DOMRect | null;
+		activeTarget: { id: string; stickyPosition: null | XYPosition } | null;
 	};
 	isMappingOnboarded: boolean;
 }