From 5065a5e8ebd6227febd3ae49cf791e25b37ebff5 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Wed, 31 May 2023 20:57:29 +0200 Subject: [PATCH 1/3] theme: avoid jss class name conflict Signed-off-by: Patrik Oldsberg --- .changeset/hot-apples-cross.md | 5 +++++ .../theme/src/unified/UnifiedThemeProvider.tsx | 18 ++++++++++++++++-- 2 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 .changeset/hot-apples-cross.md diff --git a/.changeset/hot-apples-cross.md b/.changeset/hot-apples-cross.md new file mode 100644 index 0000000000..3284c0ca8f --- /dev/null +++ b/.changeset/hot-apples-cross.md @@ -0,0 +1,5 @@ +--- +'@backstage/theme': patch +--- + +Tweaked `UnifiedThemeProvider` to avoid overlapping JSS class names in production. diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index c7054e0e55..41605aee62 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -16,7 +16,11 @@ import React, { ReactNode } from 'react'; import './MuiClassNameSetup'; -import { ThemeProvider } from '@material-ui/core/styles'; +import { + ThemeProvider, + StylesProvider, + createGenerateClassName, +} from '@material-ui/core/styles'; import { StyledEngineProvider, ThemeProvider as Mui5Provider, @@ -35,6 +39,12 @@ export interface UnifiedThemeProviderProps { noCssBaseline?: boolean; } +// See https://mui.com/x/migration/migration-data-grid-v4/#using-mui-core-v4-with-v5 +const generateV4ClassName = createGenerateClassName({ + disableGlobal: true, + seed: 'mui', // using a slightly shorter prefix than suggested in the docs +}); + /** * Provides themes for all MUI versions supported by the provided unified theme. * @@ -61,7 +71,11 @@ export function UnifiedThemeProvider( ); if (v4Theme) { - result = {result}; + result = ( + + {result} + + ); } if (v5Theme) { From a3837df57d17a5fd41d1212c124d0bd00bbdd89b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 6 Jun 2023 11:36:58 +0200 Subject: [PATCH 2/3] theme: switch strategy for avoiding jss class conflict Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/UnifiedThemeProvider.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 41605aee62..613f89d5e0 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -39,10 +39,12 @@ export interface UnifiedThemeProviderProps { noCssBaseline?: boolean; } -// See https://mui.com/x/migration/migration-data-grid-v4/#using-mui-core-v4-with-v5 +// Background at https://mui.com/x/migration/migration-data-grid-v4/#using-mui-core-v4-with-v5 +// Rather than disabling globals and custom seed, we instead only set a production prefix that +// won't collide with MUI 5 styles. We've already got a separate class name generator for v5 set +// up in MuiClassNameSetup.ts, so only the production JSS needs deduplication. const generateV4ClassName = createGenerateClassName({ - disableGlobal: true, - seed: 'mui', // using a slightly shorter prefix than suggested in the docs + productionPrefix: 'jss4-', }); /** From bbdd277e73074ce59c4b9a13259989a8717c0ffb Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 6 Jun 2023 12:48:16 +0200 Subject: [PATCH 3/3] search-react: fix SearchResultPager useSearch mock to allow rerender Signed-off-by: Patrik Oldsberg --- .../src/components/SearchResultPager/SearchResultPager.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx index 2508604ca9..2a22689285 100644 --- a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx +++ b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx @@ -34,7 +34,7 @@ describe('SearchResultPager', () => { it('renders pager buttons', async () => { const fetchNextPage = jest.fn(); const fetchPreviousPage = jest.fn(); - (useSearch as jest.Mock).mockReturnValueOnce({ + (useSearch as jest.Mock).mockReturnValue({ result: { loading: false, value: [] }, fetchNextPage, fetchPreviousPage,