From 0e692cf4227d4a03a81981979669935e945665ca Mon Sep 17 00:00:00 2001 From: Juan Pablo Garcia Ripa Date: Sat, 13 Apr 2024 21:38:00 +0200 Subject: [PATCH] add mui imports eslint rule Signed-off-by: Juan Pablo Garcia Ripa --- .changeset/rotten-cameras-leave.md | 5 +++++ plugins/scaffolder-react/.eslintrc.js | 6 +++++- .../Form/DescriptionFieldTemplate.tsx | 3 ++- .../ScaffolderField/ScaffolderField.tsx | 3 ++- .../ErrorListTemplate/errorListTemplate.tsx | 16 ++++++-------- .../src/next/components/Stepper/Stepper.tsx | 14 ++++++------- .../next/components/TaskSteps/StepIcon.tsx | 4 +++- .../next/components/TaskSteps/StepTime.tsx | 2 +- .../next/components/TaskSteps/TaskBorder.tsx | 3 ++- .../next/components/TaskSteps/TaskSteps.tsx | 16 +++++++------- .../TemplateCard/CardHeader.test.tsx | 2 +- .../components/TemplateCard/CardHeader.tsx | 2 +- .../next/components/TemplateCard/CardLink.tsx | 2 +- .../components/TemplateCard/TemplateCard.tsx | 21 ++++++++----------- .../TemplateCategoryPicker.tsx | 16 +++++++------- .../TemplateGroups/TemplateGroups.tsx | 2 +- .../DefaultTemplateOutputs.tsx | 3 ++- .../TemplateOutputs/LinkOutputs.tsx | 3 ++- .../TemplateOutputs/TextOutputs.tsx | 2 +- .../src/next/components/Workflow/Workflow.tsx | 2 +- 20 files changed, 65 insertions(+), 62 deletions(-) create mode 100644 .changeset/rotten-cameras-leave.md diff --git a/.changeset/rotten-cameras-leave.md b/.changeset/rotten-cameras-leave.md new file mode 100644 index 0000000000..bd702eebca --- /dev/null +++ b/.changeset/rotten-cameras-leave.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Added ESLint rule `no-top-level-material-ui-4-imports` to migrate the Material UI imports. diff --git a/plugins/scaffolder-react/.eslintrc.js b/plugins/scaffolder-react/.eslintrc.js index e2a53a6ad2..e487f765b2 100644 --- a/plugins/scaffolder-react/.eslintrc.js +++ b/plugins/scaffolder-react/.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/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx b/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx index 4c86ef0c62..7731cac3f8 100644 --- a/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx +++ b/plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx @@ -16,7 +16,8 @@ import React from 'react'; import { MarkdownContent } from '@backstage/core-components'; -import { makeStyles, Typography } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import { DescriptionFieldProps, FormContextType, diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderField/ScaffolderField.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderField/ScaffolderField.tsx index da233eeba0..1bb1656fd0 100644 --- a/plugins/scaffolder-react/src/next/components/ScaffolderField/ScaffolderField.tsx +++ b/plugins/scaffolder-react/src/next/components/ScaffolderField/ScaffolderField.tsx @@ -16,7 +16,8 @@ import React, { PropsWithChildren, ReactElement } from 'react'; import { MarkdownContent } from '@backstage/core-components'; -import { FormControl, makeStyles } from '@material-ui/core'; +import FormControl from '@material-ui/core/FormControl'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ markdownDescription: { diff --git a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx index 9b6920108b..a5310a5806 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/ErrorListTemplate/errorListTemplate.tsx @@ -15,16 +15,12 @@ */ import React from 'react'; import { ErrorListProps } from '@rjsf/utils'; -import { - List, - ListItem, - ListItemIcon, - ListItemText, - Paper, - Theme, - createStyles, - makeStyles, -} from '@material-ui/core'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import Paper from '@material-ui/core/Paper'; +import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'; import ErrorIcon from '@material-ui/icons/Error'; const useStyles = makeStyles((_theme: Theme) => diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index d0ce60fd79..62effbd14a 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -15,14 +15,12 @@ */ import { useAnalytics, useApiHolder } from '@backstage/core-plugin-api'; import { JsonValue } from '@backstage/types'; -import { - Stepper as MuiStepper, - Step as MuiStep, - StepLabel as MuiStepLabel, - Button, - makeStyles, - LinearProgress, -} from '@material-ui/core'; +import MuiStepper from '@material-ui/core/Stepper'; +import MuiStep from '@material-ui/core/Step'; +import MuiStepLabel from '@material-ui/core/StepLabel'; +import Button from '@material-ui/core/Button'; +import LinearProgress from '@material-ui/core/LinearProgress'; +import { makeStyles } from '@material-ui/core/styles'; import { type IChangeEvent } from '@rjsf/core'; import { ErrorSchema } from '@rjsf/utils'; import React, { diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx index 58f2eb9050..c397b09a52 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; -import { CircularProgress, makeStyles, StepIconProps } from '@material-ui/core'; +import CircularProgress from '@material-ui/core/CircularProgress'; +import { StepIconProps } from '@material-ui/core/StepIcon'; +import { makeStyles } from '@material-ui/core/styles'; import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline'; import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye'; import classNames from 'classnames'; diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx index 14c347fda8..ab236965c2 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx @@ -17,7 +17,7 @@ import React, { useCallback, useState } from 'react'; import useInterval from 'react-use/esm/useInterval'; import { DateTime, Interval } from 'luxon'; import humanizeDuration from 'humanize-duration'; -import { Typography } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; import { useMountEffect } from '@react-hookz/web'; export const StepTime = (props: { diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx index d7a96e3864..a33cdad49e 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx @@ -15,7 +15,8 @@ */ import React from 'react'; -import { LinearProgress, makeStyles } from '@material-ui/core'; +import LinearProgress from '@material-ui/core/LinearProgress'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ failed: { diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx index d74d298778..b391e6fce8 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx @@ -14,15 +14,13 @@ * limitations under the License. */ import React from 'react'; -import { - Stepper as MuiStepper, - Step as MuiStep, - StepButton as MuiStepButton, - StepLabel as MuiStepLabel, - StepIconProps, - Box, - Paper, -} from '@material-ui/core'; +import MuiStepper from '@material-ui/core/Stepper'; +import MuiStep from '@material-ui/core/Step'; +import MuiStepButton from '@material-ui/core/StepButton'; +import MuiStepLabel from '@material-ui/core/StepLabel'; +import { StepIconProps } from '@material-ui/core/StepIcon'; +import Box from '@material-ui/core/Box'; +import Paper from '@material-ui/core/Paper'; import { TaskStep } from '@backstage/plugin-scaffolder-common'; import { StepIcon } from './StepIcon'; import { StepTime } from './StepTime'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.test.tsx index 287d813ca7..5aa138340e 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { fireEvent, render } from '@testing-library/react'; import { CardHeader } from './CardHeader'; -import { ThemeProvider } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core/styles'; import { lightTheme } from '@backstage/theme'; import { MockStorageApi, diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx index 1180c8f106..467d26ce76 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { Theme, makeStyles, useTheme } from '@material-ui/core'; +import { Theme, makeStyles, useTheme } from '@material-ui/core/styles'; import { ItemCardHeader } from '@backstage/core-components'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { FavoriteEntity } from '@backstage/plugin-catalog-react'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx index 839d6c7ac1..263a1356b7 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx @@ -16,7 +16,7 @@ import { IconComponent } from '@backstage/core-plugin-api'; import { Link } from '@backstage/core-components'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; interface CardLinkProps { diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index 2d8ff1e458..4fb2ca0e4a 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -22,18 +22,15 @@ import { getEntityRelations, } from '@backstage/plugin-catalog-react'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; -import { - Box, - Card, - CardActions, - CardContent, - Chip, - Divider, - Button, - Grid, - makeStyles, - Theme, -} from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; +import Chip from '@material-ui/core/Chip'; +import Divider from '@material-ui/core/Divider'; +import Button from '@material-ui/core/Button'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles, Theme } from '@material-ui/core/styles'; import LanguageIcon from '@material-ui/icons/Language'; import React from 'react'; import { CardHeader } from './CardHeader'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx index 9c85cacfc2..24f8a21109 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx @@ -17,18 +17,16 @@ import React from 'react'; import capitalize from 'lodash/capitalize'; import { Progress } from '@backstage/core-components'; -import { - Box, - Checkbox, - FormControlLabel, - TextField, - Typography, - makeStyles, -} from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Checkbox from '@material-ui/core/Checkbox'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import TextField from '@material-ui/core/TextField'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { Autocomplete } from '@material-ui/lab'; +import Autocomplete from '@material-ui/lab/Autocomplete'; import { useEntityTypeFilter } from '@backstage/plugin-catalog-react'; import { alertApiRef, useApi } from '@backstage/core-plugin-api'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx index 800ec67a16..a180ff0e8c 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx @@ -21,7 +21,7 @@ import { TemplateEntityV1beta3, } from '@backstage/plugin-scaffolder-common'; import { Progress, Link } from '@backstage/core-components'; -import { Typography } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; import { errorApiRef, IconComponent, useApi } from '@backstage/core-plugin-api'; import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react'; import { TemplateGroup } from '../TemplateGroup/TemplateGroup'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx index d3811e5011..7d90623077 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx @@ -18,7 +18,8 @@ import { ScaffolderOutputText, ScaffolderTaskOutput, } from '@backstage/plugin-scaffolder-react'; -import { Box, Paper } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Paper from '@material-ui/core/Paper'; import React, { useEffect, useMemo, useState } from 'react'; import { LinkOutputs } from './LinkOutputs'; import { TextOutputs } from './TextOutputs'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx index 7877653197..59c6c6a49a 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/LinkOutputs.tsx @@ -15,7 +15,8 @@ */ import { IconComponent, useApp, useRouteRef } from '@backstage/core-plugin-api'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; -import { Button, makeStyles } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; import LinkIcon from '@material-ui/icons/Link'; import { parseEntityRef } from '@backstage/catalog-model'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx index 74a5eabb8f..5da1dab476 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/TextOutputs.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import { IconComponent, useApp } from '@backstage/core-plugin-api'; -import { Button } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import DescriptionIcon from '@material-ui/icons/Description'; import React from 'react'; import { ScaffolderTaskOutput } from '../../../api'; diff --git a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx index e16af5abb9..9afc18c438 100644 --- a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx +++ b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx @@ -22,7 +22,7 @@ import { Progress, } from '@backstage/core-components'; import { stringifyEntityRef } from '@backstage/catalog-model'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { errorApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api'; import { useTemplateParameterSchema } from '../../hooks/useTemplateParameterSchema'; import { Stepper, type StepperProps } from '../Stepper/Stepper';