From 1e8e21c90a205d2bf539b8ecfc87f0fc86f1147d Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <oleg@n8n.io>
Date: Thu, 12 Jan 2023 17:54:00 +0100
Subject: [PATCH 1/5] feat(editor): Supress validation errors when node is
 added from node creator

---
 cypress/e2e/5-ndv.cy.ts                       | 37 +++++++++++++
 .../fixtures/Test_workflow_ndv_errors.json    | 32 +++++++++++
 cypress/pages/workflow.ts                     |  5 +-
 packages/editor-ui/src/Interface.ts           |  1 +
 .../src/components/NodeCredentials.vue        | 28 +++++++---
 .../editor-ui/src/components/NodeSettings.vue | 35 +++++++++++-
 .../src/components/ParameterInputFull.vue     |  6 ++
 .../src/components/ParameterInputList.vue     | 55 +++++++++++++------
 .../ResourceLocator/ResourceLocator.vue       |  1 +
 packages/editor-ui/src/stores/workflows.ts    |  6 ++
 packages/editor-ui/src/views/NodeView.vue     |  1 +
 11 files changed, 180 insertions(+), 27 deletions(-)
 create mode 100644 cypress/fixtures/Test_workflow_ndv_errors.json

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index d255e80bc119c..101ab14f12372 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -53,4 +53,41 @@ describe('NDV', () => {
 			ndv.getters.dataContainer().should('contain', 'start');
 		});
 	});
+
+	it('should show correct validation state for resource locator params', () => {
+		workflowPage.actions.addNodeToCanvas('Typeform', true);
+		ndv.getters.container().should('be.visible');
+		// The resource locator error should be visible initially
+		cy.get('.has-issues').should('have.length', 1);
+		ndv.getters.backToCanvas().click();
+		// Both credentials and resource locator errors should be visible
+		workflowPage.actions.openNodeNdv('Typeform');
+		cy.get('.has-issues').should('have.length', 1);
+		cy.get('[class*=hasIssues]').should('have.length', 1);
+	});
+
+	it('should show validation errors after blur', () => {
+		workflowPage.actions.addNodeToCanvas('Manual Trigger');
+		workflowPage.actions.addNodeToCanvas('Airtable', true);
+		ndv.getters.container().should('be.visible');
+		cy.get('.has-issues').should('have.length', 0);
+		workflowPage.getters.ndvParameterInput('table').find('input').eq(1).focus().blur()
+		workflowPage.getters.ndvParameterInput('application').find('input').eq(1).focus().blur()
+		cy.get('.has-issues').should('have.length', 2);
+		ndv.getters.backToCanvas().click();
+		workflowPage.actions.openNodeNdv('Airtable');
+		cy.get('.has-issues').should('have.length', 3);
+		cy.get('[class*=hasIssues]').should('have.length', 1);
+	});
+
+	it('should show all validation errors when opening pasted node', () => {
+		cy.fixture('Test_workflow_ndv_errors.json').then((data) => {
+			cy.get('body').paste(JSON.stringify(data));
+			workflowPage.getters.canvasNodes().should('have.have.length', 1);
+			workflowPage.actions.openNodeNdv('Airtable');
+			cy.get('.has-issues').should('have.length', 3);
+			cy.get('[class*=hasIssues]').should('have.length', 1);
+		});
+	});
+
 });
diff --git a/cypress/fixtures/Test_workflow_ndv_errors.json b/cypress/fixtures/Test_workflow_ndv_errors.json
new file mode 100644
index 0000000000000..aea6fc1190f7e
--- /dev/null
+++ b/cypress/fixtures/Test_workflow_ndv_errors.json
@@ -0,0 +1,32 @@
+{
+  "meta": {
+    "instanceId": "3204fc455f5cbeb4e71fdbd3b1dfaf0b088088dea3e639de49e61462b80ffc1d"
+  },
+  "nodes": [
+    {
+      "parameters": {
+        "application": {
+          "__rl": true,
+          "mode": "url",
+          "value": "",
+          "__regex": "https://airtable.com/([a-zA-Z0-9]{2,})"
+        },
+        "table": {
+          "__rl": true,
+          "mode": "url",
+          "value": "",
+          "__regex": "https://airtable.com/[a-zA-Z0-9]{2,}/([a-zA-Z0-9]{2,})"
+        }
+      },
+      "id": "e0c0cf7e-aa98-4b72-9645-6e64e2902bd1",
+      "name": "Airtable",
+      "type": "n8n-nodes-base.airtable",
+      "typeVersion": 1,
+      "position": [
+        380,
+        180
+      ]
+    }
+  ],
+  "connections": {}
+}
diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts
index ac055c6bc8797..c5a959303e056 100644
--- a/cypress/pages/workflow.ts
+++ b/cypress/pages/workflow.ts
@@ -93,11 +93,12 @@ export class WorkflowPage extends BasePage {
 			this.getters.nodeCreatorSearchBar().type('{enter}');
 			cy.get('body').type('{esc}');
 		},
-		addNodeToCanvas: (nodeDisplayName: string) => {
+		addNodeToCanvas: (nodeDisplayName: string, preventNdvClose?: boolean) => {
 			this.getters.nodeCreatorPlusButton().click();
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
 			this.getters.nodeCreatorSearchBar().type('{enter}');
-			cy.get('body').type('{esc}');
+
+			if (!preventNdvClose) cy.get('body').type('{esc}');
 		},
 		openNodeNdv: (nodeTypeName: string) => {
 			this.getters.canvasNodeByName(nodeTypeName).dblclick();
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index f8828dd670fc7..7be1a8731d940 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -193,6 +193,7 @@ export interface INodeUi extends INode {
 	issues?: INodeIssues;
 	name: string;
 	pinData?: IDataObject;
+	pristine: boolean;
 }
 
 export interface INodeTypesMaxCount {
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 8af8d36fc2dc9..58e34d5b85ccf 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -27,10 +27,11 @@
 						size="small"
 					/>
 				</div>
-				<div v-else :class="issues.length ? $style.hasIssues : $style.input">
+				<div v-else :class="issues.length && !hideIssues ? $style.hasIssues : $style.input">
 					<n8n-select
 						:value="getSelectedId(credentialTypeDescription.name)"
 						@change="(value) => onCredentialSelected(credentialTypeDescription.name, value)"
+						@blur="$emit('blur', 'credentials')"
 						:placeholder="getSelectPlaceholder(credentialTypeDescription.name, issues)"
 						size="small"
 					>
@@ -49,7 +50,7 @@
 						</n8n-option>
 					</n8n-select>
 
-					<div :class="$style.warning" v-if="issues.length">
+					<div :class="$style.warning" v-if="issues.length && !hideIssues">
 						<n8n-tooltip placement="top">
 							<template #content>
 								<titled-list
@@ -82,6 +83,7 @@
 </template>
 
 <script lang="ts">
+import { PropType } from 'vue';
 import { restApi } from '@/mixins/restApi';
 import {
 	ICredentialsResponse,
@@ -108,11 +110,23 @@ import { useCredentialsStore } from '@/stores/credentials';
 
 export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend({
 	name: 'NodeCredentials',
-	props: [
-		'readonly',
-		'node', // INodeUi
-		'overrideCredType', // cred type
-	],
+	props: {
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		node: {
+			type: Object as PropType<INodeUi>,
+			required: true,
+		},
+		overrideCredType: {
+			type: String,
+		},
+		hideIssues: {
+			type: Boolean,
+			default: false,
+		},
+	},
 	components: {
 		TitledList,
 	},
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index b6a27890290d1..a60214406cb3a 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -93,14 +93,18 @@
 					:hideDelete="true"
 					:nodeValues="nodeValues"
 					:isReadOnly="isReadOnly"
+					:hiddenIssuesInputs="hiddenIssuesInputs"
 					path="parameters"
 					@valueChanged="valueChanged"
 					@activate="onWorkflowActivate"
+					@parameterBlur="onParameterBlur"
 				>
 					<node-credentials
 						:node="node"
 						:readonly="isReadOnly"
 						@credentialSelected="credentialSelected"
+						@blur="onParameterBlur"
+						:hide-issues="hiddenIssuesInputs.includes('credentials')"
 					/>
 				</parameter-input-list>
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
@@ -124,16 +128,20 @@
 					:parameters="parametersSetting"
 					:nodeValues="nodeValues"
 					:isReadOnly="isReadOnly"
+					:hiddenIssuesInputs="hiddenIssuesInputs"
 					path="parameters"
 					@valueChanged="valueChanged"
+					@parameterBlur="onParameterBlur"
 				/>
 				<parameter-input-list
 					:parameters="nodeSettings"
 					:hideDelete="true"
 					:nodeValues="nodeValues"
 					:isReadOnly="isReadOnly"
+					:hiddenIssuesInputs="hiddenIssuesInputs"
 					path=""
 					@valueChanged="valueChanged"
+					@parameterBlur="onParameterBlur"
 				/>
 			</div>
 		</div>
@@ -414,6 +422,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 			COMMUNITY_NODES_INSTALLATION_DOCS_URL,
 			CUSTOM_NODES_DOCS_URL,
 			MAIN_NODE_PANEL_WIDTH,
+			hiddenIssuesInputs: [] as string[],
 		};
 	},
 	watch: {
@@ -445,10 +454,33 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		},
 	},
 	methods: {
+		populateHiddenIssuesSet() {
+			if (!this.node || this.node.pristine !== true) return;
+
+			this.hiddenIssuesInputs.push('credentials');
+			this.parametersNoneSetting.forEach((parameter) => {
+				const containsDynamicOptions =
+					typeof (
+						parameter?.typeOptions?.loadOptions || parameter?.typeOptions?.loadOptionsMethod
+					) !== 'undefined';
+
+				// If the parameter has dynamic options, we do not want to suppress the issue
+				if (containsDynamicOptions) return;
+
+				this.hiddenIssuesInputs.push(parameter.name);
+			});
+
+			this.workflowsStore.setNodePristine(this.node.id, false);
+		},
+		onParameterBlur(parameterName: string) {
+			this.hiddenIssuesInputs = this.hiddenIssuesInputs.filter((name) => name !== parameterName);
+		},
 		onWorkflowActivate() {
+			this.hiddenIssuesInputs = [];
 			this.$emit('activate');
 		},
 		onNodeExecute() {
+			this.hiddenIssuesInputs = [];
 			this.$emit('execute');
 		},
 		setValue(name: string, value: NodeParameterValue) {
@@ -457,7 +489,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 
 			let isArray = false;
 			if (lastNamePart !== undefined && lastNamePart.includes('[')) {
-				// It incldues an index so we have to extract it
+				// It includes an index so we have to extract it
 				const lastNameParts = lastNamePart.match(/(.*)\[(\d+)\]$/);
 				if (lastNameParts) {
 					nameParts.push(lastNameParts[1]);
@@ -835,6 +867,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		},
 	},
 	mounted() {
+		this.populateHiddenIssuesSet();
 		this.setNodeValues();
 		if (this.eventBus) {
 			(this.eventBus as Vue).$on('openSettings', () => {
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index e721164b22e36..a0e8d8d25f77f 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -53,6 +53,7 @@
 							:activeDrop="activeDrop"
 							:forceShowExpression="forceShowExpression"
 							:hint="hint"
+							:hide-issues="hideIssues"
 							@valueChanged="valueChanged"
 							@textInput="onTextInput"
 							@focus="onFocus"
@@ -118,6 +119,10 @@ export default mixins(showMessage).extend({
 			type: Boolean,
 			default: false,
 		},
+		hideIssues: {
+			type: Boolean,
+			default: false,
+		},
 		parameter: {
 			type: Object as PropType<INodeProperties>,
 		},
@@ -196,6 +201,7 @@ export default mixins(showMessage).extend({
 			if (!this.parameter.noDataExpression) {
 				this.ndvStore.setMappableNDVInputFocus('');
 			}
+			this.$emit('blur');
 		},
 		onMenuExpanded(expanded: boolean) {
 			this.menuExpanded = expanded;
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 434eeb7519397..fa4a2e971de36 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -93,11 +93,13 @@
 
 				<parameter-input-full
 					:parameter="parameter"
+					:hide-issues="hiddenIssuesInputs.includes(parameter.name)"
 					:value="getParameterValue(nodeValues, parameter.name, path)"
 					:displayOptions="true"
 					:path="getPath(parameter.name)"
 					:isReadOnly="isReadOnly"
 					@valueChanged="valueChanged"
+					@blur="onParameterBlur(parameter.name)"
 				/>
 			</div>
 		</div>
@@ -108,13 +110,7 @@
 </template>
 
 <script lang="ts">
-import {
-	deepCopy,
-	INodeParameters,
-	INodeProperties,
-	INodeTypeDescription,
-	NodeParameterValue,
-} from 'n8n-workflow';
+import { deepCopy, INodeParameters, INodeProperties, NodeParameterValue } from 'n8n-workflow';
 
 import { INodeUi, IUpdateInformation } from '@/Interface';
 
@@ -126,8 +122,8 @@ import ImportParameter from '@/components/ImportParameter.vue';
 import { get, set } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
-import { Component } from 'vue';
-import { mapState, mapStores } from 'pinia';
+import { Component, PropType } from 'vue';
+import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 
@@ -140,14 +136,36 @@ export default mixins(workflowHelpers).extend({
 		CollectionParameter: () => import('./CollectionParameter.vue') as Promise<Component>,
 		ImportParameter,
 	},
-	props: [
-		'nodeValues', // INodeParameters
-		'parameters', // INodeProperties
-		'path', // string
-		'hideDelete', // boolean
-		'indent',
-		'isReadOnly',
-	],
+	props: {
+		nodeValues: {
+			type: Object as PropType<INodeParameters>,
+			required: true,
+		},
+		parameters: {
+			type: Array as PropType<INodeProperties[]>,
+			required: true,
+		},
+		path: {
+			type: String,
+			default: '',
+		},
+		hideDelete: {
+			type: Boolean,
+			default: false,
+		},
+		indent: {
+			type: Boolean,
+			default: false,
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: false,
+		},
+		hiddenIssuesInputs: {
+			type: Array as PropType<string[]>,
+			default: () => [],
+		},
+	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore),
 		nodeTypeVersion(): number | null {
@@ -187,6 +205,9 @@ export default mixins(workflowHelpers).extend({
 		},
 	},
 	methods: {
+		onParameterBlur(parameterName: string) {
+			this.$emit('parameterBlur', parameterName);
+		},
 		getCredentialsDependencies() {
 			const dependencies = new Set();
 			const nodeType = this.nodeTypesStore.getNodeType(
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index b25a0b4321848..35324aca5b214 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -684,6 +684,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			if (!this.isSearchable || this.currentQueryError) {
 				this.showResourceDropdown = false;
 			}
+			this.$emit('blur');
 		},
 	},
 });
diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
index f56ca4db63d0d..0e3383a9a4395 100644
--- a/packages/editor-ui/src/stores/workflows.ts
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -960,5 +960,11 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 				}
 			});
 		},
+		setNodePristine(nodeId: string, isPristine: boolean): void {
+			const node = this.getNodeById(nodeId);
+			if (node) {
+				node.pristine = isPristine;
+			}
+		},
 	},
 });
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index a5a7cfb50ebd6..ed63ab61986f7 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1915,6 +1915,7 @@ export default mixins(
 				newNodeData.webhookId = uuid();
 			}
 
+			newNodeData.pristine = true;
 			await this.addNodes([newNodeData], undefined, trackHistory);
 
 			this.uiStore.stateIsDirty = true;

From 9021c2423ada4008a7d78de8a3b9feb811a0d7bd Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <oleg@n8n.io>
Date: Fri, 13 Jan 2023 10:51:57 +0100
Subject: [PATCH 2/5] Supress initial errors also for resource locator inputs

---
 cypress/e2e/5-ndv.cy.ts                            | 6 +++---
 packages/editor-ui/src/components/NodeSettings.vue | 8 --------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index 101ab14f12372..aaa16681ead02 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -57,8 +57,8 @@ describe('NDV', () => {
 	it('should show correct validation state for resource locator params', () => {
 		workflowPage.actions.addNodeToCanvas('Typeform', true);
 		ndv.getters.container().should('be.visible');
-		// The resource locator error should be visible initially
-		cy.get('.has-issues').should('have.length', 1);
+		cy.get('.has-issues').should('have.length', 0);
+		cy.get('[class*=hasIssues]').should('have.length', 0);
 		ndv.getters.backToCanvas().click();
 		// Both credentials and resource locator errors should be visible
 		workflowPage.actions.openNodeNdv('Typeform');
@@ -66,7 +66,7 @@ describe('NDV', () => {
 		cy.get('[class*=hasIssues]').should('have.length', 1);
 	});
 
-	it('should show validation errors after blur', () => {
+	it('should show validation errors only after blur or re-opening of NDV', () => {
 		workflowPage.actions.addNodeToCanvas('Manual Trigger');
 		workflowPage.actions.addNodeToCanvas('Airtable', true);
 		ndv.getters.container().should('be.visible');
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index a60214406cb3a..daf6b5c21514c 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -459,14 +459,6 @@ export default mixins(externalHooks, nodeHelpers).extend({
 
 			this.hiddenIssuesInputs.push('credentials');
 			this.parametersNoneSetting.forEach((parameter) => {
-				const containsDynamicOptions =
-					typeof (
-						parameter?.typeOptions?.loadOptions || parameter?.typeOptions?.loadOptionsMethod
-					) !== 'undefined';
-
-				// If the parameter has dynamic options, we do not want to suppress the issue
-				if (containsDynamicOptions) return;
-
 				this.hiddenIssuesInputs.push(parameter.name);
 			});
 

From 08f8b420f69721fb528bf23bdb2e8e32880bc258 Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <oleg@n8n.io>
Date: Mon, 16 Jan 2023 09:40:45 +0100
Subject: [PATCH 3/5] Use nodeMetadata prop to store node's `pristine` state

---
 packages/editor-ui/src/Interface.ts           |  2 +-
 .../editor-ui/src/components/NodeSettings.vue |  4 ++--
 packages/editor-ui/src/stores/workflows.ts    | 19 +++++++++++--------
 packages/editor-ui/src/views/NodeView.vue     |  2 +-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 7be1a8731d940..5f8651677b7df 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -193,7 +193,6 @@ export interface INodeUi extends INode {
 	issues?: INodeIssues;
 	name: string;
 	pinData?: IDataObject;
-	pristine: boolean;
 }
 
 export interface INodeTypesMaxCount {
@@ -961,6 +960,7 @@ export interface ITemplatesNode extends IVersionNode {
 
 export interface INodeMetadata {
 	parametersLastUpdatedAt?: number;
+	pristine: boolean;
 }
 
 export interface IUsedCredential {
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index daf6b5c21514c..96f996eb58b33 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -455,14 +455,14 @@ export default mixins(externalHooks, nodeHelpers).extend({
 	},
 	methods: {
 		populateHiddenIssuesSet() {
-			if (!this.node || this.node.pristine !== true) return;
+			if (!this.node || !this.workflowsStore.getIsNodePristine(this.node.name)) return;
 
 			this.hiddenIssuesInputs.push('credentials');
 			this.parametersNoneSetting.forEach((parameter) => {
 				this.hiddenIssuesInputs.push(parameter.name);
 			});
 
-			this.workflowsStore.setNodePristine(this.node.id, false);
+			this.workflowsStore.setNodePristine(this.node.name, false);
 		},
 		onParameterBlur(parameterName: string) {
 			this.hiddenIssuesInputs = this.hiddenIssuesInputs.filter((name) => name !== parameterName);
diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
index 0e3383a9a4395..fd9bc61fa8cbe 100644
--- a/packages/editor-ui/src/stores/workflows.ts
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -227,6 +227,10 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 				this.nodeMetadata[nodeName] && this.nodeMetadata[nodeName].parametersLastUpdatedAt;
 		},
 
+		getIsNodePristine(): (name: string) => boolean {
+			return (nodeName: string) =>
+				this.nodeMetadata[nodeName] === undefined || this.nodeMetadata[nodeName].pristine === true;
+		},
 		// Executions getters
 		getExecutionDataById(): (id: string) => IExecutionsSummary | undefined {
 			return (id: string): IExecutionsSummary | undefined =>
@@ -731,7 +735,12 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 				// TODO: Check if there is an error or whatever that is supposed to be returned
 				return;
 			}
+
 			this.workflow.nodes.push(nodeData);
+			// Init node metadata
+			if (!this.nodeMetadata[nodeData.name]) {
+				Vue.set(this.nodeMetadata, nodeData.name, {});
+			}
 		},
 
 		removeNode(node: INodeUi): void {
@@ -818,9 +827,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 			Vue.set(node, 'parameters', newParameters);
 
-			if (!this.nodeMetadata[node.name]) {
-				Vue.set(this.nodeMetadata, node.name, {});
-			}
 			Vue.set(this.nodeMetadata[node.name], 'parametersLastUpdatedAt', Date.now());
 		},
 
@@ -960,11 +966,8 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 				}
 			});
 		},
-		setNodePristine(nodeId: string, isPristine: boolean): void {
-			const node = this.getNodeById(nodeId);
-			if (node) {
-				node.pristine = isPristine;
-			}
+		setNodePristine(nodeName: string, isPristine: boolean): void {
+			Vue.set(this.nodeMetadata[nodeName], 'pristine', isPristine);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index ed63ab61986f7..8670ab3208e07 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1915,8 +1915,8 @@ export default mixins(
 				newNodeData.webhookId = uuid();
 			}
 
-			newNodeData.pristine = true;
 			await this.addNodes([newNodeData], undefined, trackHistory);
+			this.workflowsStore.setNodePristine(newNodeData.name, true);
 
 			this.uiStore.stateIsDirty = true;
 

From e5e64794c66c2ab14d7d7c3684c7b2d02e9faf3e Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <oleg@n8n.io>
Date: Mon, 16 Jan 2023 14:30:27 +0100
Subject: [PATCH 4/5] Revert `setNodeParameters` check for `nodeMetadata`

---
 packages/editor-ui/src/stores/workflows.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
index fd9bc61fa8cbe..cc0f839ad9cf5 100644
--- a/packages/editor-ui/src/stores/workflows.ts
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -827,6 +827,10 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 			Vue.set(node, 'parameters', newParameters);
 
+			if (!this.nodeMetadata[node.name]) {
+				Vue.set(this.nodeMetadata, node.name, {});
+			}
+
 			Vue.set(this.nodeMetadata[node.name], 'parametersLastUpdatedAt', Date.now());
 		},
 

From a03e70cdf609840b9bbb9c28f5da53212f1c0616 Mon Sep 17 00:00:00 2001
From: Oleg Ivaniv <oleg@n8n.io>
Date: Mon, 16 Jan 2023 14:31:34 +0100
Subject: [PATCH 5/5] Rename getIsNodePristine to isNodePristine

---
 packages/editor-ui/src/components/NodeSettings.vue | 2 +-
 packages/editor-ui/src/stores/workflows.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 96f996eb58b33..b864dcf211efa 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -455,7 +455,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 	},
 	methods: {
 		populateHiddenIssuesSet() {
-			if (!this.node || !this.workflowsStore.getIsNodePristine(this.node.name)) return;
+			if (!this.node || !this.workflowsStore.isNodePristine(this.node.name)) return;
 
 			this.hiddenIssuesInputs.push('credentials');
 			this.parametersNoneSetting.forEach((parameter) => {
diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
index cc0f839ad9cf5..b156c70ab3552 100644
--- a/packages/editor-ui/src/stores/workflows.ts
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -227,7 +227,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 				this.nodeMetadata[nodeName] && this.nodeMetadata[nodeName].parametersLastUpdatedAt;
 		},
 
-		getIsNodePristine(): (name: string) => boolean {
+		isNodePristine(): (name: string) => boolean {
 			return (nodeName: string) =>
 				this.nodeMetadata[nodeName] === undefined || this.nodeMetadata[nodeName].pristine === true;
 		},