refactor(ui): replace MUI/AntD in LineageControlButtons and LineageTable with core-components - #29540
Conversation
…ble with core-components Removes all @mui/material imports from LineageControlButtons and LineageTable, replacing them with ButtonGroup, ButtonGroupItem, Dropdown, Button, and Badge from @openmetadata/ui-core-components. Deletes the now-unused LineageTable.styled.tsx file entirely. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
❌ 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 |
github-actions
Bot
added
safe to test
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
… Impact Analysis direction toggle Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
🟡 Playwright Results — all passed (21 flaky)✅ 4467 passed · ❌ 0 failed · 🟡 21 flaky · ⏭️ 54 skipped
🟡 21 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 |
…ControlButtons migration
- LineageControlButtons: remove Tooltip from inside Dropdown.Root so MenuTrigger
can propagate open/close via ButtonContext to the direct ButtonGroupItem child
- LineageTable.test.tsx: change getByRole('button') to getByRole('radio') for the
Upstream/Downstream direction toggle, which renders as role=radio inside ButtonGroup
- PlatformLineage.test.tsx: remove jest.mock for LineageTable.styled which was
deleted in the migration commit
- ImpactAnalysis.spec.ts: change all getByRole('button', {name: 'Upstream/Downstream…'})
to getByRole('radio', …) to match the ToggleButtonGroup ARIA role
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
Jest test CoverageUI tests summary
|
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR refactors the lineage UI components to reduce/avoid direct MUI usage by migrating LineageControlButtons and LineageTable to the canonical @openmetadata/ui-core-components primitives (ButtonGroup/Dropdown/Badge), removing the now-unused MUI-styled wrapper file, and updating unit/E2E tests accordingly.
Changes:
- Replace MUI ToggleButtonGroup/Menu/Chip/Button usage in lineage controls/table with core-components
ButtonGroup,ButtonGroupItem,Dropdown.*,Badge, andButton. - Remove
LineageTable.styled.tsxand update unit tests/Playwright selectors to align with react-aria roles/attributes. - Adjust lineage impact option icons to pass component references (not JSX elements) and add new i18n keys across locales.
Reviewed changes
Copilot reviewed 30 out of 30 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageControlButtons/LineageControlButtons.tsx | Migrates lineage canvas control buttons to core-components ButtonGroup/Dropdown patterns. |
| openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageControlButtons/LineageControlButtons.test.tsx | Updates assertions to react-aria’s data-selected pattern. |
| openmetadata-ui/src/main/resources/ui/src/components/LineageTable/LineageTable.tsx | Migrates table direction toggles + impact-level dropdown to core-components. |
| openmetadata-ui/src/main/resources/ui/src/components/LineageTable/LineageTable.test.tsx | Removes MUI/styled mocks and updates role-based queries to match react-aria output. |
| openmetadata-ui/src/main/resources/ui/src/components/LineageTable/LineageTable.styled.tsx | Deletes the MUI-styled helper components now that consumers moved to core-components. |
| openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/PlatformLineage.test.tsx | Removes mocks that referenced the deleted LineageTable.styled.tsx. |
| openmetadata-ui/src/main/resources/ui/src/utils/Lineage/LineageUtils.tsx | Changes impact option icons from JSX elements to component references for Dropdown typing. |
| openmetadata-ui/src/main/resources/ui/src/styles/index.ts | Reorders CSS imports (notably inter-variable.css). |
| openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ImpactAnalysis.spec.ts | Updates selectors from role=button to role=radio for ButtonGroupItem direction toggles. |
| openmetadata-ui-core-components/src/main/resources/ui/src/components/base/button-group/button-group.tsx | Tweaks small-size ButtonGroup icon sizing. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/ar-sa.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/gl-es.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/ko-kr.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/mr-in.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/pr-pr.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-pt.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/sv-se.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/th-th.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/tr-tr.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json | Adds new impact-on and lineage-controls keys. |
| openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-tw.json | Adds new impact-on and lineage-controls keys. |
| onSelectionChange={(keys: Selection) => { | ||
| const value = [...(keys as Set<LineageDirection>)][0]; | ||
| if (value) { | ||
| handlePageChange(1); | ||
| updateURLParams({ dir: value }); | ||
| } | ||
| }}> |
| ))} | ||
| </StyledMenu> | ||
| }} | ||
| onSelectionChange={() => void 0}> |
| import './fonts.less'; | ||
| import './inter-variable.css'; | ||
| import './knowledge-center.less'; |
- Add triggerRef to Dropdown.Popover so it correctly anchors to the fit-screen button - Set selectionMode="none" on Dropdown.Menu so items get role="menuitem" (not menuitemradio) which matches what the Playwright rearrangeNodes() helper expects Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…uttonGroup
- Replace `#lineage-view-options-menu` (old MUI anchor) with `getByRole('menu')` in LineageControls and LineageExportPNGSnapshot tests
- Replace `getByRole('button', ...)` with `getByRole('radio', ...)` for Upstream/Downstream buttons in LineageFilters impact-analysis tests — ToggleButtonGroup with selectionMode="single" assigns role="radio" to items per react-aria spec
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… avoid strict-mode AntD collision
getByRole('menu') matched the two AntD left-sidebar menus as well as our
react-aria dropdown, causing a Playwright strict-mode violation. Scoping to
{ name: 'Lineage View Options' } matches only the dropdown's aria-label.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Code Review ✅ Approved 3 resolved / 3 findingsReplaces MUI components with canonical core-components in Lineage modules and deletes the legacy styled-components file. Resolves previously flagged issues regarding missing i18n keys, tooltip hover, and reactflow styling. ✅ 3 resolved✅ Quality: Fit-view dropdown trigger lost its hover tooltip
✅ Quality: New aria-label i18n keys are missing from locale files
✅ Quality: Re-added reactflow CSS imports contradict the comment above them
OptionsDisplay: compact → Showing less information. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Gitar |
Describe your changes:
I worked on replacing all
@mui/materialimports inLineageControlButtonsandLineageTablewith the canonical@openmetadata/ui-core-componentsequivalents, because we are actively removing MUI from the codebase.LineageControlButtons: replacedToggleButtonGroup/ToggleButton/Tooltip/MenuItem/StyledMenuwithButtonGroup,ButtonGroupItem,Dropdown(Root/Popover/Menu/Item), andTooltipfrom core-components. Removed thelineageViewOptionsAnchorElanchor state in favour of ahandleMenuAction(key)switch.LineageTable: replaced MUIButton,Chip,ToggleButton,StyledToggleButtonGroup,StyledMenu, andStyledIconButtonwithButton,Badge,ButtonGroup,ButtonGroupItem, andDropdownfrom core-components.LineageTable.styled.tsx: deleted entirely — no remaining consumers.LineageUtils.tsx: changedLINEAGE_IMPACT_OPTIONSicon values from<JSX />elements to FC references to matchDropdown.Item'siconprop type.Type of change:
High-level design:
All three MUI-backed styled components (
StyledMenu,StyledToggleButtonGroup,StyledIconButton) lived inLineageTable.styled.tsx. With this PR that file is deleted and selection/dropdown state is managed via react-aria-components' built-in context (no separate anchor element needed).Dropdown.Rootowns open/close state internally;ButtonGroupmanages toggle selection viaselectedKeys/onSelectionChangefrom the standardMultipleSelectioninterface.Tests:
Use cases covered
Unit tests
LineageControlButtons.test.tsx: assertion changed fromtoHaveClass('Mui-selected')→toHaveAttribute('data-selected', 'true')to match react-aria's data attribute pattern.LineageTable.test.tsx: removed MUI import and the now-unnecessaryjest.mock('./LineageTable.styled')block.Backend integration tests
Ingestion integration tests
Playwright (UI) tests
Manual testing performed
UI checkstyle (organize-imports-cli → eslint --fix → prettier --write) run and passing on all modified files.
UI screen recording / screenshots:
Not applicable.
Screen.Recording.2026-06-29.at.6.09.11.PM.mov
Screen.Recording.2026-06-29.at.6.10.13.PM.mov
Checklist:
Fixes <issue-number>: <short explanation>Fixes #<issue-number>above.Summary by Gitar
ButtonGroup,ButtonGroupItem, andDropdowninLineageControlButtonsandLineageTable.ButtonGroupvisual styling by reducing the defaultsmicon size fromsize-5tosize-4inbutton-group.tsx.reactflowglobal CSS imports instyles/index.tsto ensure lineage visualization rendering.LineageTable.styled.tsxentirely as all styled components were successfully migrated.buttontoradioto align withreact-aria-componentsoutput.impact-onandlineage-controlsi18n keys across all supported locales.This will update automatically on new commits.
--|----------|
| openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageControlButtons/LineageControlButtons.tsx | MUI ToggleButtonGroup/ToggleButton/StyledMenu replaced with ButtonGroup/ButtonGroupItem/Dropdown.*; anchor state removed in favour of controlled fitViewOpen boolean and handleMenuAction dispatch. |
| openmetadata-ui/src/main/resources/ui/src/components/LineageTable/LineageTable.tsx | MUI components replaced with core-components; impactOnEl anchor state removed. Dropdown.Menu has selectedKeys/selectionMode but no onSelectionChange (already threaded), and Selection spread assumes non-'all' value (already threaded). |
| openmetadata-ui/src/main/resources/ui/src/components/LineageTable/LineageTable.styled.tsx | File deleted entirely — all three styled exports (StyledMenu, StyledToggleButtonGroup, StyledIconButton) have been superseded by core-components; no remaining consumers confirmed. |
| openmetadata-ui/src/main/resources/ui/src/utils/Lineage/LineageUtils.tsx | LINEAGE_IMPACT_OPTIONS icon values changed from JSX elements to FC references to match Dropdown.Item's icon prop type — correct change. |
| openmetadata-ui/src/main/resources/ui/src/styles/index.ts | reactflow/dist/base.css and reactflow/dist/style.css re-added as global side-effect imports to restore lineage visualization styling. |
| openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ImpactAnalysis.spec.ts | Playwright selectors updated from role=button to role=radio to match react-aria-components' ButtonGroupItem ARIA output; change is consistent and correct. |
| openmetadata-ui/src/main/resources/ui/src/components/LineageTable/LineageTable.test.tsx | Removed MUI import and jest.mock for LineageTable.styled; unit test role assertion updated to 'radio' matching the new ButtonGroupItem output. |
| openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageControlButtons/LineageControlButtons.test.tsx | toHaveClass('Mui-selected') assertion replaced with toHaveAttribute('data-selected', 'true') to match react-aria's data attribute pattern — correct update. |
| openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/PlatformLineage.test.tsx | Removed jest.mock for LineageTable.styled (StyledIconButton) since the file is deleted; straightforward cleanup. |
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[LineageControlButtons] --> B[ButtonGroup\nselectionMode=multiple] B --> C[Dropdown.Root\nisOpen=fitViewOpen] C --> D[ButtonGroupItem\nfit-screen\nonPress→setFitViewOpen true] C --> E[Dropdown.Popover] E --> F[Dropdown.Menu\nonAction=handleMenuAction] F --> G[fit / refocus-selected\nrearrange / refocus-home] B --> H[ButtonGroupItem\nmind-map\nonPress→onToggleMiniMap] B --> I[ButtonGroupItem\nzoom-in / zoom-out] B --> J[ButtonGroupItem\nfull-screen\nonPress→toggleFullscreenView] K[LineageTable] --> L[ButtonGroup\ndisallowEmptySelection\nselectionMode=single] L --> M[ButtonGroupItem\nUpstream / Downstream\nonSelectionChange→updateURLParams] K --> N[Dropdown.Root\nuncontrolled] N --> O[Button\nimpact-on-dropdown] N --> P[Dropdown.Popover] P --> Q[Dropdown.Menu\nselectedKeys=impactLevel\nonAction→setSelectedImpactLevel] Q --> R[Dropdown.Item\nasset-level / column-level]%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% flowchart TD A[LineageControlButtons] --> B[ButtonGroup\nselectionMode=multiple] B --> C[Dropdown.Root\nisOpen=fitViewOpen] C --> D[ButtonGroupItem\nfit-screen\nonPress→setFitViewOpen true] C --> E[Dropdown.Popover] E --> F[Dropdown.Menu\nonAction=handleMenuAction] F --> G[fit / refocus-selected\nrearrange / refocus-home] B --> H[ButtonGroupItem\nmind-map\nonPress→onToggleMiniMap] B --> I[ButtonGroupItem\nzoom-in / zoom-out] B --> J[ButtonGroupItem\nfull-screen\nonPress→toggleFullscreenView] K[LineageTable] --> L[ButtonGroup\ndisallowEmptySelection\nselectionMode=single] L --> M[ButtonGroupItem\nUpstream / Downstream\nonSelectionChange→updateURLParams] K --> N[Dropdown.Root\nuncontrolled] N --> O[Button\nimpact-on-dropdown] N --> P[Dropdown.Popover] P --> Q[Dropdown.Menu\nselectedKeys=impactLevel\nonAction→setSelectedImpactLevel] Q --> R[Dropdown.Item\nasset-level / column-level]Reviews (5): Last reviewed commit: "Merge remote-tracking branch 'origin/mai..." | Re-trigger Greptile
Greptile Summary
This PR replaces all
@mui/materialand@mui/material/ToggleButton/Chip/StyledMenuusages inLineageControlButtonsandLineageTablewith their@openmetadata/ui-core-componentsequivalents (ButtonGroup,ButtonGroupItem,Badge,Dropdown.*), as part of the ongoing MUI removal effort. Anchor-element state (lineageViewOptionsAnchorEl,impactOnEl) is replaced with react-aria-components' built-in controlled open state, and icon values inLINEAGE_IMPACT_OPTIONSare corrected from JSX elements to FC references to match theDropdown.Itemprop signature.LineageControlButtons.tsx: Migrated from MUIToggleButtonGroup/ToggleButton/StyledMenuto core-componentsButtonGroup/ButtonGroupItem/Dropdown.*; the fit-view dropdown is now controlled via afitViewOpenboolean and ahandleMenuActionswitch, withtriggerRefused for popover positioning.LineageTable.tsx: Replaced MUIButton,Chip,ToggleButton,StyledToggleButtonGroup,StyledMenuwithButton,Badge,ButtonGroup,ButtonGroupItem,Dropdown.*;impactOnElanchor state removed;onSelectionChange={() => void 0}added to the controlledDropdown.Menuto satisfy react-aria's controlled-component contract.data-selected,role=radio); missingimpact-onandlineage-controlsi18n keys added across all 20 supported locales.Confidence Score: 5/5
Safe to merge — this is a well-scoped component library substitution with no logic changes and correctly updated tests.
The refactoring faithfully reproduces the original MUI behavior using react-aria-components primitives. The two issues noted in prior review threads (missing onSelectionChange on the controlled Dropdown.Menu and the unchecked Selection='all' spread) are both correctly addressed in the current code. Unit tests, Playwright selectors, and i18n keys are all updated in sync with the component changes.
No files require special attention.
Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[LineageControlButtons] --> B[ButtonGroup selectionMode=multiple] B --> C[Dropdown.Root isOpen=fitViewOpen] C --> D[ButtonGroupItem fit-view ref=fitScreenRef] C --> E[Dropdown.Popover triggerRef=fitScreenRef] E --> F[Dropdown.Menu selectionMode=none onAction=handleMenuAction] F --> G[fit / refocus-selected / rearrange / refocus-home] B --> H[ButtonGroupItem mind-map] B --> I[ButtonGroupItem zoom-in / zoom-out] B --> J[ButtonGroupItem full-screen] K[LineageTable] --> L[ButtonGroup disallowEmptySelection selectionMode=single] L --> M[ButtonGroupItem Upstream/Downstream] K --> N[Dropdown.Root uncontrolled] N --> O[Button impact-on-dropdown] N --> P[Dropdown.Popover] P --> Q[Dropdown.Menu selectedKeys=impactLevel onAction=setSelectedImpactLevel] Q --> R[Dropdown.Item asset-level / column-level]%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% flowchart TD A[LineageControlButtons] --> B[ButtonGroup selectionMode=multiple] B --> C[Dropdown.Root isOpen=fitViewOpen] C --> D[ButtonGroupItem fit-view ref=fitScreenRef] C --> E[Dropdown.Popover triggerRef=fitScreenRef] E --> F[Dropdown.Menu selectionMode=none onAction=handleMenuAction] F --> G[fit / refocus-selected / rearrange / refocus-home] B --> H[ButtonGroupItem mind-map] B --> I[ButtonGroupItem zoom-in / zoom-out] B --> J[ButtonGroupItem full-screen] K[LineageTable] --> L[ButtonGroup disallowEmptySelection selectionMode=single] L --> M[ButtonGroupItem Upstream/Downstream] K --> N[Dropdown.Root uncontrolled] N --> O[Button impact-on-dropdown] N --> P[Dropdown.Popover] P --> Q[Dropdown.Menu selectedKeys=impactLevel onAction=setSelectedImpactLevel] Q --> R[Dropdown.Item asset-level / column-level]Reviews (20): Last reviewed commit: "Merge remote-tracking branch 'origin/mai..." | Re-trigger Greptile