feat: No expression error when node hasn’t executed (#8448)

Co-authored-by: Giulio Andreini <[email protected]>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <[email protected]>

cypress/e2e/11-inline-expression-editor.cy.ts

@@ -1,72 +1,136 @@
+import { NDV } from '../pages/ndv';
 import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
 
+const ndv = new NDV();
 const WorkflowPage = new WorkflowPageClass();
 
 describe('Inline expression editor', () => {
 	beforeEach(() => {
 		WorkflowPage.actions.visit();
-		WorkflowPage.actions.addInitialNodeToCanvas('Manual');
-		WorkflowPage.actions.addNodeToCanvas('Hacker News');
-		WorkflowPage.actions.openNode('Hacker News');
-		WorkflowPage.actions.openInlineExpressionEditor();
-
+		WorkflowPage.actions.addInitialNodeToCanvas('Schedule');
 		cy.on('uncaught:exception', (err) => err.name !== 'ExpressionError');
 	});
 
-	it('should resolve primitive resolvables', () => {
-		WorkflowPage.getters.inlineExpressionEditorInput().clear();
-		WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
-		WorkflowPage.getters.inlineExpressionEditorInput().type('1 + 2');
-		WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^3$/);
-		WorkflowPage.getters.inlineExpressionEditorInput().clear();
-
-		WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
-		WorkflowPage.getters.inlineExpressionEditorInput().type('"ab"');
-		WorkflowPage.getters.inlineExpressionEditorInput().type('{rightArrow}+');
-		WorkflowPage.getters.inlineExpressionEditorInput().type('"cd"');
-		WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^abcd$/);
-		WorkflowPage.getters.inlineExpressionEditorInput().clear();
-
-		WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
-		WorkflowPage.getters.inlineExpressionEditorInput().type('true && false');
-		WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^false$/);
-	});
+	describe('Static data', () => {
+		beforeEach(() => {
+			WorkflowPage.actions.addNodeToCanvas('Hacker News');
+			WorkflowPage.actions.openNode('Hacker News');
+			WorkflowPage.actions.openInlineExpressionEditor();
+		});
 
-	it('should resolve object resolvables', () => {
-		WorkflowPage.getters.inlineExpressionEditorInput().clear();
-		WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
-		WorkflowPage.getters
-			.inlineExpressionEditorInput()
-			.type('{ a: 1 }', { parseSpecialCharSequences: false });
-		WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^\[Object: \{"a": 1\}\]$/);
-		WorkflowPage.getters.inlineExpressionEditorInput().clear();
-
-		WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
-		WorkflowPage.getters
-			.inlineExpressionEditorInput()
-			.type('{ a: 1 }.a', { parseSpecialCharSequences: false });
-		WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^1$/);
-	});
+		it('should resolve primitive resolvables', () => {
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('1 + 2');
+			WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^3$/);
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('"ab"');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{rightArrow}+');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('"cd"');
+			WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^abcd$/);
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('true && false');
+			WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^false$/);
+		});
+
+		it('should resolve object resolvables', () => {
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters
+				.inlineExpressionEditorInput()
+				.type('{ a: 1 }', { parseSpecialCharSequences: false });
+			WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^\[Object: \{"a": 1\}\]$/);
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
 
-	it('should resolve array resolvables', () => {
-		WorkflowPage.getters.inlineExpressionEditorInput().clear();
-		WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
-		WorkflowPage.getters.inlineExpressionEditorInput().type('[1, 2, 3]');
-		WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^\[Array: \[1,2,3\]\]$/);
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters
+				.inlineExpressionEditorInput()
+				.type('{ a: 1 }.a', { parseSpecialCharSequences: false });
+			WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^1$/);
+		});
 
-		WorkflowPage.getters.inlineExpressionEditorInput().clear();
+		it('should resolve array resolvables', () => {
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('[1, 2, 3]');
+			WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^\[Array: \[1,2,3\]\]$/);
 
-		WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
-		WorkflowPage.getters.inlineExpressionEditorInput().type('[1, 2, 3]');
-		WorkflowPage.getters.inlineExpressionEditorInput().type('[0]');
-		WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^1$/);
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('[1, 2, 3]');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('[0]');
+			WorkflowPage.getters.inlineExpressionEditorOutput().contains(/^1$/);
+		});
 	});
 
-	it('should resolve $parameter[]', () => {
-		WorkflowPage.getters.inlineExpressionEditorInput().clear();
-		WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
-		// Resolving $parameter is slow, especially on CI runner
-		WorkflowPage.getters.inlineExpressionEditorInput().type('$parameter["operation"]');
-		WorkflowPage.getters.inlineExpressionEditorOutput().should('have.text', 'getAll');
+	describe('Dynamic data', () => {
+		beforeEach(() => {
+			WorkflowPage.actions.openNode('Schedule Trigger');
+			ndv.actions.setPinnedData([{ myStr: 'Monday' }]);
+			ndv.actions.close();
+			WorkflowPage.actions.addNodeToCanvas('No Operation');
+			WorkflowPage.actions.addNodeToCanvas('Hacker News');
+			WorkflowPage.actions.openNode('Hacker News');
+			WorkflowPage.actions.openInlineExpressionEditor();
+		});
+
+		it('should resolve $parameter[]', () => {
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			// Resolving $parameter is slow, especially on CI runner
+			WorkflowPage.getters.inlineExpressionEditorInput().type('$parameter["operation"]');
+			WorkflowPage.getters.inlineExpressionEditorOutput().should('have.text', 'getAll');
+		});
+
+		it('should resolve input: $json,$input,$(nodeName)', () => {
+			// Previous nodes have not run, input is empty
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('$json.myStr');
+			WorkflowPage.getters
+				.inlineExpressionEditorOutput()
+				.should('have.text', '[Execute previous nodes for preview]');
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('$input.item.json.myStr');
+			WorkflowPage.getters
+				.inlineExpressionEditorOutput()
+				.should('have.text', '[Execute previous nodes for preview]');
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters
+				.inlineExpressionEditorInput()
+				.type("$('Schedule Trigger').item.json.myStr");
+			WorkflowPage.getters
+				.inlineExpressionEditorOutput()
+				.should('have.text', '[Execute previous nodes for preview]');
+
+			// Run workflow
+			ndv.actions.close();
+			WorkflowPage.actions.executeNode('No Operation');
+			WorkflowPage.actions.openNode('Hacker News');
+			WorkflowPage.actions.openInlineExpressionEditor();
+
+			// Previous nodes have run, input can be resolved
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('$json.myStr');
+			WorkflowPage.getters.inlineExpressionEditorOutput().should('have.text', 'Monday');
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters.inlineExpressionEditorInput().type('$input.item.json.myStr');
+			WorkflowPage.getters.inlineExpressionEditorOutput().should('have.text', 'Monday');
+			WorkflowPage.getters.inlineExpressionEditorInput().clear();
+			WorkflowPage.getters.inlineExpressionEditorInput().type('{{');
+			WorkflowPage.getters
+				.inlineExpressionEditorInput()
+				.type("$('Schedule Trigger').item.json.myStr");
+			WorkflowPage.getters.inlineExpressionEditorOutput().should('have.text', 'Monday');
+		});
 	});
 });

cypress/e2e/14-mapping.cy.ts

@@ -181,11 +181,6 @@ describe('Data mapping', () => {
 		ndv.getters
 			.inlineExpressionEditorInput()
 			.should('have.text', `{{ $('${SCHEDULE_TRIGGER_NODE_NAME}').item.json.input[0].count }}`);
-		ndv.getters
-			.parameterExpressionPreview('value')
-			.invoke('text')
-			.invoke('replace', /\u00a0/g, ' ')
-			.should('equal', '[ERROR: no data, execute "Schedule Trigger" node first]');
 
 		ndv.actions.switchInputMode('Table');
 		ndv.actions.mapDataFromHeader(1, 'value');
@@ -195,7 +190,6 @@ describe('Data mapping', () => {
 				'have.text',
 				`{{ $('${SCHEDULE_TRIGGER_NODE_NAME}').item.json.input[0].count }} {{ $('${SCHEDULE_TRIGGER_NODE_NAME}').item.json.input }}`,
 			);
-		ndv.actions.validateExpressionPreview('value', ' ');
 
 		ndv.actions.selectInputNode('Set');
 

cypress/e2e/9-expression-editor-modal.cy.ts

@@ -1,62 +1,117 @@
+import { NDV } from '../pages/ndv';
 import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
 
 const WorkflowPage = new WorkflowPageClass();
+const ndv = new NDV();
 
 describe('Expression editor modal', () => {
 	beforeEach(() => {
 		WorkflowPage.actions.visit();
-		WorkflowPage.actions.addInitialNodeToCanvas('Manual');
-		WorkflowPage.actions.addNodeToCanvas('Hacker News');
-		WorkflowPage.actions.openNode('Hacker News');
-		WorkflowPage.actions.openExpressionEditorModal();
-
+		WorkflowPage.actions.addInitialNodeToCanvas('Schedule');
 		cy.on('uncaught:exception', (err) => err.name !== 'ExpressionError');
 	});
 
-	it('should resolve primitive resolvables', () => {
-		WorkflowPage.getters.expressionModalInput().clear();
-		WorkflowPage.getters.expressionModalInput().type('{{ 1 + 2');
-		WorkflowPage.getters.expressionModalOutput().contains(/^3$/);
-		WorkflowPage.getters.expressionModalInput().clear();
+	describe('Static data', () => {
+		beforeEach(() => {
+			WorkflowPage.actions.addNodeToCanvas('Hacker News');
+			WorkflowPage.actions.openNode('Hacker News');
+			WorkflowPage.actions.openExpressionEditorModal();
+		});
 
-		WorkflowPage.getters.expressionModalInput().type('{{ "ab" + "cd"');
-		WorkflowPage.getters.expressionModalOutput().contains(/^abcd$/);
+		it('should resolve primitive resolvables', () => {
+			WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().type('{{ 1 + 2');
+			WorkflowPage.getters.expressionModalOutput().contains(/^3$/);
+			WorkflowPage.getters.expressionModalInput().clear();
 
-		WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().type('{{ "ab" + "cd"');
+			WorkflowPage.getters.expressionModalOutput().contains(/^abcd$/);
 
-		WorkflowPage.getters.expressionModalInput().type('{{ true && false');
-		WorkflowPage.getters.expressionModalOutput().contains(/^false$/);
-	});
+			WorkflowPage.getters.expressionModalInput().clear();
 
-	it('should resolve object resolvables', () => {
-		WorkflowPage.getters.expressionModalInput().clear();
-		WorkflowPage.getters
-			.expressionModalInput()
-			.type('{{ { a : 1 }', { parseSpecialCharSequences: false });
-		WorkflowPage.getters.expressionModalOutput().contains(/^\[Object: \{"a": 1\}\]$/);
+			WorkflowPage.getters.expressionModalInput().type('{{ true && false');
+			WorkflowPage.getters.expressionModalOutput().contains(/^false$/);
+		});
 
-		WorkflowPage.getters.expressionModalInput().clear();
+		it('should resolve object resolvables', () => {
+			WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters
+				.expressionModalInput()
+				.type('{{ { a : 1 }', { parseSpecialCharSequences: false });
+			WorkflowPage.getters.expressionModalOutput().contains(/^\[Object: \{"a": 1\}\]$/);
 
-		WorkflowPage.getters
-			.expressionModalInput()
-			.type('{{ { a : 1 }.a', { parseSpecialCharSequences: false });
-		WorkflowPage.getters.expressionModalOutput().contains(/^1$/);
-	});
+			WorkflowPage.getters.expressionModalInput().clear();
+
+			WorkflowPage.getters
+				.expressionModalInput()
+				.type('{{ { a : 1 }.a', { parseSpecialCharSequences: false });
+			WorkflowPage.getters.expressionModalOutput().contains(/^1$/);
+		});
 
-	it('should resolve array resolvables', () => {
-		WorkflowPage.getters.expressionModalInput().clear();
-		WorkflowPage.getters.expressionModalInput().type('{{ [1, 2, 3]');
-		WorkflowPage.getters.expressionModalOutput().contains(/^\[Array: \[1,2,3\]\]$/);
+		it('should resolve array resolvables', () => {
+			WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().type('{{ [1, 2, 3]');
+			WorkflowPage.getters.expressionModalOutput().contains(/^\[Array: \[1,2,3\]\]$/);
 
-		WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().clear();
 
-		WorkflowPage.getters.expressionModalInput().type('{{ [1, 2, 3][0]');
-		WorkflowPage.getters.expressionModalOutput().contains(/^1$/);
+			WorkflowPage.getters.expressionModalInput().type('{{ [1, 2, 3][0]');
+			WorkflowPage.getters.expressionModalOutput().contains(/^1$/);
+		});
 	});
 
-	it('should resolve $parameter[]', () => {
-		WorkflowPage.getters.expressionModalInput().clear();
-		WorkflowPage.getters.expressionModalInput().type('{{ $parameter["operation"]');
-		WorkflowPage.getters.expressionModalOutput().should('have.text', 'getAll');
+	describe('Dynamic data', () => {
+		beforeEach(() => {
+			WorkflowPage.actions.openNode('Schedule Trigger');
+			ndv.actions.setPinnedData([{ myStr: 'Monday' }]);
+			ndv.actions.close();
+			WorkflowPage.actions.addNodeToCanvas('No Operation');
+			WorkflowPage.actions.addNodeToCanvas('Hacker News');
+			WorkflowPage.actions.openNode('Hacker News');
+			WorkflowPage.actions.openExpressionEditorModal();
+		});
+
+		it('should resolve $parameter[]', () => {
+			WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().type('{{ $parameter["operation"]');
+			WorkflowPage.getters.expressionModalOutput().should('have.text', 'getAll');
+		});
+
+		it('should resolve input: $json,$input,$(nodeName)', () => {
+			// Previous nodes have not run, input is empty
+			WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().type('{{ $json.myStr');
+			WorkflowPage.getters
+				.expressionModalOutput()
+				.should('have.text', '[Execute previous nodes for preview]');
+			WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().type('{{ $input.item.json.myStr');
+			WorkflowPage.getters
+				.expressionModalOutput()
+				.should('have.text', '[Execute previous nodes for preview]');
+			WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().type("{{ $('Schedule Trigger').item.json.myStr");
+			WorkflowPage.getters
+				.expressionModalOutput()
+				.should('have.text', '[Execute previous nodes for preview]');
+
+			// Run workflow
+			cy.get('body').type('{esc}');
+			ndv.actions.close();
+			WorkflowPage.actions.executeNode('No Operation');
+			WorkflowPage.actions.openNode('Hacker News');
+			WorkflowPage.actions.openExpressionEditorModal();
+
+			// Previous nodes have run, input can be resolved
+			WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().type('{{ $json.myStr');
+			WorkflowPage.getters.expressionModalOutput().should('have.text', 'Monday');
+			WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().type('{{ $input.item.json.myStr');
+			WorkflowPage.getters.expressionModalOutput().should('have.text', 'Monday');
+			WorkflowPage.getters.expressionModalInput().clear();
+			WorkflowPage.getters.expressionModalInput().type("{{ $('Schedule Trigger').item.json.myStr");
+			WorkflowPage.getters.expressionModalOutput().should('have.text', 'Monday');
+		});
 	});
 });

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

@@ -74,6 +74,8 @@
 	--color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025);
 	--color-invalid-resolvable-foreground: var(--prim-color-alt-c-tint-250);
 	--color-invalid-resolvable-background: var(--prim-color-alt-c-alpha-02);
+	--color-pending-resolvable-foreground: var(--color-text-base);
+	--color-pending-resolvable-background: var(--prim-gray-70-alpha-01);
 	--color-expression-editor-background: var(--prim-gray-800);
 	--color-expression-syntax-example: var(--prim-gray-670);
 

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

@@ -107,6 +107,8 @@
 	--color-valid-resolvable-background: var(--prim-color-alt-a-tint-500);
 	--color-invalid-resolvable-foreground: var(--prim-color-alt-c);
 	--color-invalid-resolvable-background: var(--prim-color-alt-c-tint-450);
+	--color-pending-resolvable-foreground: var(--color-text-base);
+	--color-pending-resolvable-background: var(--prim-gray-40);
 	--color-expression-editor-background: var(--prim-gray-0);
 	--color-expression-syntax-example: var(--prim-gray-40);