feat(editor): Help users discover expressions when using drag n drop (#…

…8869)

cypress/e2e/14-mapping.cy.ts

@@ -253,7 +253,6 @@ describe('Data mapping', () => {
 		workflowPage.actions.openNode('Set');
 
 		ndv.actions.typeIntoParameterInput('value', 'delete me');
-		ndv.actions.dismissMappingTooltip();
 
 		ndv.actions.typeIntoParameterInput('name', 'test');
 

cypress/e2e/16-form-trigger-node.cy.ts

@@ -42,7 +42,8 @@ describe('n8n Form Trigger', () => {
 			':nth-child(3) > .border-top-dashed > .parameter-input-list-wrapper > :nth-child(1) > .parameter-item',
 		)
 			.find('input[placeholder*="e.g. What is your name?"]')
-			.type('Test Field 3');
+			.type('Test Field 3')
+			.blur();
 		cy.get(
 			':nth-child(3) > .border-top-dashed > .parameter-input-list-wrapper > :nth-child(2) > .parameter-item',
 		).click();
@@ -53,7 +54,8 @@ describe('n8n Form Trigger', () => {
 			':nth-child(4) > .border-top-dashed > .parameter-input-list-wrapper > :nth-child(1) > .parameter-item',
 		)
 			.find('input[placeholder*="e.g. What is your name?"]')
-			.type('Test Field 4');
+			.type('Test Field 4')
+			.blur();
 		cy.get(
 			':nth-child(4) > .border-top-dashed > .parameter-input-list-wrapper > :nth-child(2) > .parameter-item',
 		).click();
@@ -65,12 +67,14 @@ describe('n8n Form Trigger', () => {
 			':nth-child(4) > :nth-child(1) > :nth-child(2) > :nth-child(3) > .multi-parameter > .fixed-collection-parameter > .fixed-collection-parameter-property > :nth-child(1) > :nth-child(1)',
 		)
 			.find('input')
-			.type('Option 1');
+			.type('Option 1')
+			.blur();
 		cy.get(
 			':nth-child(4) > :nth-child(1) > :nth-child(2) > :nth-child(3) > .multi-parameter > .fixed-collection-parameter > .fixed-collection-parameter-property > :nth-child(1) > :nth-child(2)',
 		)
 			.find('input')
-			.type('Option 2');
+			.type('Option 2')
+			.blur();
 
 		//add optional submitted message
 		cy.get('.param-options').click();

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

@@ -182,7 +182,7 @@ describe('Webhook Trigger node', async () => {
 		workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
 		workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME);
 		ndv.getters.assignmentCollectionAdd('assignments').click();
-		ndv.getters.assignmentName('assignments').type('data');
+		ndv.getters.assignmentName('assignments').type('data').find('input').blur();
 		ndv.getters.assignmentType('assignments').click();
 		ndv.getters.assignmentValue('assignments').paste(cowBase64);
 
@@ -313,7 +313,7 @@ const addEditFields = () => {
 	workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);
 	workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME);
 	ndv.getters.assignmentCollectionAdd('assignments').click();
-	ndv.getters.assignmentName('assignments').type('MyValue');
+	ndv.getters.assignmentName('assignments').type('MyValue').find('input').blur();
 	ndv.getters.assignmentType('assignments').click();
 	getVisibleSelect().find('li').contains('Number').click();
 	ndv.getters.assignmentValue('assignments').type('1234');

cypress/e2e/24-ndv-paired-item.cy.ts

@@ -186,6 +186,7 @@ describe('NDV', () => {
 
 		ndv.getters.inputTableRow(1).invoke('attr', 'data-test-id').should('equal', 'hovering-item');
 		ndv.getters.inputTableRow(1).realHover();
+		cy.wait(100);
 		ndv.getters.outputHoveringItem().should('not.exist');
 		ndv.getters.parameterExpressionPreview('value').should('include.text', '1111');
 
@@ -200,6 +201,7 @@ describe('NDV', () => {
 		ndv.actions.selectInputNode('Code');
 
 		ndv.getters.inputTableRow(1).realHover();
+		cy.wait(100);
 		ndv.getters.inputTableRow(1).should('have.text', '6666');
 
 		ndv.getters.inputTableRow(1).invoke('attr', 'data-test-id').should('equal', 'hovering-item');

cypress/pages/ndv.ts

@@ -167,10 +167,6 @@ export class NDV extends BasePage {
 		selectOptionInParameterDropdown: (parameterName: string, content: string) => {
 			getVisibleSelect().find('.option-headline').contains(content).click();
 		},
-		dismissMappingTooltip: () => {
-			cy.getByTestId('dismiss-mapping-tooltip').click();
-			cy.getByTestId('dismiss-mapping-tooltip').should('not.be.visible');
-		},
 		rename: (newName: string) => {
 			this.getters.nodeNameContainer().click();
 			this.getters.nodeRenameInput().should('be.visible').type('{selectall}').type(newName);
@@ -244,7 +240,7 @@ export class NDV extends BasePage {
 			getVisiblePopper().find('li').last().click();
 		},
 		addFilterCondition: (paramName: string) => {
-			this.getters.filterConditionAdd(paramName).click();
+			this.getters.filterConditionAdd(paramName).click({ force: true });
 		},
 		removeFilterCondition: (paramName: string, index: number) => {
 			this.getters.filterConditionRemove(paramName, index).click();

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

@@ -97,7 +97,7 @@
 	--color-json-brackets: var(--prim-gray-670);
 	--color-json-brackets-hover: var(--prim-color-alt-e);
 	--color-json-line: var(--prim-gray-200);
-	--color-json-highlight: var(--prim-gray-70);
+	--color-json-highlight: var(--color-background-base);
 	--color-code-background: var(--prim-gray-800);
 	--color-code-background-readonly: var(--prim-gray-740);
 	--color-code-lineHighlight: var(--prim-gray-740);

packages/editor-ui/src/Interface.ts

@@ -1245,6 +1245,7 @@ export interface NDVState {
 		activeTarget: { id: string; stickyPosition: null | XYPosition } | null;
 	};
 	isMappingOnboarded: boolean;
+	isAutocompleteOnboarded: boolean;
 }
 
 export interface NotificationOptions extends Partial<ElementNotificationOptions> {

packages/editor-ui/src/components/AssignmentCollection/Assignment.vue

@@ -58,7 +58,7 @@ const assignmentTypeToNodeProperty = (
 
 const nameParameter = computed<INodeProperties>(() => ({
 	name: 'name',
-	displayName: '',
+	displayName: 'Name',
 	default: '',
 	requiresDataPath: 'single',
 	placeholder: 'name',
@@ -68,7 +68,7 @@ const nameParameter = computed<INodeProperties>(() => ({
 const valueParameter = computed<INodeProperties>(() => {
 	return {
 		name: 'value',
-		displayName: '',
+		displayName: 'Value',
 		default: '',
 		placeholder: 'value',
 		...assignmentTypeToNodeProperty(assignment.value.type ?? 'string'),

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

@@ -22,6 +22,7 @@
 				:rows="rows"
 				:additional-data="additionalExpressionData"
 				:path="path"
+				:event-bus="eventBus"
 				@focus="onFocus"
 				@blur="onBlur"
 				@change="onChange"
@@ -64,6 +65,7 @@ import type { Segment } from '@/types/expressions';
 import type { TargetItem } from '@/Interface';
 import type { IDataObject } from 'n8n-workflow';
 import { useDebounce } from '@/composables/useDebounce';
+import { type EventBus, createEventBus } from 'n8n-design-system/utils';
 
 type InlineExpressionEditorInputRef = InstanceType<typeof InlineExpressionEditorInput>;
 
@@ -97,6 +99,10 @@ export default defineComponent({
 			type: Object as PropType<IDataObject>,
 			default: () => ({}),
 		},
+		eventBus: {
+			type: Object as PropType<EventBus>,
+			default: () => createEventBus(),
+		},
 	},
 	setup() {
 		const { callDebounced } = useDebounce();

packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue

@@ -3,27 +3,30 @@
 </template>
 
 <script lang="ts">
+import { completionStatus, startCompletion } from '@codemirror/autocomplete';
 import { history } from '@codemirror/commands';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+import { defineComponent, nextTick } from 'vue';
 
 import { completionManager } from '@/mixins/completionManager';
 import { expressionManager } from '@/mixins/expressionManager';
 import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
-import { n8nAutocompletion, n8nLang } from '@/plugins/codemirror/n8nLang';
-import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
-import { isEqual } from 'lodash-es';
-import type { IDataObject } from 'n8n-workflow';
-import { inputTheme } from './theme';
 import {
 	autocompleteKeyMap,
 	enterKeyMap,
 	historyKeyMap,
 	tabKeyMap,
 } from '@/plugins/codemirror/keymap';
-import { completionStatus } from '@codemirror/autocomplete';
+import { n8nAutocompletion, n8nLang } from '@/plugins/codemirror/n8nLang';
+import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
+import { isEqual } from 'lodash-es';
+import { createEventBus, type EventBus } from 'n8n-design-system/utils';
+import type { IDataObject } from 'n8n-workflow';
+import { inputTheme } from './theme';
+import { useNDVStore } from '@/stores/ndv.store';
+import { mapStores } from 'pinia';
 
 const editableConf = new Compartment();
 
@@ -51,6 +54,13 @@ export default defineComponent({
 			type: Object as PropType<IDataObject>,
 			default: () => ({}),
 		},
+		eventBus: {
+			type: Object as PropType<EventBus>,
+			default: () => createEventBus(),
+		},
+	},
+	computed: {
+		...mapStores(useNDVStore),
 	},
 	watch: {
 		isReadOnly(newValue: boolean) {
@@ -132,14 +142,34 @@ export default defineComponent({
 		this.editorState = this.editor.state;
 
 		highlighter.addColor(this.editor, this.resolvableSegments);
+
+		this.eventBus.on('drop', this.onDrop);
 	},
 	beforeUnmount() {
 		this.editor?.destroy();
+		this.eventBus.off('drop', this.onDrop);
 	},
 	methods: {
 		focus() {
 			this.editor?.focus();
 		},
+		setCursorPosition(pos: number) {
+			this.editor.dispatch({ selection: { anchor: pos, head: pos } });
+		},
+		async onDrop() {
+			await nextTick();
+			this.focus();
+
+			const END_OF_EXPRESSION = ' }}';
+			const value = this.editor.state.sliceDoc(0);
+			const cursorPosition = Math.max(value.lastIndexOf(END_OF_EXPRESSION), 0);
+
+			this.setCursorPosition(cursorPosition);
+
+			if (!this.ndvStore.isAutocompleteOnboarded) {
+				startCompletion(this.editor as EditorView);
+			}
+		},
 	},
 });
 </script>