From ea75c37c9b5a78358c54d9ff620abfc4d22f0815 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Jerna=C5=9B?= Date: Thu, 10 Oct 2024 11:01:58 +0200 Subject: [PATCH 1/4] chore(material-ui): Don't use top level material-ui imports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This changes the @material-ui imports to not use top level imports in packages/ as per eslint-rules enforced elsewhere. Signed-off-by: Łukasz Jernaś --- .changeset/curvy-bears-nail.md | 5 +++++ packages/app/src/components/Root/LogoFull.tsx | 2 +- packages/app/src/components/Root/Root.tsx | 2 +- packages/app/src/components/search/SearchModal.tsx | 14 ++++++-------- packages/app/src/components/search/SearchPage.tsx | 7 +++++-- .../src/components/Root/LogoIcon.tsx | 2 +- .../src/components/TechDocsPage/TechDocsPage.tsx | 3 ++- packages/theme/report.api.md | 9 +++++---- .../theme/src/unified/UnifiedThemeProvider.tsx | 2 +- packages/theme/src/v4/baseTheme.ts | 10 ++++------ packages/theme/src/v4/types.ts | 2 +- 11 files changed, 32 insertions(+), 26 deletions(-) create mode 100644 .changeset/curvy-bears-nail.md diff --git a/.changeset/curvy-bears-nail.md b/.changeset/curvy-bears-nail.md new file mode 100644 index 0000000000..2fe6479ffc --- /dev/null +++ b/.changeset/curvy-bears-nail.md @@ -0,0 +1,5 @@ +--- +'@backstage/theme': patch +--- + +Don't use top level @material-ui imports diff --git a/packages/app/src/components/Root/LogoFull.tsx b/packages/app/src/components/Root/LogoFull.tsx index c7b1c846c4..da6911bb17 100644 --- a/packages/app/src/components/Root/LogoFull.tsx +++ b/packages/app/src/components/Root/LogoFull.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ svg: { diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index af053f623c..b74c6459d8 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -15,7 +15,7 @@ */ import React, { PropsWithChildren } from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import HomeIcon from '@material-ui/icons/Home'; import RuleIcon from '@material-ui/icons/AssignmentTurnedIn'; import MapIcon from '@material-ui/icons/MyLocation'; diff --git a/packages/app/src/components/search/SearchModal.tsx b/packages/app/src/components/search/SearchModal.tsx index 34caeeae63..0f80d0fc68 100644 --- a/packages/app/src/components/search/SearchModal.tsx +++ b/packages/app/src/components/search/SearchModal.tsx @@ -29,14 +29,12 @@ import { } from '@backstage/plugin-search-react'; import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs'; import { CatalogSearchResultListItem } from '@backstage/plugin-catalog'; -import { - Box, - DialogActions, - DialogContent, - DialogTitle, - Grid, - makeStyles, -} from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 6914fa71cb..be1c49be1b 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -25,8 +25,8 @@ import { import { useApi } from '@backstage/core-plugin-api'; import { CatalogSearchResultListItem } from '@backstage/plugin-catalog'; import { - catalogApiRef, CATALOG_FILTER_EXISTS, + catalogApiRef, } from '@backstage/plugin-catalog-react'; import { SearchType } from '@backstage/plugin-search'; import { @@ -38,7 +38,10 @@ import { useSearch, } from '@backstage/plugin-search-react'; import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs'; -import { Grid, makeStyles, Paper, Theme } from '@material-ui/core'; +import Paper from '@material-ui/core/Paper'; +import Grid from '@material-ui/core/Grid'; +import { Theme } from '@material-ui/core/styles/createTheme'; +import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; const useStyles = makeStyles((theme: Theme) => ({ diff --git a/packages/techdocs-cli-embedded-app/src/components/Root/LogoIcon.tsx b/packages/techdocs-cli-embedded-app/src/components/Root/LogoIcon.tsx index 073cf6edad..ff4b5132b0 100644 --- a/packages/techdocs-cli-embedded-app/src/components/Root/LogoIcon.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/Root/LogoIcon.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ svg: { diff --git a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx index cc20081198..5ad0a10edb 100644 --- a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx @@ -16,7 +16,8 @@ import React, { useState } from 'react'; -import { Theme, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles/createTheme'; import { Box, Tooltip, IconButton } from '@material-ui/core'; import LightIcon from '@material-ui/icons/Brightness7'; diff --git a/packages/theme/report.api.md b/packages/theme/report.api.md index faec0b8456..3882c66f45 100644 --- a/packages/theme/report.api.md +++ b/packages/theme/report.api.md @@ -12,9 +12,10 @@ import { ReactNode } from 'react'; import { Theme } from '@mui/material/styles'; import { Theme as Theme_2 } from '@material-ui/core/styles'; import { Theme as Theme_3 } from '@material-ui/core'; +import type { Theme as Theme_4 } from '@material-ui/core/styles/createTheme'; import { ThemeOptions } from '@mui/material/styles'; import { ThemeOptions as ThemeOptions_2 } from '@material-ui/core/styles'; -import type { ThemeOptions as ThemeOptions_3 } from '@material-ui/core'; +import type { ThemeOptions as ThemeOptions_3 } from '@material-ui/core/styles/createTheme'; import { UnifiedTheme as UnifiedTheme_2 } from '@backstage/theme'; // @public @deprecated @@ -91,7 +92,7 @@ export type BackstagePaletteOptions = PaletteOptions & BackstagePaletteAdditions; // @public @deprecated -export interface BackstageTheme extends Theme_3 { +export interface BackstageTheme extends Theme_4 { // (undocumented) getPageTheme: (selector: PageThemeSelector) => PageTheme; // (undocumented) @@ -188,13 +189,13 @@ export function createBaseThemeOptions( }; // @public @deprecated -export function createTheme(options: SimpleThemeOptions): Theme_3; +export function createTheme(options: SimpleThemeOptions): Theme_4; // @public @deprecated export function createThemeOptions(options: SimpleThemeOptions): ThemeOptions_3; // @public @deprecated -export function createThemeOverrides(theme: Theme_3): Overrides; +export function createThemeOverrides(theme: Theme_4): Overrides; // @public export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme; diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 465a4dda24..e44e5502f3 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -15,7 +15,7 @@ */ import React, { ReactNode } from 'react'; -import { CssBaseline } from '@material-ui/core'; +import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider, StylesProvider, diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index ef63e2a5fa..9f994c6b94 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -16,12 +16,10 @@ import { Theme as Mui5Theme } from '@mui/material/styles'; import { createTheme as createMuiTheme } from '@material-ui/core/styles'; -import type { - GridProps, - SwitchProps, - Theme, - ThemeOptions, -} from '@material-ui/core'; +import type { Theme, ThemeOptions } from '@material-ui/core/styles/createTheme'; +import type { GridProps } from '@material-ui/core/Grid'; +import type { SwitchProps } from '@material-ui/core/Switch'; + import { Overrides } from '@material-ui/core/styles/overrides'; import { SimpleThemeOptions } from './types'; import { createBaseThemeOptions } from '../base'; diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index c5100dab8f..16b18e14bc 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -17,7 +17,7 @@ import type { Theme as MuiTheme, ThemeOptions as MuiThemeOptions, -} from '@material-ui/core'; +} from '@material-ui/core/styles/createTheme'; import type { PaletteOptions as MuiPaletteOptions, Palette as MuiPalette, From 48adc60dd3c1c46d7c158f0d5e781a2e9b444838 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Jerna=C5=9B?= Date: Mon, 21 Oct 2024 12:30:21 +0200 Subject: [PATCH 2/4] chore(material-ui): Remove more top-level @material-ui imports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Łukasz Jernaś --- packages/app/.eslintrc.js | 6 +++++- packages/app/src/components/Root/LogoIcon.jsx | 2 +- .../advancedSettings/AdvancedSettings.tsx | 14 ++++++-------- .../app/src/components/catalog/EntityPage.tsx | 3 ++- .../home/templates/DefaultTemplate.stories.tsx | 16 +++++++++++----- .../scaffolder/customScaffolderExtensions.tsx | 2 +- .../scaffolder/customScaffolderLayouts.tsx | 2 +- packages/techdocs-cli-embedded-app/.eslintrc.js | 6 +++++- .../src/components/Root/LogoFull.tsx | 2 +- .../src/components/Root/Root.tsx | 2 +- .../src/components/TechDocsPage/TechDocsPage.tsx | 4 +++- packages/theme/.eslintrc.js | 6 +++++- 12 files changed, 42 insertions(+), 23 deletions(-) diff --git a/packages/app/.eslintrc.js b/packages/app/.eslintrc.js index e2a53a6ad2..e487f765b2 100644 --- a/packages/app/.eslintrc.js +++ b/packages/app/.eslintrc.js @@ -1 +1,5 @@ -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname); +module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, { + rules: { + '@backstage/no-top-level-material-ui-4-imports': 'error', + }, +}); diff --git a/packages/app/src/components/Root/LogoIcon.jsx b/packages/app/src/components/Root/LogoIcon.jsx index 5ec778cca2..966b491674 100644 --- a/packages/app/src/components/Root/LogoIcon.jsx +++ b/packages/app/src/components/Root/LogoIcon.jsx @@ -17,7 +17,7 @@ // NOTE: This file is intentionally .jsx, so that there is one file in this repo where we make sure .jsx files work. import React from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ svg: { diff --git a/packages/app/src/components/advancedSettings/AdvancedSettings.tsx b/packages/app/src/components/advancedSettings/AdvancedSettings.tsx index 574f7ec754..3383198a1f 100644 --- a/packages/app/src/components/advancedSettings/AdvancedSettings.tsx +++ b/packages/app/src/components/advancedSettings/AdvancedSettings.tsx @@ -16,14 +16,12 @@ import React from 'react'; import { InfoCard } from '@backstage/core-components'; -import { - List, - Grid, - ListItem, - ListItemText, - ListItemSecondaryAction, - Switch, -} from '@material-ui/core'; +import List from '@material-ui/core/List'; +import Grid from '@material-ui/core/Grid'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import Switch from '@material-ui/core/Switch'; import useLocalStorage from 'react-use/esm/useLocalStorage'; export function AdvancedSettings() { diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index 586c793a4f..fe5a7e0ace 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -70,7 +70,8 @@ import { EntityOwnershipCard, EntityUserProfileCard, } from '@backstage/plugin-org'; -import { Button, Grid } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Grid from '@material-ui/core/Grid'; import React, { ReactNode } from 'react'; import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; import { diff --git a/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx b/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx index cb3d684389..f16f98f9af 100644 --- a/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx +++ b/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx @@ -37,7 +37,8 @@ import { searchApiRef, SearchContextProvider, } from '@backstage/plugin-search-react'; -import { Grid, makeStyles } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles } from '@material-ui/core/styles'; import React, { ComponentType, PropsWithChildren } from 'react'; const entities = [ @@ -126,8 +127,8 @@ const useStyles = makeStyles(theme => ({ boxShadow: theme.shadows[1], }, searchBarOutline: { - borderStyle: 'none' - } + borderStyle: 'none', + }, })); const useLogoStyles = makeStyles(theme => ({ @@ -156,9 +157,14 @@ export const DefaultTemplate = () => { className={container} logo={} /> - + diff --git a/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx b/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx index e236e01d79..953420c3e6 100644 --- a/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx +++ b/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx @@ -16,7 +16,7 @@ import React from 'react'; import type { FieldValidation } from '@rjsf/utils'; import { scaffolderPlugin } from '@backstage/plugin-scaffolder'; -import { TextField } from '@material-ui/core'; +import TextField from '@material-ui/core/TextField'; import { createScaffolderFieldExtension, FieldExtensionComponentProps, diff --git a/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx b/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx index b23d6e4073..d05635314f 100644 --- a/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx +++ b/packages/app/src/components/scaffolder/customScaffolderLayouts.tsx @@ -19,7 +19,7 @@ import { LayoutTemplate, scaffolderPlugin, } from '@backstage/plugin-scaffolder'; -import { Grid } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; const TwoColumn: LayoutTemplate = ({ properties, description, title }) => { const mid = Math.ceil(properties.length / 2); diff --git a/packages/techdocs-cli-embedded-app/.eslintrc.js b/packages/techdocs-cli-embedded-app/.eslintrc.js index e2a53a6ad2..e487f765b2 100644 --- a/packages/techdocs-cli-embedded-app/.eslintrc.js +++ b/packages/techdocs-cli-embedded-app/.eslintrc.js @@ -1 +1,5 @@ -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname); +module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, { + rules: { + '@backstage/no-top-level-material-ui-4-imports': 'error', + }, +}); diff --git a/packages/techdocs-cli-embedded-app/src/components/Root/LogoFull.tsx b/packages/techdocs-cli-embedded-app/src/components/Root/LogoFull.tsx index c7b1c846c4..da6911bb17 100644 --- a/packages/techdocs-cli-embedded-app/src/components/Root/LogoFull.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/Root/LogoFull.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ svg: { diff --git a/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx b/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx index 81e3d12d9d..b2fac4081f 100644 --- a/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx @@ -16,7 +16,7 @@ import React, { PropsWithChildren } from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import LibraryBooks from '@material-ui/icons/LibraryBooks'; import LogoFull from './LogoFull'; import LogoIcon from './LogoIcon'; diff --git a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx index 5ad0a10edb..5dc635e023 100644 --- a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx @@ -19,7 +19,9 @@ import React, { useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Theme } from '@material-ui/core/styles/createTheme'; -import { Box, Tooltip, IconButton } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Tooltip from '@material-ui/core/Tooltip'; +import IconButton from '@material-ui/core/IconButton'; import LightIcon from '@material-ui/icons/Brightness7'; import DarkIcon from '@material-ui/icons/Brightness4'; diff --git a/packages/theme/.eslintrc.js b/packages/theme/.eslintrc.js index e2a53a6ad2..e487f765b2 100644 --- a/packages/theme/.eslintrc.js +++ b/packages/theme/.eslintrc.js @@ -1 +1,5 @@ -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname); +module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, { + rules: { + '@backstage/no-top-level-material-ui-4-imports': 'error', + }, +}); From 1170bb60cb69990e35711287aaa0d68612d6c9a7 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Wed, 23 Oct 2024 14:02:23 +0200 Subject: [PATCH 3/4] Update .changeset/curvy-bears-nail.md Signed-off-by: Vincenzo Scamporlino --- .changeset/curvy-bears-nail.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/curvy-bears-nail.md b/.changeset/curvy-bears-nail.md index 2fe6479ffc..58b6ec9dd6 100644 --- a/.changeset/curvy-bears-nail.md +++ b/.changeset/curvy-bears-nail.md @@ -2,4 +2,4 @@ '@backstage/theme': patch --- -Don't use top level @material-ui imports +Added the `no-top-level-material-ui-4-imports` ESLint rule to aid with the migration to Material UI v5 From 4b6e08cfcbb0d060cee1d2a681965468666f6521 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 28 Oct 2024 10:18:09 +0100 Subject: [PATCH 4/4] Update .changeset/curvy-bears-nail.md Signed-off-by: Patrik Oldsberg --- .changeset/curvy-bears-nail.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/curvy-bears-nail.md b/.changeset/curvy-bears-nail.md index 58b6ec9dd6..d0bdd51401 100644 --- a/.changeset/curvy-bears-nail.md +++ b/.changeset/curvy-bears-nail.md @@ -2,4 +2,4 @@ '@backstage/theme': patch --- -Added the `no-top-level-material-ui-4-imports` ESLint rule to aid with the migration to Material UI v5 +Internal refactor to avoid top-level imports from MUI.