review updates, wip

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

@@ -109,18 +109,18 @@ function destroyEditor() {
 </script>
 
 <template>
-	<div :class="$style.editor">
-		<div ref="jsonEditorRef" class="ph-no-capture json-editor"></div>
+	<div :class="[$style['editor-container'], $style.fillHeight]">
+		<div ref="jsonEditorRef" :class="['ph-no-capture', $style.fillHeight]"></div>
 		<slot name="suffix" />
 	</div>
 </template>
 
 <style lang="scss" module>
-.editor {
-	height: 100%;
+.editor-container {
+	position: relative;
+}
 
-	& > div {
-		height: 100%;
-	}
+.fillHeight {
+	height: 100%;
 }
 </style>

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

@@ -1098,7 +1098,7 @@ onUpdated(async () => {
 							:model-value="modelValueString"
 							:is-read-only="isReadOnly"
 							:rows="editorRows"
-							fill-parent
+							fullscreen
 							@update:model-value="valueChangedDebounced"
 						/>
 					</div>

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

@@ -175,8 +175,7 @@ function updateFormTriggerParameters(parameters: INodeProperties[], triggerName:
 		for (const parameter of parameters) {
 			if (parameter.name === 'responseMode') {
 				triggerParameters.push({
-					displayName:
-						"This node is automatically set to use the wired n8n Form node. It's not possible to select other 'Respond When' options.",
+					displayName: 'On submission, the user will be taken to the next form node',
 					name: 'formResponseModeNotice',
 					type: 'notice',
 					default: '',

packages/editor-ui/src/composables/usePushConnection.ts

@@ -37,6 +37,7 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import type { PushMessageQueueItem } from '@/types';
 import { useAssistantStore } from '@/stores/assistant.store';
 import NodeExecutionErrorMessage from '@/components/NodeExecutionErrorMessage.vue';
+import { useRootStore } from '@/stores/root.store';
 
 type IPushDataExecutionFinishedPayload = PushPayload<'executionFinished'>;
 
@@ -320,7 +321,7 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
 					action =
 						'<a data-action="open-settings">Turn on saving manual executions</a> and run again to see what happened after this node.';
 				} else {
-					action = `<a href="/workflow/${workflow.id}/executions/${activeExecutionId}">View the execution</a> to see what happened after this node.`;
+					action = `<a href="${useRootStore().urlBaseEditor}workflow/${workflow.id}/executions/${activeExecutionId}">View the execution</a> to see what happened after this node.`;
 				}
 
 				// Workflow did start but had been put to wait

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1089,7 +1089,7 @@
 	"nodeCreator.triggerHelperPanel.webhookTriggerDisplayName": "On webhook call",
 	"nodeCreator.triggerHelperPanel.webhookTriggerDescription": "Runs the flow on receiving an HTTP request",
 	"nodeCreator.triggerHelperPanel.formTriggerDisplayName": "On form submission",
-	"nodeCreator.triggerHelperPanel.formTriggerDescription": "Runs the flow when an n8n generated webform is submitted",
+	"nodeCreator.triggerHelperPanel.formTriggerDescription": "Generate webforms in n8n and pass their responses to the workflow",
 	"nodeCreator.triggerHelperPanel.formDisplayName": "Form",
 	"nodeCreator.triggerHelperPanel.formDescription": "Add next form page",
 	"nodeCreator.triggerHelperPanel.manualTriggerDisplayName": "Trigger manually",

packages/editor-ui/src/stores/root.store.ts

@@ -44,7 +44,9 @@ export const useRootStore = defineStore(STORES.ROOT, () => {
 
 	const formTestUrl = computed(() => `${state.value.urlBaseEditor}${state.value.endpointFormTest}`);
 
-	const formWaitingUrl = computed(() => `${state.value.baseUrl}${state.value.endpointFormWaiting}`);
+	const formWaitingUrl = computed(
+		() => `${state.value.urlBaseEditor}${state.value.endpointFormWaiting}`,
+	);
 
 	const webhookUrl = computed(() => `${state.value.urlBaseWebhook}${state.value.endpointWebhook}`);
 

packages/nodes-base/nodes/Form/Form.node.ts

@@ -28,11 +28,21 @@ const pageProperties = updateDisplayOptions(
 	},
 	[
 		{
-			displayName: 'Use JSON',
-			name: 'useJson',
-			type: 'boolean',
-			default: false,
-			description: 'Whether to use JSON as input to specify the form fields',
+			displayName: 'Define Form',
+			name: 'defineForm',
+			type: 'options',
+			noDataExpression: true,
+			options: [
+				{
+					name: 'Using Fields Below',
+					value: 'fields',
+				},
+				{
+					name: 'Using JSON',
+					value: 'json',
+				},
+			],
+			default: 'fields',
 		},
 		{
 			displayName: 'Form Fields',
@@ -45,15 +55,14 @@ const pageProperties = updateDisplayOptions(
 				'[\n   {\n      "fieldLabel":"Name",\n      "placeholder":"enter you name",\n      "requiredField":true\n   },\n   {\n      "fieldLabel":"Age",\n      "fieldType":"number",\n      "placeholder":"enter your age"\n   },\n   {\n      "fieldLabel":"Email",\n      "fieldType":"email",\n      "requiredField":true\n   }\n]',
 			validateType: 'form-fields',
 			ignoreValidationDuringExecution: true,
-			//TODO: replace with link https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.form/
-			hint: 'Syntax for fields described in the <a href="https://linear.app/n8n/issue/NODE-1472/add-form-node-p0#comment-23d1bd2d" target="_blank">docs</a>(hint: define fields in fixed mode to saw validation errors)',
+			hint: '<a href="hhttps://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.form/" target="_blank">See docs</a> for field syntax',
 			displayOptions: {
 				show: {
-					useJson: [true],
+					defineForm: ['json'],
 				},
 			},
 		},
-		{ ...formFields, displayOptions: { show: { useJson: [false] } } },
+		{ ...formFields, displayOptions: { show: { defineForm: ['fields'] } } },
 		{
 			displayName: 'Options',
 			name: 'options',
@@ -67,7 +76,7 @@ const pageProperties = updateDisplayOptions(
 					displayName: 'Button Label',
 					name: 'buttonLabel',
 					type: 'string',
-					default: 'Submit form',
+					default: 'Submit',
 				},
 			],
 		},
@@ -82,7 +91,7 @@ const completionProperties = updateDisplayOptions(
 	},
 	[
 		{
-			displayName: 'Respond With',
+			displayName: 'On N8n Form Submission',
 			name: 'respondWith',
 			type: 'options',
 			default: 'text',
@@ -163,7 +172,7 @@ export class Form extends Node {
 		icon: 'file:form.svg',
 		group: ['input'],
 		version: 1,
-		description: 'Create a multi-step webform by adding pages to a n8n form',
+		description: 'Generate webforms in n8n and pass their responses to the workflow',
 		defaults: {
 			name: 'Form',
 		},
@@ -213,11 +222,11 @@ export class Form extends Node {
 				noDataExpression: true,
 				options: [
 					{
-						name: 'Form Page',
+						name: 'Next Form Page',
 						value: 'page',
 					},
 					{
-						name: 'Form Completion',
+						name: 'Form Ending',
 						value: 'completion',
 					},
 				],
@@ -241,10 +250,10 @@ export class Form extends Node {
 			| 'test'
 			| 'production';
 
-		const useJson = context.getNodeParameter('useJson', false) as boolean;
+		const defineForm = context.getNodeParameter('defineForm', false) as string;
 
 		let fields: FormFieldsParameter = [];
-		if (useJson) {
+		if (defineForm === 'json') {
 			try {
 				const jsonOutput = context.getNodeParameter('jsonOutput', '', {
 					rawExpressions: true,
@@ -327,7 +336,7 @@ export class Form extends Node {
 				buttonLabel =
 					(context.evaluateExpression(
 						`{{ $('${trigger?.name}').params.options?.buttonLabel }}`,
-					) as string) || 'Submit form';
+					) as string) || 'Submit';
 			}
 
 			const responseMode = 'onReceived';

packages/nodes-base/nodes/Form/FormTrigger.node.ts

@@ -10,7 +10,7 @@ export class FormTrigger extends VersionedNodeType {
 			name: 'formTrigger',
 			icon: 'file:form.svg',
 			group: ['trigger'],
-			description: 'Runs the flow when an n8n generated webform is submitted',
+			description: 'Generate webforms in n8n and pass their responses to the workflow',
 			defaultVersion: 2.1,
 		};
 

packages/nodes-base/nodes/Form/test/utils.test.ts

@@ -54,7 +54,7 @@ describe('FormTrigger, formWebhook', () => {
 
 		expect(mockRender).toHaveBeenCalledWith('form-trigger', {
 			appendAttribution: true,
-			buttonLabel: 'Submit form',
+			buttonLabel: 'Submit',
 			formDescription: 'Test Description',
 			formFields: [
 				{
@@ -197,7 +197,7 @@ describe('FormTrigger, prepareFormData', () => {
 			query,
 			instanceId: 'test-instance',
 			useResponseData: true,
-			buttonLabel: 'Submit form',
+			buttonLabel: 'Submit',
 		});
 
 		expect(result).toEqual({
@@ -253,7 +253,7 @@ describe('FormTrigger, prepareFormData', () => {
 			],
 			useResponseData: true,
 			appendAttribution: true,
-			buttonLabel: 'Submit form',
+			buttonLabel: 'Submit',
 			redirectUrl: 'https://example.com/thank-you',
 		});
 	});
@@ -276,7 +276,7 @@ describe('FormTrigger, prepareFormData', () => {
 			formFields,
 			testRun: true,
 			query: {},
-			buttonLabel: 'Submit form',
+			buttonLabel: 'Submit',
 		});
 
 		expect(result).toEqual({
@@ -300,7 +300,7 @@ describe('FormTrigger, prepareFormData', () => {
 			],
 			useResponseData: undefined,
 			appendAttribution: true,
-			buttonLabel: 'Submit form',
+			buttonLabel: 'Submit',
 		});
 	});
 

packages/nodes-base/nodes/Form/utils.ts

@@ -394,7 +394,7 @@ export async function formWebhook(
 			appendAttribution = false;
 		}
 
-		let buttonLabel = 'Submit form';
+		let buttonLabel = 'Submit';
 
 		if (options.buttonLabel) {
 			buttonLabel = options.buttonLabel;

packages/nodes-base/nodes/Form/v1/FormTriggerV1.node.ts

@@ -23,7 +23,7 @@ const descriptionV1: INodeTypeDescription = {
 	icon: 'file:form.svg',
 	group: ['trigger'],
 	version: 1,
-	description: 'Runs the flow when an n8n generated webform is submitted',
+	description: 'Generate webforms in n8n and pass their responses to the workflow',
 	defaults: {
 		name: 'n8n Form Trigger',
 	},

packages/nodes-base/nodes/Form/v2/FormTriggerV2.node.ts

@@ -35,9 +35,9 @@ const descriptionV2: INodeTypeDescription = {
 	icon: 'file:form.svg',
 	group: ['trigger'],
 	version: [2, 2.1],
-	description: 'Runs the flow when an n8n generated webform is submitted',
+	description: 'Generate webforms in n8n and pass their responses to the workflow',
 	defaults: {
-		name: 'n8n Form Trigger',
+		name: 'On form submission',
 	},
 
 	inputs: [],
@@ -130,7 +130,7 @@ const descriptionV2: INodeTypeDescription = {
 					description: 'The label of the submit button in the form',
 					name: 'buttonLabel',
 					type: 'string',
-					default: 'Submit form',
+					default: 'Submit',
 				},
 				{
 					...respondWithOptions,