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

Co-authored-by: Giulio Andreini <andreini@netseven.it>
n8n-io · Feb 6, 2024 · 2799de4 · 2799de4
1 parent c04f92f
commit 2799de4
Show file tree

Hide file tree

Showing 53 changed files with 3,295 additions and 1,059 deletions.
diff --git a/cypress/e2e/13-pinning.cy.ts b/cypress/e2e/13-pinning.cy.ts
@@ -188,9 +188,9 @@ describe('Data pinning', () => {
 
 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()

diff --git a/cypress/e2e/14-data-transformation-expressions.cy.ts b/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,6 @@ 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.assignmentCollectionAdd('assignments').click();
+	ndv.getters.assignmentValue('assignments').contains('Expression').invoke('show').click();
 };
diff --git a/cypress/e2e/16-webhook-node.cy.ts b/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');
 };
diff --git a/cypress/e2e/5-ndv.cy.ts b/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');

diff --git a/cypress/fixtures/Test_workflow_ndv_version.json b/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

diff --git a/cypress/pages/ndv.ts b/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,

diff --git a/packages/design-system/src/css/_primitives.scss b/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),

diff --git a/packages/design-system/src/css/_tokens.dark.scss b/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);
 
@@ -174,6 +176,9 @@
 	// Action Dropdown
 	--color-action-dropdown-item-active-background: var(--color-background-xlight);
 
+	// Input Triple
+	--color-background-input-triple: var(--prim-gray-800);
+
 	// Various
 	--color-info-tint-1: var(--prim-gray-420);
 	--color-info-tint-2: var(--prim-gray-740);

diff --git a/packages/design-system/src/css/_tokens.scss b/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);
 
@@ -253,6 +255,9 @@
 	// Feature Request
 	--color-feature-request-font: var(--prim-gray-0);
 
+	// Input Triple
+	--color-background-input-triple: var(--color-background-light);
+
 	// Various
 	--color-avatar-accent-1: var(--prim-gray-120);
 	--color-avatar-accent-2: var(--prim-color-alt-e-shade-100);

diff --git a/packages/design-system/src/css/input-number.scss b/packages/design-system/src/css/input-number.scss
@@ -96,7 +96,7 @@
 	}
 
 	@include mixins.m(small) {
-		line-height: #{var.$input-small-height - 2};
+		line-height: #{var.$input-small-height - 4};
 
 		@include mixins.e((increase, decrease)) {
 			width: var.$input-small-height;

diff --git a/packages/editor-ui/src/Interface.ts b/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;
 }