Add form preview event bus to be notified on parameter changes

packages/frontend/editor-ui/src/components/NodeSettings.vue

@@ -15,7 +15,7 @@ import type {
 	IUpdateInformation,
 } from '@/Interface';
 
-import { BASE_NODE_SURVEY_URL } from '@/constants';
+import { BASE_NODE_SURVEY_URL, FORM_NODE_TYPE, FORM_TRIGGER_NODE_TYPE } from '@/constants';
 
 import ParameterInputList from '@/components/ParameterInputList.vue';
 import NodeCredentials from '@/components/NodeCredentials.vue';
@@ -47,7 +47,7 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useI18n } from '@n8n/i18n';
 import { useTelemetry } from '@/composables/useTelemetry';
-import { importCurlEventBus, ndvEventBus } from '@/event-bus';
+import { formPreviewEventBus, importCurlEventBus, ndvEventBus } from '@/event-bus';
 import { ProjectTypes } from '@/types/projects.types';
 import FreeAiCreditsCallout from '@/components/FreeAiCreditsCallout.vue';
 import { useResizeObserver } from '@vueuse/core';
@@ -58,6 +58,7 @@ import NodeSettingsInvalidNodeWarning from '@/components/NodeSettingsInvalidNode
 import type { NodeSettingsTab } from '@/types/nodeSettings';
 import NodeActionsList from '@/components/NodeActionsList.vue';
 import { useNodeCredentialOptions } from '@/composables/useNodeCredentialOptions';
+import debounce from 'lodash/debounce';
 
 const props = withDefaults(
 	defineProps<{
@@ -273,6 +274,8 @@ const hasOutputConnection = computed(() => {
 	return (Object.values(outgoingConnections)?.[0]?.[0] ?? []).length > 0;
 });
 
+const emitFormUpdate = debounce(() => formPreviewEventBus.emit('parameter-updated'), 500);
+
 const valueChanged = (parameterData: IUpdateInformation) => {
 	let newValue: NodeParameterValue;
 
@@ -391,6 +394,9 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 			_node,
 			isToolNode.value,
 		);
+		if (nodeType.value && [FORM_NODE_TYPE, FORM_TRIGGER_NODE_TYPE].includes(nodeType.value.name)) {
+			emitFormUpdate();
+		}
 	} else {
 		// A property on the node itself changed
 

packages/frontend/editor-ui/src/components/OutputPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
 import { NodeConnectionTypes, type IRunData, type Workflow } from 'n8n-workflow';
 import RunData from './RunData.vue';
 import RunInfo from './RunInfo.vue';
@@ -22,6 +22,7 @@ import { usePostHog } from '@/stores/posthog.store';
 import { type IRunDataDisplayMode } from '@/Interface';
 import { I18nT } from 'vue-i18n';
 import { useExecutionData } from '@/composables/useExecutionData';
+import { formPreviewEventBus } from '@/event-bus';
 
 // Types
 
@@ -280,9 +281,18 @@ const onRunIndexChange = (run: number) => {
 	emit('runChange', run);
 };
 
+function onFormUpdate() {
+	console.log('OutputPanel.vue: form updated');
+}
+
 // Set the initial output mode when the component is mounted
 onMounted(() => {
 	outputMode.value = defaultOutputMode.value;
+	formPreviewEventBus.on('parameter-updated', onFormUpdate);
+});
+
+onBeforeUnmount(() => {
+	formPreviewEventBus.off('parameter-updated', onFormUpdate);
 });
 
 // In case the output panel was opened when the node has not run yet,

packages/frontend/editor-ui/src/event-bus/form-preview.ts

@@ -0,0 +1,7 @@
+import { createEventBus } from '@n8n/utils/event-bus';
+
+export interface FormPreviewEvents {
+	'parameter-updated': never;
+}
+
+export const formPreviewEventBus = createEventBus<FormPreviewEvents>();

packages/frontend/editor-ui/src/event-bus/index.ts

@@ -6,3 +6,4 @@ export * from './import-curl';
 export * from './node-view';
 export * from './mfa';
 export * from './ndv';
+export * from './form-preview';