feat(editor): Overhaul expression editor modal

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

@@ -0,0 +1,65 @@
+import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
+
+const WorkflowPage = new WorkflowPageClass();
+
+describe('Expression editor modal', () => {
+	before(() => {
+		cy.task('db:reset');
+		cy.skipSetup();
+	});
+
+	beforeEach(() => {
+		WorkflowPage.actions.visit();
+		WorkflowPage.actions.addInitialNodeToCanvas('Manual Trigger');
+		WorkflowPage.actions.addNodeToCanvas('Hacker News');
+		WorkflowPage.actions.openNodeNdv('Hacker News');
+		WorkflowPage.actions.openExpressionEditor();
+	});
+
+	it('should resolve primitive resolvables', () => {
+		WorkflowPage.getters.expressionModalInput().type('{{');
+		WorkflowPage.getters.expressionModalInput().type('1 + 2');
+		WorkflowPage.getters.expressionModalOutput().contains(/^3$/);
+		WorkflowPage.getters.expressionModalInput().clear();
+
+		WorkflowPage.getters.expressionModalInput().type('{{');
+		WorkflowPage.getters.expressionModalInput().type('"ab" + "cd"');
+		WorkflowPage.getters.expressionModalOutput().contains(/^abcd$/);
+
+		WorkflowPage.getters.expressionModalInput().clear();
+
+		WorkflowPage.getters.expressionModalInput().type('{{');
+		WorkflowPage.getters.expressionModalInput().type('true && false');
+		WorkflowPage.getters.expressionModalOutput().contains(/^false$/);
+	});
+
+	it('should resolve object resolvables', () => {
+		WorkflowPage.getters.expressionModalInput().type('{{');
+		WorkflowPage.getters.expressionModalInput().type('{{} a: 1');
+		WorkflowPage.getters.expressionModalOutput().contains(/^\[Object: \{"a":1\}\]$/);
+
+		WorkflowPage.getters.expressionModalInput().clear();
+
+		WorkflowPage.getters.expressionModalInput().type('{{');
+		WorkflowPage.getters.expressionModalInput().type('{{} a: 1 }.a{del}{del}');
+		WorkflowPage.getters.expressionModalOutput().contains(/^1$/);
+	});
+
+	it('should resolve array resolvables', () => {
+		WorkflowPage.getters.expressionModalInput().type('{{');
+		WorkflowPage.getters.expressionModalInput().type('[1, 2, 3]');
+		WorkflowPage.getters.expressionModalOutput().contains(/^\[Array: \[1,2,3\]\]$/);
+
+		WorkflowPage.getters.expressionModalInput().clear();
+
+		WorkflowPage.getters.expressionModalInput().type('{{');
+		WorkflowPage.getters.expressionModalInput().type('[1, 2, 3][0]');
+		WorkflowPage.getters.expressionModalOutput().contains(/^1$/);
+	});
+
+	it('should resolve $parameter[]', () => {
+		WorkflowPage.getters.expressionModalInput().type('{{');
+		WorkflowPage.getters.expressionModalInput().type('$parameter["operation"]');
+		WorkflowPage.getters.expressionModalOutput().contains(/^get$/);
+	});
+});

cypress/pages/workflow.ts

@@ -27,6 +27,8 @@ export class WorkflowPage extends BasePage {
 		firstStepButton: () => cy.getByTestId('canvas-add-button'),
 		isWorkflowSaved: () => this.getters.saveButton().should('match', 'span'), // In Element UI, disabled button turn into spans 🤷‍♂️
 		isWorkflowActivated: () => this.getters.activatorSwitch().should('have.class', 'is-checked'),
+		expressionModalInput: () => cy.getByTestId('expression-modal-input'),
+		expressionModalOutput: () => cy.getByTestId('expression-modal-output'),
 	};
 	actions = {
 		visit: () => {
@@ -47,6 +49,9 @@ export class WorkflowPage extends BasePage {
 		openNodeNdv: (nodeTypeName: string) => {
 			this.getters.canvasNodeByName(nodeTypeName).dblclick();
 		},
+		openExpressionEditor: () => {
+			cy.get('input[value="expression"]').parent('label').click();
+		},
 		typeIntoParameterInput: (parameterName: string, content: string) => {
 			this.getters.ndvParameterInput(parameterName).type(content);
 		},

docker/images/n8n-custom/Dockerfile

@@ -6,7 +6,6 @@ FROM n8nio/base:${NODE_VERSION} as builder
 COPY turbo.json package.json .npmrc pnpm-lock.yaml pnpm-workspace.yaml tsconfig.json ./
 COPY scripts ./scripts
 COPY packages ./packages
-COPY patches ./patches
 
 RUN corepack enable && corepack prepare --activate
 RUN chown -R node:node .

package.json

@@ -57,10 +57,6 @@
     "typescript": "^4.8.4"
   },
   "pnpm": {
-    "patchedDependencies": {
-      "quill@2.0.0-dev.4": "patches/quill@2.0.0-dev.4.patch",
-      "element-ui@2.15.12": "patches/element-ui@2.15.12.patch"
-    },
     "onlyBuiltDependencies": [
       "sqlite3",
       "vue-demi"

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

@@ -391,6 +391,13 @@
 	--color-code-tags-variable: #c82829;
 	--color-code-tags-definition: #4271ae;
 
+	--color-expression-editor-background: #fff;
+	--color-valid-resolvable-foreground: #29a568;
+	--color-valid-resolvable-background: #e1f3d8;
+	--color-invalid-resolvable-foreground: #f45959;
+	--color-invalid-resolvable-background: #fef0f0;
+	--color-expression-syntax-example: #f0f0f0;
+
 	// Generated Color Shades from 50 to 950
 	// Not yet used in design system
 	@each $color in ('neutral', 'success', 'warning', 'danger') {

packages/editor-ui/.eslintrc.js

@@ -10,6 +10,8 @@ module.exports = {
 		extraFileExtensions: ['.vue'],
 	},
 
+	ignorePatterns: ['*.d.cts'],
+
 	rules: {
 		// TODO: Remove these
 		'id-denylist': 'off',

packages/editor-ui/package.json

@@ -32,8 +32,8 @@
     "@codemirror/lang-javascript": "^6.0.2",
     "@codemirror/language": "^6.2.1",
     "@codemirror/lint": "^6.0.0",
-    "@codemirror/state": "^6.1.1",
-    "@codemirror/view": "^6.2.1",
+    "@codemirror/state": "^6.1.4",
+    "@codemirror/view": "^6.5.1",
     "@fontsource/open-sans": "^4.5.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
@@ -61,8 +61,6 @@
     "normalize-wheel": "^1.0.1",
     "pinia": "^2.0.22",
     "prismjs": "^1.17.1",
-    "quill": "2.0.0-dev.4",
-    "quill-autoformat": "^0.1.1",
     "timeago.js": "^4.0.2",
     "uuid": "^8.3.2",
     "v-click-outside": "^3.1.2",
@@ -92,7 +90,6 @@
     "@types/lodash.get": "^4.4.6",
     "@types/lodash.set": "^4.3.6",
     "@types/luxon": "^2.0.9",
-    "@types/quill": "^2.0.1",
     "@types/uuid": "^8.3.2",
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vitejs/plugin-vue2": "^1.1.2",

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

@@ -19,19 +19,43 @@
 				<el-col :span="16" class="right-side">
 					<div class="expression-editor-wrapper">
 						<div class="editor-description">
-							{{ $locale.baseText('expressionEdit.expression') }}
+							<div>
+								{{ $locale.baseText('expressionEdit.expression') }}
+							</div>
+							<div class="hint">
+								<span>
+									{{ $locale.baseText('expressionEdit.anythingInside') }}
+								</span>
+								<div class="expression-syntax-example" v-text="`{{ }}`"></div>
+								<span>
+									{{ $locale.baseText('expressionEdit.isJavaScript') }}
+								</span>
+								<n8n-link size="medium" :to="expressionsDocsUrl">
+									{{ $locale.baseText('expressionEdit.learnMore') }}
+								</n8n-link>
+							</div>
 						</div>
 						<div class="expression-editor ph-no-capture">
-							<expression-input :parameter="parameter" ref="inputFieldExpression" rows="8" :value="value" :path="path" @change="valueChanged" @keydown.stop="noOp"></expression-input>
+							<expression-modal-input
+								:value="value"
+								:isReadOnly="isReadOnly"
+								@change="valueChanged"
+								ref="inputFieldExpression"
+								data-test-id="expression-modal-input"
+							/>
 						</div>
 					</div>
 
 					<div class="expression-result-wrapper">
 						<div class="editor-description">
-							{{ $locale.baseText('expressionEdit.result') }}
+							{{ $locale.baseText('expressionEdit.resultOfItem1') }}
 						</div>
 						<div class="ph-no-capture">
-							<expression-input :parameter="parameter" resolvedValue="true" ref="expressionResult" rows="8" :value="displayValue" :path="path"></expression-input>
+							<expression-modal-output
+								:segments="segments"
+								ref="expressionResult"
+								data-test-id="expression-modal-output"
+							/>
 						</div>
 					</div>
 
@@ -43,21 +67,26 @@
 </template>
 
 <script lang="ts">
-import ExpressionInput from '@/components/ExpressionInput.vue';
+import ExpressionModalInput from '@/components/ExpressionEditorModal/ExpressionModalInput.vue';
+import ExpressionModalOutput from '@/components/ExpressionEditorModal/ExpressionModalOutput.vue';
 import VariableSelector from '@/components/VariableSelector.vue';
 
 import { IVariableItemSelected } from '@/Interface';
 
 import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
 
+import { EXPRESSIONS_DOCS_URL } from '@/constants';
+
 import mixins from 'vue-typed-mixins';
 import { hasExpressionMapping } from '@/utils';
 import { debounceHelper } from '@/mixins/debounce';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 
+import type { Resolvable, Segment } from './ExpressionEditorModal/types';
+
 export default mixins(
 	externalHooks,
 	genericHelpers,
@@ -70,15 +99,19 @@ export default mixins(
 		'path',
 		'value',
 		'eventSource',
+		'isReadOnly',
 	],
 	components: {
-		ExpressionInput,
+		ExpressionModalInput,
+		ExpressionModalOutput,
 		VariableSelector,
 	},
 	data () {
 		return {
 			displayValue: '',
 			latestValue: '',
+			segments: [] as Segment[],
+			expressionsDocsUrl: EXPRESSIONS_DOCS_URL,
 		};
 	},
 	computed: {
@@ -88,8 +121,9 @@ export default mixins(
 		),
 	},
 	methods: {
-		valueChanged (value: string, forceUpdate = false) {
+		valueChanged ({ value, segments }: { value: string, segments: Segment[] }, forceUpdate = false) {
 			this.latestValue = value;
+			this.segments = segments;
 
 			if (forceUpdate === true) {
 				this.updateDisplayValue();
@@ -180,14 +214,34 @@ export default mixins(
 			this.$externalHooks().run('expressionEdit.dialogVisibleChanged', { dialogVisible: newValue, parameter: this.parameter, value: this.value, resolvedExpressionValue });
 
 			if (!newValue) {
+				const resolvables = this.segments.filter((s): s is Resolvable => s.kind === 'resolvable');
+				const errorResolvables = resolvables.filter(r => r.error);
+
+				const exposeErrorProperties = (error: Error) => {
+					return Object.getOwnPropertyNames(error).reduce<Record<string, unknown>>((acc, key) => {
+						// @ts-ignore
+						return acc[key] = error[key], acc;
+					}, {});
+				};
+
 				const telemetryPayload = {
 					empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value,
 					workflow_id: this.workflowsStore.workflowId,
 					source: this.eventSource,
 					session_id: this.ndvStore.sessionId,
 					has_parameter: this.value.includes('$parameter'),
 					has_mapping: hasExpressionMapping(this.value),
+					node_type: this.ndvStore.activeNode?.type ?? '',
+					handlebar_count: resolvables.length,
+					handlebar_error_count: errorResolvables.length,
+					full_errors: errorResolvables.map(errorResolvable => {
+						return errorResolvable.fullError
+							? { ...exposeErrorProperties(errorResolvable.fullError), stack: errorResolvable.fullError.stack }
+							: null;
+					}),
+					short_errors: errorResolvables.map(r => r.resolved ?? null),
 				};
+
 				this.$telemetry.track('User closed Expression Editor', telemetryPayload);
 				this.$externalHooks().run('expressionEdit.closeDialog', telemetryPayload);
 			}
@@ -200,7 +254,32 @@ export default mixins(
 .editor-description {
 	line-height: 1.5;
 	font-weight: bold;
-	padding: 0 0 0.5em 0.2em;;
+	padding: 0 0 0.5em 0.2em;
+	display: flex;
+  justify-content: space-between;
+
+	.hint {
+		color: var(--color-text-base);
+		font-weight: normal;
+		display: flex;
+
+		@media (max-width: $breakpoint-xs) {
+			display: none;
+		}
+
+		span {
+			margin-right: var(--spacing-4xs);
+		}
+		.expression-syntax-example {
+			display: inline-block;
+			margin-top: 3px;
+			height: 16px;
+			line-height: 1;
+			background-color: var(--color-expression-syntax-example);
+			color: var(--color-text-dark);
+			margin-right: var(--spacing-4xs);
+		}
+	}
 }
 
 .expression-result-wrapper,