[Backstage - Utviklerportal] Migrate mui v4 -> v7#750
Open
aleksanderobrestad wants to merge 13 commits intomainfrom
Open
[Backstage - Utviklerportal] Migrate mui v4 -> v7#750aleksanderobrestad wants to merge 13 commits intomainfrom
aleksanderobrestad wants to merge 13 commits intomainfrom
Conversation
… pages Replace Grid and Button imports in all catalog entity page files with path-based @mui/material imports as required by Backstage ESLint rules. Add @mui/material as explicit dependency in packages/app. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace Tooltip, useTheme and Link imports with @mui/material equivalents. Fix palette.type -> palette.mode (MUI v4 -> v5 API change). Remove @material-ui/core, @material-ui/icons, @material-ui/lab dependencies. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace all @material-ui/core and @material-ui/icons imports in Root.tsx, HomePage.tsx, SearchPage.tsx, SidebarSearchModal.tsx and apis.ts. - Icons migrated to @mui/icons-material - makeStyles migrated to tss-react/mui (double-call syntax, destructured classes) - Grid and Paper migrated to @mui/material path imports - useTheme migrated to @mui/material/styles - Fix palette.type -> palette.mode (MUI v4 -> v5 API change) - Add @mui/icons-material and tss-react as dependencies Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…aterial and tss-react Replace all @material-ui/core, @material-ui/icons and @material-ui/lab imports across 19 files with @mui/material, @mui/icons-material and tss-react. - makeStyles migrated to tss-react/mui - Icons migrated to @mui/icons-material - Components migrated to @mui/material path imports - Fix palette.type -> palette.mode (MUI v4 -> v5 API change) - Fix theme.spacing() usage (no longer needs 'px' suffix in v5) - Remove @material-ui/core, @material-ui/icons, @material-ui/lab dependencies - Add tss-react and @mui/icons-material as dependencies Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Migrate FunctionTree.tsx from @material-ui/lab to @mui/x-tree-view v8:
- TreeView -> SimpleTreeView from @mui/x-tree-view/SimpleTreeView
- TreeItem -> TreeItem from @mui/x-tree-view/TreeItem
- nodeId -> itemId prop
- defaultExpanded -> defaultExpandedItems prop
- defaultCollapseIcon/defaultExpandIcon -> slots={{ collapseIcon, expandIcon }}
- makeStyles migrated to tss-react/mui
- Chip and Paper migrated to @mui/material path imports
- Icons migrated to @mui/icons-material
Remove @material-ui/core, @material-ui/icons, @material-ui/lab from packages/app
as all MUI v4 usage has now been fully replaced.
Add @mui/x-tree-view as dependency.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Dependency ReviewThe following issues were found:
License Issuespackage.json
packages/app/package.json
plugins/frontend-custom-components/package.json
plugins/security-metrics/package.json
OpenSSF ScorecardScorecard details
Scanned Files
|
There was a problem hiding this comment.
Pull request overview
Migrates the portal codebase away from legacy MUI v4 (@material-ui/*) imports toward the MUI v5+ package namespace (@mui/*), addressing findDOMNode deprecation warnings and unblocking future React upgrades.
Changes:
- Replaced
@material-ui/*component/icon imports with@mui/material,@mui/icons-material, and@mui/x-tree-viewequivalents. - Migrated
makeStylesusage totss-react/muiand updated theme API changes (palette.type→palette.mode, spacing return type changes). - Updated package dependencies/lockfile to remove MUI v4 packages and add MUI v5+ replacements.
Reviewed changes
Copilot reviewed 41 out of 42 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Removes @material-ui/* packages and adds MUI v5+ ecosystem deps (including tss-react and @mui/x-tree-view). |
| plugins/frontend-custom-components/src/components/GroupSecurityFormsCard/useDynamicColumns.tsx | Switches useMediaQuery/Theme imports from MUI v4 to MUI v5+. |
| plugins/frontend-custom-components/src/components/GroupSecurityFormsCard/TeamFormsTabContent.tsx | Migrates styles to tss-react/mui, updates icon import paths, and theme API changes. |
| plugins/frontend-custom-components/src/components/GroupSecurityFormsCard/LinksGridList.tsx | Migrates ImageList imports to @mui/material. |
| plugins/frontend-custom-components/src/components/GroupSecurityFormsCard/IconLink.tsx | Migrates Box/Typography imports and makeStyles to tss-react/mui. |
| plugins/frontend-custom-components/src/components/GroupSecurityFormsCard/GroupSecurityFormsCard.tsx | Migrates icons and styles to MUI v5+ packages and tss-react/mui. |
| plugins/frontend-custom-components/src/components/GroupSecurityFormsCard/FunctionFormsTabContent.tsx | Migrates icons/styles and theme API changes for function tab. |
| plugins/frontend-custom-components/src/components/FunctionSecurityFormsCard/useDynamicColumns.tsx | Switches useMediaQuery/Theme imports from MUI v4 to MUI v5+. |
| plugins/frontend-custom-components/src/components/FunctionSecurityFormsCard/LinksGridList.tsx | Migrates ImageList imports to @mui/material. |
| plugins/frontend-custom-components/src/components/FunctionSecurityFormsCard/IconLink.tsx | Migrates Box/Typography/icons and makeStyles to MUI v5+ packages. |
| plugins/frontend-custom-components/src/components/FunctionSecurityFormsCard/FunctionSecurityFormsCard.tsx | Migrates styles/icons/Typography imports to MUI v5+ and tss-react/mui. |
| plugins/frontend-custom-components/src/components/FunctionGroupPageCard/FunctionGroupPageCard.tsx | Migrates Typography import to @mui/material. |
| plugins/frontend-custom-components/src/components/FunctionDependenciesCard/FunctionDependenciesCard.tsx | Migrates Typography import to @mui/material. |
| plugins/frontend-custom-components/src/components/EntityFunctionsCard/EntityFunctionsCard.tsx | Migrates Typography import to @mui/material. |
| plugins/frontend-custom-components/src/components/AboutCard/useDynamicColumns.tsx | Switches useMediaQuery/Theme imports from MUI v4 to MUI v5+. |
| plugins/frontend-custom-components/src/components/AboutCard/LinksGridList.tsx | Migrates ImageList imports to @mui/material. |
| plugins/frontend-custom-components/src/components/AboutCard/IconLink.tsx | Migrates Box/Typography/icons and makeStyles to MUI v5+ packages. |
| plugins/frontend-custom-components/src/components/AboutCard/FunctionAboutContent.tsx | Migrates Chip/Grid imports and makeStyles to MUI v5+ packages. |
| plugins/frontend-custom-components/src/components/AboutCard/FunctionAboutCard.tsx | Migrates Card subcomponents/icons and makeStyles to MUI v5+ packages. |
| plugins/frontend-custom-components/src/components/AboutCard/AboutField.tsx | Migrates Grid/Typography and makeStyles to MUI v5+ packages. |
| plugins/frontend-custom-components/package.json | Removes MUI v4 dependencies and adds tss-react / MUI v5+ deps. |
| plugins/catalog-creator/src/components/CatalogForm/FieldHeader.tsx | Migrates Tooltip import to @mui/material. |
| plugins/catalog-creator/src/components/CatalogCreatorPage/RepositoryForm.tsx | Migrates Link import to @mui/material. |
| plugins/catalog-creator/src/components/CatalogCreatorPage/CatalogCreatorPage.tsx | Migrates useTheme import and palette mode API usage. |
| plugins/catalog-creator/package.json | Removes MUI v4 peer deps from the plugin manifest. |
| packages/app/src/components/search/SidebarSearchModal.tsx | Migrates Search icon import to @mui/icons-material. |
| packages/app/src/components/search/SearchPage.tsx | Migrates Grid/Paper/makeStyles to MUI v5+ packages and tss-react/mui. |
| packages/app/src/components/home/HomePage.tsx | Migrates Grid/useTheme/makeStyles to MUI v5+ packages and tss-react/mui. |
| packages/app/src/components/functions/FunctionTree.tsx | Replaces TreeView/TreeItem from MUI v4 lab with @mui/x-tree-view equivalents and updates props. |
| packages/app/src/components/catalog/entityPages/shared.tsx | Migrates Button/Grid imports to @mui/material. |
| packages/app/src/components/catalog/entityPages/UserPage.tsx | Migrates Grid import to @mui/material. |
| packages/app/src/components/catalog/entityPages/SystemPage.tsx | Migrates Grid import to @mui/material. |
| packages/app/src/components/catalog/entityPages/ResourcePage.tsx | Migrates Grid import to @mui/material. |
| packages/app/src/components/catalog/entityPages/GroupPage.tsx | Migrates Grid import to @mui/material. |
| packages/app/src/components/catalog/entityPages/FunctionEntityPage.tsx | Migrates Grid import to @mui/material. |
| packages/app/src/components/catalog/entityPages/DomainPage.tsx | Migrates Grid import to @mui/material. |
| packages/app/src/components/catalog/entityPages/ComponentPages.tsx | Migrates Grid import to @mui/material. |
| packages/app/src/components/catalog/entityPages/ApiPage.tsx | Migrates Grid import to @mui/material. |
| packages/app/src/components/catalog/EntityPage.tsx | Migrates Grid import and updates Grid documentation link to MUI site. |
| packages/app/src/components/Root/Root.tsx | Migrates icons and makeStyles usage to MUI v5+ packages and tss-react/mui. |
| packages/app/src/apis.ts | Migrates Assignment icon import to @mui/icons-material. |
| packages/app/package.json | Removes MUI v4 deps and adds MUI v5+ deps (@mui/*, tss-react, @mui/x-tree-view). |
You can also share your feedback on Copilot code review. Take the survey.
aleksanderobrestad
force-pushed
the
migrate-mui
branch
2 times, most recently
from
51516d0 to
88095c9
Compare
aleksanderobrestad
changed the title
aleksanderobrestad
force-pushed
the
migrate-mui
branch
from
1982bcc to
0dcc337
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 45 out of 46 changed files in this pull request and generated 1 comment.
You can also share your feedback on Copilot code review. Take the survey.
Contributor
|
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.
🔒 Bakgrunn
@material-ui/core (MUI v4) bruker ReactDOM.findDOMNode() internt, som er deprecated i React 18 og fjernet i React 19. Dette ga advarsler i development-console og ville ført til runtime-feil ved en fremtidig React-oppgradering.
🔑 Løsning
Migrert alle direkte MUI v4-importer i prosjektkoden til MUI v7:
packages/app
plugins/frontend-custom-components (19 filer)
plugins/catalog-creator
Avhengighetsendringer:
Bugfikser underveis:
@mui/material/TablePaginationActions
Tekniske notater:
Merk: Noen findDOMNode-advarsler fra Backstage sine egne pakker vil fortsatt vises. Disse er utenfor prosjektets kontroll og avhenger av Backstage sin pågående
MUI-migrering.
📸 Bilder
Kommer