Fixes #31726: replace native title tooltip with styled Tooltip in Incident Manager and DataQualityTab

[Vansh0310]

• Wrap truncated table-name/test-case-name links in Tooltip/TooltipTrigger instead of relying on the native title attribute, fixing missing keyboard-focus and touch support (WCAG 1.4.13)
• Use TooltipTrigger itself as the interactive element (onPress + navigate) instead of nesting a Link inside it, since TooltipTrigger renders a <button> and nesting an <a> inside a <button> is invalid HTML
• Fix broken ?? fallback (always-truthy getNameFromFQN result) to || so an empty name correctly falls back to the full FQN
• Fix tooltip content to show the table-level FQN instead of the test case's own FQN (which incorrectly included the trailing test case name)
• Apply the same fix to three tooltips in DataQualityTab.tsx (Name column, Table column, dimensions-count tooltip) that had the identical bug
• Fix TooltipTrigger in the shared ui-core-components library to use React.forwardRef, so AriaTooltipTrigger can correctly attach and open the tooltip overlay — without this, the tooltip never opens on hover/focus even with the correct trigger structure. This is the root cause that made the visible fix possible.
• Add tw:break-all to the tooltip's title span so long FQN strings wrap within the tooltip's max-width instead of overflowing

Describe your changes:

Fixes #31726

I fixed the Incident Manager and DataQualityTab table-name/test-case-name tooltips, which had multiple related defects: they relied on the native title attribute (slow, unstyled, and inaccessible via keyboard focus or touch — violating WCAG 2.1 SC 1.4.13), had a dead ?? fallback that could never trigger, and showed incorrect or duplicated content in the tooltip. While fixing this, I found the underlying TooltipTrigger component in @openmetadata/ui-core-components was missing forwardRef, meaning tooltips silently never opened for any consumer using the library's documented pattern — I fixed that too, since none of the UI-level fixes could work without it. I also found and fixed two more instances of the same native-title/nested-Link pattern in DataQualityTab.tsx while auditing the codebase for this bug.

I made these changes to bring these components in line with the design system's Tooltip pattern, fix the accessibility violation, and make the tooltips actually functional and useful — showing the full qualified name so users can disambiguate same-named tables/test cases.

Type of change:

• Bug fix

High-level design:

Small, targeted bug fix — no new architecture. The one non-trivial change is in the shared tooltip.tsx component (adding forwardRef), which is a well-scoped fix matching how AriaButton and other forwardRef components in the same library already work.

Tests:

Use cases covered

• User hovers or keyboard-focuses a truncated table/test-case name in the Incident Manager and Data Quality tables and sees a styled Tooltip showing the full qualified path.
• Tooltip content is correct (table-level FQN only, not the test case's own FQN).
• Long FQN text wraps within the tooltip instead of overflowing.
• When the underlying name is empty, the cell falls back to the reference's full name instead of rendering blank.
• Clicking/activating the tooltip trigger correctly navigates to the entity's detail page.

Unit tests

• I added unit tests for the new/changed logic.
• Files added/updated: IncidentManagerTable.component.test.tsx, DataQualityTab.test.tsx
• All 80 tests across both files pass (12 + 68).

Manual testing performed

1. Built and ran the full local stack (Java backend, MySQL + Elasticsearch via docker compose, frontend via yarn start).
2. Ingested sample data, created test cases with long names, and triggered failures to populate the Incident Manager and Data Quality tabs.
3. Verified live in the browser: styled tooltip appears on hover and keyboard focus (not the native title tooltip), shows the correct full FQN, and wraps correctly within its box, on both the Incident Manager's Table column and DataQualityTab's Name/Table columns.

UI screen recording / screenshots:

Verified manually in browser — tooltip renders correctly with proper content and wrapping.

Checklist:

• I have read the CONTRIBUTING document.
• My PR title is Fixes #31726: replace native title tooltip with styled Tooltip in Incident Manager and DataQualityTab
• My PR is linked to a GitHub issue via Fixes #31726 above.
• I have commented on my code, particularly in hard-to-understand areas.
• I have added tests and listed them above.
• I have added a test that covers the exact scenario we are fixing.

Greptile Summary

The PR replaces inaccessible native title tooltips with styled React Aria tooltips while preserving native anchor navigation semantics.

• Uses Focusable > Link for table and test-case tooltip triggers.
• Corrects tooltip content and empty-name fallback behavior.
• Updates the shared tooltip trigger to forward refs and consume tooltip focus context.
• Adds regression coverage for tooltip content, fallback rendering, and link destinations.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
openmetadata-ui-core-components/src/main/resources/ui/src/components/base/tooltip/tooltip.tsx	Forwards the trigger ref, connects the React Aria focus context to the button, and wraps long tooltip titles.
openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx	Replaces the native Name-cell title with a styled tooltip around a focusable router link.
openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataQualityTab/DataQualityTab.test.tsx	Adds coverage for styled Name-cell tooltip content and the retained test-case detail link destination.
openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManagerTable.component.tsx	Resolves both prior findings by retaining anchor semantics without nesting interactive controls and corrects tooltip and fallback values.
openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManagerTable.component.test.tsx	Verifies anchor semantics, table-level tooltip content, empty-name fallback, and profiler-page destination.

_{Reviews (4): Last reviewed commit: "fix(ui): replace native title tooltip wi..." | Re-trigger Greptile}

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[gitar-bot]

Code Review ✅ Approved 3 resolved / 3 findings

Replaces native title tooltips with styled TooltipTrigger components in Incident Manager and DataQualityTab tables, resolving keyboard/touch accessibility issues and fixing the underlying TooltipTrigger forwardRef defect.

✅ 3 resolved

✅ Bug: Link nested inside TooltipTrigger button = invalid interactive nesting

📄 openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManagerTable.component.tsx:185-199
TooltipTrigger renders a react-aria Button (<button>), so wrapping the react-router <Link> (an <a>) inside it produces <button><a>…</a></button> — nested interactive elements, which is invalid HTML and an accessibility defect (duplicate focusable elements, ambiguous role for screen readers). This ironically undercuts the PR's WCAG goal. Other usages (e.g. RelatedTerms.tsx) put non-interactive content in the trigger and navigate via onPress. Make the trigger itself the navigational element (use useNavigate + onPress on TooltipTrigger, or render a Tooltip trigger that is an anchor) instead of nesting a Link inside a button.

✅ Quality: Test mock hides the real nested-button DOM structure

📄 openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManagerTable.component.test.tsx:99-101
The test mocks TooltipTrigger as ({children}) => <>{children}</>, so the real <button> wrapper produced by the design-system component never appears in the test DOM. As a result the tests assert Tooltip/Link rendering but cannot catch the invalid anchor-inside-button nesting or verify keyboard/focus behavior the PR claims to fix. Consider an integration/Playwright assertion against the real component, or mock the trigger as a button to reflect the actual structure.

✅ Bug: Navigation link replaced with button loses anchor semantics

📄 openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManagerTable.component.tsx:186-200 📄 openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx:654-667
Both table-name cells now render a react-aria <button> (TooltipTrigger) that calls navigate() in onPress instead of a router <Link> anchor. A button has no href, so users lose the ability to Ctrl/Cmd+click or middle-click to open the table/test-case in a new tab, right-click to copy the link address, and screen readers announce it as a button rather than a link (a11y regression for a navigational control). To fix, keep the <Link> as the tooltip's focusable child (e.g. wrap the Link in react-aria's Focusable, or have TooltipTrigger render an anchor element) so the tooltip wiring is preserved while retaining real link semantics.

Options

Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source}

[github-actions]

⚠️ UI Checkstyle passed — lint findings in changed files

🔍 ESLint findings in this PR's files — 0 error(s), 12 warning(s)

Errors block the build. Warnings do not yet — they are rules whose backlog is still
being worked down, listed so this PR does not add to it. See docs/ui-code-quality-gate.md.

0 error(s), 12 warning(s) across 3 changed file(s).

Count	Rule
3	sonarjs/cyclomatic-complexity
2	react/jsx-no-constructed-context-values
2	openmetadata-imports/no-lower-layer-page-imports
2	react/no-array-index-key
1	sonarjs/no-collapsible-if
1	react-hooks/exhaustive-deps
1	sonarjs/no-duplicate-string

All findings

	Location	Rule	Message
🟡	src/components/Database/Profiler/DataQualityTab/DataQualityTab.test.tsx:56:38	react/jsx-no-constructed-context-values	The object passed as the value prop to the Context provider (at line 56) changes every render. To fix this consider wrapping it in a useMemo hook.
🟡	src/components/Database/Profiler/DataQualityTab/DataQualityTab.test.tsx:156:34	react/jsx-no-constructed-context-values	The object passed as the value prop to the Context provider (at line 156) changes every render. To fix this consider wrapping it in a useMemo hook.
🟡	src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx:47:1	openmetadata-imports/no-lower-layer-page-imports	Pages are route-level composition modules. Move the shared implementation/type to a lower layer instead of importing a page from here.
🟡	src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx:130:25	sonarjs/cyclomatic-complexity	{"message":"Function has a complexity of 13 which is greater than 10 authorized.","cost":3,"secondaryLocations":[{"line":130,"column":24,"endLine":130,"endColum
🟡	src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx:290:57	sonarjs/cyclomatic-complexity	{"message":"Function has a complexity of 11 which is greater than 10 authorized.","cost":1,"secondaryLocations":[{"line":290,"column":56,"endLine":290,"endColum
🟡	src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx:319:12	sonarjs/no-collapsible-if	Merge this if statement with the nested one.
🟡	src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx:413:6	react-hooks/exhaustive-deps	React Hook useEffect has missing dependencies: 'collectInlineIncidentStatuses' and 'fetchTestCasePermissions'. Either include them or remove the dependency arra
🟡	src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx:516:48	sonarjs/cyclomatic-complexity	{"message":"Function has a complexity of 13 which is greater than 10 authorized.","cost":3,"secondaryLocations":[{"line":516,"column":47,"endLine":516,"endColum
🟡	src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx:846:28	react/no-array-index-key	Do not use Array index in keys
🟡	src/components/IncidentManager/IncidentManagerTable.component.tsx:33:1	openmetadata-imports/no-lower-layer-page-imports	Pages are route-level composition modules. Move the shared implementation/type to a lower layer instead of importing a page from here.
🟡	src/components/IncidentManager/IncidentManagerTable.component.tsx:116:23	sonarjs/no-duplicate-string	Define a constant instead of duplicating this literal 3 times.
🟡	src/components/IncidentManager/IncidentManagerTable.component.tsx:147:58	react/no-array-index-key	Do not use Array index in keys

---

Fix locally (fast - only checks files changed in this branch):

make ui-checkstyle-changed

[karanh37]

Why we need to introduce focusable, we should be using Tooltip trigger, Tooltip just like we have done in other places.

[karanh37]

Can we not untitled button component with link variant here ?