fix(editor): Show input panel with not connected message (#9495)

cypress/e2e/5-ndv.cy.ts

@@ -24,6 +24,14 @@ describe('NDV', () => {
 		ndv.getters.container().should('not.be.visible');
 	});
 
+	it('should show input panel when node is not connected', () => {
+		workflowPage.actions.addInitialNodeToCanvas('Manual');
+		workflowPage.actions.deselectAll();
+		workflowPage.actions.addNodeToCanvas('Set');
+		workflowPage.getters.canvasNodes().last().dblclick();
+		ndv.getters.container().should('be.visible').should('contain', 'Wire me up');
+	});
+
 	it('should test webhook node', () => {
 		workflowPage.actions.addInitialNodeToCanvas('Webhook');
 		workflowPage.getters.canvasNodes().first().dblclick();

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

@@ -1,6 +1,5 @@
 <template>
 	<RunData
-		v-if="currentNode"
 		:node="currentNode"
 		:run-index="runIndex"
 		:linked-runs="linkedRuns"

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

@@ -1,6 +1,5 @@
 <template>
 	<RunData
-		v-if="node"
 		ref="runData"
 		:node="node"
 		:run-index="runIndex"

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

@@ -274,7 +274,7 @@
 				</n8n-text>
 				<slot v-else-if="$slots['content']" name="content"></slot>
 				<NodeErrorView
-					v-else-if="hasRunError"
+					v-else-if="workflowRunErrorAsNodeError"
 					:error="workflowRunErrorAsNodeError"
 					:class="$style.dataDisplay"
 				/>
@@ -370,7 +370,7 @@
 				</n8n-text>
 			</div>
 
-			<Suspense v-else-if="hasNodeRun && displayMode === 'table'">
+			<Suspense v-else-if="hasNodeRun && displayMode === 'table' && node">
 				<RunDataTable
 					:node="node"
 					:input-data="inputDataPage"
@@ -644,8 +644,8 @@ export default defineComponent({
 	},
 	props: {
 		node: {
-			type: Object as PropType<INodeUi>,
-			required: true,
+			type: Object as PropType<INodeUi | null>,
+			default: null,
 		},
 		runIndex: {
 			type: Number,
@@ -836,7 +836,10 @@ export default defineComponent({
 		hasSubworkflowExecutionError(): boolean {
 			return Boolean(this.workflowsStore.subWorkflowExecutionError);
 		},
-		workflowRunErrorAsNodeError(): NodeError {
+		workflowRunErrorAsNodeError(): NodeError | null {
+			if (!this.node) {
+				return null;
+			}
 			return this.workflowRunData?.[this.node?.name]?.[this.runIndex]?.error as NodeError;
 		},
 		hasRunError(): boolean {
@@ -982,7 +985,7 @@ export default defineComponent({
 					outputName = `${this.$locale.baseText('ndv.output')} ${outputName}`;
 				} else {
 					const appendBranchWord = NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND.includes(
-						this.node?.type,
+						this.node?.type ?? '',
 					)
 						? ''
 						: ` ${this.$locale.baseText('ndv.output.branch')}`;
@@ -1021,7 +1024,7 @@ export default defineComponent({
 		parentNodeOutputData(): INodeExecutionData[] {
 			const workflow = this.workflowsStore.getCurrentWorkflow();
 
-			const parentNode = workflow.getParentNodesByDepth(this.node.name)[0];
+			const parentNode = workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
 			let parentNodeData: INodeExecutionData[] = [];
 
 			if (parentNode?.name) {
@@ -1095,7 +1098,7 @@ export default defineComponent({
 			this.activatePane();
 		}
 
-		if (this.hasRunError) {
+		if (this.hasRunError && this.node) {
 			const error = this.workflowRunData?.[this.node.name]?.[this.runIndex]?.error;
 			const errorsToTrack = ['unknown error'];
 
@@ -1548,7 +1551,7 @@ export default defineComponent({
 			}
 		},
 		async downloadJsonData() {
-			const fileName = this.node.name.replace(/[^\w\d]/g, '_');
+			const fileName = (this.node?.name ?? '').replace(/[^\w\d]/g, '_');
 			const blob = new Blob([JSON.stringify(this.rawInputData, null, 2)], {
 				type: 'application/json',
 			});
@@ -1560,7 +1563,7 @@ export default defineComponent({
 			this.binaryDataDisplayVisible = true;
 
 			this.binaryDataDisplayData = {
-				node: this.node.name,
+				node: this.node?.name,
 				runIndex: this.runIndex,
 				outputIndex: this.currentOutputIndex,
 				index,