refactor(editor): Showing errors in input pane (#4059)

* refactor(editor): removing output error reporting from input panel

* refactor(editor): input panel error notification with linking back to the errored node

* fix(editor): switching to the correct node after backlinking from the error in a further node

* fix(editor): input pane error message font size and translation keys

* fix(editor): output error message layout

* fix(editor-ui): update input panel node error title translation

* fix(editor-ui): achieve proper update when changing node from input error link

* fix(editor-ui): adding local utility class to not break output error layout

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

@@ -338,8 +338,8 @@ export default mixins(
 		},
 	},
 	watch: {
-		activeNode(node, oldNode) {
-			if (node && !oldNode && !this.isActiveStickyNode) {
+		activeNode(node: INodeUi | null) {
+			if (node && !this.isActiveStickyNode) {
 				this.runInputIndex = -1;
 				this.runOutputIndex = -1;
 				this.isLinkingEnabled = true;

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

@@ -199,8 +199,14 @@
 				</n8n-text>
 			</div>
 
-			<div v-else-if="hasNodeRun && hasRunError" :class="$style.errorDisplay">
-				<NodeErrorView :error="workflowRunData[node.name][runIndex].error" />
+			<div v-else-if="hasNodeRun && hasRunError" :class="$style.stretchVertically">
+				<n8n-text v-if="isPaneTypeInput" :class="$style.center" size="large" tag="p" bold>
+					{{ $locale.baseText('nodeErrorView.inputPanel.previousNodeError.title', { interpolate: { nodeName: node.name } }) }}
+					<n8n-link @click="goToErroredNode">
+						{{ $locale.baseText('nodeErrorView.inputPanel.previousNodeError.text') }}
+					</n8n-link>
+				</n8n-text>
+				<NodeErrorView v-else :error="workflowRunData[node.name][runIndex].error" :class="$style.errorDisplay" />
 			</div>
 
 			<div v-else-if="hasNodeRun && jsonData && jsonData.length === 0 && branches.length > 1" :class="$style.center">
@@ -335,7 +341,6 @@
 //@ts-ignore
 import VueJsonPretty from 'vue-json-pretty';
 import {
-	GenericValue,
 	IBinaryData,
 	IBinaryKeyData,
 	IDataObject,
@@ -351,7 +356,6 @@ import {
 	INodeUi,
 	IRunDataDisplayMode,
 	ITab,
-	ITableData,
 } from '@/Interface';
 
 import {
@@ -479,7 +483,7 @@ export default mixins(
 		mounted() {
 			this.init();
 
-			if (this.paneType === 'output') {
+			if (!this.isPaneTypeInput) {
 				this.eventBus.$on('data-pinning-error', this.onDataPinningError);
 				this.eventBus.$on('data-unpinning', this.onDataUnpinning);
 
@@ -532,7 +536,7 @@ export default mixins(
 				return !!(this.nodeType && this.nodeType.group.includes('trigger'));
 			},
 			canPinData (): boolean {
-				return this.paneType === 'output' &&
+				return !this.isPaneTypeInput &&
 					this.isPinDataNodeType &&
 					!(this.binaryData && this.binaryData.length > 0);
 			},
@@ -690,9 +694,12 @@ export default mixins(
 				return branches;
 			},
 			editMode(): { enabled: boolean; value: string; } {
-				return this.paneType === 'output'
-					? this.$store.getters['ui/outputPanelEditMode']
-					: { enabled: false, value: '' };
+				return this.isPaneTypeInput
+					? { enabled: false, value: '' }
+					: this.$store.getters['ui/outputPanelEditMode'];
+			},
+			isPaneTypeInput(): boolean {
+				return this.paneType === 'input';
 			},
 		},
 		methods: {
@@ -1231,6 +1238,11 @@ export default mixins(
 					this.$store.commit('updateNodeProperties', updateInformation);
 				}
 			},
+			goToErroredNode() {
+				if (this.node) {
+					this.$store.commit('setActiveNode', this.node.name);
+				}
+			},
 		},
 		watch: {
 			node() {
@@ -1523,6 +1535,11 @@ export default mixins(
 	align-items: center;
 	margin-left: var(--spacing-s);
 }
+
+.stretchVertically {
+	height: 100%;
+}
+
 </style>
 
 <style lang="scss">

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

@@ -470,6 +470,8 @@
 	"nodeErrorView.stack": "Stack",
 	"nodeErrorView.theErrorCauseIsTooLargeToBeDisplayed": "The error cause is too large to be displayed",
 	"nodeErrorView.time": "Time",
+	"nodeErrorView.inputPanel.previousNodeError.title": "Error running node '{nodeName}'",
+	"nodeErrorView.inputPanel.previousNodeError.text": "View error",
 	"nodeHelpers.credentialsUnset": "Credentials for '{credentialType}' are not set.",
 	"nodeSettings.alwaysOutputData.description": "If active, will output a single, empty item when the output would have been empty. Use to prevent the workflow finishing on this node.",
 	"nodeSettings.alwaysOutputData.displayName": "Always Output Data",