feat(editor): Update Node Details View header tabs structure

packages/design-system/src/components/N8nInputLabel/InputLabel.vue

@@ -22,7 +22,7 @@
 				v-if="tooltipText && label"
 				:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
 			>
-				<N8nTooltip placement="top" :popper-class="$style.tooltipPopper">
+				<N8nTooltip placement="top" :popper-class="$style.tooltipPopper" :show-after="300">
 					<N8nIcon icon="question-circle" size="small" />
 					<template #content>
 						<div v-html="addTargetBlank(tooltipText)" />
@@ -90,6 +90,10 @@ const addTargetBlank = (html: string) =>
 .inputLabel:hover {
 	.infoIcon {
 		opacity: 1;
+
+		&:hover {
+			color: var(--color-text-base);
+		}
 	}
 
 	.options {
@@ -117,7 +121,7 @@ const addTargetBlank = (html: string) =>
 	display: flex;
 	align-items: center;
 	color: var(--color-text-light);
-	padding-left: var(--spacing-4xs);
+	margin-left: var(--spacing-4xs);
 	z-index: 1;
 }
 

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -26,9 +26,9 @@
 					>
 						<div>
 							{{ option.label }}
-							<span :class="$style.external"
-								><N8nIcon icon="external-link-alt" size="small"
-							/></span>
+							<span :class="$style.external">
+								<N8nIcon icon="external-link-alt" size="xsmall" />
+							</span>
 						</div>
 					</a>
 
@@ -38,7 +38,7 @@
 						:data-test-id="`tab-${option.value}`"
 						@click="() => handleTabClick(option.value)"
 					>
-						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
+						<N8nIcon v-if="option.icon" :icon="option.icon" size="small" />
 						<span v-if="option.label">{{ option.label }}</span>
 					</div>
 				</n8n-tooltip>
@@ -131,6 +131,7 @@ const scrollRight = () => scroll(50);
 	color: var(--color-text-base);
 	font-weight: var(--font-weight-bold);
 	display: flex;
+	align-items: center;
 	width: 100%;
 	position: absolute;
 	overflow-x: scroll;
@@ -146,23 +147,29 @@ const scrollRight = () => scroll(50);
 }
 
 .tab {
+	--active-tab-border-width: 2px;
 	display: block;
-	padding: 0 var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
-	padding-bottom: var(--spacing-2xs);
+	padding: 0 var(--spacing-s);
+	padding-bottom: calc(var(--spacing-2xs) + var(--active-tab-border-width));
 	font-size: var(--font-size-s);
 	cursor: pointer;
 	white-space: nowrap;
 	&:hover {
 		color: var(--color-primary);
 	}
+
+	span + span {
+		margin-left: var(--spacing-4xs);
+	}
 }
 
 .activeTab {
 	color: var(--color-primary);
-	border-bottom: var(--color-primary) 2px solid;
+	padding-bottom: var(--spacing-2xs);
+	border-bottom: var(--color-primary) var(--active-tab-border-width) solid;
 }
 
-.alignRight {
+.alignRight:not(.alignRight + .alignRight) {
 	margin-left: auto;
 }
 
@@ -172,15 +179,12 @@ const scrollRight = () => scroll(50);
 
 	&:hover {
 		color: var(--color-primary);
-
-		.external {
-			display: inline-block;
-		}
 	}
 }
 
 .external {
-	display: none;
+	display: inline-block;
+	margin-left: var(--spacing-5xs);
 }
 
 .button {

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

@@ -31,9 +31,10 @@
 			</div>
 			<NodeSettingsTabs
 				v-if="node && nodeValid"
-				v-model="openPanel"
+				:model-value="openPanel"
 				:node-type="nodeType"
 				:push-ref="pushRef"
+				@update:model-value="onTabSelect"
 			/>
 		</div>
 		<div v-if="node && !nodeValid" class="node-is-not-valid">
@@ -126,7 +127,7 @@
 					<n8n-notice
 						:content="
 							$locale.baseText('nodeSettings.useTheHttpRequestNode', {
-								interpolate: { nodeTypeDisplayName: nodeType.displayName },
+								interpolate: { nodeTypeDisplayName: nodeType?.displayName ?? '' },
 							})
 						"
 					/>
@@ -186,6 +187,7 @@ import type {
 	INodeProperties,
 	NodeParameterValue,
 	ConnectionTypes,
+	NodeParameterValueType,
 } from 'n8n-workflow';
 import {
 	NodeHelpers,
@@ -357,16 +359,16 @@ export default defineComponent({
 				return [];
 			}
 
-			return this.nodeType.properties;
+			return this.nodeType?.properties ?? [];
 		},
 		outputPanelEditMode(): { enabled: boolean; value: string } {
 			return this.ndvStore.outputPanelEditMode;
 		},
 		isCommunityNode(): boolean {
-			return isCommunityPackageName(this.node?.type);
+			return !!this.node && isCommunityPackageName(this.node.type);
 		},
 		isTriggerNode(): boolean {
-			return this.nodeTypesStore.isTriggerNode(this.node?.type);
+			return !!this.node && this.nodeTypesStore.isTriggerNode(this.node.type);
 		},
 		workflowOwnerName(): string {
 			return this.workflowsEEStore.getWorkflowOwnerName(`${this.workflowsStore.workflowId}`);
@@ -425,7 +427,7 @@ export default defineComponent({
 		return {
 			nodeValid: true,
 			nodeColor: null,
-			openPanel: 'params',
+			openPanel: 'params' as 'params' | 'settings',
 			nodeValues: {
 				color: '#ff0000',
 				alwaysOutputData: false,
@@ -466,10 +468,10 @@ export default defineComponent({
 		importCurlEventBus.off('setHttpNodeParameters', this.setHttpNodeParameters);
 	},
 	methods: {
-		setHttpNodeParameters(parameters: Record<string, unknown>) {
+		setHttpNodeParameters(parameters: NodeParameterValueType) {
 			try {
 				this.valueChanged({
-					node: this.node.name,
+					node: this.node?.name,
 					name: 'parameters',
 					value: parameters,
 				});
@@ -649,8 +651,10 @@ export default defineComponent({
 				// Data is on top level
 				if (value === null) {
 					// Property should be deleted
-					const { [lastNamePart]: removedNodeValue, ...remainingNodeValues } = this.nodeValues;
-					this.nodeValues = remainingNodeValues;
+					if (lastNamePart) {
+						const { [lastNamePart]: removedNodeValue, ...remainingNodeValues } = this.nodeValues;
+						this.nodeValues = remainingNodeValues;
+					}
 				} else {
 					// Value should be set
 					this.nodeValues = {
@@ -666,17 +670,21 @@ export default defineComponent({
 						| INodeParameters
 						| INodeParameters[];
 
-					const { [lastNamePart]: removedNodeValue, ...remainingNodeValues } = tempValue;
-					tempValue = remainingNodeValues;
+					if (lastNamePart && !Array.isArray(tempValue)) {
+						const { [lastNamePart]: removedNodeValue, ...remainingNodeValues } = tempValue;
+						tempValue = remainingNodeValues;
+					}
 
-					if (isArray && (tempValue as INodeParameters[]).length === 0) {
+					if (isArray && Array.isArray(tempValue) && tempValue.length === 0) {
 						// If a value from an array got delete and no values are left
 						// delete also the parent
 						lastNamePart = nameParts.pop();
 						tempValue = get(this.nodeValues, nameParts.join('.')) as INodeParameters;
-						const { [lastNamePart]: removedArrayNodeValue, ...remainingArrayNodeValues } =
-							tempValue;
-						tempValue = remainingArrayNodeValues;
+						if (lastNamePart) {
+							const { [lastNamePart]: removedArrayNodeValue, ...remainingArrayNodeValues } =
+								tempValue;
+							tempValue = remainingArrayNodeValues;
+						}
 					}
 				} else {
 					// Value should be set
@@ -734,6 +742,11 @@ export default defineComponent({
 			// Save the node name before we commit the change because
 			// we need the old name to rename the node properly
 			const nodeNameBefore = parameterData.node || this.node?.name;
+
+			if (!nodeNameBefore) {
+				return;
+			}
+
 			const node = this.workflowsStore.getNodeByName(nodeNameBefore);
 
 			if (node === null) {
@@ -776,44 +789,46 @@ export default defineComponent({
 				// we do not edit it directly
 				nodeParameters = deepCopy(nodeParameters);
 
-				for (const parameterName of Object.keys(parameterData.value)) {
-					//@ts-ignore
-					newValue = parameterData.value[parameterName];
-
-					// Remove the 'parameters.' from the beginning to just have the
-					// actual parameter name
-					const parameterPath = parameterName.split('.').slice(1).join('.');
-
-					// Check if the path is supposed to change an array and if so get
-					// the needed data like path and index
-					const parameterPathArray = parameterPath.match(/(.*)\[(\d+)\]$/);
-
-					// Apply the new value
-					//@ts-ignore
-					if (parameterData[parameterName] === undefined && parameterPathArray !== null) {
-						// Delete array item
-						const path = parameterPathArray[1];
-						const index = parameterPathArray[2];
-						const data = get(nodeParameters, path);
-
-						if (Array.isArray(data)) {
-							data.splice(parseInt(index, 10), 1);
-							set(nodeParameters as object, path, data);
-						}
-					} else {
-						if (newValue === undefined) {
-							unset(nodeParameters as object, parameterPath);
+				if (parameterData.value && typeof parameterData.value === 'object') {
+					for (const parameterName of Object.keys(parameterData.value)) {
+						//@ts-ignore
+						newValue = parameterData.value[parameterName];
+
+						// Remove the 'parameters.' from the beginning to just have the
+						// actual parameter name
+						const parameterPath = parameterName.split('.').slice(1).join('.');
+
+						// Check if the path is supposed to change an array and if so get
+						// the needed data like path and index
+						const parameterPathArray = parameterPath.match(/(.*)\[(\d+)\]$/);
+
+						// Apply the new value
+						//@ts-ignore
+						if (parameterData[parameterName] === undefined && parameterPathArray !== null) {
+							// Delete array item
+							const path = parameterPathArray[1];
+							const index = parameterPathArray[2];
+							const data = get(nodeParameters, path);
+
+							if (Array.isArray(data)) {
+								data.splice(parseInt(index, 10), 1);
+								set(nodeParameters as object, path, data);
+							}
 						} else {
-							set(nodeParameters as object, parameterPath, newValue);
+							if (newValue === undefined) {
+								unset(nodeParameters as object, parameterPath);
+							} else {
+								set(nodeParameters as object, parameterPath, newValue);
+							}
 						}
-					}
 
-					void this.externalHooks.run('nodeSettings.valueChanged', {
-						parameterPath,
-						newValue,
-						parameters: this.parameters,
-						oldNodeParameters,
-					});
+						void this.externalHooks.run('nodeSettings.valueChanged', {
+							parameterPath,
+							newValue,
+							parameters: this.parameters,
+							oldNodeParameters,
+						});
+					}
 				}
 
 				// Get the parameters with the now new defaults according to the
@@ -1144,6 +1159,9 @@ export default defineComponent({
 		openSettings() {
 			this.openPanel = 'settings';
 		},
+		onTabSelect(tab: 'params' | 'settings') {
+			this.openPanel = tab;
+		},
 	},
 });
 </script>