refactor(editor): Replace old N8nTooltip with new Reka UI based tooltip #22838

cstuncsik · 2025-12-05T15:20:02Z

Summary

Related Linear tickets, Github issues, and Community forum posts

Review / Merge checklist

PR title and summary are descriptive. (conventions)
Docs updated or follow-up ticket created.
Tests included.
PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

bundlemon · 2025-12-05T15:26:29Z

BundleMon

Unchanged files (2)

Status	Path	Size	Limits
✅	WASM Dependencies _{tree-sitter-bash.wasm}	181.26KB	-
✅	WASM Dependencies _{tree-sitter.wasm}	74.47KB	-

No change in files bundle size

Groups updated (2)

Status	Path	Size	Limits
✅	*/.js	11.44MB (+157.88KB +1.37%)	-
✅	*/.css	233.47KB (+12.7KB +5.75%)	-

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

codecov · 2025-12-05T15:28:04Z

Codecov Report

❌ Patch coverage is 34.07407% with 178 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...ystem/src/components/N8nTooltip/Tooltip.stories.ts	0.56%	176 Missing ⚠️
...esign-system/src/components/N8nTooltip/Tooltip.vue	97.56%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

currents-bot · 2025-12-05T15:36:52Z

❌

E2E Tests: n8n tests failed after 11m 19s

🟢 570 · 🔴 3 · ⚪️ 43

View Run Details

Run Details

Project: n8n
Groups: 2
Framework: Playwright
Run Status: Failed
Commit: 37fa003
Spec files: 129
Overall tests: 616
Duration: 11m 19s
Parallelization: 9

Failed Spec Files

Spec File	Failures
tests/ui/app-config/nps-survey.spec.ts	2
tests/ui/ai/chat-session.spec.ts	1

Groups

GroupId	Results	Spec Files Progress
multi-main:ui	🟢 516 · 🔴 3 · ⚪️ 43	120 / 120
multi-main:ui:isolated	🟢 54 · 🔴 0 · ⚪️ 0	9 / 9

This message was posted automatically by currents.dev | Integration Settings

…use data attributes for better accessibility and consistency

…storyListItem test files

…Tooltip stubs and improve tooltip assertions

blacksmith-sh · 2025-12-05T19:06:50Z

Found 3 test failures on Blacksmith runners:

Failures

Test	View Logs
`tests/ui/ai/chat-session.spec.ts/` `Chat session ID reset › should update session ID in node output when session is reset`	View Logs
`tests/ui/app-config/nps-survey.spec.ts/` `NPS Survey › allows user to ignore survey 3 times before stopping to show until 6 month` `s later`	View Logs
`tests/ui/app-config/nps-survey.spec.ts/` `NPS Survey › shows nps survey to recently activated user and can submit feedback`	View Logs

cubic-dev-ai

5 issues found across 46 files

Prompt for AI agents (all 5 issues)


Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.vue">

<violation number="1" location="packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.vue:78">
P2: `N8nTooltip` drops all consumer attributes/listeners because `$attrs` is no longer forwarded while `inheritAttrs: false` is still set. Forward `$attrs` to `TooltipRoot` so props like `append-to`, `trigger`, and custom classes keep working.</violation>
</file>

<file name="packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.test.ts">

<violation number="1" location="packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.test.ts:355">
P2: The `buttons` test no longer verifies that the provided click listeners fire—`buttonSpy` is never exercised—so the test can’t catch regressions where button clicks stop working. Add a `userEvent.click` and assert the spy was called to cover the behavior.</violation>
</file>

<file name="packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.test.ts">

<violation number="1" location="packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.test.ts:43">
P2: This test no longer checks that the tooltip is absent before hovering, so a regression where the tooltip renders immediately would go undetected. Add an assertion that no `[data-dismissable-layer]` exists prior to `userEvent.hover` to keep the “only on hover” contract under test.</violation>

<violation number="2" location="packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.test.ts:58">
P2: This test also lost its pre-hover absence check, so it no longer verifies that the binary tooltip only appears after hovering the disabled button. Add a DOM assertion before the hover to keep the test aligned with its purpose.</violation>
</file>

<file name="packages/frontend/@n8n/design-system/src/v2/components/Tooltip/Tooltip.test.ts">

<violation number="1" location="packages/frontend/@n8n/design-system/src/v2/components/Tooltip/Tooltip.test.ts:17">
P1: Rule violated: **Tests**

Removing the entire Tooltip test suite violates the Community PR Guidelines §2 testing requirement—core Tooltip behavior now lacks any automated coverage after the refactor. Please replace the deleted tests with equivalent coverage for the new tooltip implementation.</violation>
</file>

_{Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR}

cubic-dev-ai · 2025-12-05T20:04:29Z

packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.vue

-				:class="$style.buttons"
-				:style="{ justifyContent: props.justifyButtons }"
+	<TooltipProvider>
+		<TooltipRoot


P2: N8nTooltip drops all consumer attributes/listeners because $attrs is no longer forwarded while inheritAttrs: false is still set. Forward $attrs to TooltipRoot so props like append-to, trigger, and custom classes keep working.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.vue, line 78: <comment>`N8nTooltip` drops all consumer attributes/listeners because `$attrs` is no longer forwarded while `inheritAttrs: false` is still set. Forward `$attrs` to `TooltipRoot` so props like `append-to`, `trigger`, and custom classes keep working.</comment> <file context> @@ -1,77 +1,173 @@ - :class="$style.buttons" - :style="{ justifyContent: props.justifyButtons }" + <TooltipProvider> + <TooltipRoot + :disabled="disabled" + :delay-duration="showAfter" </file context>

Suggested change

<TooltipRoot

<TooltipRoot

v-bind="$attrs"

cubic-dev-ai · 2025-12-05T20:04:29Z

packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.test.ts

+				expect(document.querySelector('[data-dismissable-layer]')).toBeInTheDocument();
+			});
+
+			const button = document.querySelector('[data-dismissable-layer] button');


P2: The buttons test no longer verifies that the provided click listeners fire—buttonSpy is never exercised—so the test can’t catch regressions where button clicks stop working. Add a userEvent.click and assert the spy was called to cover the behavior.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.test.ts, line 355: <comment>The `buttons` test no longer verifies that the provided click listeners fire—`buttonSpy` is never exercised—so the test can’t catch regressions where button clicks stop working. Add a `userEvent.click` and assert the spy was called to cover the behavior.</comment> <file context> @@ -1,40 +1,474 @@ + expect(document.querySelector('[data-dismissable-layer]')).toBeInTheDocument(); + }); + + const button = document.querySelector('[data-dismissable-layer] button'); + expect(button).toBeInTheDocument(); + expect(button).toHaveTextContent('Button 1'); </file context>

Suggested change

const button = document.querySelector('[data-dismissable-layer] button');

const button = document.querySelector('[data-dismissable-layer] button') as HTMLElement;

expect(button).toBeInTheDocument();

expect(button).toHaveTextContent('Button 1');

await userEvent.click(button);

expect(buttonSpy).toHaveBeenCalled();

cubic-dev-ai · 2025-12-05T20:04:29Z

packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.test.ts


 	it('shows binary data tooltip content only on disabled button hover', async () => {
-		const { getByRole, queryByRole, emitted } = renderComponent({
+		const { getByRole, emitted, baseElement } = renderComponent({


P2: This test also lost its pre-hover absence check, so it no longer verifies that the binary tooltip only appears after hovering the disabled button. Add a DOM assertion before the hover to keep the test aligned with its purpose.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.test.ts, line 58: <comment>This test also lost its pre-hover absence check, so it no longer verifies that the binary tooltip only appears after hovering the disabled button. Add a DOM assertion before the hover to keep the test aligned with its purpose.</comment> <file context> @@ -40,22 +40,22 @@ describe('RunDataPinButton.vue', () => { it('shows binary data tooltip content only on disabled button hover', async () => { - const { getByRole, queryByRole, emitted } = renderComponent({ + const { getByRole, emitted, baseElement } = renderComponent({ props: { tooltipContentsVisibility: { </file context>

Suggested change

const { getByRole, emitted, baseElement } = renderComponent({

const { getByRole, emitted, baseElement } = renderComponent({

props: {

tooltipContentsVisibility: {

binaryDataTooltipContent: true,

pinDataDiscoveryTooltipContent: false,

},

disabled: true,

},

});

expect(baseElement.ownerDocument.querySelector('[data-dismissable-layer]')).not.toBeInTheDocument();

cubic-dev-ai · 2025-12-05T20:04:29Z

packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.test.ts

-		const { getByRole, queryByRole, emitted } = renderComponent();
-
-		expect(queryByRole('tooltip')).not.toBeInTheDocument();
+		const { getByRole, emitted, baseElement } = renderComponent();


P2: This test no longer checks that the tooltip is absent before hovering, so a regression where the tooltip renders immediately would go undetected. Add an assertion that no [data-dismissable-layer] exists prior to userEvent.hover to keep the “only on hover” contract under test.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataPinButton.test.ts, line 43: <comment>This test no longer checks that the tooltip is absent before hovering, so a regression where the tooltip renders immediately would go undetected. Add an assertion that no `[data-dismissable-layer]` exists prior to `userEvent.hover` to keep the “only on hover” contract under test.</comment> <file context> @@ -40,22 +40,22 @@ describe('RunDataPinButton.vue', () => { - const { getByRole, queryByRole, emitted } = renderComponent(); - - expect(queryByRole('tooltip')).not.toBeInTheDocument(); + const { getByRole, emitted, baseElement } = renderComponent(); expect(getByRole('button')).toBeEnabled(); </file context>

Suggested change

const { getByRole, emitted, baseElement } = renderComponent();

const { getByRole, emitted, baseElement } = renderComponent();

expect(baseElement.ownerDocument.querySelector('[data-dismissable-layer]')).not.toBeInTheDocument();

cubic-dev-ai · 2025-12-05T20:04:29Z

packages/frontend/@n8n/design-system/src/v2/components/Tooltip/Tooltip.test.ts

-	return { tooltip };
-}
-
-describe('v2/components/Tooltip', () => {


P1: Rule violated: Tests

Removing the entire Tooltip test suite violates the Community PR Guidelines §2 testing requirement—core Tooltip behavior now lacks any automated coverage after the refactor. Please replace the deleted tests with equivalent coverage for the new tooltip implementation.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/frontend/@n8n/design-system/src/v2/components/Tooltip/Tooltip.test.ts, line 17: <comment>Removing the entire Tooltip test suite violates the Community PR Guidelines §2 testing requirement—core Tooltip behavior now lacks any automated coverage after the refactor. Please replace the deleted tests with equivalent coverage for the new tooltip implementation.</comment> <file context> @@ -1,384 +0,0 @@ -import userEvent from '@testing-library/user-event'; -import { render, waitFor } from '@testing-library/vue'; - -import Tooltip from './Tooltip.vue'; - -async function getTooltipContent(_trigger?: Element | null) { - const tooltip = await waitFor(() => { - // Reka UI tooltip content has data-dismissable-layer attribute - const el = document.querySelector('[data-dismissable-layer]'); </file context>

refactor(editor): Replace old N8nTooltip with new Reka UI based tooltip

9411576

github-actions bot deployed to preview December 5, 2025 15:22 View deployment

n8n-assistant bot added the n8n team Authored by the n8n team label Dec 5, 2025

This comment has been minimized.

Sign in to view

cstuncsik added 3 commits December 5, 2025 18:38

refactor: update tooltip implementation across various components to …

eb79adf

…use data attributes for better accessibility and consistency

refactor(tests): remove unused imports from Assignment and WorkflowHi…

69a0806

…storyListItem test files

refactor(tests): update ActionBox and IconPicker tests to include N8n…

467094b

…Tooltip stubs and improve tooltip assertions

cstuncsik marked this pull request as ready for review December 5, 2025 19:47

cubic-dev-ai bot reviewed Dec 5, 2025

View reviewed changes

Merge branch 'master' into ds-298-replace-old-tooltip-component

37fa003

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(editor): Replace old N8nTooltip with new Reka UI based tooltip #22838

refactor(editor): Replace old N8nTooltip with new Reka UI based tooltip #22838

cstuncsik commented Dec 5, 2025

Uh oh!

bundlemon bot commented Dec 5, 2025 •

edited

Loading

Uh oh!

codecov bot commented Dec 5, 2025 •

edited

Loading

Uh oh!

currents-bot bot commented Dec 5, 2025 •

edited

Loading

Uh oh!

This comment has been minimized.

blacksmith-sh bot commented Dec 5, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

cubic-dev-ai bot Dec 5, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Dec 5, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Dec 5, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Dec 5, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Dec 5, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-			const button = document.querySelector('[data-dismissable-layer] button');
+			const button = document.querySelector('[data-dismissable-layer] button') as HTMLElement;
+			expect(button).toBeInTheDocument();
+			expect(button).toHaveTextContent('Button 1');
+			await userEvent.click(button);
+			expect(buttonSpy).toHaveBeenCalled();

-		const { getByRole, emitted, baseElement } = renderComponent({
+		const { getByRole, emitted, baseElement } = renderComponent({
+			props: {
+				tooltipContentsVisibility: {
+					binaryDataTooltipContent: true,
+					pinDataDiscoveryTooltipContent: false,
+				},
+				disabled: true,
+			},
+		});
+		expect(baseElement.ownerDocument.querySelector('[data-dismissable-layer]')).not.toBeInTheDocument();

	const { getByRole, emitted, baseElement } = renderComponent();
	const { getByRole, emitted, baseElement } = renderComponent();
	expect(baseElement.ownerDocument.querySelector('[data-dismissable-layer]')).not.toBeInTheDocument();

refactor(editor): Replace old N8nTooltip with new Reka UI based tooltip #22838

Are you sure you want to change the base?

refactor(editor): Replace old N8nTooltip with new Reka UI based tooltip #22838

Conversation

cstuncsik commented Dec 5, 2025

Summary

Related Linear tickets, Github issues, and Community forum posts

Review / Merge checklist

Uh oh!

bundlemon bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

BundleMon

Uh oh!

codecov bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

currents-bot bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment has been minimized.

blacksmith-sh bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Failures

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

bundlemon bot commented Dec 5, 2025 •

edited

Loading

codecov bot commented Dec 5, 2025 •

edited

Loading

currents-bot bot commented Dec 5, 2025 •

edited

Loading

blacksmith-sh bot commented Dec 5, 2025 •

edited

Loading

cubic-dev-ai bot Dec 5, 2025 •

edited

Loading

cubic-dev-ai bot Dec 5, 2025 •

edited

Loading

cubic-dev-ai bot Dec 5, 2025 •

edited

Loading

cubic-dev-ai bot Dec 5, 2025 •

edited

Loading

cubic-dev-ai bot Dec 5, 2025 •

edited

Loading