Refactor:Move MUI Components from Learning player model to Untitled Core Components#29550
Merged
Conversation
anuj-kumary
added
UI
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
Jest test CoverageUI tests summary
|
Contributor
🟡 Playwright Results — all passed (59 flaky)✅ 4417 passed · ❌ 0 failed · 🟡 59 flaky · ⏭️ 38 skipped
🟡 59 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 |
Rohit0301
approved these changes
Jun 28, 2026
|
Code Review ✅ ApprovedRefactors the Learning player model by migrating MUI components to core UI components and updating styles to Tailwind utility classes. No issues found. OptionsDisplay: compact → Showing less information. Comment with these commands to change:
Was this helpful? React with 👍 / 👎 | Gitar |
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
2 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.
Describe your changes:
Screen.Recording.2026-06-28.at.12.54.45.AM.mov
Type of change:
High-level design:
N/A — small change.
Tests:
Use cases covered
Unit tests
Backend integration tests
Ingestion integration tests
Playwright (UI) tests
Manual testing performed
UI screen recording / screenshots:
Not applicable.
Checklist:
Fixes <issue-number>: <short explanation>Fixes #<issue-number>above.Summary by Gitar
Dialogwith@openmetadata/ui-core-componentsModalandModalOverlayinResourcePlayerModal.IconButton,Tooltip) toButtonUtilityand customBadgecomponents.tw:) and updated fullscreen toggle logic to target component IDs instead of refs.useWorkflowStatehook to removeSelectChangeEventdependency from MUI.This will update automatically on new commits.
Greptile Summary
This PR refactors the
ResourcePlayerModalcomponent by replacing MUI (@mui/material) components with equivalents from the internal@openmetadata/ui-core-componentslibrary, aligning with the team's active effort to remove MUI from the codebase.Dialogis replaced with theModalOverlay > Modal > Dialoghierarchy from the core component library; styling migrates fromsxprops totw:Tailwind utility classes.IconButton/Tooltip→ButtonUtility, inline category chipBoxes → typedBadgecomponents backed by a newCATEGORY_BADGE_COLORSmap inLearning.interface.ts.SelectChangeEventMUI import is removed fromuseWorkflowStatein favour of an inline structural type; Playwright selectors switch from the fragilegetByRole('dialog')to the stabledata-testidattribute.Confidence Score: 5/5
Safe to merge — this is a pure component-library swap with no behavioural changes to data fetching, auth, or navigation.
All four changed files are UI-layer only. The fullscreen and close logic is preserved from the original, and the three useEffect hooks that sync fullscreen state remain intact. The SelectChangeEvent removal in the hook is backward-compatible because the structural type is a supertype of the MUI one. Playwright selectors were updated in lockstep with the data-testid addition, keeping E2E coverage consistent.
No files require special attention.
Important Files Changed
Sequence Diagram
%%{init: {'theme': 'neutral'}}%% sequenceDiagram participant User participant ModalOverlay participant Dialog participant ResourcePlayerModal participant BrowserAPI as Browser Fullscreen API User->>ModalOverlay: "click resource card (open=true)" ModalOverlay->>Dialog: "render (width=1143)" Dialog->>ResourcePlayerModal: mount component ResourcePlayerModal->>ResourcePlayerModal: fetch resource by id ResourcePlayerModal-->>User: display modal with player User->>ResourcePlayerModal: click maximize button ResourcePlayerModal->>BrowserAPI: getElementById(FULLSCREEN_CONTAINER_ID).requestFullscreen() BrowserAPI-->>ResourcePlayerModal: fullscreenchange event → setIsFullScreen(true) ResourcePlayerModal-->>User: fullscreen layout (h-screen w-screen) User->>ResourcePlayerModal: click minimize button ResourcePlayerModal->>BrowserAPI: document.exitFullscreen() BrowserAPI-->>ResourcePlayerModal: fullscreenchange event → setIsFullScreen(false) ResourcePlayerModal-->>User: normal layout (max-h-[90vh]) User->>ResourcePlayerModal: click close (or backdrop) ResourcePlayerModal->>ModalOverlay: onOpenChange(false) → onClose() ModalOverlay->>ResourcePlayerModal: "open=false" ResourcePlayerModal->>BrowserAPI: exitFullscreen() if active ResourcePlayerModal-->>User: modal dismissed%%{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"}}}%% sequenceDiagram participant User participant ModalOverlay participant Dialog participant ResourcePlayerModal participant BrowserAPI as Browser Fullscreen API User->>ModalOverlay: "click resource card (open=true)" ModalOverlay->>Dialog: "render (width=1143)" Dialog->>ResourcePlayerModal: mount component ResourcePlayerModal->>ResourcePlayerModal: fetch resource by id ResourcePlayerModal-->>User: display modal with player User->>ResourcePlayerModal: click maximize button ResourcePlayerModal->>BrowserAPI: getElementById(FULLSCREEN_CONTAINER_ID).requestFullscreen() BrowserAPI-->>ResourcePlayerModal: fullscreenchange event → setIsFullScreen(true) ResourcePlayerModal-->>User: fullscreen layout (h-screen w-screen) User->>ResourcePlayerModal: click minimize button ResourcePlayerModal->>BrowserAPI: document.exitFullscreen() BrowserAPI-->>ResourcePlayerModal: fullscreenchange event → setIsFullScreen(false) ResourcePlayerModal-->>User: normal layout (max-h-[90vh]) User->>ResourcePlayerModal: click close (or backdrop) ResourcePlayerModal->>ModalOverlay: onOpenChange(false) → onClose() ModalOverlay->>ResourcePlayerModal: "open=false" ResourcePlayerModal->>BrowserAPI: exitFullscreen() if active ResourcePlayerModal-->>User: modal dismissedReviews (5): Last reviewed commit: "Merge branch 'main' into refactor-learni..." | Re-trigger Greptile