fix(quay): migrate MUIv4 to MUIv5#9473
Open
ciiay wants to merge 4 commits into
Open
Conversation
Signed-off-by: Yi Cai <yicai@redhat.com>
ciiay
requested review from
a team,
CryptoRodeo,
Eswaraiahsapram,
HusneShabbir,
caugello,
christoph-jerolimov,
debsmita1,
divyanshiGupta,
djanickova,
dzemanov,
its-mitesh-kumar,
jrichter1,
karthikjeeyar,
lokanandaprabhu and
rohitkrai03
as code owners
Contributor
Missing ChangesetsThe following package(s) are changed by this PR but do not have a changeset:
See CONTRIBUTING.md for more information about how to add changesets. Changed Packages
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the Quay workspace (plugin + dev app) off Material-UI v4 to MUI v5 by updating component/icon imports and styling helpers, along with the necessary dependency and tooling config updates in the workspace.
Changes:
- Replaced
@material-ui/*imports with@mui/material,@mui/icons-material, and styling via@mui/styles/tss-react. - Updated Quay workspace dependencies/lockfile for MUI v5 + Emotion, and added an ESLint rule to prevent reintroducing MUI v4 imports.
- Adjusted Prettier configuration/ignores for API report generation artifacts.
Reviewed changes
Copilot reviewed 23 out of 24 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| workspaces/quay/yarn.lock | Updates lockfile to reflect MUI v5 + Emotion + related dependency graph changes. |
| workspaces/quay/plugins/quay/src/hooks/quay.tsx | Migrates core UI imports (Box/Chip/makeStyles) to MUI v5. |
| workspaces/quay/plugins/quay/src/components/QuayWidget/QuayWidget.tsx | Migrates Card/CardHeader imports to MUI v5. |
| workspaces/quay/plugins/quay/src/components/QuayTagDetails/component.tsx | Migrates icons/table components to MUI v5 and updates inline styling to sx. |
| workspaces/quay/plugins/quay/src/components/QuayRepository/tableHeading.tsx | Migrates Tooltip import to MUI v5 and adjusts column metadata. |
| workspaces/quay/plugins/quay/src/components/QuayRepository/QuayRepository.tsx | Migrates Box/Typography imports and updates props to MUI v5 equivalents. |
| workspaces/quay/plugins/quay/src/components/PermissionAlert/PermissionAlert.tsx | Replaces MUI v4 lab Alert imports with MUI v5 material equivalents. |
| workspaces/quay/plugins/quay/package.json | Swaps MUI v4 deps for MUI v5 + Emotion + @mui/styles. |
| workspaces/quay/plugins/quay/.prettierignore | Ignores generated API report markdown files. |
| workspaces/quay/plugins/quay/.eslintrc.js | Enforces @backstage/no-top-level-material-ui-4-imports to prevent regressions. |
| workspaces/quay/plugins/quay-common/.prettierignore | Ignores generated API report markdown files. |
| workspaces/quay/plugins/quay-backend/.prettierignore | Ignores generated API report markdown files. |
| workspaces/quay/plugins/quay-actions/.prettierignore | Ignores generated API report markdown files. |
| workspaces/quay/packages/app/src/components/SearchPage.tsx | Migrates Grid/Paper + switches styling from MUI v4 makeStyles to tss-react. |
| workspaces/quay/packages/app/src/components/Root/Root.tsx | Migrates sidebar icons + makeStyles to MUI v5 / tss-react. |
| workspaces/quay/packages/app/src/components/Root/LogoIcon.tsx | Migrates makeStyles usage to tss-react. |
| workspaces/quay/packages/app/src/components/Root/LogoFull.tsx | Migrates makeStyles usage to tss-react. |
| workspaces/quay/packages/app/src/components/EntityPage.tsx | Migrates Button/Grid imports to MUI v5. |
| workspaces/quay/packages/app/package.json | Adds MUI v5 + Emotion + tss-react dependencies for the dev app. |
| workspaces/quay/packages/app/knip-report.md | Updates knip report output after dependency changes. |
| workspaces/quay/package.json | Workspace-level tooling config adjustment (prettier config moved to .prettierrc.js). |
| workspaces/quay/.prettierrc.js | Adds explicit Prettier config for the workspace with plugin search disabled. |
| workspaces/quay/.prettierignore | Ignores generated API report markdown files at workspace root. |
| workspaces/quay/.changeset/quiet-maps-dream.md | Adds changeset documenting the migration. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+50
to
+52
| "@mui/icons-material": "^5.16.7", | ||
| "@mui/material": "^5.16.7", | ||
| "@mui/styles": "^5.16.7", |
Comment on lines
+5
to
+7
| Migrated the Quay plugin and dev app from Material UI v4 to MUI v5. Replaced `@material-ui/*` with `@mui/material`, `@mui/icons-material`, and `@mui/styles`; migrated `makeStyles` in the plugin to `@mui/styles` and in the dev app to `tss-react/mui`. Existing `@backstage/ui` CSS imports are unchanged. No breaking API changes. | ||
|
|
||
| --- |
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
| }; | ||
| }); | ||
| }, [tags, localClasses.chip, tagManifestLayers, tagManifestStatuses]); | ||
| }, [tags, tagManifestLayers, tagManifestStatuses, localClasses]); |
Signed-off-by: Yi Cai <yicai@redhat.com>
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
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.
Hey, I just made a Pull Request!
Migrated the Quay plugin and dev app from Material UI v4 to MUI v5. Replaced
@material-ui/*with@mui/material,@mui/icons-material, and@mui/styles; migratedmakeStylesin the plugin to@mui/stylesand in the dev app totss-react/mui. Existing@backstage/uiCSS imports are unchanged. No breaking API changes.✔️ Checklist
Signed-off-byline in the message. (more info)