fix(ui): replace native HTML title attributes with Tooltip component - #32916
Merged
Merged
Conversation
Replaces all native HTML `title` attributes in production UI files with
the `Tooltip` component from `@openmetadata/ui-core-components` so
tooltips render consistently via the design-system instead of relying on
browser-native tooltip behavior.
- Non-button elements: wrapped in `<Tooltip title={...}>` with a `<span>`
where required (Transi18next anchor templates, non-focusable children).
- Button elements: native `<button>` preserved and wrapped in
`<Tooltip title={...}>` to keep visual appearance unchanged.
- `<iframe title>` attributes (ARIA accessibility requirement) left as-is.
- Removed redundant `title` on a `<div>` already inside an existing Tooltip.
- Conditional tooltip disabled via `isDisabled` prop (ChipTrigger).
- Existing i18n keys reused; no new locale keys added.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
shrabantipaul-collate
requested review from
ShaileshParmar11,
chirag-madlani and
karanh37
as code owners
September 8, 2026 05:58
Contributor
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
Contributor
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
Contributor
✅ Playwright Results — workflow succeededValidated commit ✅ 4490 passed · ❌ 0 failed · 🟡 4 flaky · ⏭️ 1 skipped · 🧰 0 lifecycle flaky PerformanceBlocking targets: ✅ met · Optimization targets: 🟡 in progress Shard-job maxima below are not the full workflow wall time; the linked run includes build, fixture, planning, and reporting. 🕒 Full workflow signal wall (to summary) 1h 4m 27s ⏱️ Max setup 4m 43s · max shard execution 23m 5s · max shard-job elapsed before upload 26m 33s · reporting 19s 🌐 220.29 requests/attempt · 2.23 app boots/UI scenario · 36.68% common-shard skew Optimization targets still in progress:
🟡 4 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |
shrabantipaul-collate
added
the
safe to test
… tag list
The key prop must be on the outermost element returned by a map callback.
Moves key={tag.tagFQN} from the inner <div> to the wrapping <Tooltip>.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with 
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 06:33 — with
GitHub Actions
Error
GitHub Actions
Error
Tests were checking for native HTML `title` attributes and using `getByTitle`
queries that no longer apply after switching to the Tooltip component.
- MarketplaceSearchBar.test: add Tooltip to ui-core-components mock; remove
title attribute assertions on the NLQ toggle button
- ExploreSearchCard.test: replace toHaveAttribute('title') check on NLP toggle
with toBeInTheDocument() — tooltip text is now a component-level concern
- AgentCard.test: replace getAllByTitle() queries with getAllByTestId('agent-run-dot')
- ChipTrigger.test: replace toHaveAttribute('title') assertions with
toHaveTextContent() — the label text in the DOM is what matters, hover
tooltip is now handled by the Tooltip component
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
shrabantipaul-collate
had a problem deploying
to
test
September 8, 2026 07:03 — with
GitHub Actions
Error
GitHub Actions
Error
Contributor
🔄 Playwright impact map auto-refreshedThis PR touched specs or UI source that changed the source→spec routing map. I regenerated What is this file? It is the auto-generated half of Playwright's PR planner. It routes "if source X changes, run specs Y" by walking spec imports and cross-referencing What if I want to regenerate locally instead? Run this before pushing your next change to skip the bot commit: python3 .github/scripts/generate_playwright_impact_map.py
git add .github/playwright/impact-map.generated.json
git commit --amend --no-edit # or a separate commit |
# Conflicts: # openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.tsx
ShaileshParmar11
previously approved these changes
Sep 10, 2026
Contributor
🚦 Removed from the merge queue —
|
Contributor
🚦 Removed from the merge queue —
|
The native-title → Tooltip migration removed the option label's `title`, so the
service-type quick-filter tests that selected an option by `getByTitle('mysql')`
/ `getByLabel('mlflow', { exact: true })` no longer resolve. The option label is
also source-cased ('Mysql', 'Mlflow') while the searched string is lowercase, so
a case-sensitive label match would fail regardless.
Match the option row's data-testid instead — it is the lowercased service-type
key ('mysql', 'mlflow'), stable across the Tooltip migration and label-casing:
- Pagination.spec.ts (Impact Analysis pagination reset on quick-filter change,
added by #32699 in main): getByTitle('mysql') → getByTestId('mysql').
- ImpactAnalysis.spec.ts (service type filter): getByLabel('mlflow', exact) →
getByTestId('mlflow').
Verified against the running app: getByTestId('mysql') / getByTestId('mlflow')
resolve the option rows.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
🔄 Playwright impact map auto-refreshedThis PR touched specs or UI source that changed the source→spec routing map. I regenerated What is this file? It is the auto-generated half of Playwright's PR planner. It routes "if source X changes, run specs Y" by walking spec imports and cross-referencing What if I want to regenerate locally instead? Run this before pushing your next change to skip the bot commit: python3 .github/scripts/generate_playwright_impact_map.py
git add .github/playwright/impact-map.generated.json
git commit --amend --no-edit # or a separate commit |
TableAliases (merged from main via #31829) rendered the truncated alias name with a native `title={record.fqn}`, which the now-error no-raw-title-attribute rule flags. Migrate it to <Tooltip> using a <Focusable> trigger so the hover tooltip works without a wrapper element that would break the cell's ellipsis. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
…bute TableAliases now surfaces the full alias FQN through the design-system Tooltip (migrated from a native `title` for the no-raw-title-attribute rule), so the widget test must check the react-aria tooltip overlay on hover instead of a `title` attribute. Filter the tooltip by the expected FQN to stay robust against the brief open/close overlap when moving between cells. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…dom)
TableAliases migrated its alias name from a native `title` to <Tooltip> +
<Focusable>, so the jest test can no longer assert `toHaveAttribute('title')`.
jsdom does not render the react-aria tooltip overlay on hover/focus, so verify
the jsdom-observable contract instead — the name carries the Focusable trigger's
tabindex="-1" (i.e. it is a tooltip trigger, not plain text). The hover overlay
itself is covered by playwright/e2e/Pages/TableAliases.spec.ts.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…td ellipsis cell)
The earlier migration wrapped the alias name in <Tooltip><Focusable>, but the
react-aria tooltip does not open on hover when nested inside an antd Table
`ellipsis` cell (verified in CI: getByRole('tooltip') never appears). Revert to a
native title carrying the full FQN — the antd ellipsis column's own overflow
tooltip is native-title-based, so this is the idiomatic affordance here — with a
justified eslint-disable for no-raw-title-attribute. Restores the original jest
and playwright assertions.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
karanh37
previously approved these changes
Sep 11, 2026
The native-title→Tooltip migration replaced `import { …, Tooltip } from
'recharts'` with the ui-core-components Tooltip, but the `<Tooltip />` inside the
PieChart is the recharts chart tooltip — so the pie chart's hover tooltip broke
(and it tripped a type error: ui-core TooltipProps requires title/children).
Import the recharts Tooltip aliased as RechartsTooltip and use it for the chart;
the ui-core Tooltip stays for the documentation tooltip.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
| Count | Rule |
|---|---|
| 20 | react-hooks/exhaustive-deps |
| 18 | openmetadata-imports/no-impure-pure-utils |
| 9 | openmetadata-imports/no-circular-imports |
| 7 | no-restricted-imports |
| 2 | openmetadata-imports/no-internal-barrel-imports |
| 1 | openmetadata-imports/no-api-calls-in-iteration |
All findings
| Location | Rule | Message | |
|---|---|---|---|
| 🟡 | src/components/DataQuality/DataQualityDashboard/DataQualityDashboard.component.tsx:22:1 |
openmetadata-imports/no-circular-imports |
This runtime import participates in a circular dependency. Extract the shared type/constant/utility or invert the dependency. |
| 🟡 | src/components/DataQuality/DataQualityDashboard/DataQualityDashboard.component.tsx:23:1 |
openmetadata-imports/no-circular-imports |
This runtime import participates in a circular dependency. Extract the shared type/constant/utility or invert the dependency. |
| 🟡 | src/components/DataQuality/DataQualityDashboard/DataQualityDashboard.component.tsx:25:1 |
openmetadata-imports/no-circular-imports |
This runtime import participates in a circular dependency. Extract the shared type/constant/utility or invert the dependency. |
| 🟡 | src/components/DataQuality/DataQualityDashboard/DataQualityDashboard.component.tsx:30:1 |
openmetadata-imports/no-circular-imports |
This runtime import participates in a circular dependency. Extract the shared type/constant/utility or invert the dependency. |
| 🟡 | src/components/DataQuality/DataQualityDashboard/DataQualityDashboard.component.tsx:33:1 |
openmetadata-imports/no-circular-imports |
This runtime import participates in a circular dependency. Extract the shared type/constant/utility or invert the dependency. |
| 🟡 | src/components/Database/Profiler/TableProfiler/SingleColumnProfile.tsx:144:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has missing dependencies: 'profilerDocsLink' and 't'. Either include them or remove the dependency array. |
| 🟡 | src/components/Database/Profiler/TableProfiler/SingleColumnProfile.tsx:214:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'createMetricsChartData'. Either include it or remove the dependency array. |
| 🟡 | src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx:131:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has missing dependencies: 'profilerDocsLink' and 't'. Either include them or remove the dependency array. |
| 🟡 | src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx:152:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has an unnecessary dependency: 'profileMetrics'. Either exclude it or remove the dependency array. |
| 🟡 | src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx:190:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchProfilerData'. Either include it or remove the dependency array. |
| 🟡 | src/components/Explore/EntitySummaryPanel/CustomPropertiesSection/CustomPropertiesSection.tsx:43:9 |
react-hooks/exhaustive-deps |
The 'customProperties' logical expression could make the dependencies of useMemo Hook (at line 64) change on every render. To fix this, wrap the initialization |
| 🟡 | src/components/Explore/EntitySummaryPanel/CustomPropertiesSection/CustomPropertiesSection.tsx:108:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has a missing dependency: 't'. Either include it or remove the dependency array. |
| 🟡 | src/components/platform/ai-shell/Sidebar/ContextCenterSubNavSections.tsx:127:36 |
openmetadata-imports/no-api-calls-in-iteration |
Avoid issuing one API request per item. Fetch at the data owner, use a bulk endpoint, or use useQueries with an intentional concurrency policy. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:57:1 |
openmetadata-imports/no-internal-barrel-imports |
Import the internal module directly instead of its index barrel so unrelated siblings do not enter the bundle graph. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:59:1 |
openmetadata-imports/no-internal-barrel-imports |
Import the internal module directly instead of its index barrel so unrelated siblings do not enter the bundle graph. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:1105:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'buildMultiOccurrenceRows', 'buildSingleOccurrenceRows', 'buildVariationRows', and 'getUniquePaths'. Either inc |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:1293:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'renderCoverageDescriptionCell' and 't'. Either include them or remove the dependency array. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:1561:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'renderGroupColumnNameCell', 'renderOccurrenceColumnNameCell', and 'renderStructChildColumnNameCell'. Either in |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:1633:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has a missing dependency: 'columnGridListing'. Either include it or remove the dependency array. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:1812:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'buildColumnUpdatesByKey' and 'columnGridListing'. Either include them or remove the dependency array. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:1966:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'handleBulkUpdateCompleted' and 'handleBulkUpdateFailed'. Either include them or remove the dependency array. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:2042:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'columnGridListing'. Either include it or remove the dependency array. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:2164:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 'columnGridListing'. Either include it or remove the dependency array. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:2273:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 'columnGridListing'. Either include it or remove the dependency array. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:2385:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has a missing dependency: 'columnGridListing'. Either include it or remove the dependency array. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:2418:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has a missing dependency: 'columnGridListing'. Either include it or remove the dependency array. |
| 🟡 | src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx:2532:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has an unnecessary dependency: 'columnGridListing.allRows'. Either exclude it or remove the dependency array. |
| 🟡 | src/pages/TableDetailsPageV1/TableAliases/TableAliases.component.tsx:94:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'filterWidgets'. Either include it or remove the dependency array. |
| 🟡 | src/utils/AdvancedSearchUtils.tsx:22:1 |
no-restricted-imports |
'@untitledui/icons' import is restricted from being used by a pattern. Import icons from @openmetadata/ui-core-components/icons, not directly from @untitledui/i |
| 🟡 | src/utils/AdvancedSearchUtils.tsx:26:1 |
openmetadata-imports/no-circular-imports |
This runtime import participates in a circular dependency. Extract the shared type/constant/utility or invert the dependency. |
| 🟡 | src/utils/AdvancedSearchUtils.tsx:35:1 |
openmetadata-imports/no-circular-imports |
This runtime import participates in a circular dependency. Extract the shared type/constant/utility or invert the dependency. |
| 🟡 | src/utils/AdvancedSearchUtils.tsx:37:1 |
openmetadata-imports/no-circular-imports |
This runtime import participates in a circular dependency. Extract the shared type/constant/utility or invert the dependency. |
| 🟡 | src/utils/AdvancedSearchUtils.tsx:40:1 |
openmetadata-imports/no-circular-imports |
This runtime import participates in a circular dependency. Extract the shared type/constant/utility or invert the dependency. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:14:1 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not depend on React, UI, state, hooks, pages, or REST clients. Move orchestration/rendering out or move shared types to a lower layer. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:18:1 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not depend on React, UI, state, hooks, pages, or REST clients. Move orchestration/rendering out or move shared types to a lower layer. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:34:5 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:40:7 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:41:9 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:51:5 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:52:7 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:62:3 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:64:5 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:64:54 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:75:5 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:77:34 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:84:10 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:95:7 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:98:11 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:123:7 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
| 🟡 | src/utils/EntityDisplayPureUtils.tsx:124:9 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not render JSX. Move this code to a component or renderer and keep PureUtils as a .ts module. |
… and 7 more. Run make ui-checkstyle-changed locally for the full list.
Fix locally (fast - only checks files changed in this branch):
make ui-checkstyle-changed# Conflicts: # openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ImpactAnalysis.spec.ts
# Conflicts: # openmetadata-ui/src/main/resources/ui/eslint-rules/openmetadata-ui-patterns.mjs
ShaileshParmar11
approved these changes
Sep 16, 2026
Contributor
🚦 Removed from the merge queue —
|
Code Review ✅ Approved 2 closed / 2 findingsReplaces native HTML ✅ 2 closed✅ Bug: React key on inner div instead of Tooltip in tag list
✅ Quality: Reimplements Tooltip's built-in excludeTriggerFromTabOrder trigger
OptionsDisplay: compact → Counting what did not apply, without listing it. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+153
to
+154
| <Tooltip key={item.name} title={item.name}> | ||
| <button |
Contributor
There was a problem hiding this comment.
Wrapping a native button directly in Tooltip causes the Tooltip implementation to place an AriaButton around it. This creates invalid button-inside-button markup, giving one action two focusable controls and leaving the outer button unnamed. The same pattern affects the NLP toggles, recent-run dots, and context-center navigation buttons. Use a tooltip trigger pattern that does not add another button.
Comment on lines
+239
to
+240
| <Tooltip key={tag.tagFQN} title={fullLabel}> | ||
| <div className="tw:min-w-0 tw:flex-1 tw:basis-0 tw:overflow-hidden"> |
Contributor
There was a problem hiding this comment.
Tooltip inserts a tw:w-max wrapper outside the div carrying tw:min-w-0 tw:flex-1 tw:basis-0. That wrapper becomes the flex item, so the inner shrink and truncation rules no longer constrain the badge. Long labels can therefore consume their intrinsic width and overflow the fixed-width column. Apply the sizing rules to the actual tooltip trigger or use a shrinkable, non-focusable trigger wrapper.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
titleattributes in 18 production UI files with theTooltipcomponent from@openmetadata/ui-core-components, so tooltips render consistently through the design system instead of browser-native behavior<Tooltip title={...}>(with<span>intermediary where needed for Transi18next anchor templates)<button>element and wrap it in<Tooltip title={...}>to preserve visual appearance exactly<iframe title>attributes left unchanged (ARIA accessibility requirement)isDisabledprop (ChipTrigger)Files changed (18)
BarMenu.tsxButton→Tooltip;<button>wrapped in<Tooltip>EmptyGraphPlaceholder.tsx<a title>→<Tooltip>wrapping<Transi18next>in<span>MarketplaceSearchBar.component.tsx<button>wrapped in<Tooltip>;<Typography title>→<Tooltip>DataQualityDashboard.component.tsxtitleon<div>inside existing TooltipChipTrigger.component.tsx<Tooltip isDisabled={!isBounded}>for truncated labelNoProfilerBanner.component.tsx<a title>→<Tooltip>SingleColumnProfile.tsx<a title>(Transi18next) →<Tooltip><span>TableProfilerChart.tsxCustomPropertiesSection.tsxAgentCard.component.tsx<button>wrapped in<Tooltip>LogViewerModal.component.tsx<span title>→<Tooltip>TierTag.tsx<span title>→<Tooltip>ExploreSearchInput.tsx<button>wrapped in<Tooltip>ContextCenterSubNavSections.tsx<button>wrapped in<Tooltip>ColumnGrid.component.tsx<div title>→<Tooltip>AdvancedSearchUtils.tsx<span title>→<Tooltip>EntityDisplayPureUtils.tsx<span title>→<Tooltip>ServiceInsightsWidgets.tsx<Tooltip><span>Test plan
<iframe>elements in VideoPlayer and StorylaneTour retain theirtitleattributes (ARIA)🤖 Generated with Claude Code
Greptile Summary
This PR replaces native title attributes with design-system tooltips and updates affected tests and lint enforcement.
Confidence Score: 3/5
The PR is not yet safe to merge because several migrated controls render invalid nested buttons and the Column Grid migration breaks the badge truncation layout contract.
Direct native button children are deterministically wrapped in another button by Tooltip, creating duplicate interactive controls across multiple user-facing actions; the generated max-content wrapper in Column Grid also moves flex constraints off the actual flex item.
Files Needing Attention: openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BarMenu/BarMenu.tsx, openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/MarketplaceSearchBar/MarketplaceSearchBar.component.tsx, openmetadata-ui/src/main/resources/ui/src/components/ServiceAgents/components/AgentCard.component.tsx, openmetadata-ui/src/main/resources/ui/src/components/discovery/explore/ExploreHeader/ExploreSearchInput.tsx, openmetadata-ui/src/main/resources/ui/src/components/platform/ai-shell/Sidebar/ContextCenterSubNavSections.tsx, openmetadata-ui/src/main/resources/ui/src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx
Important Files Changed
Reviews (1): Last reviewed commit: "Merge branch 'main' into native-html-tit..." | Re-trigger Greptile