fix(editor): Fix rundata type errors (no-changelog) (#9443)

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

@@ -29,6 +29,7 @@ export default defineComponent({
 		},
 		type: {
 			type: String,
+			required: true,
 		},
 		data: {
 			type: String,

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

@@ -1,5 +1,6 @@
 <template>
 	<RunData
+		v-if="currentNode"
 		:node="currentNode"
 		:run-index="runIndex"
 		:linked-runs="linkedRuns"
@@ -112,7 +113,7 @@
 						type="secondary"
 						hide-icon
 						:transparent="true"
-						:node-name="isActiveNodeConfig ? rootNode : currentNodeName"
+						:node-name="isActiveNodeConfig ? rootNode : currentNodeName ?? ''"
 						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
 						telemetry-source="inputs"
 						data-test-id="execute-previous-node"
@@ -328,7 +329,7 @@ export default defineComponent({
 
 		rootNode(): string {
 			const workflow = this.currentWorkflow;
-			const rootNodes = workflow.getChildNodes(this.activeNode.name, 'ALL_NON_MAIN');
+			const rootNodes = workflow.getChildNodes(this.activeNode?.name ?? '', 'ALL_NON_MAIN');
 
 			return rootNodes[0];
 		},
@@ -350,7 +351,7 @@ export default defineComponent({
 				return this.activeNode;
 			}
 
-			return this.workflowsStore.getNodeByName(this.currentNodeName);
+			return this.workflowsStore.getNodeByName(this.currentNodeName ?? '');
 		},
 		connectedCurrentNodeOutputs(): number[] | undefined {
 			const search = this.parentNodes.find(({ name }) => name === this.currentNodeName);

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

@@ -110,7 +110,8 @@ export default defineComponent({
 			const triggeredNode = this.workflowsStore.executedNode;
 			return (
 				this.workflowRunning &&
-				(this.workflowsStore.isNodeExecuting(this.node.name) || triggeredNode === this.node.name)
+				(this.workflowsStore.isNodeExecuting(this.node?.name ?? '') ||
+					triggeredNode === this.node?.name)
 			);
 		},
 		workflowRunning(): boolean {
@@ -148,7 +149,7 @@ export default defineComponent({
 			const executedNode = this.workflowsStore.executedNode;
 
 			return (
-				this.node &&
+				!!this.node &&
 				!this.node.disabled &&
 				this.isTriggerNode &&
 				waitingOnWebhook &&
@@ -173,7 +174,7 @@ export default defineComponent({
 				return '';
 			}
 
-			if (this.isTriggerNode && this.node.disabled) {
+			if (this.isTriggerNode && this.node?.disabled) {
 				return this.$locale.baseText('ndv.execute.nodeIsDisabled');
 			}
 

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

@@ -1,5 +1,6 @@
 <template>
 	<RunData
+		v-if="node"
 		ref="runData"
 		:node="node"
 		:run-index="runIndex"
@@ -50,7 +51,7 @@
 				$locale.baseText('ndv.output.waitingToRun')
 			}}</n8n-text>
 			<n8n-text v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
-				<template v-if="isSubNodeType.value">
+				<template v-if="isSubNodeType">
 					{{ $locale.baseText('ndv.output.runNodeHintSubNode') }}
 				</template>
 				<template v-else>
@@ -120,7 +121,7 @@ type RunDataRef = InstanceType<typeof RunData>;
 const OUTPUT_TYPE = {
 	REGULAR: 'regular',
 	LOGS: 'logs',
-};
+} as const;
 
 export default defineComponent({
 	name: 'OutputPanel',
@@ -192,7 +193,7 @@ export default defineComponent({
 			return null;
 		},
 		isTriggerNode(): boolean {
-			return this.nodeTypesStore.isTriggerNode(this.node.type);
+			return this.nodeTypesStore.isTriggerNode(this.node?.type ?? '');
 		},
 		hasAiMetadata(): boolean {
 			if (this.node) {
@@ -213,7 +214,7 @@ export default defineComponent({
 			return !!(this.nodeType && this.nodeType.group.includes('schedule'));
 		},
 		isNodeRunning(): boolean {
-			return this.node && this.workflowsStore.isNodeExecuting(this.node.name);
+			return !!this.node && this.workflowsStore.isNodeExecuting(this.node.name);
 		},
 		workflowRunning(): boolean {
 			return this.uiStore.isActionActive('workflowRunning');
@@ -301,7 +302,7 @@ export default defineComponent({
 				this.$telemetry.track('User clicked ndv link', {
 					workflow_id: this.workflowsStore.workflowId,
 					push_ref: this.pushRef,
-					node_type: this.node.type,
+					node_type: this.node?.type,
 					pane: 'output',
 					type: 'insert-test-data',
 				});
@@ -316,7 +317,7 @@ export default defineComponent({
 		openSettings() {
 			this.$emit('openSettings');
 			this.$telemetry.track('User clicked ndv link', {
-				node_type: this.node.type,
+				node_type: this.node?.type,
 				workflow_id: this.workflowsStore.workflowId,
 				push_ref: this.pushRef,
 				pane: 'output',
@@ -326,7 +327,7 @@ export default defineComponent({
 		onRunIndexChange(run: number) {
 			this.$emit('runChange', run);
 		},
-		onUpdateOutputMode(outputMode: (typeof OUTPUT_TYPE)[string]) {
+		onUpdateOutputMode(outputMode: (typeof OUTPUT_TYPE)[keyof typeof OUTPUT_TYPE]) {
 			if (outputMode === OUTPUT_TYPE.LOGS) {
 				ndvEventBus.emit('setPositionByName', 'minLeft');
 			} else {

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

@@ -63,7 +63,7 @@
 					v-show="!editMode.enabled"
 					:title="$locale.baseText('runData.editOutput')"
 					:circle="false"
-					:disabled="node.disabled"
+					:disabled="node?.disabled"
 					class="ml-2xs"
 					icon="pencil-alt"
 					type="tertiary"
@@ -158,7 +158,7 @@
 			:class="$style.hintCallout"
 			:theme="hint.type || 'info'"
 		>
-			<n8n-text v-html="hint.message" size="small"></n8n-text>
+			<n8n-text size="small" v-html="hint.message"></n8n-text>
 		</n8n-callout>
 
 		<div
@@ -251,7 +251,7 @@
 				<slot name="node-not-run"></slot>
 			</div>
 
-			<div v-else-if="paneType === 'input' && node.disabled" :class="$style.center">
+			<div v-else-if="paneType === 'input' && node?.disabled" :class="$style.center">
 				<n8n-text>
 					{{ $locale.baseText('ndv.input.disabled', { interpolate: { nodeName: node.name } }) }}
 					<n8n-link @click="enableNode">
@@ -268,14 +268,14 @@
 				<n8n-text v-if="isPaneTypeInput" :class="$style.center" size="large" tag="p" bold>
 					{{
 						$locale.baseText('nodeErrorView.inputPanel.previousNodeError.title', {
-							interpolate: { nodeName: node.name },
+							interpolate: { nodeName: node?.name ?? '' },
 						})
 					}}
 				</n8n-text>
 				<slot v-else-if="$slots['content']" name="content"></slot>
 				<NodeErrorView
-					v-else
-					:error="workflowRunData[node.name][runIndex].error"
+					v-else-if="hasRunError"
+					:error="workflowRunErrorAsNodeError"
 					:class="$style.dataDisplay"
 				/>
 			</div>
@@ -387,7 +387,7 @@
 				/>
 			</Suspense>
 
-			<Suspense v-else-if="hasNodeRun && displayMode === 'json'">
+			<Suspense v-else-if="hasNodeRun && displayMode === 'json' && node">
 				<RunDataJson
 					:pane-type="paneType"
 					:edit-mode="editMode"
@@ -403,7 +403,7 @@
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
-				<RunDataHtml :input-html="inputDataPage[0].json.html" />
+				<RunDataHtml :input-html="inputHtml" />
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && isSchemaView">
@@ -567,6 +567,7 @@ import type {
 	IRunData,
 	IRunExecutionData,
 	NodeHint,
+	NodeError,
 } from 'n8n-workflow';
 import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 
@@ -595,7 +596,7 @@ import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
 import NodeErrorView from '@/components/Error/NodeErrorView.vue';
 import JsonEditor from '@/components/JsonEditor/JsonEditor.vue';
 
-import type { PinDataSource } from '@/composables/usePinnedData';
+import type { PinDataSource, UnpinDataSource } from '@/composables/usePinnedData';
 import { usePinnedData } from '@/composables/usePinnedData';
 import { dataPinningEventBus } from '@/event-bus';
 import { clearJsonKey, isEmpty } from '@/utils/typesUtils';
@@ -644,7 +645,7 @@ export default defineComponent({
 	props: {
 		node: {
 			type: Object as PropType<INodeUi>,
-			default: null,
+			required: true,
 		},
 		runIndex: {
 			type: Number,
@@ -683,6 +684,7 @@ export default defineComponent({
 		},
 		distanceFromActive: {
 			type: Number,
+			default: 0,
 		},
 		blockUI: {
 			type: Boolean,
@@ -716,7 +718,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			connectionType: NodeConnectionType.Main,
+			connectionType: NodeConnectionType.Main as ConnectionTypes,
 			binaryDataPreviewActive: false,
 			dataSize: 0,
 			showData: false,
@@ -825,11 +827,20 @@ export default defineComponent({
 		isArtificialRecoveredEventItem(): boolean {
 			return !!this.rawInputData?.[0]?.json?.isArtificialRecoveredEventItem;
 		},
-		subworkflowExecutionError(): Error | null {
-			return this.workflowsStore.subWorkflowExecutionError;
+		subworkflowExecutionError(): NodeError {
+			return {
+				node: this.node,
+				messages: [this.workflowsStore.subWorkflowExecutionError?.message ?? ''],
+			} as NodeError;
 		},
 		hasSubworkflowExecutionError(): boolean {
-			return Boolean(this.subworkflowExecutionError);
+			return Boolean(this.workflowsStore.subWorkflowExecutionError);
+		},
+		workflowRunErrorAsNodeError(): NodeError {
+			return {
+				node: this.node,
+				messages: [this.workflowRunData?.[this.node?.name]?.[this.runIndex]?.error?.message ?? ''],
+			} as NodeError;
 		},
 		hasRunError(): boolean {
 			return Boolean(this.node && this.workflowRunData?.[this.node.name]?.[this.runIndex]?.error);
@@ -938,6 +949,9 @@ export default defineComponent({
 			);
 			return binaryData.filter((data) => Boolean(data && Object.keys(data).length));
 		},
+		inputHtml(): string {
+			return String(this.inputData[0]?.json?.html ?? '');
+		},
 		currentOutputIndex(): number {
 			if (this.overrideOutputs?.length && !this.overrideOutputs.includes(this.outputIndex)) {
 				return this.overrideOutputs[0];
@@ -1005,7 +1019,7 @@ export default defineComponent({
 			return this.hasNodeRun && !this.hasRunError;
 		},
 		showIoSearchNoMatchContent(): boolean {
-			return this.hasNodeRun && !this.inputData.length && this.search;
+			return this.hasNodeRun && !this.inputData.length && !!this.search;
 		},
 	},
 	watch: {
@@ -1195,7 +1209,11 @@ export default defineComponent({
 				? clearJsonKey(this.pinnedData.data.value)
 				: executionDataToJson(this.rawInputData);
 
-			const data = inputData.length > 0 ? inputData : TEST_PIN_DATA;
+			const inputDataLength = Array.isArray(inputData)
+				? inputData.length
+				: Object.keys(inputData ?? {}).length;
+
+			const data = inputDataLength > 0 ? inputData : TEST_PIN_DATA;
 
 			this.ndvStore.setOutputPanelEditModeEnabled(true);
 			this.ndvStore.setOutputPanelEditModeValue(JSON.stringify(data, null, 2));
@@ -1244,14 +1262,14 @@ export default defineComponent({
 				type,
 			});
 		},
-		async onTogglePinData({ source }: { source: PinDataSource }) {
+		async onTogglePinData({ source }: { source: PinDataSource | UnpinDataSource }) {
 			if (!this.node) {
 				return;
 			}
 
 			if (source === 'pin-icon-click') {
 				const telemetryPayload = {
-					node_type: this.activeNode.type,
+					node_type: this.activeNode?.type,
 					push_ref: this.pushRef,
 					run_index: this.runIndex,
 					view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'none' : this.displayMode,
@@ -1300,15 +1318,15 @@ export default defineComponent({
 			this.$telemetry.track('User changed ndv branch', {
 				push_ref: this.pushRef,
 				branch_index: value,
-				node_type: this.activeNode.type,
+				node_type: this.activeNode?.type,
 				node_type_input_selection: this.nodeType ? this.nodeType.name : '',
 				pane: this.paneType,
 			});
 		},
 		showTooMuchData() {
 			this.showData = true;
 			this.$telemetry.track('User clicked ndv button', {
-				node_type: this.activeNode.type,
+				node_type: this.activeNode?.type,
 				workflow_id: this.workflowsStore.workflowId,
 				push_ref: this.pushRef,
 				pane: this.paneType,
@@ -1324,7 +1342,7 @@ export default defineComponent({
 		unlinkRun() {
 			this.$emit('unlinkRun');
 		},
-		onCurrentPageChange(value) {
+		onCurrentPageChange(value: number) {
 			this.currentPage = value;
 			this.$telemetry.track('User changed ndv page', {
 				node_type: this.activeNode?.type,
@@ -1487,21 +1505,21 @@ export default defineComponent({
 			this.workflowsStore.setWorkflowExecutionData(null);
 			this.nodeHelpers.updateNodesExecutionIssues();
 		},
-		isViewable(index: number, key: string): boolean {
+		isViewable(index: number, key: string | number): boolean {
 			const { fileType } = this.binaryData[index][key];
 			return (
 				!!fileType && ['image', 'audio', 'video', 'text', 'json', 'pdf', 'html'].includes(fileType)
 			);
 		},
-		isDownloadable(index: number, key: string): boolean {
+		isDownloadable(index: number, key: string | number): boolean {
 			const { mimeType, fileName } = this.binaryData[index][key];
 			return !!(mimeType && fileName);
 		},
-		async downloadBinaryData(index: number, key: string) {
+		async downloadBinaryData(index: number, key: string | number) {
 			const { id, data, fileName, fileExtension, mimeType } = this.binaryData[index][key];
 
 			if (id) {
-				const url = this.workflowsStore.getBinaryUrl(id, 'download', fileName, mimeType);
+				const url = this.workflowsStore.getBinaryUrl(id, 'download', fileName ?? '', mimeType);
 				saveAs(url, [fileName, fileExtension].join('.'));
 				return;
 			} else {
@@ -1518,7 +1536,8 @@ export default defineComponent({
 
 			saveAs(blob, `${fileName}.json`);
 		},
-		displayBinaryData(index: number, key: string) {
+		displayBinaryData(index: number, key: string | number) {
+			const { data, mimeType } = this.binaryData[index][key];
 			this.binaryDataDisplayVisible = true;
 
 			this.binaryDataDisplayData = {
@@ -1527,6 +1546,8 @@ export default defineComponent({
 				outputIndex: this.currentOutputIndex,
 				index,
 				key,
+				data,
+				mimeType,
 			};
 		},
 		getOutputName(outputIndex: number) {