feat(Set Node): Overhaul (#6348)

Github issue / Community forum post (link here to close automatically):
https://github.com/n8n-io/n8n/pull/6348

---------

Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
Co-authored-by: Marcus <marcus@n8n.io>

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

@@ -94,6 +94,11 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+
+		rows: {
+			type: Number,
+			default: -1,
+		},
 		modelValue: {
 			type: String,
 		},
@@ -349,8 +354,16 @@ export default defineComponent({
 		const [languageSupport, ...otherExtensions] = this.languageExtensions;
 		extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
 
+		let doc = this.modelValue ?? this.placeholder;
+
+		const lines = doc.split('\n');
+
+		if (lines.length < this.rows) {
+			doc += '\n'.repeat(this.rows - lines.length);
+		}
+
 		const state = EditorState.create({
-			doc: this.modelValue ?? this.placeholder,
+			doc,
 			extensions,
 		});
 

packages/editor-ui/src/components/CodeNodeEditor/theme.ts

@@ -80,8 +80,9 @@ export const codeNodeEditorTheme = ({ isReadOnly, customMaxHeight }: ThemeSettin
 		},
 		'.cm-scroller': {
 			overflow: 'auto',
+
 			maxHeight: customMaxHeight ?? '100%',
-			...(isReadOnly ? {} : { minHeight: '10em' }),
+			...(isReadOnly ? {} : { minHeight: '1.3em' }),
 		},
 		'.cm-diagnosticAction': {
 			backgroundColor: BASE_STYLING.diagnosticButton.backgroundColor,

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

@@ -99,6 +99,7 @@
 					:defaultValue="parameter.default"
 					:language="editorLanguage"
 					:isReadOnly="isReadOnly"
+					:rows="getArgument('rows')"
 					:aiButtonEnabled="settingsStore.isCloudDeployment"
 					@update:modelValue="valueChangedDebounced"
 				/>
@@ -118,7 +119,20 @@
 					:modelValue="modelValue"
 					:dialect="getArgument('sqlDialect')"
 					:isReadOnly="isReadOnly"
+					:rows="getArgument('rows')"
+					@valueChanged="valueChangedDebounced"
+				/>
+
+				<code-node-editor
+					v-else-if="editorType === 'json' && !isExecuteWorkflowNode(node)"
+					:mode="node.parameters.mode"
+					:modelValue="modelValue"
+					:defaultValue="parameter.default"
+					:language="editorLanguage"
+					:isReadOnly="isReadOnly"
+					:aiButtonEnabled="false"
 					@update:modelValue="valueChangedDebounced"
+					:rows="getArgument('rows')"
 				/>
 
 				<div v-else-if="editorType" class="readonly-code clickable" @click="displayEditDialog()">
@@ -127,6 +141,7 @@
 						:modelValue="modelValue"
 						:language="editorLanguage"
 						:isReadOnly="true"
+						:rows="getArgument('rows')"
 					/>
 				</div>
 
@@ -384,7 +399,14 @@ import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { hasExpressionMapping, isValueExpression, isResourceLocatorValue } from '@/utils';
-import { CODE_NODE_TYPE, CUSTOM_API_CALL_KEY, HTML_NODE_TYPE } from '@/constants';
+
+import {
+	CODE_NODE_TYPE,
+	CUSTOM_API_CALL_KEY,
+	EXECUTE_WORKFLOW_NODE_TYPE,
+	HTML_NODE_TYPE,
+} from '@/constants';
+
 import type { PropType } from 'vue';
 import { debounceHelper } from '@/mixins/debounce';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -1035,6 +1057,9 @@ export default defineComponent({
 		isHtmlNode(node: INodeUi): boolean {
 			return node.type === HTML_NODE_TYPE;
 		},
+		isExecuteWorkflowNode(node: INodeUi): boolean {
+			return node.type === EXECUTE_WORKFLOW_NODE_TYPE;
+		},
 		rgbaToHex(value: string): string | null {
 			// Convert rgba to hex from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 			const valueMatch = (value as string).match(

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

@@ -353,6 +353,9 @@ export default defineComponent({
 				rawValues = get(this.nodeValues, this.path);
 			}
 
+			if (!rawValues) {
+				return false;
+			}
 			// Resolve expressions
 			const resolveKeys = Object.keys(rawValues);
 			let key: string;

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

@@ -88,6 +88,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		rows: {
+			type: Number,
+			default: -1,
+		},
 	},
 	data(): SQLEditorData {
 		return {
@@ -184,7 +188,16 @@ export default defineComponent({
 	mounted() {
 		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
 
-		const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
+		let doc = this.modelValue;
+
+		const lines = doc.split('\n');
+
+		if (lines.length < this.rows) {
+			doc += '\n'.repeat(this.rows - lines.length);
+		}
+
+		const state = EditorState.create({ doc, extensions: this.extensions });
+
 		this.editor = new EditorView({ parent: this.$refs.sqlEditor as HTMLDivElement, state });
 		this.editorState = this.editor.state;
 		highlighter.addColor(this.editor as EditorView, this.resolvableSegments);

packages/editor-ui/src/constants.ts

@@ -134,6 +134,7 @@ export const WAIT_NODE_TYPE = 'n8n-nodes-base.wait';
 export const WEBHOOK_NODE_TYPE = 'n8n-nodes-base.webhook';
 export const WORKABLE_TRIGGER_NODE_TYPE = 'n8n-nodes-base.workableTrigger';
 export const WORKFLOW_TRIGGER_NODE_TYPE = 'n8n-nodes-base.workflowTrigger';
+export const EXECUTE_WORKFLOW_NODE_TYPE = 'n8n-nodes-base.executeWorkflow';
 export const EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE = 'n8n-nodes-base.executeWorkflowTrigger';
 export const WOOCOMMERCE_TRIGGER_NODE_TYPE = 'n8n-nodes-base.wooCommerceTrigger';
 export const XERO_NODE_TYPE = 'n8n-nodes-base.xero';