add mui imports eslint rule

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>

.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.

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',
+  },
+});

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,

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: {

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) =>

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, {

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';

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: {

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: {

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';

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,

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';

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 {

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';

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';
 

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';

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';

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';

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';

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';