From ccb553a550ee82e32017b8d8a6fffc49b850055b Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Fri, 30 Aug 2024 07:09:47 -0400
Subject: [PATCH] refactor(editor): Migrate `NodeSettings.vue` to composition
 API (#10545)

---
 .../editor-ui/src/components/NodeSettings.vue | 1714 ++++++++---------
 1 file changed, 822 insertions(+), 892 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 0b5a291e4..86ab5bc36 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -1,7 +1,5 @@
-<script lang="ts">
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type {
 	INodeTypeDescription,
 	INodeParameters,
@@ -22,13 +20,11 @@ import type {
 	INodeUi,
 	INodeUpdatePropertiesInformation,
 	IUpdateInformation,
-	IUsedCredential,
 } from '@/Interface';
 
 import {
 	COMMUNITY_NODES_INSTALLATION_DOCS_URL,
 	CUSTOM_NODES_DOCS_URL,
-	MAIN_NODE_PANEL_WIDTH,
 	SHOULD_CLEAR_NODE_OUTPUTS,
 } from '@/constants';
 
@@ -42,705 +38,379 @@ import { get, set, unset } from 'lodash-es';
 
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import { isCommunityPackageName } from '@/utils/nodeTypesUtils';
-import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useHistoryStore } from '@/stores/history.store';
 import { RenameNodeCommand } from '@/models/history';
-import useWorkflowsEEStore from '@/stores/workflows.ee.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import type { EventBus } from 'n8n-design-system';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
-import { importCurlEventBus, ndvEventBus } from '@/event-bus';
 import { useToast } from '@/composables/useToast';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { importCurlEventBus, ndvEventBus } from '@/event-bus';
 
-export default defineComponent({
-	name: 'NodeSettings',
-	components: {
-		NodeTitle,
-		NodeCredentials,
-		ParameterInputList,
-		NodeSettingsTabs,
-		NodeWebhooks,
-		NDVSubConnections,
-		NodeExecuteButton,
+const props = withDefaults(
+	defineProps<{
+		eventBus: EventBus;
+		dragging: boolean;
+		pushRef: string;
+		nodeType: INodeTypeDescription | null;
+		readOnly: boolean;
+		foreignCredentials: string[];
+		blockUI: boolean;
+		executable: boolean;
+		inputSize: number;
+	}>(),
+	{
+		foreignCredentials: () => [],
+		readOnly: false,
+		executable: true,
+		inputSize: 0,
+		blockUI: false,
 	},
-	setup() {
-		const nodeHelpers = useNodeHelpers();
-		const externalHooks = useExternalHooks();
-		const { showMessage } = useToast();
+);
 
-		return {
-			externalHooks,
-			nodeHelpers,
-			showMessage,
-		};
-	},
-	computed: {
-		...mapStores(
-			useHistoryStore,
-			useNodeTypesStore,
-			useNDVStore,
-			useUIStore,
-			useCredentialsStore,
-			useWorkflowsStore,
-			useWorkflowsEEStore,
+const emit = defineEmits<{
+	stopExecution: [];
+	redrawRequired: [];
+	valueChanged: [value: IUpdateInformation];
+	switchSelectedNode: [nodeName: string];
+	openConnectionNodeCreator: [nodeName: string, connectionType: NodeConnectionType];
+	activate: [];
+	execute: [];
+}>();
+
+const nodeTypesStore = useNodeTypesStore();
+const ndvStore = useNDVStore();
+const workflowsStore = useWorkflowsStore();
+const credentialsStore = useCredentialsStore();
+const historyStore = useHistoryStore();
+
+const telemetry = useTelemetry();
+const nodeHelpers = useNodeHelpers();
+const externalHooks = useExternalHooks();
+const i18n = useI18n();
+const { showMessage } = useToast();
+
+const nodeValid = ref(true);
+const openPanel = ref<'params' | 'settings'>('params');
+const nodeValues = ref<INodeParameters>({
+	color: '#ff0000',
+	alwaysOutputData: false,
+	executeOnce: false,
+	notesInFlow: false,
+	onError: 'stopWorkflow',
+	retryOnFail: false,
+	maxTries: 3,
+	waitBetweenTries: 1000,
+	notes: '',
+	parameters: {},
+});
+
+// Used to prevent nodeValues from being overwritten by defaults on reopening ndv
+const nodeValuesInitialized = ref(false);
+
+const hiddenIssuesInputs = ref<string[]>([]);
+const nodeSettings = ref<INodeProperties[]>([]);
+const subConnections = ref<InstanceType<typeof NDVSubConnections> | null>(null);
+
+const isReadOnly = computed(() => props.readOnly || props.foreignCredentials.length > 0);
+
+const node = computed(() => ndvStore.activeNode);
+
+const isTriggerNode = computed(() => !!node.value && nodeTypesStore.isTriggerNode(node.value.type));
+
+const isExecutable = computed(() => {
+	if (props.nodeType && node.value) {
+		const workflow = workflowsStore.getCurrentWorkflow();
+		const workflowNode = workflow.getNode(node.value.name);
+		const inputs = NodeHelpers.getNodeInputs(workflow, workflowNode!, props.nodeType);
+		const inputNames = NodeHelpers.getConnectionTypes(inputs);
+
+		if (!inputNames.includes(NodeConnectionType.Main) && !isTriggerNode.value) {
+			return false;
+		}
+	}
+
+	return props.executable || props.foreignCredentials.length > 0;
+});
+
+const nodeTypeVersions = computed(() => {
+	if (!node.value) return [];
+	return nodeTypesStore.getNodeVersions(node.value.type);
+});
+
+const latestVersion = computed(() => Math.max(...nodeTypeVersions.value));
+
+const isLatestNodeVersion = computed(
+	() => !node.value?.typeVersion || latestVersion.value === node.value.typeVersion,
+);
+
+const executeButtonTooltip = computed(() => {
+	if (
+		node.value &&
+		isLatestNodeVersion.value &&
+		props.inputSize > 1 &&
+		!NodeHelpers.isSingleExecution(node.value.type, node.value.parameters)
+	) {
+		return i18n.baseText('nodeSettings.executeButtonTooltip.times', {
+			interpolate: { inputSize: props.inputSize },
+		});
+	}
+	return '';
+});
+
+const nodeVersionTag = computed(() => {
+	if (!props.nodeType || props.nodeType.hidden) {
+		return i18n.baseText('nodeSettings.deprecated');
+	}
+
+	if (isLatestNodeVersion.value) {
+		return i18n.baseText('nodeSettings.latest');
+	}
+
+	return i18n.baseText('nodeSettings.latestVersion', {
+		interpolate: { version: latestVersion.value.toString() },
+	});
+});
+
+const parameters = computed(() => {
+	if (props.nodeType === null) {
+		return [];
+	}
+
+	return props.nodeType?.properties ?? [];
+});
+
+const parametersSetting = computed(() => parameters.value.filter((item) => item.isNodeSetting));
+
+const parametersNoneSetting = computed(() =>
+	parameters.value.filter((item) => !item.isNodeSetting),
+);
+
+const outputPanelEditMode = computed(() => ndvStore.outputPanelEditMode);
+
+const isCommunityNode = computed(() => !!node.value && isCommunityPackageName(node.value.type));
+
+const hasForeignCredential = computed(() => props.foreignCredentials.length > 0);
+
+const usedCredentials = computed(() =>
+	Object.values(workflowsStore.usedCredentials).filter((credential) =>
+		Object.values(node.value?.credentials || []).find(
+			(nodeCredential) => nodeCredential.id === credential.id,
 		),
-		isReadOnly(): boolean {
-			return this.readOnly || this.hasForeignCredential;
-		},
-		isExecutable(): boolean {
-			if (this.nodeType && this.node) {
-				const workflow = this.workflowsStore.getCurrentWorkflow();
-				const workflowNode = workflow.getNode(this.node.name);
-				const inputs = NodeHelpers.getNodeInputs(workflow, workflowNode!, this.nodeType);
-				const inputNames = NodeHelpers.getConnectionTypes(inputs);
+	),
+);
 
-				if (!inputNames.includes(NodeConnectionType.Main) && !this.isTriggerNode) {
-					return false;
-				}
+const credentialOwnerName = computed(() => {
+	const credential = usedCredentials.value
+		? Object.values(usedCredentials.value).find(
+				(credential) => credential.id === props.foreignCredentials[0],
+			)
+		: undefined;
+
+	return credentialsStore.getCredentialOwnerName(credential);
+});
+
+const setValue = (name: string, value: NodeParameterValue) => {
+	const nameParts = name.split('.');
+	let lastNamePart: string | undefined = nameParts.pop();
+
+	let isArray = false;
+	if (lastNamePart !== undefined && lastNamePart.includes('[')) {
+		// It includes an index so we have to extract it
+		const lastNameParts = lastNamePart.match(/(.*)\[(\d+)\]$/);
+		if (lastNameParts) {
+			nameParts.push(lastNameParts[1]);
+			lastNamePart = lastNameParts[2];
+			isArray = true;
+		}
+	}
+
+	// Set the value so that everything updates correctly in the UI
+	if (nameParts.length === 0) {
+		// Data is on top level
+		if (value === null) {
+			// Property should be deleted
+			if (lastNamePart) {
+				const { [lastNamePart]: removedNodeValue, ...remainingNodeValues } = nodeValues.value;
+				nodeValues.value = remainingNodeValues;
 			}
-
-			return this.executable || this.hasForeignCredential;
-		},
-		nodeTypeName(): string {
-			if (this.nodeType) {
-				const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
-
-				return this.$locale.headerText({
-					key: `headers.${shortNodeType}.displayName`,
-					fallback: this.nodeType.name,
-				});
-			}
-
-			return '';
-		},
-		nodeTypeVersions(): number[] {
-			if (!this.node) return [];
-			return this.nodeTypesStore.getNodeVersions(this.node.type);
-		},
-		latestVersion(): number {
-			return Math.max(...this.nodeTypeVersions);
-		},
-		isLatestNodeVersion(): boolean {
-			return !this.node?.typeVersion || this.latestVersion === this.node.typeVersion;
-		},
-		executeButtonTooltip(): string {
-			if (
-				this.node &&
-				this.isLatestNodeVersion &&
-				this.inputSize > 1 &&
-				!NodeHelpers.isSingleExecution(this.node.type, this.node.parameters)
-			) {
-				return this.$locale.baseText('nodeSettings.executeButtonTooltip.times', {
-					interpolate: { inputSize: this.inputSize },
-				});
-			}
-			return '';
-		},
-		nodeVersionTag(): string {
-			if (!this.nodeType || this.nodeType.hidden) {
-				return this.$locale.baseText('nodeSettings.deprecated');
-			}
-
-			if (this.isLatestNodeVersion) {
-				return this.$locale.baseText('nodeSettings.latest');
-			}
-
-			return this.$locale.baseText('nodeSettings.latestVersion', {
-				interpolate: { version: this.latestVersion.toString() },
-			});
-		},
-		nodeTypeDescription(): string {
-			if (this.nodeType?.description) {
-				const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
-
-				return this.$locale.headerText({
-					key: `headers.${shortNodeType}.description`,
-					fallback: this.nodeType.description,
-				});
-			} else {
-				return this.$locale.baseText('nodeSettings.noDescriptionFound');
-			}
-		},
-		headerStyle(): object {
-			if (!this.node) {
-				return {};
-			}
-
-			return {
-				'background-color': this.node.color,
+		} else {
+			// Value should be set
+			nodeValues.value = {
+				...nodeValues.value,
+				[lastNamePart as string]: value,
 			};
-		},
-		node(): INodeUi | null {
-			return this.ndvStore.activeNode;
-		},
-		parametersSetting(): INodeProperties[] {
-			return this.parameters.filter((item) => {
-				return item.isNodeSetting;
-			});
-		},
-		parametersNoneSetting(): INodeProperties[] {
-			return this.parameters.filter((item) => {
-				return !item.isNodeSetting;
-			});
-		},
-		parameters(): INodeProperties[] {
-			if (this.nodeType === null) {
-				return [];
+		}
+	} else {
+		// Data is on lower level
+		if (value === null) {
+			// Property should be deleted
+			let tempValue = get(nodeValues.value, nameParts.join('.')) as
+				| INodeParameters
+				| INodeParameters[];
+
+			if (lastNamePart && !Array.isArray(tempValue)) {
+				const { [lastNamePart]: removedNodeValue, ...remainingNodeValues } = tempValue;
+				tempValue = remainingNodeValues;
 			}
 
-			return this.nodeType?.properties ?? [];
-		},
-		outputPanelEditMode(): { enabled: boolean; value: string } {
-			return this.ndvStore.outputPanelEditMode;
-		},
-		isCommunityNode(): boolean {
-			return !!this.node && isCommunityPackageName(this.node.type);
-		},
-		isTriggerNode(): boolean {
-			return !!this.node && this.nodeTypesStore.isTriggerNode(this.node.type);
-		},
-		workflowOwnerName(): string {
-			return this.workflowsEEStore.getWorkflowOwnerName(`${this.workflowsStore.workflowId}`);
-		},
-		hasForeignCredential(): boolean {
-			return this.foreignCredentials.length > 0;
-		},
-		usedCredentials(): IUsedCredential[] {
-			return Object.values(this.workflowsStore.usedCredentials).filter((credential) => {
-				return Object.values(this.node?.credentials || []).find((nodeCredential) => {
-					return nodeCredential.id === credential.id;
-				});
-			});
-		},
-		credentialOwnerName(): string {
-			const credential = this.usedCredentials
-				? Object.values(this.usedCredentials).find((credential) => {
-						return credential.id === this.foreignCredentials[0];
-					})
-				: undefined;
-
-			return this.credentialsStore.getCredentialOwnerName(credential);
-		},
-	},
-	props: {
-		eventBus: {
-			type: Object as PropType<EventBus>,
-		},
-		dragging: {
-			type: Boolean,
-		},
-		pushRef: {
-			type: String,
-		},
-		nodeType: {
-			type: Object as PropType<INodeTypeDescription | null>,
-		},
-		readOnly: {
-			type: Boolean,
-			default: false,
-		},
-		foreignCredentials: {
-			type: Array as PropType<string[]>,
-			default: () => [],
-		},
-		blockUI: {
-			type: Boolean,
-			default: false,
-		},
-		executable: {
-			type: Boolean,
-			default: true,
-		},
-		inputSize: {
-			type: Number,
-			default: 0,
-		},
-	},
-	data() {
-		return {
-			nodeValid: true,
-			nodeColor: null,
-			openPanel: 'params' as 'params' | 'settings',
-			nodeValues: {
-				color: '#ff0000',
-				alwaysOutputData: false,
-				executeOnce: false,
-				notesInFlow: false,
-				onError: 'stopWorkflow',
-				retryOnFail: false,
-				maxTries: 3,
-				waitBetweenTries: 1000,
-				notes: '',
-				parameters: {},
-			} as INodeParameters,
-			nodeValuesInitialized: false, // Used to prevent nodeValues from being overwritten by defaults on reopening ndv
-			nodeSettings: [] as INodeProperties[],
-			COMMUNITY_NODES_INSTALLATION_DOCS_URL,
-			CUSTOM_NODES_DOCS_URL,
-			MAIN_NODE_PANEL_WIDTH,
-			hiddenIssuesInputs: [] as string[],
-		};
-	},
-	watch: {
-		node() {
-			this.setNodeValues();
-		},
-	},
-	mounted() {
-		this.populateHiddenIssuesSet();
-		this.populateSettings();
-		this.setNodeValues();
-		this.eventBus?.on('openSettings', this.openSettings);
-
-		this.nodeHelpers.updateNodeParameterIssues(this.node as INodeUi, this.nodeType);
-		importCurlEventBus.on('setHttpNodeParameters', this.setHttpNodeParameters);
-		ndvEventBus.on('updateParameterValue', this.valueChanged);
-	},
-	beforeUnmount() {
-		this.eventBus?.off('openSettings', this.openSettings);
-		importCurlEventBus.off('setHttpNodeParameters', this.setHttpNodeParameters);
-		ndvEventBus.off('updateParameterValue', this.valueChanged);
-	},
-	methods: {
-		setHttpNodeParameters(parameters: CurlToJSONResponse) {
-			try {
-				this.valueChanged({
-					node: this.node?.name,
-					name: 'parameters',
-					value: parameters as unknown as INodeParameters,
-				});
-			} catch {}
-		},
-		onSwitchSelectedNode(node: string) {
-			this.$emit('switchSelectedNode', node);
-		},
-		onOpenConnectionNodeCreator(node: string, connectionType: NodeConnectionType) {
-			this.$emit('openConnectionNodeCreator', node, connectionType);
-		},
-		populateHiddenIssuesSet() {
-			if (!this.node || !this.workflowsStore.isNodePristine(this.node.name)) return;
-
-			this.hiddenIssuesInputs.push('credentials');
-			this.parametersNoneSetting.forEach((parameter) => {
-				this.hiddenIssuesInputs.push(parameter.name);
-			});
-
-			this.workflowsStore.setNodePristine(this.node.name, false);
-		},
-		populateSettings() {
-			if (this.isExecutable && !this.isTriggerNode) {
-				this.nodeSettings.push(
-					...([
-						{
-							displayName: this.$locale.baseText('nodeSettings.alwaysOutputData.displayName'),
-							name: 'alwaysOutputData',
-							type: 'boolean',
-							default: false,
-							noDataExpression: true,
-							description: this.$locale.baseText('nodeSettings.alwaysOutputData.description'),
-						},
-						{
-							displayName: this.$locale.baseText('nodeSettings.executeOnce.displayName'),
-							name: 'executeOnce',
-							type: 'boolean',
-							default: false,
-							noDataExpression: true,
-							description: this.$locale.baseText('nodeSettings.executeOnce.description'),
-						},
-						{
-							displayName: this.$locale.baseText('nodeSettings.retryOnFail.displayName'),
-							name: 'retryOnFail',
-							type: 'boolean',
-							default: false,
-							noDataExpression: true,
-							description: this.$locale.baseText('nodeSettings.retryOnFail.description'),
-						},
-						{
-							displayName: this.$locale.baseText('nodeSettings.maxTries.displayName'),
-							name: 'maxTries',
-							type: 'number',
-							typeOptions: {
-								minValue: 2,
-								maxValue: 5,
-							},
-							default: 3,
-							displayOptions: {
-								show: {
-									retryOnFail: [true],
-								},
-							},
-							noDataExpression: true,
-							description: this.$locale.baseText('nodeSettings.maxTries.description'),
-						},
-						{
-							displayName: this.$locale.baseText('nodeSettings.waitBetweenTries.displayName'),
-							name: 'waitBetweenTries',
-							type: 'number',
-							typeOptions: {
-								minValue: 0,
-								maxValue: 5000,
-							},
-							default: 1000,
-							displayOptions: {
-								show: {
-									retryOnFail: [true],
-								},
-							},
-							noDataExpression: true,
-							description: this.$locale.baseText('nodeSettings.waitBetweenTries.description'),
-						},
-						{
-							displayName: this.$locale.baseText('nodeSettings.onError.displayName'),
-							name: 'onError',
-							type: 'options',
-							options: [
-								{
-									name: this.$locale.baseText(
-										'nodeSettings.onError.options.stopWorkflow.displayName',
-									),
-									value: 'stopWorkflow',
-									description: this.$locale.baseText(
-										'nodeSettings.onError.options.stopWorkflow.description',
-									),
-								},
-								{
-									name: this.$locale.baseText(
-										'nodeSettings.onError.options.continueRegularOutput.displayName',
-									),
-									value: 'continueRegularOutput',
-									description: this.$locale.baseText(
-										'nodeSettings.onError.options.continueRegularOutput.description',
-									),
-								},
-								{
-									name: this.$locale.baseText(
-										'nodeSettings.onError.options.continueErrorOutput.displayName',
-									),
-									value: 'continueErrorOutput',
-									description: this.$locale.baseText(
-										'nodeSettings.onError.options.continueErrorOutput.description',
-									),
-								},
-							],
-							default: 'stopWorkflow',
-							noDataExpression: true,
-							description: this.$locale.baseText('nodeSettings.onError.description'),
-						},
-					] as INodeProperties[]),
+			if (isArray && Array.isArray(tempValue) && tempValue.length === 0) {
+				// If a value from an array got delete and no values are left
+				// delete also the parent
+				lastNamePart = nameParts.pop();
+				tempValue = get(nodeValues.value, nameParts.join('.')) as INodeParameters;
+				if (lastNamePart) {
+					const { [lastNamePart]: removedArrayNodeValue, ...remainingArrayNodeValues } = tempValue;
+					tempValue = remainingArrayNodeValues;
+				}
+			}
+		} else {
+			// Value should be set
+			if (typeof value === 'object') {
+				set(
+					get(nodeValues.value, nameParts.join('.')) as Record<string, unknown>,
+					lastNamePart as string,
+					deepCopy(value),
+				);
+			} else {
+				set(
+					get(nodeValues.value, nameParts.join('.')) as Record<string, unknown>,
+					lastNamePart as string,
+					value,
 				);
 			}
-			this.nodeSettings.push(
-				...([
-					{
-						displayName: this.$locale.baseText('nodeSettings.notes.displayName'),
-						name: 'notes',
-						type: 'string',
-						typeOptions: {
-							rows: 5,
-						},
-						default: '',
-						noDataExpression: true,
-						description: this.$locale.baseText('nodeSettings.notes.description'),
-					},
-					{
-						displayName: this.$locale.baseText('nodeSettings.notesInFlow.displayName'),
-						name: 'notesInFlow',
-						type: 'boolean',
-						default: false,
-						noDataExpression: true,
-						description: this.$locale.baseText('nodeSettings.notesInFlow.description'),
-					},
-				] as INodeProperties[]),
+		}
+	}
+
+	nodeValues.value = { ...nodeValues.value };
+};
+
+/**
+ * Removes node values that are not valid options for the given parameter.
+ * This can happen when there are multiple node parameters with the same name
+ * but different options and display conditions
+ * @param nodeType The node type description
+ * @param nodeParameterValues Current node parameter values
+ * @param updatedParameter The parameter that was updated. Will be used to determine which parameters to remove based on their display conditions and option values
+ */
+const removeMismatchedOptionValues = (
+	nodeType: INodeTypeDescription,
+	nodeParameterValues: INodeParameters | null,
+	updatedParameter: { name: string; value: NodeParameterValue },
+) => {
+	nodeType.properties.forEach((prop) => {
+		const displayOptions = prop.displayOptions;
+		// Not processing parameters that are not set or don't have options
+		if (!nodeParameterValues?.hasOwnProperty(prop.name) || !displayOptions || !prop.options) {
+			return;
+		}
+		// Only process the parameters that depend on the updated parameter
+		const showCondition = displayOptions.show?.[updatedParameter.name];
+		const hideCondition = displayOptions.hide?.[updatedParameter.name];
+		if (showCondition === undefined && hideCondition === undefined) {
+			return;
+		}
+
+		let hasValidOptions = true;
+
+		// Every value should be a possible option
+		if (isINodePropertyCollectionList(prop.options) || isINodePropertiesList(prop.options)) {
+			hasValidOptions = Object.keys(nodeParameterValues).every(
+				(key) => (prop.options ?? []).find((option) => option.name === key) !== undefined,
 			);
-		},
-		onParameterBlur(parameterName: string) {
-			this.hiddenIssuesInputs = this.hiddenIssuesInputs.filter((name) => name !== parameterName);
-		},
-		onWorkflowActivate() {
-			this.hiddenIssuesInputs = [];
-			this.$emit('activate');
-		},
-		onNodeExecute() {
-			this.hiddenIssuesInputs = [];
-			(this.$refs.subConnections as InstanceType<typeof NDVSubConnections>)?.showNodeInputsIssues();
-			this.$emit('execute');
-		},
-		setValue(name: string, value: NodeParameterValue) {
-			const nameParts = name.split('.');
-			let lastNamePart: string | undefined = nameParts.pop();
+		} else if (isINodePropertyOptionsList(prop.options)) {
+			hasValidOptions = !!prop.options.find(
+				(option) => option.value === nodeParameterValues[prop.name],
+			);
+		}
 
-			let isArray = false;
-			if (lastNamePart !== undefined && lastNamePart.includes('[')) {
-				// It includes an index so we have to extract it
-				const lastNameParts = lastNamePart.match(/(.*)\[(\d+)\]$/);
-				if (lastNameParts) {
-					nameParts.push(lastNameParts[1]);
-					lastNamePart = lastNameParts[2];
-					isArray = true;
-				}
-			}
+		if (!hasValidOptions && displayParameter(nodeParameterValues, prop, node.value)) {
+			unset(nodeParameterValues as object, prop.name);
+		}
+	});
+};
 
-			// Set the value so that everything updates correctly in the UI
-			if (nameParts.length === 0) {
-				// Data is on top level
-				if (value === null) {
-					// Property should be deleted
-					if (lastNamePart) {
-						const { [lastNamePart]: removedNodeValue, ...remainingNodeValues } = this.nodeValues;
-						this.nodeValues = remainingNodeValues;
-					}
-				} else {
-					// Value should be set
-					this.nodeValues = {
-						...this.nodeValues,
-						[lastNamePart as string]: value,
-					};
-				}
-			} else {
-				// Data is on lower level
-				if (value === null) {
-					// Property should be deleted
-					let tempValue = get(this.nodeValues, nameParts.join('.')) as
-						| INodeParameters
-						| INodeParameters[];
+const valueChanged = (parameterData: IUpdateInformation) => {
+	let newValue: NodeParameterValue;
 
-					if (lastNamePart && !Array.isArray(tempValue)) {
-						const { [lastNamePart]: removedNodeValue, ...remainingNodeValues } = tempValue;
-						tempValue = remainingNodeValues;
-					}
+	if (parameterData.hasOwnProperty('value')) {
+		// New value is given
+		newValue = parameterData.value as string | number;
+	} else {
+		// Get new value from nodeData where it is set already
+		newValue = get(nodeValues.value, parameterData.name) as NodeParameterValue;
+	}
+	// Save the node name before we commit the change because
+	// we need the old name to rename the node properly
+	const nodeNameBefore = parameterData.node || node.value?.name;
 
-					if (isArray && Array.isArray(tempValue) && tempValue.length === 0) {
-						// If a value from an array got delete and no values are left
-						// delete also the parent
-						lastNamePart = nameParts.pop();
-						tempValue = get(this.nodeValues, nameParts.join('.')) as INodeParameters;
-						if (lastNamePart) {
-							const { [lastNamePart]: removedArrayNodeValue, ...remainingArrayNodeValues } =
-								tempValue;
-							tempValue = remainingArrayNodeValues;
-						}
-					}
-				} else {
-					// Value should be set
-					if (typeof value === 'object') {
-						set(
-							get(this.nodeValues, nameParts.join('.')) as Record<string, unknown>,
-							lastNamePart as string,
-							deepCopy(value),
-						);
-					} else {
-						set(
-							get(this.nodeValues, nameParts.join('.')) as Record<string, unknown>,
-							lastNamePart as string,
-							value,
-						);
-					}
-				}
-			}
+	if (!nodeNameBefore) {
+		return;
+	}
 
-			this.nodeValues = { ...this.nodeValues };
-		},
-		credentialSelected(updateInformation: INodeUpdatePropertiesInformation) {
-			// Update the values on the node
-			this.workflowsStore.updateNodeProperties(updateInformation);
+	const _node = workflowsStore.getNodeByName(nodeNameBefore);
 
-			const node = this.workflowsStore.getNodeByName(updateInformation.name);
+	if (_node === null) {
+		return;
+	}
 
-			if (node) {
-				// Update the issues
-				this.nodeHelpers.updateNodeCredentialIssues(node);
-			}
+	if (parameterData.name === 'onError') {
+		// If that parameter changes, we need to redraw the connections, as the error output may need to be added or removed
+		emit('redrawRequired');
+	}
 
-			void this.externalHooks.run('nodeSettings.credentialSelected', { updateInformation });
-		},
-		nameChanged(name: string) {
-			if (this.node) {
-				this.historyStore.pushCommandToUndo(new RenameNodeCommand(this.node.name, name));
-			}
-			this.valueChanged({
-				value: name,
-				name: 'name',
-			});
-		},
-		valueChanged(parameterData: IUpdateInformation) {
-			let newValue: NodeParameterValue;
+	if (parameterData.name === 'name') {
+		// Name of node changed so we have to set also the new node name as active
 
-			if (parameterData.hasOwnProperty('value')) {
-				// New value is given
-				newValue = parameterData.value as string | number;
-			} else {
-				// Get new value from nodeData where it is set already
-				newValue = get(this.nodeValues, parameterData.name) as NodeParameterValue;
-			}
-			// Save the node name before we commit the change because
-			// we need the old name to rename the node properly
-			const nodeNameBefore = parameterData.node || this.node?.name;
+		// Update happens in NodeView so emit event
+		const sendData = {
+			value: newValue,
+			oldValue: nodeNameBefore,
+			name: parameterData.name,
+		};
+		emit('valueChanged', sendData);
+	} else if (parameterData.name === 'parameters') {
+		const nodeType = nodeTypesStore.getNodeType(_node.type, _node.typeVersion);
+		if (!nodeType) {
+			return;
+		}
 
-			if (!nodeNameBefore) {
-				return;
-			}
+		// Get only the parameters which are different to the defaults
+		let nodeParameters = NodeHelpers.getNodeParameters(
+			nodeType.properties,
+			_node.parameters,
+			false,
+			false,
+			_node,
+		);
 
-			const node = this.workflowsStore.getNodeByName(nodeNameBefore);
+		const oldNodeParameters = Object.assign({}, nodeParameters);
 
-			if (node === null) {
-				return;
-			}
+		// Copy the data because it is the data of vuex so make sure that
+		// we do not edit it directly
+		nodeParameters = deepCopy(nodeParameters);
 
-			if (parameterData.name === 'onError') {
-				// If that parameter changes, we need to redraw the connections, as the error output may need to be added or removed
-				this.$emit('redrawRequired');
-			}
-
-			if (parameterData.name === 'name') {
-				// Name of node changed so we have to set also the new node name as active
-
-				// Update happens in NodeView so emit event
-				const sendData = {
-					value: newValue,
-					oldValue: nodeNameBefore,
-					name: parameterData.name,
-				};
-				this.$emit('valueChanged', sendData);
-			} else if (parameterData.name === 'parameters') {
-				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-				if (!nodeType) {
-					return;
-				}
-
-				// Get only the parameters which are different to the defaults
-				let nodeParameters = NodeHelpers.getNodeParameters(
-					nodeType.properties,
-					node.parameters,
-					false,
-					false,
-					node,
-				);
-
-				const oldNodeParameters = Object.assign({}, nodeParameters);
-
-				// Copy the data because it is the data of vuex so make sure that
-				// we do not edit it directly
-				nodeParameters = deepCopy(nodeParameters);
-
-				if (parameterData.value && typeof parameterData.value === 'object') {
-					for (const parameterName of Object.keys(parameterData.value)) {
-						//@ts-ignore
-						newValue = parameterData.value[parameterName];
-
-						// Remove the 'parameters.' from the beginning to just have the
-						// actual parameter name
-						const parameterPath = parameterName.split('.').slice(1).join('.');
-
-						// Check if the path is supposed to change an array and if so get
-						// the needed data like path and index
-						const parameterPathArray = parameterPath.match(/(.*)\[(\d+)\]$/);
-
-						// Apply the new value
-						//@ts-ignore
-						if (parameterData[parameterName] === undefined && parameterPathArray !== null) {
-							// Delete array item
-							const path = parameterPathArray[1];
-							const index = parameterPathArray[2];
-							const data = get(nodeParameters, path);
-
-							if (Array.isArray(data)) {
-								data.splice(parseInt(index, 10), 1);
-								set(nodeParameters as object, path, data);
-							}
-						} else {
-							if (newValue === undefined) {
-								unset(nodeParameters as object, parameterPath);
-							} else {
-								set(nodeParameters as object, parameterPath, newValue);
-							}
-						}
-
-						void this.externalHooks.run('nodeSettings.valueChanged', {
-							parameterPath,
-							newValue,
-							parameters: this.parameters,
-							oldNodeParameters,
-						});
-					}
-				}
-
-				// Get the parameters with the now new defaults according to the
-				// from the user actually defined parameters
-				nodeParameters = NodeHelpers.getNodeParameters(
-					nodeType.properties,
-					nodeParameters as INodeParameters,
-					true,
-					false,
-					node,
-				);
-
-				for (const key of Object.keys(nodeParameters as object)) {
-					if (nodeParameters && nodeParameters[key] !== null && nodeParameters[key] !== undefined) {
-						this.setValue(`parameters.${key}`, nodeParameters[key] as string);
-					}
-				}
-
-				if (nodeParameters) {
-					const updateInformation: IUpdateInformation = {
-						name: node.name,
-						value: nodeParameters,
-					};
-
-					this.workflowsStore.setNodeParameters(updateInformation);
-
-					this.nodeHelpers.updateNodeParameterIssuesByName(node.name);
-					this.nodeHelpers.updateNodeCredentialIssuesByName(node.name);
-				}
-			} else if (parameterData.name.startsWith('parameters.')) {
-				// A node parameter changed
-
-				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-				if (!nodeType) {
-					return;
-				}
-
-				if (
-					parameterData.type &&
-					this.workflowsStore.nodeHasOutputConnection(node.name) &&
-					SHOULD_CLEAR_NODE_OUTPUTS[nodeType.name]?.eventTypes.includes(parameterData.type) &&
-					SHOULD_CLEAR_NODE_OUTPUTS[nodeType.name]?.parameterPaths.includes(parameterData.name)
-				) {
-					this.workflowsStore.removeAllNodeConnection(node, { preserveInputConnections: true });
-					this.showMessage({
-						type: 'warning',
-						title: this.$locale.baseText('nodeSettings.outputCleared.title'),
-						message: this.$locale.baseText('nodeSettings.outputCleared.message'),
-					});
-				}
-
-				// Get only the parameters which are different to the defaults
-				let nodeParameters = NodeHelpers.getNodeParameters(
-					nodeType.properties,
-					node.parameters,
-					false,
-					false,
-					node,
-				);
-				const oldNodeParameters = Object.assign({}, nodeParameters);
-
-				// Copy the data because it is the data of vuex so make sure that
-				// we do not edit it directly
-				nodeParameters = deepCopy(nodeParameters);
+		if (parameterData.value && typeof parameterData.value === 'object') {
+			for (const parameterName of Object.keys(parameterData.value)) {
+				//@ts-ignore
+				newValue = parameterData.value[parameterName];
 
 				// Remove the 'parameters.' from the beginning to just have the
 				// actual parameter name
-				const parameterPath = parameterData.name.split('.').slice(1).join('.');
+				const parameterPath = parameterName.split('.').slice(1).join('.');
 
 				// Check if the path is supposed to change an array and if so get
 				// the needed data like path and index
 				const parameterPathArray = parameterPath.match(/(.*)\[(\d+)\]$/);
 
 				// Apply the new value
-				if (parameterData.value === undefined && parameterPathArray !== null) {
+				//@ts-ignore
+				if (parameterData[parameterName] === undefined && parameterPathArray !== null) {
 					// Delete array item
 					const path = parameterPathArray[1];
 					const index = parameterPathArray[2];
@@ -756,250 +426,510 @@ export default defineComponent({
 					} else {
 						set(nodeParameters as object, parameterPath, newValue);
 					}
-					// If value is updated, remove parameter values that have invalid options
-					// so getNodeParameters checks don't fail
-					this.removeMismatchedOptionValues(nodeType, nodeParameters, {
-						name: parameterPath,
-						value: newValue,
-					});
 				}
 
-				// Get the parameters with the now new defaults according to the
-				// from the user actually defined parameters
-				nodeParameters = NodeHelpers.getNodeParameters(
-					nodeType.properties,
-					nodeParameters as INodeParameters,
-					true,
-					false,
-					node,
-				);
-
-				for (const key of Object.keys(nodeParameters as object)) {
-					if (nodeParameters && nodeParameters[key] !== null && nodeParameters[key] !== undefined) {
-						this.setValue(`parameters.${key}`, nodeParameters[key] as string);
-					}
-				}
-
-				// Update the data in vuex
-				const updateInformation: IUpdateInformation = {
-					name: node.name,
-					value: nodeParameters,
-				};
-
-				this.workflowsStore.setNodeParameters(updateInformation);
-
-				void this.externalHooks.run('nodeSettings.valueChanged', {
+				void externalHooks.run('nodeSettings.valueChanged', {
 					parameterPath,
 					newValue,
-					parameters: this.parameters,
+					parameters: parameters.value,
 					oldNodeParameters,
 				});
-
-				this.nodeHelpers.updateNodeParameterIssuesByName(node.name);
-				this.nodeHelpers.updateNodeCredentialIssuesByName(node.name);
-				this.$telemetry.trackNodeParametersValuesChange(nodeType.name, parameterData);
-			} else {
-				// A property on the node itself changed
-
-				// Update data in settings
-				this.nodeValues = {
-					...this.nodeValues,
-					[parameterData.name]: newValue,
-				};
-
-				// Update data in vuex
-				const updateInformation = {
-					name: node.name,
-					key: parameterData.name,
-					value: newValue,
-				};
-
-				this.workflowsStore.setNodeValue(updateInformation);
 			}
-		},
-		/**
-		 * Removes node values that are not valid options for the given parameter.
-		 * This can happen when there are multiple node parameters with the same name
-		 * but different options and display conditions
-		 * @param nodeType The node type description
-		 * @param nodeParameterValues Current node parameter values
-		 * @param updatedParameter The parameter that was updated. Will be used to determine which parameters to remove based on their display conditions and option values
-		 */
-		removeMismatchedOptionValues(
-			nodeType: INodeTypeDescription,
-			nodeParameterValues: INodeParameters | null,
-			updatedParameter: { name: string; value: NodeParameterValue },
+		}
+
+		// Get the parameters with the now new defaults according to the
+		// from the user actually defined parameters
+		nodeParameters = NodeHelpers.getNodeParameters(
+			nodeType.properties,
+			nodeParameters as INodeParameters,
+			true,
+			false,
+			_node,
+		);
+
+		for (const key of Object.keys(nodeParameters as object)) {
+			if (nodeParameters && nodeParameters[key] !== null && nodeParameters[key] !== undefined) {
+				setValue(`parameters.${key}`, nodeParameters[key] as string);
+			}
+		}
+
+		if (nodeParameters) {
+			const updateInformation: IUpdateInformation = {
+				name: _node.name,
+				value: nodeParameters,
+			};
+
+			workflowsStore.setNodeParameters(updateInformation);
+
+			nodeHelpers.updateNodeParameterIssuesByName(_node.name);
+			nodeHelpers.updateNodeCredentialIssuesByName(_node.name);
+		}
+	} else if (parameterData.name.startsWith('parameters.')) {
+		// A node parameter changed
+
+		const nodeType = nodeTypesStore.getNodeType(_node.type, _node.typeVersion);
+		if (!nodeType) {
+			return;
+		}
+
+		if (
+			parameterData.type &&
+			workflowsStore.nodeHasOutputConnection(_node.name) &&
+			SHOULD_CLEAR_NODE_OUTPUTS[nodeType.name]?.eventTypes.includes(parameterData.type) &&
+			SHOULD_CLEAR_NODE_OUTPUTS[nodeType.name]?.parameterPaths.includes(parameterData.name)
 		) {
-			nodeType.properties.forEach((prop) => {
-				const displayOptions = prop.displayOptions;
-				// Not processing parameters that are not set or don't have options
-				if (!nodeParameterValues?.hasOwnProperty(prop.name) || !displayOptions || !prop.options) {
-					return;
-				}
-				// Only process the parameters that depend on the updated parameter
-				const showCondition = displayOptions.show?.[updatedParameter.name];
-				const hideCondition = displayOptions.hide?.[updatedParameter.name];
-				if (showCondition === undefined && hideCondition === undefined) {
-					return;
-				}
-
-				let hasValidOptions = true;
-
-				// Every value should be a possible option
-				if (isINodePropertyCollectionList(prop.options) || isINodePropertiesList(prop.options)) {
-					hasValidOptions = Object.keys(nodeParameterValues).every(
-						(key) => (prop.options ?? []).find((option) => option.name === key) !== undefined,
-					);
-				} else if (isINodePropertyOptionsList(prop.options)) {
-					hasValidOptions = !!prop.options.find(
-						(option) => option.value === nodeParameterValues[prop.name],
-					);
-				}
-
-				if (!hasValidOptions && displayParameter(nodeParameterValues, prop, this.node)) {
-					unset(nodeParameterValues as object, prop.name);
-				}
+			workflowsStore.removeAllNodeConnection(_node, { preserveInputConnections: true });
+			showMessage({
+				type: 'warning',
+				title: i18n.baseText('nodeSettings.outputCleared.title'),
+				message: i18n.baseText('nodeSettings.outputCleared.message'),
 			});
-		},
-		/**
-		 * Sets the values of the active node in the internal settings variables
-		 */
-		setNodeValues() {
-			// No node selected
-			if (!this.node) {
-				this.nodeValuesInitialized = true;
-				return;
+		}
+
+		// Get only the parameters which are different to the defaults
+		let nodeParameters = NodeHelpers.getNodeParameters(
+			nodeType.properties,
+			_node.parameters,
+			false,
+			false,
+			_node,
+		);
+		const oldNodeParameters = Object.assign({}, nodeParameters);
+
+		// Copy the data because it is the data of vuex so make sure that
+		// we do not edit it directly
+		nodeParameters = deepCopy(nodeParameters);
+
+		// Remove the 'parameters.' from the beginning to just have the
+		// actual parameter name
+		const parameterPath = parameterData.name.split('.').slice(1).join('.');
+
+		// Check if the path is supposed to change an array and if so get
+		// the needed data like path and index
+		const parameterPathArray = parameterPath.match(/(.*)\[(\d+)\]$/);
+
+		// Apply the new value
+		if (parameterData.value === undefined && parameterPathArray !== null) {
+			// Delete array item
+			const path = parameterPathArray[1];
+			const index = parameterPathArray[2];
+			const data = get(nodeParameters, path);
+
+			if (Array.isArray(data)) {
+				data.splice(parseInt(index, 10), 1);
+				set(nodeParameters as object, path, data);
 			}
-
-			if (this.nodeType !== null) {
-				this.nodeValid = true;
-
-				const foundNodeSettings = [];
-				if (this.node.color) {
-					foundNodeSettings.push('color');
-					this.nodeValues = {
-						...this.nodeValues,
-						color: this.node.color,
-					};
-				}
-
-				if (this.node.notes) {
-					foundNodeSettings.push('notes');
-					this.nodeValues = {
-						...this.nodeValues,
-						notes: this.node.notes,
-					};
-				}
-
-				if (this.node.alwaysOutputData) {
-					foundNodeSettings.push('alwaysOutputData');
-					this.nodeValues = {
-						...this.nodeValues,
-						alwaysOutputData: this.node.alwaysOutputData,
-					};
-				}
-
-				if (this.node.executeOnce) {
-					foundNodeSettings.push('executeOnce');
-					this.nodeValues = {
-						...this.nodeValues,
-						executeOnce: this.node.executeOnce,
-					};
-				}
-
-				if (this.node.continueOnFail) {
-					foundNodeSettings.push('onError');
-					this.nodeValues = {
-						...this.nodeValues,
-						onError: 'continueRegularOutput',
-					};
-				}
-
-				if (this.node.onError) {
-					foundNodeSettings.push('onError');
-					this.nodeValues = {
-						...this.nodeValues,
-						onError: this.node.onError,
-					};
-				}
-
-				if (this.node.notesInFlow) {
-					foundNodeSettings.push('notesInFlow');
-					this.nodeValues = {
-						...this.nodeValues,
-						notesInFlow: this.node.notesInFlow,
-					};
-				}
-
-				if (this.node.retryOnFail) {
-					foundNodeSettings.push('retryOnFail');
-					this.nodeValues = {
-						...this.nodeValues,
-						retryOnFail: this.node.retryOnFail,
-					};
-				}
-
-				if (this.node.maxTries) {
-					foundNodeSettings.push('maxTries');
-					this.nodeValues = {
-						...this.nodeValues,
-						maxTries: this.node.maxTries,
-					};
-				}
-
-				if (this.node.waitBetweenTries) {
-					foundNodeSettings.push('waitBetweenTries');
-					this.nodeValues = {
-						...this.nodeValues,
-						waitBetweenTries: this.node.waitBetweenTries,
-					};
-				}
-
-				// Set default node settings
-				for (const nodeSetting of this.nodeSettings) {
-					if (!foundNodeSettings.includes(nodeSetting.name)) {
-						// Set default value
-						this.nodeValues = {
-							...this.nodeValues,
-							[nodeSetting.name]: nodeSetting.default,
-						};
-					}
-				}
-
-				this.nodeValues = {
-					...this.nodeValues,
-					parameters: deepCopy(this.node.parameters),
-				};
+		} else {
+			if (newValue === undefined) {
+				unset(nodeParameters as object, parameterPath);
 			} else {
-				this.nodeValid = false;
+				set(nodeParameters as object, parameterPath, newValue);
 			}
-
-			this.nodeValuesInitialized = true;
-		},
-		onMissingNodeTextClick(event: MouseEvent) {
-			if ((event.target as Element).localName === 'a') {
-				this.$telemetry.track('user clicked cnr browse button', {
-					source: 'cnr missing node modal',
-				});
-			}
-		},
-		onMissingNodeLearnMoreLinkClick() {
-			this.$telemetry.track('user clicked cnr docs link', {
-				source: 'missing node modal source',
-				package_name: this.node?.type.split('.')[0],
-				node_type: this.node?.type,
+			// If value is updated, remove parameter values that have invalid options
+			// so getNodeParameters checks don't fail
+			removeMismatchedOptionValues(nodeType, nodeParameters, {
+				name: parameterPath,
+				value: newValue,
 			});
-		},
-		onStopExecution() {
-			this.$emit('stopExecution');
-		},
-		openSettings() {
-			this.openPanel = 'settings';
-		},
-		onTabSelect(tab: 'params' | 'settings') {
-			this.openPanel = tab;
-		},
-	},
+		}
+
+		// Get the parameters with the now new defaults according to the
+		// from the user actually defined parameters
+		nodeParameters = NodeHelpers.getNodeParameters(
+			nodeType.properties,
+			nodeParameters as INodeParameters,
+			true,
+			false,
+			_node,
+		);
+
+		for (const key of Object.keys(nodeParameters as object)) {
+			if (nodeParameters && nodeParameters[key] !== null && nodeParameters[key] !== undefined) {
+				setValue(`parameters.${key}`, nodeParameters[key] as string);
+			}
+		}
+
+		// Update the data in vuex
+		const updateInformation: IUpdateInformation = {
+			name: _node.name,
+			value: nodeParameters,
+		};
+
+		workflowsStore.setNodeParameters(updateInformation);
+
+		void externalHooks.run('nodeSettings.valueChanged', {
+			parameterPath,
+			newValue,
+			parameters: parameters.value,
+			oldNodeParameters,
+		});
+
+		nodeHelpers.updateNodeParameterIssuesByName(_node.name);
+		nodeHelpers.updateNodeCredentialIssuesByName(_node.name);
+		telemetry.trackNodeParametersValuesChange(nodeType.name, parameterData);
+	} else {
+		// A property on the node itself changed
+
+		// Update data in settings
+		nodeValues.value = {
+			...nodeValues.value,
+			[parameterData.name]: newValue,
+		};
+
+		// Update data in vuex
+		const updateInformation = {
+			name: _node.name,
+			key: parameterData.name,
+			value: newValue,
+		};
+
+		workflowsStore.setNodeValue(updateInformation);
+	}
+};
+
+const setHttpNodeParameters = (parameters: CurlToJSONResponse) => {
+	try {
+		valueChanged({
+			node: node.value?.name,
+			name: 'parameters',
+			value: parameters as unknown as INodeParameters,
+		});
+	} catch {}
+};
+
+const onSwitchSelectedNode = (node: string) => {
+	emit('switchSelectedNode', node);
+};
+
+const onOpenConnectionNodeCreator = (nodeName: string, connectionType: NodeConnectionType) => {
+	emit('openConnectionNodeCreator', nodeName, connectionType);
+};
+
+const populateHiddenIssuesSet = () => {
+	if (!node.value || !workflowsStore.isNodePristine(node.value.name)) return;
+	hiddenIssuesInputs.value.push('credentials');
+	parametersNoneSetting.value.forEach((parameter) => {
+		hiddenIssuesInputs.value.push(parameter.name);
+	});
+	workflowsStore.setNodePristine(node.value.name, false);
+};
+
+const populateSettings = () => {
+	if (isExecutable.value && !isTriggerNode.value) {
+		nodeSettings.value.push(
+			...([
+				{
+					displayName: i18n.baseText('nodeSettings.alwaysOutputData.displayName'),
+					name: 'alwaysOutputData',
+					type: 'boolean',
+					default: false,
+					noDataExpression: true,
+					description: i18n.baseText('nodeSettings.alwaysOutputData.description'),
+				},
+				{
+					displayName: i18n.baseText('nodeSettings.executeOnce.displayName'),
+					name: 'executeOnce',
+					type: 'boolean',
+					default: false,
+					noDataExpression: true,
+					description: i18n.baseText('nodeSettings.executeOnce.description'),
+				},
+				{
+					displayName: i18n.baseText('nodeSettings.retryOnFail.displayName'),
+					name: 'retryOnFail',
+					type: 'boolean',
+					default: false,
+					noDataExpression: true,
+					description: i18n.baseText('nodeSettings.retryOnFail.description'),
+				},
+				{
+					displayName: i18n.baseText('nodeSettings.maxTries.displayName'),
+					name: 'maxTries',
+					type: 'number',
+					typeOptions: {
+						minValue: 2,
+						maxValue: 5,
+					},
+					default: 3,
+					displayOptions: {
+						show: {
+							retryOnFail: [true],
+						},
+					},
+					noDataExpression: true,
+					description: i18n.baseText('nodeSettings.maxTries.description'),
+				},
+				{
+					displayName: i18n.baseText('nodeSettings.waitBetweenTries.displayName'),
+					name: 'waitBetweenTries',
+					type: 'number',
+					typeOptions: {
+						minValue: 0,
+						maxValue: 5000,
+					},
+					default: 1000,
+					displayOptions: {
+						show: {
+							retryOnFail: [true],
+						},
+					},
+					noDataExpression: true,
+					description: i18n.baseText('nodeSettings.waitBetweenTries.description'),
+				},
+				{
+					displayName: i18n.baseText('nodeSettings.onError.displayName'),
+					name: 'onError',
+					type: 'options',
+					options: [
+						{
+							name: i18n.baseText('nodeSettings.onError.options.stopWorkflow.displayName'),
+							value: 'stopWorkflow',
+							description: i18n.baseText('nodeSettings.onError.options.stopWorkflow.description'),
+						},
+						{
+							name: i18n.baseText('nodeSettings.onError.options.continueRegularOutput.displayName'),
+							value: 'continueRegularOutput',
+							description: i18n.baseText(
+								'nodeSettings.onError.options.continueRegularOutput.description',
+							),
+						},
+						{
+							name: i18n.baseText('nodeSettings.onError.options.continueErrorOutput.displayName'),
+							value: 'continueErrorOutput',
+							description: i18n.baseText(
+								'nodeSettings.onError.options.continueErrorOutput.description',
+							),
+						},
+					],
+					default: 'stopWorkflow',
+					noDataExpression: i18n.baseText('nodeSettings.onError.description'),
+				},
+			] as INodeProperties[]),
+		);
+	}
+	nodeSettings.value.push(
+		...([
+			{
+				displayName: i18n.baseText('nodeSettings.notes.displayName'),
+				name: 'notes',
+				type: 'string',
+				typeOptions: {
+					rows: 5,
+				},
+				default: '',
+				noDataExpression: true,
+				description: i18n.baseText('nodeSettings.notes.description'),
+			},
+			{
+				displayName: i18n.baseText('nodeSettings.notesInFlow.displayName'),
+				name: 'notesInFlow',
+				type: 'boolean',
+				default: false,
+				noDataExpression: true,
+				description: i18n.baseText('nodeSettings.notesInFlow.description'),
+			},
+		] as INodeProperties[]),
+	);
+};
+
+const onParameterBlur = (parameterName: string) => {
+	hiddenIssuesInputs.value = hiddenIssuesInputs.value.filter((name) => name !== parameterName);
+};
+
+const onWorkflowActivate = () => {
+	hiddenIssuesInputs.value = [];
+	emit('activate');
+};
+
+const onNodeExecute = () => {
+	hiddenIssuesInputs.value = [];
+	subConnections.value?.showNodeInputsIssues();
+	emit('execute');
+};
+
+const credentialSelected = (updateInformation: INodeUpdatePropertiesInformation) => {
+	// Update the values on the node
+	workflowsStore.updateNodeProperties(updateInformation);
+
+	const node = workflowsStore.getNodeByName(updateInformation.name);
+
+	if (node) {
+		// Update the issues
+		nodeHelpers.updateNodeCredentialIssues(node);
+	}
+
+	void externalHooks.run('nodeSettings.credentialSelected', { updateInformation });
+};
+
+const nameChanged = (name: string) => {
+	if (node.value) {
+		historyStore.pushCommandToUndo(new RenameNodeCommand(node.value.name, name));
+	}
+	valueChanged({
+		value: name,
+		name: 'name',
+	});
+};
+
+const setNodeValues = () => {
+	// No node selected
+	if (!node.value) {
+		nodeValuesInitialized.value = true;
+		return;
+	}
+
+	if (props.nodeType !== null) {
+		nodeValid.value = true;
+
+		const foundNodeSettings = [];
+		if (node.value.color) {
+			foundNodeSettings.push('color');
+			nodeValues.value = {
+				...nodeValues.value,
+				color: node.value.color,
+			};
+		}
+
+		if (node.value.notes) {
+			foundNodeSettings.push('notes');
+			nodeValues.value = {
+				...nodeValues.value,
+				notes: node.value.notes,
+			};
+		}
+
+		if (node.value.alwaysOutputData) {
+			foundNodeSettings.push('alwaysOutputData');
+			nodeValues.value = {
+				...nodeValues.value,
+				alwaysOutputData: node.value.alwaysOutputData,
+			};
+		}
+
+		if (node.value.executeOnce) {
+			foundNodeSettings.push('executeOnce');
+			nodeValues.value = {
+				...nodeValues.value,
+				executeOnce: node.value.executeOnce,
+			};
+		}
+
+		if (node.value.continueOnFail) {
+			foundNodeSettings.push('onError');
+			nodeValues.value = {
+				...nodeValues.value,
+				onError: 'continueRegularOutput',
+			};
+		}
+
+		if (node.value.onError) {
+			foundNodeSettings.push('onError');
+			nodeValues.value = {
+				...nodeValues.value,
+				onError: node.value.onError,
+			};
+		}
+
+		if (node.value.notesInFlow) {
+			foundNodeSettings.push('notesInFlow');
+			nodeValues.value = {
+				...nodeValues.value,
+				notesInFlow: node.value.notesInFlow,
+			};
+		}
+
+		if (node.value.retryOnFail) {
+			foundNodeSettings.push('retryOnFail');
+			nodeValues.value = {
+				...nodeValues.value,
+				retryOnFail: node.value.retryOnFail,
+			};
+		}
+
+		if (node.value.maxTries) {
+			foundNodeSettings.push('maxTries');
+			nodeValues.value = {
+				...nodeValues.value,
+				maxTries: node.value.maxTries,
+			};
+		}
+
+		if (node.value.waitBetweenTries) {
+			foundNodeSettings.push('waitBetweenTries');
+			nodeValues.value = {
+				...nodeValues.value,
+				waitBetweenTries: node.value.waitBetweenTries,
+			};
+		}
+
+		// Set default node settings
+		for (const nodeSetting of nodeSettings.value) {
+			if (!foundNodeSettings.includes(nodeSetting.name)) {
+				// Set default value
+				nodeValues.value = {
+					...nodeValues.value,
+					[nodeSetting.name]: nodeSetting.default,
+				};
+			}
+		}
+
+		nodeValues.value = {
+			...nodeValues.value,
+			parameters: deepCopy(node.value.parameters),
+		};
+	} else {
+		nodeValid.value = false;
+	}
+
+	nodeValuesInitialized.value = true;
+};
+
+const onMissingNodeTextClick = (event: MouseEvent) => {
+	if ((event.target as Element).localName === 'a') {
+		telemetry.track('user clicked cnr browse button', {
+			source: 'cnr missing node modal',
+		});
+	}
+};
+
+const onMissingNodeLearnMoreLinkClick = () => {
+	telemetry.track('user clicked cnr docs link', {
+		source: 'missing node modal source',
+		package_name: node.value?.type.split('.')[0],
+		node_type: node.value?.type,
+	});
+};
+
+const onStopExecution = () => {
+	emit('stopExecution');
+};
+
+const openSettings = () => {
+	openPanel.value = 'settings';
+};
+
+const onTabSelect = (tab: 'params' | 'settings') => {
+	openPanel.value = tab;
+};
+
+watch(node, () => {
+	setNodeValues();
+});
+
+onMounted(() => {
+	populateHiddenIssuesSet();
+	populateSettings();
+	setNodeValues();
+	props.eventBus?.on('openSettings', openSettings);
+	nodeHelpers.updateNodeParameterIssues(node.value as INodeUi, props.nodeType);
+	importCurlEventBus.on('setHttpNodeParameters', setHttpNodeParameters);
+	ndvEventBus.on('updateParameterValue', valueChanged);
+});
+
+onBeforeUnmount(() => {
+	props.eventBus?.off('openSettings', openSettings);
+	importCurlEventBus.off('setHttpNodeParameters', setHttpNodeParameters);
+	ndvEventBus.off('updateParameterValue', valueChanged);
 });
 </script>