fix(editor): Sync log selection doesn't work for renamed nodes (#16878)

packages/frontend/editor-ui/src/features/logs/components/LogDetailsPanel.vue

@@ -78,8 +78,7 @@ function handleResizeEnd() {
 				<div :class="$style.title">
 					<NodeIcon :node-type="type" :size="16" :class="$style.icon" />
 					<LogsViewNodeName
-						:latest-name="latestInfo?.name ?? logEntry.node.name"
+						:name="latestInfo?.name ?? logEntry.node.name"
-						:name="logEntry.node.name"
 						:is-deleted="latestInfo?.deleted ?? false"
 					/>
 					<LogsViewExecutionSummary

packages/frontend/editor-ui/src/features/logs/components/LogsOverviewRow.vue

@@ -131,8 +131,7 @@ watch(
 		<NodeIcon :node-type="type" :size="16" :class="$style.icon" />
 		<LogsViewNodeName
 			:class="$style.name"
-			:latest-name="latestInfo?.name ?? props.data.node.name"
+			:name="latestInfo?.name ?? props.data.node.name"
-			:name="props.data.node.name"
 			:is-error="isError"
 			:is-deleted="latestInfo?.deleted ?? false"
 		/>

packages/frontend/editor-ui/src/features/logs/components/LogsPanel.test.ts

@@ -433,6 +433,34 @@ describe('LogsPanel', () => {
 		expect(rendered.queryByTestId('log-details-output')).not.toBeInTheDocument();
 	});
 
+	it('should show new name when a node is renamed', async () => {
+		const canvasOperations = useCanvasOperations();
+
+		logsStore.toggleOpen(true);
+
+		// Create deep copy so that renaming doesn't affect other test cases
+		workflowsStore.setWorkflow(deepCopy(aiChatWorkflow));
+		workflowsStore.setWorkflowExecutionData(deepCopy(aiChatExecutionResponse));
+
+		const rendered = render();
+
+		await nextTick();
+
+		expect(
+			within(rendered.getByTestId('log-details-header')).getByText('AI Model'),
+		).toBeInTheDocument();
+		expect(within(rendered.getByRole('tree')).getByText('AI Model')).toBeInTheDocument();
+
+		await canvasOperations.renameNode('AI Model', 'Renamed!!');
+
+		await waitFor(() => {
+			expect(
+				within(rendered.getByTestId('log-details-header')).getByText('Renamed!!'),
+			).toBeInTheDocument();
+			expect(within(rendered.getByRole('tree')).getByText('Renamed!!')).toBeInTheDocument();
+		});
+	});
+
 	describe('selection', () => {
 		beforeEach(() => {
 			logsStore.toggleOpen(true);
@@ -487,6 +515,25 @@ describe('LogsPanel', () => {
 			await rerender({});
 			expect(await findByRole('treeitem', { selected: true })).toHaveTextContent(/AI Model/);
 		});
+
+		it("should automatically select a log for the selected node on canvas even after it's renamed", async () => {
+			const canvasOperations = useCanvasOperations();
+
+			workflowsStore.setWorkflow(deepCopy(aiChatWorkflow));
+			workflowsStore.setWorkflowExecutionData(deepCopy(aiChatExecutionResponse));
+
+			logsStore.toggleLogSelectionSync(true);
+
+			const { rerender, findByRole } = render();
+
+			expect(await findByRole('treeitem', { selected: true })).toHaveTextContent(/AI Model/);
+
+			await canvasOperations.renameNode('AI Agent', 'Renamed Agent');
+			uiStore.lastSelectedNode = 'Renamed Agent';
+
+			await rerender({});
+			expect(await findByRole('treeitem', { selected: true })).toHaveTextContent(/Renamed Agent/);
+		});
 	});
 
 	describe('chat', () => {

packages/frontend/editor-ui/src/features/logs/components/LogsPanel.vue

@@ -200,7 +200,7 @@ function handleOpenNdv(treeNode: LogEntry) {
 							:is-open="isOpen"
 							:log-entry="selected"
 							:window="pipWindow"
-							:latest-info="latestNodeNameById[selected.id]"
+							:latest-info="latestNodeNameById[selected.node.id]"
 							:panels="logsStore.detailsState"
 							@click-header="onToggleOpen(true)"
 							@toggle-input-open="logsStore.toggleInputOpen"

packages/frontend/editor-ui/src/features/logs/components/LogsViewNodeName.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { N8nText } from '@n8n/design-system';
 
-const { name, latestName, isError, isDeleted } = defineProps<{
+const { name, isError, isDeleted } = defineProps<{
 	name: string;
-	latestName: string;
 	isError?: boolean;
 	isDeleted?: boolean;
 }>();
@@ -17,12 +16,12 @@ const { name, latestName, isError, isDeleted } = defineProps<{
 		:class="$style.name"
 		:color="isError ? 'danger' : undefined"
 	>
-		<del v-if="isDeleted || name !== latestName">
+		<del v-if="isDeleted">
 			{{ name }}
 		</del>
-		<span v-if="!isDeleted">
+		<template v-else>
-			{{ latestName }}
+			{{ name }}
-		</span>
+		</template>
 	</N8nText>
 </template>
 

packages/frontend/editor-ui/src/features/logs/composables/useLogsSelection.ts

@@ -14,6 +14,7 @@ import { useLogsStore } from '@/stores/logs.store';
 import { useUIStore } from '@/stores/ui.store';
 import { shallowRef, watch } from 'vue';
 import { computed, type ComputedRef } from 'vue';
+import { useWorkflowsStore } from '@/stores/workflows.store';
 
 export function useLogsSelection(
 	execution: ComputedRef<IExecutionResponse | undefined>,
@@ -23,7 +24,7 @@ export function useLogsSelection(
 ) {
 	const telemetry = useTelemetry();
 	const manualLogEntrySelection = shallowRef<LogEntrySelection>({ type: 'initial' });
-	const nodeNameToSelect = shallowRef<string>();
+	const nodeIdToSelect = shallowRef<string>();
 	const isExecutionStopped = computed(() => execution.value?.stoppedAt !== undefined);
 	const selected = computed(() =>
 		findSelectedLogEntry(manualLogEntrySelection.value, tree.value, !isExecutionStopped.value),
@@ -31,6 +32,7 @@ export function useLogsSelection(
 	const logsStore = useLogsStore();
 	const uiStore = useUIStore();
 	const canvasStore = useCanvasStore();
+	const workflowsStore = useWorkflowsStore();
 
 	function syncSelectionToCanvasIfEnabled(value: LogEntry) {
 		if (!logsStore.isLogSelectionSyncedWithCanvas) {
@@ -101,24 +103,32 @@ export function useLogsSelection(
 	watch(
 		[() => uiStore.lastSelectedNode, () => logsStore.isLogSelectionSyncedWithCanvas],
 		([selectedOnCanvas, shouldSync]) => {
-			if (
+			const selectedNodeId = selectedOnCanvas
-				!shouldSync ||
+				? workflowsStore.nodesByName[selectedOnCanvas]?.id
-				!selectedOnCanvas ||
+				: undefined;
-				canvasStore.hasRangeSelection ||
+
-				selected.value?.node.name === selectedOnCanvas
+			nodeIdToSelect.value =
-			) {
+				shouldSync && !canvasStore.hasRangeSelection && selected.value?.node.id !== selectedNodeId
-				nodeNameToSelect.value = undefined;
+					? selectedNodeId
+					: undefined;
+		},
+		{ immediate: true },
+	);
+
+	watch(
+		[tree, nodeIdToSelect],
+		([latestTree, id]) => {
+			if (id === undefined) {
 				return;
 			}
 
-			const entry = findLogEntryRec((e) => e.node.name === selectedOnCanvas, tree.value);
+			const entry = findLogEntryRec((e) => e.node.id === id, latestTree);
 
 			if (!entry) {
-				nodeNameToSelect.value = selectedOnCanvas;
 				return;
 			}
 
-			nodeNameToSelect.value = undefined;
+			nodeIdToSelect.value = undefined;
 			manualLogEntrySelection.value = { type: 'selected', entry };
 
 			let parent = entry.parent;
@@ -131,22 +141,5 @@ export function useLogsSelection(
 		{ immediate: true },
 	);
 
-	watch(
-		tree,
-		(t) => {
-			if (nodeNameToSelect.value === undefined) {
-				return;
-			}
-
-			const entry = findLogEntryRec((e) => e.node.name === nodeNameToSelect.value, t);
-
-			if (entry) {
-				nodeNameToSelect.value = undefined;
-				manualLogEntrySelection.value = { type: 'selected', entry };
-			}
-		},
-		{ immediate: true },
-	);
-
 	return { selected, select, selectPrev, selectNext };
 }