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

Co-authored-by: Elias Meire <elias@meire.dev>

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>
 					<RouterLink
@@ -45,7 +45,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>
@@ -140,6 +140,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;
@@ -155,9 +156,10 @@ 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;
@@ -165,14 +167,19 @@ const scrollRight = () => scroll(50);
 	&: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;
 }
 
@@ -182,15 +189,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];
+				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('.');
+						// 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+)\]$/);
+						// 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);
+						// 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 (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>

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

@@ -1,5 +1,5 @@
 <template>
-	<n8n-tabs
+	<N8nTabs
 		:options="options"
 		:model-value="modelValue"
 		@update:model-value="onTabSelect"
@@ -7,163 +7,167 @@
 	/>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import type { ITab } from '@/Interface';
 import {
 	BUILTIN_NODES_DOCS_URL,
 	COMMUNITY_NODES_INSTALLATION_DOCS_URL,
 	NPM_PACKAGE_DOCS_BASE_URL,
 } from '@/constants';
-import type { INodeUi, ITab } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { INodeTypeDescription } from 'n8n-workflow';
 import { NodeConnectionType } from 'n8n-workflow';
+import { computed } from 'vue';
 
-import { isCommunityPackageName } from '@/utils/nodeTypesUtils';
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { isCommunityPackageName } from '@/utils/nodeTypesUtils';
 
-export default defineComponent({
-	name: 'NodeSettingsTabs',
-	props: {
-		modelValue: {
-			type: String,
-			default: '',
-		},
-		nodeType: {},
-		pushRef: {
-			type: String,
-		},
-	},
-	setup() {
-		const externalHooks = useExternalHooks();
-		return {
-			externalHooks,
-		};
-	},
-	computed: {
-		...mapStores(useNDVStore, useWorkflowsStore),
-		activeNode(): INodeUi | null {
-			return this.ndvStore.activeNode;
-		},
-		documentationUrl(): string {
-			const nodeType = this.nodeType as INodeTypeDescription | null;
+type Tab = 'settings' | 'params';
+type Props = {
+	modelValue?: Tab;
+	nodeType?: INodeTypeDescription;
+	pushRef?: string;
+};
 
-			if (!nodeType) {
-				return '';
-			}
-
-			if (nodeType.documentationUrl && nodeType.documentationUrl.startsWith('http')) {
-				return nodeType.documentationUrl;
-			}
-
-			const utmTags =
-				'?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link' +
-				'&utm_campaign=' +
-				nodeType.name;
-
-			// Built-in node documentation available via its codex entry
-			const primaryDocUrl = nodeType.codex?.resources?.primaryDocumentation?.[0]?.url;
-			if (primaryDocUrl) {
-				return primaryDocUrl + utmTags;
-			}
-
-			if (this.isCommunityNode) {
-				return `${NPM_PACKAGE_DOCS_BASE_URL}${nodeType.name.split('.')[0]}`;
-			}
-
-			// Fallback to the root of the node documentation
-			return BUILTIN_NODES_DOCS_URL + utmTags;
-		},
-		isCommunityNode(): boolean {
-			const nodeType = this.nodeType as INodeTypeDescription | null;
-			if (nodeType) {
-				return isCommunityPackageName(nodeType.name);
-			}
-			return false;
-		},
-		packageName(): string {
-			const nodeType = this.nodeType as INodeTypeDescription;
-			return nodeType.name.split('.')[0];
-		},
-		options(): ITab[] {
-			const options: ITab[] = [
-				{
-					label: this.$locale.baseText('nodeSettings.parameters'),
-					value: 'params',
-				},
-			];
-			if (this.documentationUrl) {
-				options.push({
-					label: this.$locale.baseText('nodeSettings.docs'),
-					value: 'docs',
-					href: this.documentationUrl,
-				});
-			}
-			if (this.isCommunityNode) {
-				options.push({
-					icon: 'cube',
-					value: 'communityNode',
-					align: 'right',
-					tooltip: this.$locale.baseText('generic.communityNode.tooltip', {
-						interpolate: {
-							docUrl: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
-							packageName: this.packageName,
-						},
-					}),
-				});
-			}
-			// If both tabs have align right, both will have excessive left margin
-			const pushCogRight = this.isCommunityNode ? false : true;
-			options.push({
-				icon: 'cog',
-				value: 'settings',
-				align: pushCogRight ? 'right' : undefined,
-			});
-
-			return options;
-		},
-	},
-	methods: {
-		onTabSelect(tab: string) {
-			if (tab === 'docs' && this.nodeType) {
-				void this.externalHooks.run('dataDisplay.onDocumentationUrlClick', {
-					nodeType: this.nodeType as INodeTypeDescription,
-					documentationUrl: this.documentationUrl,
-				});
-				this.$telemetry.track('User clicked ndv link', {
-					node_type: this.activeNode.type,
-					workflow_id: this.workflowsStore.workflowId,
-					push_ref: this.pushRef,
-					pane: NodeConnectionType.Main,
-					type: 'docs',
-				});
-			}
-
-			if (tab === 'settings' && this.nodeType) {
-				this.$telemetry.track('User viewed node settings', {
-					node_type: (this.nodeType as INodeTypeDescription).name,
-					workflow_id: this.workflowsStore.workflowId,
-				});
-			}
-
-			if (tab === 'settings' || tab === 'params') {
-				this.$emit('update:modelValue', tab);
-			}
-		},
-		onTooltipClick(tab: string, event: MouseEvent) {
-			if (tab === 'communityNode' && (event.target as Element).localName === 'a') {
-				this.$telemetry.track('user clicked cnr docs link', { source: 'node details view' });
-			}
-		},
-	},
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: 'params',
+	nodeType: undefined,
+	pushRef: '',
 });
+const emit = defineEmits<{
+	(event: 'update:model-value', tab: Tab): void;
+}>();
+
+const externalHooks = useExternalHooks();
+const ndvStore = useNDVStore();
+const workflowsStore = useWorkflowsStore();
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const activeNode = computed(() => ndvStore.activeNode);
+
+const isCommunityNode = computed(() => {
+	const nodeType = props.nodeType;
+	if (nodeType) {
+		return isCommunityPackageName(nodeType.name);
+	}
+	return false;
+});
+
+const packageName = computed(() => props.nodeType?.name.split('.')[0] ?? '');
+
+const documentationUrl = computed(() => {
+	const nodeType = props.nodeType;
+
+	if (!nodeType) {
+		return '';
+	}
+
+	if (nodeType.documentationUrl && nodeType.documentationUrl.startsWith('http')) {
+		return nodeType.documentationUrl;
+	}
+
+	const utmParams = new URLSearchParams({
+		utm_source: 'n8n_app',
+		utm_medium: 'node_settings_modal-credential_link',
+		utm_campaign: nodeType.name,
+	});
+
+	// Built-in node documentation available via its codex entry
+	const primaryDocUrl = nodeType.codex?.resources?.primaryDocumentation?.[0]?.url;
+	if (primaryDocUrl) {
+		return `${primaryDocUrl}?${utmParams.toString()}`;
+	}
+
+	if (isCommunityNode.value) {
+		return `${NPM_PACKAGE_DOCS_BASE_URL}${packageName.value}`;
+	}
+
+	// Fallback to the root of the node documentation
+	return `${BUILTIN_NODES_DOCS_URL}?${utmParams.toString()}`;
+});
+
+const options = computed<ITab[]>(() => {
+	const options: ITab[] = [
+		{
+			label: i18n.baseText('nodeSettings.parameters'),
+			value: 'params',
+		},
+		{
+			label: i18n.baseText('nodeSettings.settings'),
+			value: 'settings',
+		},
+	];
+
+	if (isCommunityNode.value) {
+		options.push({
+			icon: 'cube',
+			value: 'communityNode',
+			align: 'right',
+			tooltip: i18n.baseText('generic.communityNode.tooltip', {
+				interpolate: {
+					docUrl: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+					packageName: packageName.value,
+				},
+			}),
+		});
+	}
+
+	if (documentationUrl.value) {
+		options.push({
+			label: i18n.baseText('nodeSettings.docs'),
+			value: 'docs',
+			href: documentationUrl.value,
+			align: 'right',
+		});
+	}
+
+	return options;
+});
+
+function onTabSelect(tab: string) {
+	if (tab === 'docs' && props.nodeType) {
+		void externalHooks.run('dataDisplay.onDocumentationUrlClick', {
+			nodeType: props.nodeType,
+			documentationUrl: documentationUrl.value,
+		});
+
+		telemetry.track('User clicked ndv link', {
+			node_type: activeNode.value?.type,
+			workflow_id: workflowsStore.workflowId,
+			push_ref: props.pushRef,
+			pane: NodeConnectionType.Main,
+			type: 'docs',
+		});
+	}
+
+	if (tab === 'settings' && props.nodeType) {
+		telemetry.track('User viewed node settings', {
+			node_type: props.nodeType.name,
+			workflow_id: workflowsStore.workflowId,
+		});
+	}
+
+	if (tab === 'settings' || tab === 'params') {
+		emit('update:model-value', tab);
+	}
+}
+
+function onTooltipClick(tab: string, event: MouseEvent) {
+	if (tab === 'communityNode' && (event.target as Element).localName === 'a') {
+		telemetry.track('user clicked cnr docs link', { source: 'node details view' });
+	}
+}
 </script>
 
 <style lang="scss">
 #communityNode > div {
 	cursor: auto;
+	padding-right: 0;
+	padding-left: 0;
 
 	&:hover {
 		color: unset;

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

@@ -1122,6 +1122,7 @@
 	"nodeSettings.notesInFlow.description": "If active, the note above will display in the flow as a subtitle",
 	"nodeSettings.notesInFlow.displayName": "Display Note in Flow?",
 	"nodeSettings.parameters": "Parameters",
+	"nodeSettings.settings": "Settings",
 	"nodeSettings.communityNodeTooltip": "This is a <a href=\"{docUrl}\" target=\"_blank\"/>community node</a>",
 	"nodeSettings.retryOnFail.description": "If active, the node tries to execute again when it fails",
 	"nodeSettings.retryOnFail.displayName": "Retry On Fail",