Merge branch 'master' into ADO2-64-assistant-e2e-tests

* master:
  fix(editor): Fix edge button background color in dark mode in new canvas (no-changelog) (#10475)
  feat(editor): Add old execution status rendering in new canvas (no-changelog) (#10473)
  feat(editor): Update cursor behaviour in new canvas (no-changelog) (#10472)
  fix(editor): Add missing control button events to new canvas (no-changelog) (#10471)
  fix: Show input names when node has multiple inputs (#10434)
  fix(editor): Adjust default zoom level in new canvas (no-changelog) (#10469)
  fix(Read/Write Files from Disk Node): Better error handling when file name missing (no-changelog) (#10463)
  fix: Remove unimplemented Postgres credentials options (#10461)
  fix(Invoice Ninja Node): Fix payment types (#10462)

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

@@ -63,6 +63,15 @@ const isMultiInputNode = computed(() => {
 	return nodeType !== null && nodeType.inputs.length > 1;
 });
 
+const connectedTo = (nodeName: string) => {
+	const connections = ndvStore.ndvNodeInputNumber[nodeName];
+	if (!connections) return '';
+	if (connections.length === 1) {
+		return `Input ${ndvStore.ndvNodeInputNumber[nodeName]}`;
+	}
+	return `Inputs ${ndvStore.ndvNodeInputNumber[nodeName].join(', ')}`;
+};
+
 function getMultipleNodesText(nodeName: string): string {
 	if (
 		!nodeName ||
@@ -90,8 +99,8 @@ function getMultipleNodesText(nodeName: string): string {
 	return `(${connectedInputs.join(' & ')})`;
 }
 
-function title(nodeName: string) {
-	const truncated = nodeName.substring(0, 30);
+function title(nodeName: string, length = 30) {
+	const truncated = nodeName.substring(0, length);
 	if (truncated.length < nodeName.length) {
 		return `${truncated}...`;
 	}
@@ -150,7 +159,9 @@ function onInputNodeChange(value: string) {
 				<span v-if="node.disabled">({{ i18n.baseText('node.disabled') }})</span>
 			</span>
 
-			<span :class="$style.subtitle">{{ subtitle(node.name, depth) }}</span>
+			<span :class="$style.subtitle">{{
+				connectedTo(node.name) ? connectedTo(node.name) : subtitle(node.name, depth)
+			}}</span>
 		</n8n-option>
 	</n8n-select>
 </template>

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

@@ -110,6 +110,24 @@ const filteredNodes = computed(() =>
 	nodes.value.filter((node) => !props.search || !isDataEmpty(node.schema)),
 );
 
+const nodeAdditionalInfo = (node: INodeUi) => {
+	const returnData: string[] = [];
+	if (node.disabled) {
+		returnData.push(i18n.baseText('node.disabled'));
+	}
+
+	const connections = ndvStore.ndvNodeInputNumber[node.name];
+	if (connections) {
+		if (connections.length === 1) {
+			returnData.push(`Input ${connections}`);
+		} else {
+			returnData.push(`Inputs ${connections.join(', ')}`);
+		}
+	}
+
+	return returnData.length ? `(${returnData.join(' | ')})` : '';
+};
+
 const isDataEmpty = (schema: Schema | null) => {
 	if (!schema) return true;
 	// Utilize the generated schema instead of looping over the entire data again
@@ -292,7 +310,9 @@ watch(
 
 					<div :class="$style.title">
 						{{ currentNode.node.name }}
-						<span v-if="currentNode.node.disabled">({{ $locale.baseText('node.disabled') }})</span>
+						<span v-if="nodeAdditionalInfo(currentNode.node)" :class="$style.subtitle">{{
+							nodeAdditionalInfo(currentNode.node)
+						}}</span>
 					</div>
 					<font-awesome-icon
 						v-if="currentNode.nodeType.group.includes('trigger')"
@@ -478,6 +498,13 @@ watch(
 	cursor: pointer;
 }
 
+.subtitle {
+	margin-left: auto;
+	padding-left: var(--spacing-2xs);
+	color: var(--color-text-light);
+	font-weight: var(--font-weight-regular);
+}
+
 .header {
 	display: flex;
 	align-items: center;

packages/editor-ui/src/components/canvas/Canvas.vue

@@ -269,7 +269,8 @@ function emitWithLastSelectedNode(emitFn: (id: string) => void) {
  * View
  */
 
-const zoom = ref(1);
+const defaultZoom = 1;
+const zoom = ref(defaultZoom);
 
 function onClickPane(event: MouseEvent) {
 	const bounds = viewportRef.value?.getBoundingClientRect() ?? { left: 0, top: 0 };
@@ -282,7 +283,7 @@ function onClickPane(event: MouseEvent) {
 }
 
 async function onFitView() {
-	await fitView({ maxZoom: 1.2, padding: 0.2 });
+	await fitView({ maxZoom: defaultZoom, padding: 0.2 });
 }
 
 async function onZoomTo(zoomLevel: number) {
@@ -298,7 +299,7 @@ async function onZoomOut() {
 }
 
 async function onResetZoom() {
-	await onZoomTo(1);
+	await onZoomTo(defaultZoom);
 }
 
 function onViewportChange(viewport: ViewportTransform) {
@@ -469,7 +470,7 @@ watch(() => props.readOnly, setReadonly, {
 			:position="controlsPosition"
 			:show-interactive="false"
 			:zoom="zoom"
-			@fit-view="onFitView"
+			@zoom-to-fit="onFitView"
 			@zoom-in="onZoomIn"
 			@zoom-out="onZoomOut"
 			@reset-zoom="onResetZoom"

packages/editor-ui/src/components/canvas/elements/buttons/CanvasControlButtons.vue

@@ -14,13 +14,28 @@ const props = withDefaults(
 
 const emit = defineEmits<{
 	'reset-zoom': [];
+	'zoom-in': [];
+	'zoom-out': [];
+	'zoom-to-fit': [];
 }>();
 
 const isResetZoomVisible = computed(() => props.zoom !== 1);
 
 function onResetZoom() {
 	emit('reset-zoom');
 }
+
+function onZoomIn() {
+	emit('zoom-in');
+}
+
+function onZoomOut() {
+	emit('zoom-out');
+}
+
+function onZoomToFit() {
+	emit('zoom-to-fit');
+}
 </script>
 <template>
 	<Controls :show-zoom="false" :show-fit-view="false">
@@ -33,6 +48,7 @@ function onResetZoom() {
 				size="large"
 				icon="search-plus"
 				data-test-id="zoom-in-button"
+				@click="onZoomIn"
 			/>
 		</KeyboardShortcutTooltip>
 		<KeyboardShortcutTooltip
@@ -44,13 +60,20 @@ function onResetZoom() {
 				size="large"
 				icon="search-minus"
 				data-test-id="zoom-out-button"
+				@click="onZoomOut"
 			/>
 		</KeyboardShortcutTooltip>
 		<KeyboardShortcutTooltip
 			:label="$locale.baseText('nodeView.zoomToFit')"
 			:shortcut="{ keys: ['1'] }"
 		>
-			<N8nIconButton type="tertiary" size="large" icon="expand" data-test-id="zoom-to-fit" />
+			<N8nIconButton
+				type="tertiary"
+				size="large"
+				icon="expand"
+				data-test-id="zoom-to-fit"
+				@click="onZoomToFit"
+			/>
 		</KeyboardShortcutTooltip>
 		<KeyboardShortcutTooltip
 			v-if="isResetZoomVisible"
@@ -72,5 +95,6 @@ function onResetZoom() {
 .vue-flow__controls {
 	display: flex;
 	gap: var(--spacing-xs);
+	box-shadow: none;
 }
 </style>

packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue

@@ -35,6 +35,7 @@ function onDelete() {
 	<div :class="classes" data-test-id="canvas-edge-toolbar">
 		<N8nIconButton
 			v-if="isAddButtonVisible"
+			class="canvas-edge-toolbar-button"
 			data-test-id="add-connection-button"
 			type="tertiary"
 			size="small"
@@ -44,6 +45,7 @@ function onDelete() {
 		/>
 		<N8nIconButton
 			data-test-id="delete-connection-button"
+			class="canvas-edge-toolbar-button"
 			type="tertiary"
 			size="small"
 			icon="trash"
@@ -62,3 +64,10 @@ function onDelete() {
 	pointer-events: all;
 }
 </style>
+
+<style lang="scss">
+[data-theme='dark'] .canvas-edge-toolbar-button {
+	--button-background-color: var(--color-background-base);
+	--button-hover-background-color: var(--color-background-light);
+}
+</style>

packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue

@@ -123,6 +123,7 @@ function openContextMenu(event: MouseEvent) {
 	--configurable-node--icon-offset: 40px;
 	--configurable-node--icon-size: 30px;
 	--trigger-node--border-radius: 36px;
+	--canvas-node--status-icons-offset: var(--spacing-2xs);
 
 	height: var(--canvas-node--height);
 	width: var(--canvas-node--width);
@@ -248,8 +249,8 @@ function openContextMenu(event: MouseEvent) {
 
 .statusIcons {
 	position: absolute;
-	bottom: var(--spacing-2xs);
-	right: var(--spacing-2xs);
+	bottom: var(--canvas-node--status-icons-offset);
+	right: var(--canvas-node--status-icons-offset);
 }
 
 .triggerIcon {

packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue

@@ -88,7 +88,13 @@ const hideNodeIssues = computed(() => false); // @TODO Implement this
 }
 
 .running {
-	color: var(--color-primary);
+	width: calc(100% - 2 * var(--canvas-node--status-icons-offset));
+	height: calc(100% - 2 * var(--canvas-node--status-icons-offset));
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 3.75em;
+	color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.7);
 }
 
 .issues {

packages/editor-ui/src/stores/ndv.store.ts

@@ -177,6 +177,26 @@ export const useNDVStore = defineStore(STORES.NDV, {
 		isNDVOpen(): boolean {
 			return this.activeNodeName !== null;
 		},
+		ndvNodeInputNumber() {
+			const returnData: { [nodeName: string]: number[] } = {};
+			const workflow = useWorkflowsStore().getCurrentWorkflow();
+			const activeNodeConections = (
+				workflow.connectionsByDestinationNode[this.activeNode?.name || ''] ?? {}
+			).main;
+
+			if (!activeNodeConections || activeNodeConections.length < 2) return returnData;
+
+			for (const [index, connection] of activeNodeConections.entries()) {
+				for (const node of connection) {
+					if (!returnData[node.node]) {
+						returnData[node.node] = [];
+					}
+					returnData[node.node].push(index + 1);
+				}
+			}
+
+			return returnData;
+		},
 	},
 	actions: {
 		setActiveNodeName(nodeName: string | null): void {

packages/editor-ui/src/styles/plugins/_vueflow.scss

@@ -23,3 +23,25 @@
 		opacity: 0.2;
 	}
 }
+
+.vue-flow__pane {
+	&,
+	&.draggable {
+		cursor: default;
+	}
+
+	&.dragging {
+		cursor: grabbing;
+	}
+}
+
+.vue-flow__node {
+	&,
+	&.draggable {
+		cursor: pointer;
+	}
+
+	&.dragging {
+		cursor: grabbing;
+	}
+}

packages/nodes-base/credentials/CrateDb.credentials.ts

@@ -52,14 +52,6 @@ export class CrateDb implements ICredentialType {
 					name: 'Require',
 					value: 'require',
 				},
-				{
-					name: 'Verify (Not Implemented)',
-					value: 'verify',
-				},
-				{
-					name: 'Verify-Full (Not Implemented)',
-					value: 'verify-full',
-				},
 			],
 			default: 'disable',
 		},

packages/nodes-base/credentials/Postgres.credentials.ts

@@ -65,14 +65,6 @@ export class Postgres implements ICredentialType {
 					name: 'Require',
 					value: 'require',
 				},
-				{
-					name: 'Verify (Not Implemented)',
-					value: 'verify',
-				},
-				{
-					name: 'Verify-Full (Not Implemented)',
-					value: 'verify-full',
-				},
 			],
 			default: 'disable',
 		},

packages/nodes-base/credentials/QuestDb.credentials.ts

@@ -52,14 +52,6 @@ export class QuestDb implements ICredentialType {
 					name: 'Require',
 					value: 'require',
 				},
-				{
-					name: 'Verify (Not Implemented)',
-					value: 'verify',
-				},
-				{
-					name: 'Verify-Full (Not Implemented)',
-					value: 'verify-full',
-				},
 			],
 			default: 'disable',
 		},

packages/nodes-base/credentials/TimescaleDb.credentials.ts

@@ -64,14 +64,6 @@ export class TimescaleDb implements ICredentialType {
 					name: 'Require',
 					value: 'require',
 				},
-				{
-					name: 'Verify (Not Implemented)',
-					value: 'verify',
-				},
-				{
-					name: 'Verify-Full (Not Implemented)',
-					value: 'verify-full',
-				},
 			],
 			default: 'disable',
 		},

packages/nodes-base/nodes/Files/ReadWriteFile/actions/read.operation.ts

@@ -1,4 +1,10 @@
-import type { IExecuteFunctions, INodeExecutionData, INodeProperties } from 'n8n-workflow';
+import { NodeApiError } from 'n8n-workflow';
+import type {
+	IExecuteFunctions,
+	INodeExecutionData,
+	INodeProperties,
+	JsonObject,
+} from 'n8n-workflow';
 
 import glob from 'fast-glob';
 import { errorMapper } from '../helpers/utils';
@@ -124,7 +130,6 @@ export async function execute(this: IExecuteFunctions, items: INodeExecutionData
 					},
 				});
 			}
-
 			returnData.push(...newItems);
 		} catch (error) {
 			const nodeOperatioinError = errorMapper.call(this, error, itemIndex, {
@@ -142,7 +147,7 @@ export async function execute(this: IExecuteFunctions, items: INodeExecutionData
 				});
 				continue;
 			}
-			throw nodeOperatioinError;
+			throw new NodeApiError(this.getNode(), error as JsonObject, { itemIndex });
 		}
 	}