From c36f7b944946ded4b81a4fe0a1bc7c214b2e3faf Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Wed, 26 Apr 2023 19:39:00 +0200 Subject: [PATCH] Make MUIv4 not optional - Fix smaller v5 errors in GraphQL Plugin Signed-off-by: Philipp Hugenroth --- .../OAuthRequestDialog/OAuthRequestDialog.tsx | 6 +- packages/theme/src/unified/UnifiedTheme.tsx | 10 +- .../src/unified/UnifiedThemeProvider.tsx | 16 +- plugins/graphiql/package.json | 2 +- .../GraphiQLBrowser/GraphiQLBrowser.tsx | 8 +- yarn.lock | 145 ++++++++++-------- 6 files changed, 108 insertions(+), 79 deletions(-) diff --git a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx index 0159d8f503..8fdace3766 100644 --- a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx +++ b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx @@ -89,7 +89,11 @@ export function OAuthRequestDialog(_props: {}) { classes={{ root: classes.title }} id="oauth-req-dialog-title" > - + Login Required {authRedirect ? ( diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index 28da80424b..341b9e0a1f 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -14,9 +14,10 @@ * limitations under the License. */ -import type { +import { Theme as Mui4Theme, ThemeOptions as ThemeOptionsV4, + createTheme, } from '@material-ui/core/styles'; import type { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles/createPalette'; @@ -75,13 +76,14 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme { const components = { ...defaultComponentThemes, ...options.components }; const v5Theme = createV5Theme({ ...themeOptions, components }); - const mui4Styles = maybeLoadMui4Styles(); + // TODO: Not super relevant in the beginning + /* const mui4Styles = maybeLoadMui4Styles(); if (!mui4Styles) { return new UnifiedThemeHolder(undefined, v5Theme); - } + } */ const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components); - const v4Theme = { ...mui4Styles.createTheme(themeOptions), ...v4Overrides }; + const v4Theme = { ...createTheme(themeOptions), ...v4Overrides }; return new UnifiedThemeHolder(v4Theme, v5Theme); } diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index d28dfab292..10277136e5 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -15,7 +15,11 @@ */ import React, { ReactNode } from 'react'; -import type { Theme as Mui4Theme } from '@material-ui/core/styles'; +import { + Theme as Mui4Theme, + StylesProvider, + ThemeProvider, +} from '@material-ui/core/styles'; import { StyledEngineProvider, Theme as Mui5Theme, @@ -27,7 +31,7 @@ import { } from '@mui/styles'; import Mui5CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; -import { maybeLoadMui4CssBaseline, maybeLoadMui4Styles } from '../v4/load'; +import { CssBaseline } from '@material-ui/core'; const generateV4ClassName = createGenerateClassName({ seed: 'm4', @@ -65,10 +69,10 @@ export function UnifiedThemeProvider( if (v5Theme) { cssBaseline = ; } else if (v4Theme) { - const CssBaseline = maybeLoadMui4CssBaseline(); + /* const CssBaseline = maybeLoadMui4CssBaseline(); if (!CssBaseline) { throw new Error('Failed to load MUI 4 CssBaseline component'); - } + } */ cssBaseline = ; } } @@ -81,11 +85,11 @@ export function UnifiedThemeProvider( ); if (v4Theme) { - const styles = maybeLoadMui4Styles(); + /* const styles = maybeLoadMui4Styles(); if (!styles) { throw new Error('Failed to load MUI 4 styles package'); } - const { StylesProvider, ThemeProvider } = styles; + const { StylesProvider, ThemeProvider } = styles; */ result = ( {result} diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json index 6cc65e8e80..3afd582bb5 100644 --- a/plugins/graphiql/package.json +++ b/plugins/graphiql/package.json @@ -37,7 +37,7 @@ "@backstage/theme": "workspace:^", "@mui/icons-material": "^5.11.0", "@mui/lab": "5.0.0-alpha.114", - "@mui/material": "^5.11.2", + "@mui/material": "^5.12.2", "@mui/styles": "^5.11.2", "graphiql": "^1.5.12", "graphql": "^16.0.0", diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx index 058801dabf..fd084f1be8 100644 --- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx +++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx @@ -69,15 +69,11 @@ export const GraphiQLBrowser = (props: GraphiQLBrowserProps) => { classes={{ root: classes.tabs }} value={tabIndex} onChange={(_, value) => setTabIndex(value)} + indicatorColor="secondary" textColor="inherit" > {endpoints.map(({ title }, index) => ( - + ))} diff --git a/yarn.lock b/yarn.lock index fd6d623b4f..38d9819ae7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3472,7 +3472,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" dependencies: @@ -6962,7 +6962,7 @@ __metadata: "@backstage/theme": "workspace:^" "@mui/icons-material": ^5.11.0 "@mui/lab": 5.0.0-alpha.114 - "@mui/material": ^5.11.2 + "@mui/material": ^5.12.2 "@mui/styles": ^5.11.2 "@testing-library/dom": ^8.0.0 "@testing-library/jest-dom": ^5.10.1 @@ -10188,16 +10188,16 @@ __metadata: languageName: node linkType: hard -"@emotion/cache@npm:^11.10.5": - version: 11.10.5 - resolution: "@emotion/cache@npm:11.10.5" +"@emotion/cache@npm:^11.10.5, @emotion/cache@npm:^11.10.7": + version: 11.10.7 + resolution: "@emotion/cache@npm:11.10.7" dependencies: "@emotion/memoize": ^0.8.0 "@emotion/sheet": ^1.2.1 "@emotion/utils": ^1.2.0 "@emotion/weak-memoize": ^0.3.0 stylis: 4.1.3 - checksum: 1dd2d9af2d3ecbd3d4469ecdf91a335eef6034c851b57a474471b2d2280613eb35bbed98c0368cc4625f188619fbdaf04cf07e8107aaffce94b2178444c0fe7b + checksum: 6b1efed2dffc93dac419409d91f6d57a200d858ec5ffa4b7c30080fdbd93db431ff86bb779c5b8830b8373f3c5dd754d9beb386604ed2667c7d55608ff653dfc languageName: node linkType: hard @@ -12905,10 +12905,33 @@ __metadata: languageName: node linkType: hard -"@mui/core-downloads-tracker@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/core-downloads-tracker@npm:5.11.2" - checksum: 1f2c45ef37b13829fa2331811548cdd3f3cb94e384513db8820533570c8ef4569e5f835f8757a48d783553f44af3f4ed2f93d402891e27718fcc58e16129a874 +"@mui/base@npm:5.0.0-alpha.127": + version: 5.0.0-alpha.127 + resolution: "@mui/base@npm:5.0.0-alpha.127" + dependencies: + "@babel/runtime": ^7.21.0 + "@emotion/is-prop-valid": ^1.2.0 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.12.0 + "@popperjs/core": ^2.11.7 + clsx: ^1.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 330baeef1fdaa513707f295e07a3436af24d0831a18109ed877f76b86cf1f392309833d33a2c7ca250db79fdf53f5e88c2618f876f50dbbbf9323bbf08e367e7 + languageName: node + linkType: hard + +"@mui/core-downloads-tracker@npm:^5.12.2": + version: 5.12.2 + resolution: "@mui/core-downloads-tracker@npm:5.12.2" + checksum: d748bdc56df6fdfe6712550a94263cf094c53ddcb70f6a8f633caf23927edf5ac88b1f888429d895fe2a5045b27eb7aa9826ccee5b917e31973667d604ed87fe languageName: node linkType: hard @@ -12958,19 +12981,19 @@ __metadata: languageName: node linkType: hard -"@mui/material@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/material@npm:5.11.2" +"@mui/material@npm:^5.11.2, @mui/material@npm:^5.12.2": + version: 5.12.2 + resolution: "@mui/material@npm:5.12.2" dependencies: - "@babel/runtime": ^7.20.7 - "@mui/base": 5.0.0-alpha.112 - "@mui/core-downloads-tracker": ^5.11.2 - "@mui/system": ^5.11.2 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 + "@babel/runtime": ^7.21.0 + "@mui/base": 5.0.0-alpha.127 + "@mui/core-downloads-tracker": ^5.12.2 + "@mui/system": ^5.12.1 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.12.0 "@types/react-transition-group": ^4.4.5 clsx: ^1.2.1 - csstype: ^3.1.1 + csstype: ^3.1.2 prop-types: ^15.8.1 react-is: ^18.2.0 react-transition-group: ^4.4.5 @@ -12987,16 +13010,16 @@ __metadata: optional: true "@types/react": optional: true - checksum: 4f2baa4b4d8f7842b081e9e919172020f7055e33c24af36c5a458eac1a76ff3e896651fdf21daa523a68ac0bfb3670864c1b4dec9fae6d8fadf2b602f14f95ea + checksum: a3464dfbcc496164967e134d6f1d40e060ee02fc2ddb5fcf648ca85580efdbd5eff5aab6a73486d0a7f329f7299127b52501a13993bb131cbd4e310c7f2e633f languageName: node linkType: hard -"@mui/private-theming@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/private-theming@npm:5.11.2" +"@mui/private-theming@npm:^5.11.2, @mui/private-theming@npm:^5.12.0": + version: 5.12.0 + resolution: "@mui/private-theming@npm:5.12.0" dependencies: - "@babel/runtime": ^7.20.7 - "@mui/utils": ^5.11.2 + "@babel/runtime": ^7.21.0 + "@mui/utils": ^5.12.0 prop-types: ^15.8.1 peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 @@ -13004,17 +13027,17 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 4a36ca48a7a8187d46c3e0d21ec08f7cb732bd4a5bac91c959337c8b0af031beb3a6c5ceac979b685c2e0e66321273d55dd54648f925bfdb946d6513fc6150e6 + checksum: 761bc7a57e1643c2c4c327886882fa5efc7bacae1c6fffe6be4197f49d337261c916a883d96996445efcdedc0672251725c1e5b264b6250d6c9527fd0cafcc62 languageName: node linkType: hard -"@mui/styled-engine@npm:^5.11.0": - version: 5.11.0 - resolution: "@mui/styled-engine@npm:5.11.0" +"@mui/styled-engine@npm:^5.12.0": + version: 5.12.0 + resolution: "@mui/styled-engine@npm:5.12.0" dependencies: - "@babel/runtime": ^7.20.6 - "@emotion/cache": ^11.10.5 - csstype: ^3.1.1 + "@babel/runtime": ^7.21.0 + "@emotion/cache": ^11.10.7 + csstype: ^3.1.2 prop-types: ^15.8.1 peerDependencies: "@emotion/react": ^11.4.1 @@ -13025,7 +13048,7 @@ __metadata: optional: true "@emotion/styled": optional: true - checksum: ddc486bc5e0e8e7b683e4c3bffecd11c2ce1e6c67a485354c5fc5a6fe04ed5ce76db737609a2ae04779e9d5f57c7936174d458a3795eab62291c2d7681184062 + checksum: 4a415473cf62aa05012f667dd2e9b1dc2fb175be5b0c4d0b8df541e2dac3d7db410e920e0d5910c8e2b8996a4fb51f74d79483e2878a9b5c0d334498f5537d74 languageName: node linkType: hard @@ -13060,17 +13083,17 @@ __metadata: languageName: node linkType: hard -"@mui/system@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/system@npm:5.11.2" +"@mui/system@npm:^5.11.2, @mui/system@npm:^5.12.1": + version: 5.12.1 + resolution: "@mui/system@npm:5.12.1" dependencies: - "@babel/runtime": ^7.20.7 - "@mui/private-theming": ^5.11.2 - "@mui/styled-engine": ^5.11.0 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 + "@babel/runtime": ^7.21.0 + "@mui/private-theming": ^5.12.0 + "@mui/styled-engine": ^5.12.0 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.12.0 clsx: ^1.2.1 - csstype: ^3.1.1 + csstype: ^3.1.2 prop-types: ^15.8.1 peerDependencies: "@emotion/react": ^11.5.0 @@ -13084,34 +13107,34 @@ __metadata: optional: true "@types/react": optional: true - checksum: d6b136464ec48cbc270f0cb91eb83f10f6b6801c143cc320ef5c6ec71655f9b3ceda98ab38fde537d1c0a7669defcb9af6f4940c78101603f8b6800854d0133d + checksum: b951959bf5e5af581319354c044f441d97849ff120cfec111d2ed5e7fa05efd63721acff96f48093b8e2bdeb5ccbe35c48613fb925be2b58c596447d10dbed3e languageName: node linkType: hard -"@mui/types@npm:^7.2.3": - version: 7.2.3 - resolution: "@mui/types@npm:7.2.3" +"@mui/types@npm:^7.2.3, @mui/types@npm:^7.2.4": + version: 7.2.4 + resolution: "@mui/types@npm:7.2.4" peerDependencies: "@types/react": "*" peerDependenciesMeta: "@types/react": optional: true - checksum: b8511cb78f8df25c8978317ad3fd585c782116b657f2d32233352c09d415c77040e532f41bbe96de6ad46be87138767d3129a9f0de3561900a9a64db7693bce4 + checksum: 16bea0547492193a22fd1794382f314698a114f6c673825314c66b56766c3a9d305992cc495684722b7be16a1ecf7e6e48a79caa64f90c439b530e8c02611a61 languageName: node linkType: hard -"@mui/utils@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/utils@npm:5.11.2" +"@mui/utils@npm:^5.11.2, @mui/utils@npm:^5.12.0": + version: 5.12.0 + resolution: "@mui/utils@npm:5.12.0" dependencies: - "@babel/runtime": ^7.20.7 + "@babel/runtime": ^7.21.0 "@types/prop-types": ^15.7.5 "@types/react-is": ^16.7.1 || ^17.0.0 prop-types: ^15.8.1 react-is: ^18.2.0 peerDependencies: react: ^17.0.0 || ^18.0.0 - checksum: 69091d9120681dee29fc20220b7db5dd61334194c139df735d932f072dab00eeae6e440058ffbccebbe93d4a3a998c23b6f4df570cb66cdacd023fce9f0f5912 + checksum: 87b2c7468803b083f50af28d7c215c45291e73fef16570848b596d0f1cde1fc613c20e8951f431217b31451de254744abd50eda5013dedec4982420b5bf1c6b6 languageName: node linkType: hard @@ -14026,10 +14049,10 @@ __metadata: languageName: node linkType: hard -"@popperjs/core@npm:^2.11.6": - version: 2.11.6 - resolution: "@popperjs/core@npm:2.11.6" - checksum: 47fb328cec1924559d759b48235c78574f2d71a8a6c4c03edb6de5d7074078371633b91e39bbf3f901b32aa8af9b9d8f82834856d2f5737a23475036b16817f0 +"@popperjs/core@npm:^2.11.6, @popperjs/core@npm:^2.11.7": + version: 2.11.7 + resolution: "@popperjs/core@npm:2.11.7" + checksum: 5b6553747899683452a1d28898c1b39173a4efd780e74360bfcda8eb42f1c5e819602769c81a10920fc68c881d07fb40429604517d499567eac079cfa6470f19 languageName: node linkType: hard @@ -21734,10 +21757,10 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1": - version: 3.1.1 - resolution: "csstype@npm:3.1.1" - checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d +"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1, csstype@npm:^3.1.2": + version: 3.1.2 + resolution: "csstype@npm:3.1.2" + checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5 languageName: node linkType: hard