fix(editor): Do not show new NDV for sticky notes (#17537)

Co-authored-by: jakeranallo <jake.ranallo@gmail.com>

packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss

@@ -243,6 +243,7 @@
 
 	// NDV
 	--color-run-data-background: var(--prim-gray-800);
+	--color-ndvv2-run-data-background: var(--prim-gray-800);
 	--color-ndv-droppable-parameter: var(--prim-color-primary);
 	--color-ndv-droppable-parameter-background: var(--prim-color-primary-alpha-010);
 	--color-ndv-droppable-parameter-active-background: var(--prim-color-alt-a-alpha-015);

packages/frontend/@n8n/design-system/src/css/_tokens.scss

@@ -311,6 +311,7 @@
 
 	// NDV
 	--color-run-data-background: var(--prim-gray-70);
+	--color-ndvv2-run-data-background: var(--prim-gray-40);
 	--color-ndv-droppable-parameter: var(--color-secondary);
 	--color-ndv-droppable-parameter-background: var(--prim-color-secondary-alpha-010);
 	--color-ndv-droppable-parameter-active-background: var(--prim-color-alt-a-alpha-015);

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

@@ -373,7 +373,7 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 
 <template>
 	<RunData
-		:class="$style.runData"
+		:class="[$style.runData, { [$style.runDataV2]: isNDVV2 }]"
 		:node="currentNode"
 		:nodes="isMappingMode ? rootNodesParents : parentNodes"
 		:workflow="workflow"
@@ -644,6 +644,10 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 	background-color: var(--color-run-data-background);
 }
 
+.runDataV2 {
+	background-color: var(--color-ndvv2-run-data-background);
+}
+
 .mappedNode {
 	padding: 0 var(--spacing-s) var(--spacing-s);
 }

packages/frontend/editor-ui/src/components/NodeDetailsViewV2.test.ts

@@ -24,12 +24,13 @@ vi.mock('vue-router', () => {
 	};
 });
 
-async function createPiniaStore(isActiveNode: boolean) {
+async function createPiniaStore(
-	const node = mockNodes[0];
+	{ activeNodeName }: { activeNodeName: string | null } = { activeNodeName: null },
+) {
 	const workflow = mock<IWorkflowDb>({
 		connections: {},
 		active: true,
-		nodes: [node],
+		nodes: mockNodes,
 	});
 
 	const pinia = createPinia();
@@ -41,11 +42,12 @@ async function createPiniaStore(isActiveNode: boolean) {
 
 	nodeTypesStore.setNodeTypes(defaultNodeDescriptions);
 	workflowsStore.workflow = workflow;
-	workflowsStore.nodeMetadata[node.name] = { pristine: true };
+	workflowsStore.nodeMetadata = mockNodes.reduce(
+		(acc, node) => ({ ...acc, [node.name]: { pristine: true } }),
+		{},
+	);
 
-	if (isActiveNode) {
+	ndvStore.activeNodeName = activeNodeName;
-		ndvStore.activeNodeName = node.name;
-	}
 
 	await useSettingsStore().getSettings();
 	await useUsersStore().loginWithCookie();
@@ -53,7 +55,6 @@ async function createPiniaStore(isActiveNode: boolean) {
 	return {
 		pinia,
 		currentWorkflow: workflowsStore.getCurrentWorkflow(),
-		nodeName: node.name,
 	};
 }
 
@@ -78,8 +79,8 @@ describe('NodeDetailsViewV2', () => {
 		server.shutdown();
 	});
 
-	it('should render correctly', async () => {
+	test('should render correctly', async () => {
-		const { pinia, currentWorkflow } = await createPiniaStore(true);
+		const { pinia, currentWorkflow } = await createPiniaStore({ activeNodeName: 'Manual Trigger' });
 
 		const renderComponent = createComponentRenderer(NodeDetailsViewV2, {
 			props: {
@@ -103,9 +104,34 @@ describe('NodeDetailsViewV2', () => {
 		await waitFor(() => expect(getByTestId('ndv')).toBeInTheDocument());
 	});
 
+	test('should not render for stickies', async () => {
+		const { pinia, currentWorkflow } = await createPiniaStore({ activeNodeName: 'Sticky' });
+
+		const renderComponent = createComponentRenderer(NodeDetailsViewV2, {
+			props: {
+				teleported: false,
+				appendToBody: false,
+				workflowObject: currentWorkflow,
+			},
+			global: {
+				mocks: {
+					$route: {
+						name: VIEWS.WORKFLOW,
+					},
+				},
+			},
+		});
+
+		const { queryByTestId } = renderComponent({
+			pinia,
+		});
+
+		expect(queryByTestId('ndv')).not.toBeInTheDocument();
+	});
+
 	describe('keyboard listener', () => {
 		test('should register and unregister keydown listener based on modal open state', async () => {
-			const { pinia, currentWorkflow, nodeName } = await createPiniaStore(false);
+			const { pinia, currentWorkflow } = await createPiniaStore();
 			const ndvStore = useNDVStore();
 
 			const renderComponent = createComponentRenderer(NodeDetailsViewV2, {
@@ -130,7 +156,7 @@ describe('NodeDetailsViewV2', () => {
 			const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
 			const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
 
-			ndvStore.activeNodeName = nodeName;
+			ndvStore.activeNodeName = 'Manual Trigger';
 
 			await waitFor(() => expect(getByTestId('ndv')).toBeInTheDocument());
 
@@ -152,7 +178,7 @@ describe('NodeDetailsViewV2', () => {
 		});
 
 		test('should unregister keydown listener on unmount', async () => {
-			const { pinia, currentWorkflow, nodeName } = await createPiniaStore(false);
+			const { pinia, currentWorkflow } = await createPiniaStore();
 			const ndvStore = useNDVStore();
 
 			const renderComponent = createComponentRenderer(NodeDetailsViewV2, {
@@ -174,7 +200,7 @@ describe('NodeDetailsViewV2', () => {
 				pinia,
 			});
 
-			ndvStore.activeNodeName = nodeName;
+			ndvStore.activeNodeName = 'Manual Trigger';
 
 			await waitFor(() => expect(getByTestId('ndv')).toBeInTheDocument());
 
@@ -193,7 +219,7 @@ describe('NodeDetailsViewV2', () => {
 		});
 
 		test("should emit 'saveKeyboardShortcut' when save shortcut keybind is pressed", async () => {
-			const { pinia, currentWorkflow, nodeName } = await createPiniaStore(false);
+			const { pinia, currentWorkflow } = await createPiniaStore();
 			const ndvStore = useNDVStore();
 
 			const renderComponent = createComponentRenderer(NodeDetailsViewV2, {
@@ -215,7 +241,7 @@ describe('NodeDetailsViewV2', () => {
 				pinia,
 			});
 
-			ndvStore.activeNodeName = nodeName;
+			ndvStore.activeNodeName = 'Manual Trigger';
 
 			await waitFor(() => expect(getByTestId('ndv')).toBeInTheDocument());
 

packages/frontend/editor-ui/src/components/NodeDetailsViewV2.vue

@@ -717,7 +717,10 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-	<Teleport v-if="activeNode && activeNodeType" :to="`#${APP_MODALS_ELEMENT_ID}`">
+	<Teleport
+		v-if="activeNode && activeNodeType && !isActiveStickyNode"
+		:to="`#${APP_MODALS_ELEMENT_ID}`"
+	>
 		<div :class="$style.backdrop" :style="{ zIndex: APP_Z_INDEXES.NDV }" @click="close"></div>
 
 		<dialog

packages/frontend/editor-ui/src/components/NodeSettingsHeader.vue

@@ -68,4 +68,8 @@ const emit = defineEmits<{
 .tabs {
 	align-self: flex-end;
 }
+
+.tabs :global(#communityNode) {
+	padding-right: var(--spacing-2xs);
+}
 </style>

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

@@ -306,7 +306,7 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 <template>
 	<RunData
 		ref="runDataRef"
-		:class="$style.runData"
+		:class="[$style.runData, { [$style.runDataV2]: isNDVV2 }]"
 		:node="node"
 		:workflow="workflow"
 		:run-index="runIndex"
@@ -490,6 +490,10 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 .runData {
 	background-color: var(--color-run-data-background);
 }
+
+.runDataV2 {
+	background-color: var(--color-ndvv2-run-data-background);
+}
 .outputTypeSelect {
 	margin-bottom: var(--spacing-4xs);
 	width: fit-content;