Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrated to MUI v5 #664

Closed
wants to merge 2 commits into from
Closed

Migrated to MUI v5 #664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c693ea3
Migrated to MUI v5
awanlin Oct 9, 2024
1d1a0ea
Remove CssBaseline from custom theme
awanlin Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,9 @@
"@backstage/plugin-techdocs-react": "backstage:^",
"@backstage/plugin-user-settings": "backstage:^",
"@backstage/theme": "backstage:^",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@mui/icons-material": "5.14.18",
"@mui/material": "5.14.18",
"@mui/styles": "5.14.18",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there's a better way to keep this in sync with Backstage itself I'm very much open to ideas.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/backstage/backstage/blob/446001ee4348020051ca554e4918806efb972bd0/packages/theme/package.json#L45

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@webark curious if you have any suggestions here based on you experience?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We set a resolution in the root.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It may be the case that we could revisit these being peer dependencies, like we do for react, react-dom etc. I.e. that all Backstage packages put them as peer deps and then it's up to the adopter to fulfil those in their packages/app to a concrete version. But I'm not sure it's the perfect solution, would have to bring it up with the team

"backstage-plugin-techdocs-addon-mermaid": "^0.14.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
6 changes: 1 addition & 5 deletions packages/app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ import { createApp } from '@backstage/app-defaults';
import { entityPage } from './components/catalog/EntityPage';
import { orgPlugin } from '@backstage/plugin-org';
import { searchPage } from './components/search/SearchPage';
import { CssBaseline } from '@material-ui/core';
import { HomepageCompositionRoot, VisitListener } from '@backstage/plugin-home';
import { HomePage } from './components/home/HomePage';
import { CustomizableHomePage } from './components/home/CustomizableHomePage';
Expand Down Expand Up @@ -102,10 +101,7 @@ const app = createApp({
title: 'Aperture',
variant: 'light',
Provider: ({ children }) => (
<UnifiedThemeProvider theme={apertureTheme} noCssBaseline>
<CssBaseline />
{children}
</UnifiedThemeProvider>
<UnifiedThemeProvider theme={apertureTheme} children={children} />
),
},
],
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/Root/ApertureLogoFull.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { makeStyles } from '@material-ui/core';
import makeStyles from '@mui/styles/makeStyles';

const useStyles = makeStyles({
svg: {
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/Root/ApertureLogoIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { makeStyles } from '@material-ui/core';
import makeStyles from '@mui/styles/makeStyles';

const useStyles = makeStyles({
svg: {
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/Root/LogoFull.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

import React from 'react';
import { makeStyles } from '@material-ui/core';
import makeStyles from '@mui/styles/makeStyles';

const useStyles = makeStyles({
svg: {
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/Root/LogoIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

import React from 'react';
import { makeStyles } from '@material-ui/core';
import makeStyles from '@mui/styles/makeStyles';

const useStyles = makeStyles({
svg: {
Expand Down
26 changes: 14 additions & 12 deletions packages/app/src/components/Root/Root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React, { PropsWithChildren } from 'react';
import { Link, Theme, makeStyles } from '@material-ui/core';
import HomeIcon from '@material-ui/icons/Home';
import ExtensionIcon from '@material-ui/icons/Extension';
import MapIcon from '@material-ui/icons/MyLocation';
import LayersIcon from '@material-ui/icons/Layers';
import LibraryBooks from '@material-ui/icons/LibraryBooks';
import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
import MoneyIcon from '@material-ui/icons/MonetizationOn';
import Link from '@mui/material/Link';
import makeStyles from '@mui/styles/makeStyles';
import HomeIcon from '@mui/icons-material/Home';
import ExtensionIcon from '@mui/icons-material/Extension';
import MapIcon from '@mui/icons-material/MyLocation';
import LayersIcon from '@mui/icons-material/Layers';
import LibraryBooks from '@mui/icons-material/LibraryBooks';
import CreateComponentIcon from '@mui/icons-material/AddCircleOutline';
import MoneyIcon from '@mui/icons-material/MonetizationOn';
import LogoFull from './LogoFull';
import LogoIcon from './LogoIcon';
import { NavLink } from 'react-router-dom';
Expand All @@ -26,15 +27,16 @@ import {
SidebarGroup,
useSidebarOpenState,
} from '@backstage/core-components';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import { appThemeApiRef, useApi } from '@backstage/core-plugin-api';
import { ApertureLogoFull } from './ApertureLogoFull';
import { ApertureLogoIcon } from './ApertureLogoIcon';
import CategoryIcon from '@material-ui/icons/Category';
import CategoryIcon from '@mui/icons-material/Category';
import { MyGroupsSidebarItem } from '@backstage/plugin-org';
import GroupIcon from '@material-ui/icons/People';
import GroupIcon from '@mui/icons-material/People';
import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
import { Theme } from '@mui/material/styles';

const useSidebarLogoStyles = makeStyles<Theme, { themeId: string }>({
root: {
Expand Down
5 changes: 3 additions & 2 deletions packages/app/src/components/catalog/EntityPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@
* limitations under the License.
*/
import React, { useMemo, useState } from 'react';
import { Button, Grid } from '@material-ui/core';
import BadgeIcon from '@material-ui/icons/CallToAction';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import BadgeIcon from '@mui/icons-material/CallToAction';
import {
EntityApiDefinitionCard,
EntityConsumedApisCard,
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/home/CustomizableHomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
HomePageRecentlyVisited,
} from '@backstage/plugin-home';
import { HomePageSearchBar } from '@backstage/plugin-search';
import { Grid } from '@material-ui/core';
import Grid from '@mui/material/Grid';
import React from 'react';
import { tools, useLogoStyles } from './shared';

Expand Down
3 changes: 2 additions & 1 deletion packages/app/src/components/home/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
} from '@backstage/plugin-home';
import { HomePageSearchBar } from '@backstage/plugin-search';
import { SearchContextProvider } from '@backstage/plugin-search-react';
import { Grid, makeStyles } from '@material-ui/core';
import Grid from '@mui/material/Grid';
import makeStyles from '@mui/styles/makeStyles';
import React from 'react';
import { tools, useLogoStyles } from './shared';

Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/home/shared.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { TemplateBackstageLogoIcon } from '@backstage/plugin-home';
import { makeStyles } from '@material-ui/core/styles';
import makeStyles from '@mui/styles/makeStyles';
import React from 'react';

export const useLogoStyles = makeStyles(theme => ({
Expand Down
9 changes: 6 additions & 3 deletions packages/app/src/components/search/SearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,20 @@ import {
useSearch,
} from '@backstage/plugin-search-react';
import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs';
import { Grid, List, makeStyles, Paper, Theme } from '@material-ui/core';
import Grid from '@mui/material/Grid';
import List from '@mui/material/List';
import Paper from '@mui/material/Paper';
import makeStyles from '@mui/styles/makeStyles';
import React from 'react';
import { ToolSearchResultListItem } from '@backstage-community/plugin-explore';
import { useApi } from '@backstage/core-plugin-api';
import {
catalogApiRef,
CATALOG_FILTER_EXISTS,
} from '@backstage/plugin-catalog-react';
import BuildIcon from '@material-ui/icons/Build';
import BuildIcon from '@mui/icons-material/Build';

const useStyles = makeStyles((theme: Theme) => ({
const useStyles = makeStyles(theme => ({
bar: {
padding: theme.spacing(1, 0),
},
Expand Down
3 changes: 2 additions & 1 deletion packages/app/src/theme/aperture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
createUnifiedTheme,
} from '@backstage/theme';

import { alpha } from '@material-ui/core/styles';
import { alpha } from '@mui/material/styles';

const pageThemesFontColorOverride: Record<string, PageTheme> = {};
Object.keys(defaultPageThemes).map(key => {
Expand Down Expand Up @@ -166,6 +166,7 @@ export const apertureTheme = createUnifiedTheme({
},
},
},
// @ts-ignore
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm just for this one?

CatalogReactUserListPicker: {
styleOverrides: {
title: {
Expand Down
72 changes: 60 additions & 12 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9328,7 +9328,7 @@ __metadata:
languageName: node
linkType: hard

"@material-ui/core@npm:^4.11.0, @material-ui/core@npm:^4.12.2, @material-ui/core@npm:^4.12.4, @material-ui/core@npm:^4.9.13":
"@material-ui/core@npm:^4.12.2, @material-ui/core@npm:^4.12.4, @material-ui/core@npm:^4.9.13":
version: 4.12.4
resolution: "@material-ui/core@npm:4.12.4"
dependencies:
Expand Down Expand Up @@ -9798,7 +9798,23 @@ __metadata:
languageName: node
linkType: hard

"@mui/material@npm:^5.12.2":
"@mui/icons-material@npm:5.14.18":
version: 5.14.18
resolution: "@mui/icons-material@npm:5.14.18"
dependencies:
"@babel/runtime": "npm:^7.23.2"
peerDependencies:
"@mui/material": ^5.0.0
"@types/react": ^17.0.0 || ^18.0.0
react: ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10/20da1445f033edf017d7d447c74fb27e90d4a9f3a631f617252a4806b69364792e01aa7010939c90e37d8ce7adf4218ec27066bd8ec0db40295f64365fd18a5e
languageName: node
linkType: hard

"@mui/material@npm:5.14.18, @mui/material@npm:^5.12.2":
version: 5.14.18
resolution: "@mui/material@npm:5.14.18"
dependencies:
Expand Down Expand Up @@ -9869,6 +9885,37 @@ __metadata:
languageName: node
linkType: hard

"@mui/styles@npm:5.14.18":
version: 5.14.18
resolution: "@mui/styles@npm:5.14.18"
dependencies:
"@babel/runtime": "npm:^7.23.2"
"@emotion/hash": "npm:^0.9.1"
"@mui/private-theming": "npm:^5.14.18"
"@mui/types": "npm:^7.2.9"
"@mui/utils": "npm:^5.14.18"
clsx: "npm:^2.0.0"
csstype: "npm:^3.1.2"
hoist-non-react-statics: "npm:^3.3.2"
jss: "npm:^10.10.0"
jss-plugin-camel-case: "npm:^10.10.0"
jss-plugin-default-unit: "npm:^10.10.0"
jss-plugin-global: "npm:^10.10.0"
jss-plugin-nested: "npm:^10.10.0"
jss-plugin-props-sort: "npm:^10.10.0"
jss-plugin-rule-value-function: "npm:^10.10.0"
jss-plugin-vendor-prefixer: "npm:^10.10.0"
prop-types: "npm:^15.8.1"
peerDependencies:
"@types/react": ^17.0.0 || ^18.0.0
react: ^17.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10/110730d9e94349ed8df53d22ef1427f3a3c699c55dd93d48bd884922d32d695d2747b4df84fa89fafdb4e0c73c7dbfa25c3f0f624fffae0ae7cbf2ee47eb3e0c
languageName: node
linkType: hard

"@mui/system@npm:^5.14.18":
version: 5.14.18
resolution: "@mui/system@npm:5.14.18"
Expand Down Expand Up @@ -15755,8 +15802,9 @@ __metadata:
"@backstage/plugin-techdocs-react": "backstage:^"
"@backstage/plugin-user-settings": "backstage:^"
"@backstage/theme": "backstage:^"
"@material-ui/core": "npm:^4.11.0"
"@material-ui/icons": "npm:^4.9.1"
"@mui/icons-material": "npm:5.14.18"
"@mui/material": "npm:5.14.18"
"@mui/styles": "npm:5.14.18"
"@playwright/test": "npm:^1.32.3"
"@testing-library/dom": "npm:^10.1.0"
"@testing-library/jest-dom": "npm:^6.0.0"
Expand Down Expand Up @@ -25008,7 +25056,7 @@ __metadata:
languageName: node
linkType: hard

"jss-plugin-camel-case@npm:^10.5.1":
"jss-plugin-camel-case@npm:^10.10.0, jss-plugin-camel-case@npm:^10.5.1":
version: 10.10.0
resolution: "jss-plugin-camel-case@npm:10.10.0"
dependencies:
Expand All @@ -25019,7 +25067,7 @@ __metadata:
languageName: node
linkType: hard

"jss-plugin-default-unit@npm:^10.5.1":
"jss-plugin-default-unit@npm:^10.10.0, jss-plugin-default-unit@npm:^10.5.1":
version: 10.10.0
resolution: "jss-plugin-default-unit@npm:10.10.0"
dependencies:
Expand All @@ -25029,7 +25077,7 @@ __metadata:
languageName: node
linkType: hard

"jss-plugin-global@npm:^10.5.1":
"jss-plugin-global@npm:^10.10.0, jss-plugin-global@npm:^10.5.1":
version: 10.10.0
resolution: "jss-plugin-global@npm:10.10.0"
dependencies:
Expand All @@ -25039,7 +25087,7 @@ __metadata:
languageName: node
linkType: hard

"jss-plugin-nested@npm:^10.5.1":
"jss-plugin-nested@npm:^10.10.0, jss-plugin-nested@npm:^10.5.1":
version: 10.10.0
resolution: "jss-plugin-nested@npm:10.10.0"
dependencies:
Expand All @@ -25050,7 +25098,7 @@ __metadata:
languageName: node
linkType: hard

"jss-plugin-props-sort@npm:^10.5.1":
"jss-plugin-props-sort@npm:^10.10.0, jss-plugin-props-sort@npm:^10.5.1":
version: 10.10.0
resolution: "jss-plugin-props-sort@npm:10.10.0"
dependencies:
Expand All @@ -25060,7 +25108,7 @@ __metadata:
languageName: node
linkType: hard

"jss-plugin-rule-value-function@npm:^10.5.1":
"jss-plugin-rule-value-function@npm:^10.10.0, jss-plugin-rule-value-function@npm:^10.5.1":
version: 10.10.0
resolution: "jss-plugin-rule-value-function@npm:10.10.0"
dependencies:
Expand All @@ -25071,7 +25119,7 @@ __metadata:
languageName: node
linkType: hard

"jss-plugin-vendor-prefixer@npm:^10.5.1":
"jss-plugin-vendor-prefixer@npm:^10.10.0, jss-plugin-vendor-prefixer@npm:^10.5.1":
version: 10.10.0
resolution: "jss-plugin-vendor-prefixer@npm:10.10.0"
dependencies:
Expand All @@ -25082,7 +25130,7 @@ __metadata:
languageName: node
linkType: hard

"jss@npm:10.10.0, jss@npm:^10.5.1, jss@npm:~10.10.0":
"jss@npm:10.10.0, jss@npm:^10.10.0, jss@npm:^10.5.1, jss@npm:~10.10.0":
version: 10.10.0
resolution: "jss@npm:10.10.0"
dependencies:
Expand Down