Migration: replace MUI components with custom styles and core-ui components by Rohit0301 · Pull Request #26563 · open-metadata/OpenMetadata

Rohit0301 · 2026-03-17T18:35:11Z

Components migrated

DataProductsDetailsPage.component.tsx
AddDomainForm.component.tsx
TeamsInfo.component.tsx
TestDefinitionList.component.tsx
DomainPageStyles.ts

Describe your changes:

Fixes

I worked on ... because ...

Type of change:

Checklist:

I have read the CONTRIBUTING document.
My PR title is Fixes <issue-number>: <short explanation>
I have commented on my code, particularly in hard-to-understand areas.
For JSON Schema changes: I updated the migration scripts or explained why it is not needed.

Summary by Gitar

Removed MUI dependencies:
- Eliminated useTheme hook and Theme type imports from MUI across multiple components and utilities
- Replaced MUI Box components with semantic div elements using Tailwind classes in AddDomainForm and TestDefinitionList
Replaced theme colors with defaultColors:
- Updated getDomainContainerStyles() to use defaultColors.blueGray[100] instead of theme palette
- Changed edge styling in EdgeStyleUtils to use defaultColors.brand[600], defaultColors.indigo[600], defaultColors.error[600]
- Updated TeamsInfo component to use defaultColors.gray[700]
Simplified function signatures:
- Removed theme parameter from getDomainContainerStyles(), useCanvasEdgeRenderer(), and computeEdgeStyle()

_{This will update automatically on new commits.}

...ata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx

openmetadata-ui/src/main/resources/ui/src/utils/DomainPageStyles.ts

github-actions · 2026-03-17T19:24:19Z

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	66.12% (57644/87178)	45.91% (30605/66655)	48.73% (9154/18782)

github-actions · 2026-03-17T20:16:19Z

🟡 Playwright Results — all passed (23 flaky)

✅ 3330 passed · ❌ 0 failed · 🟡 23 flaky · ⏭️ 183 skipped

Shard	Passed	Flaky	Skipped
🟡 Shard 1	449	6	2
🟡 Shard 2	303	1	1
🟡 Shard 3	655	6	33
🟡 Shard 4	723	5	47
🟡 Shard 5	590	1	67
🟡 Shard 6	610	4	33

🟡 23 flaky test(s) (passed on retry)

Features/DataAssetRulesDisabled.spec.ts › Database Schema (shard 1, 1 retry)
Features/CustomizeDetailPage.spec.ts › Data Product - customization should work (shard 1, 1 retry)
Features/MultipleRename.spec.ts › Glossary - should handle multiple consecutive renames (shard 1, 1 retry)
Flow/Tour.spec.ts › Tour should work from help section (shard 1, 1 retry)
Flow/Tour.spec.ts › Tour should work from welcome screen (shard 1, 1 retry)
Flow/Tour.spec.ts › Tour should work from URL directly (shard 1, 1 retry)
Features/ColumnBulkOperations.spec.ts › should search columns with server-side API call (shard 2, 1 retry)
Features/DataQuality/TestCaseImportExportE2eFlow.spec.ts › Admin: Complete export-import-validate flow (shard 3, 1 retry)
Features/DataQuality/TestCaseImportExportE2eFlow.spec.ts › EditAll User: Complete export-import-validate flow (shard 3, 1 retry)
Features/DataQuality/TestCaseIncidentPermissions.spec.ts › User with TEST_CASE.EDIT_ALL can see edit icon on incidents (shard 3, 1 retry)
Features/DataQuality/TestCaseIncidentPermissions.spec.ts › User with only VIEW cannot PATCH incidents (shard 3, 1 retry)
Features/DataQuality/TestCaseResultPermissions.spec.ts › User with TEST_CASE.EDIT_ALL can see edit action on test case (shard 3, 1 retry)
Features/Permissions/GlossaryPermissions.spec.ts › Team-based permissions work correctly (shard 3, 1 retry)
Pages/Customproperties-part2.spec.ts › entityReferenceList shows item count, scrollable list, no expand toggle (shard 4, 1 retry)
Pages/DomainDataProductsRightPanel.spec.ts › Should edit description for data product from domain context (shard 4, 1 retry)
Pages/Domains.spec.ts › should handle data product after description is deleted (shard 4, 1 retry)
Pages/Domains.spec.ts › Multiple consecutive domain renames preserve all associations (shard 4, 1 retry)
Pages/Entity.spec.ts › Set & update column-level custom property (shard 4, 1 retry)
Pages/Entity.spec.ts › Certification Add Remove (shard 5, 1 retry)
Pages/Login.spec.ts › Refresh should work (shard 6, 2 retries)
Pages/Tag.spec.ts › Add and Remove Assets for Data Steward (shard 6, 1 retry)
Pages/Users.spec.ts › Permissions for table details page for Data Consumer (shard 6, 1 retry)
VersionPages/EntityVersionPages.spec.ts › Directory (shard 6, 1 retry)

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

…nents

chirag-madlani · 2026-03-23T06:44:27Z

...ata-ui/src/main/resources/ui/src/components/Domain/DomainDetails/DomainDetails.component.tsx


-    updatedDetails = {
+    const updatedDetails = {


why did we remove clone?

becuase he second assignment completely overwrites updatedDetails, so the clone method never used there

chirag-madlani · 2026-03-23T06:45:15Z

...urces/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx

-              <Typography.Text
-                className="text-sm font-medium"
-                color={theme.palette.grey['700']}>
+              <Typography.Text className="tw:text-sm tw:font-medium tw:text-gray-700">


Why are we having classname here?

...urces/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx

gitar-bot · 2026-03-23T07:28:30Z

Code Review ✅ Approved 3 resolved / 3 findings

Migration replaces MUI components with custom styles and core-ui components, addressing the internal defaultColors API usage issue. No remaining issues found.

✅ 3 resolved

✅ Quality: defaultColors is marked @internal, not for component use

📄 openmetadata-ui/src/main/resources/ui/src/utils/DomainPageStyles.ts:14 📄 openmetadata-ui/src/main/resources/ui/src/utils/EdgeStyleUtils.ts:13 📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx:18 📄 openmetadata-ui/src/main/resources/ui/src/utils/DomainPageStyles.ts:41 📄 openmetadata-ui/src/main/resources/ui/src/utils/DomainPageStyles.ts:25
The defaultColors object in defaultColors.ts has explicit JSDoc restrictions (@fileoverview RESTRICTED: This file should only be imported by createMuiTheme.ts) and documents ❌ Incorrect usage: import { defaultColors } in component files. This PR introduces the first direct component imports of defaultColors, violating the established architectural constraint. Currently no other component files import it directly.

The intended pattern per the docs is useTheme() → theme.palette.allShades. If the goal is to remove MUI theme usage entirely, the restriction docs should be updated first to reflect the new architecture, and the team should align on the new approach.

✅ Bug: MUI-to-Tailwind spacing conversion is incorrect (halved values)

📄 openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx:378 📄 openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx:382 📄 openmetadata-ui/src/main/resources/ui/src/components/TestLibrary/TestDefinitionList/TestDefinitionList.component.tsx:639 📄 openmetadata-ui/src/main/resources/ui/src/components/TestLibrary/TestDefinitionList/TestDefinitionList.component.tsx:640
MUI's sx prop uses an 8px spacing scale (e.g., gap: 2 = 16px, mb: 2 = 16px, p: 4 = 32px), but Tailwind uses a 4px scale (e.g., gap-2 = 8px, mb-2 = 8px, p-4 = 16px). All the spacing conversions in this PR are halved from the original values, causing a visual regression.

Correct mappings:

MUI gap: 2 (16px) → Tailwind gap-4

MUI mb: 2 (16px) → Tailwind mb-4

MUI p: 4 (32px) → Tailwind p-8

✅ Bug: Typography wraps content in extra

wrapper

📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx:178 📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx:259 📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx:282 📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx:323 📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx:354 📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx:378 📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx:435 📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx:450
The previous code used antd Typography.Text which renders an inline <span>. The core-ui Typography always renders an outer <div class="prose"> wrapper (block-level element). This changes the layout from inline to block rendering inside <Space> components, which may break the existing flex/inline layouts in TeamsInfo (e.g., the email label, type label, persona label, and user count sections all use <Space align="start"> or <Space align="center"> wrappers).

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

`Auto-apply`	`Compact`
`gitar auto-apply:on`	`gitar display:verbose`

_{Was this helpful? React with 👍 / 👎 | Gitar}

sonarqubecloud · 2026-03-23T07:55:50Z

Quality Gate passed for 'open-metadata-ui'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Rohit0301 self-assigned this Mar 17, 2026

Rohit0301 requested a review from a team as a code owner March 17, 2026 18:35

Rohit0301 added the safe to test Add this label to run secure Github workflows on PRs label Mar 17, 2026

gitar-bot bot reviewed Mar 17, 2026

View reviewed changes

...ata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx Show resolved Hide resolved

gitar-bot bot reviewed Mar 17, 2026

View reviewed changes

openmetadata-ui/src/main/resources/ui/src/utils/DomainPageStyles.ts Outdated Show resolved Hide resolved

Rohit0301 temporarily deployed to test March 17, 2026 18:44 — with GitHub Actions Inactive

Rohit0301 had a problem deploying to test March 17, 2026 18:44 — with GitHub Actions Failure

Rohit0301 temporarily deployed to test March 17, 2026 18:44 — with GitHub Actions Inactive

Rohit0301 marked this pull request as draft March 18, 2026 17:29

Migration: replace MUI components with custom style and core-ui compo…

13163b4

…nents

Rohit0301 force-pushed the untitled-ui-migration-1 branch from 539627a to 13163b4 Compare March 21, 2026 10:44

Rohit0301 marked this pull request as ready for review March 21, 2026 10:54

Rohit0301 changed the title ~~Migration: replace MUI components with custom styles and defaultColor…~~ Migration: replace MUI components with custom styles and core-ui components Mar 21, 2026

Rohit0301 temporarily deployed to test March 21, 2026 11:03 — with GitHub Actions Inactive

chirag-madlani reviewed Mar 23, 2026

View reviewed changes

Rohit0301 added 2 commits March 23, 2026 12:26

fixed sonar issues

3ceb289

used core ui typography instead of antd

a0df363

Rohit0301 had a problem deploying to test March 23, 2026 07:15 — with GitHub Actions Error

used core ui typography instead of antd

49330ff

gitar-bot bot reviewed Mar 23, 2026

View reviewed changes

...urces/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx Show resolved Hide resolved

Rohit0301 temporarily deployed to test March 23, 2026 07:35 — with GitHub Actions Inactive

chirag-madlani approved these changes Mar 23, 2026

View reviewed changes

Rohit0301 merged commit 61a2150 into main Mar 23, 2026
51 checks passed

Rohit0301 deleted the untitled-ui-migration-1 branch March 23, 2026 10:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migration: replace MUI components with custom styles and core-ui components#26563

Migration: replace MUI components with custom styles and core-ui components#26563
Rohit0301 merged 4 commits intomainfrom
untitled-ui-migration-1

Rohit0301 commented Mar 17, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

chirag-madlani Mar 23, 2026

Uh oh!

Rohit0301 Mar 23, 2026

Uh oh!

chirag-madlani Mar 23, 2026

Uh oh!

Uh oh!

gitar-bot bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Mar 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Rohit0301 commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes:

Type of change:

Checklist:

Summary by Gitar

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Jest test Coverage

UI tests summary

Uh oh!

github-actions bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟡 Playwright Results — all passed (23 flaky)

Uh oh!

chirag-madlani Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Rohit0301 Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

chirag-madlani Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gitar-bot bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonarqubecloud bot commented Mar 23, 2026

Quality Gate passed for 'open-metadata-ui'

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Rohit0301 commented Mar 17, 2026 •

edited

Loading

github-actions bot commented Mar 17, 2026 •

edited

Loading

github-actions bot commented Mar 17, 2026 •

edited

Loading

gitar-bot bot commented Mar 23, 2026 •

edited

Loading