Merge pull request #21979 from awanlin/topic/mui-4-rule

Added new @backstage/no-top-level-material-ui-4-imports rule

plugins/devtools/.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/devtools/api-report.md

@@ -10,7 +10,7 @@ import { default as default_2 } from 'react';
 import { JSX as JSX_2 } from 'react';
 import { default as React_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
-import { TabProps } from '@material-ui/core';
+import { TabProps } from '@material-ui/core/Tab';
 
 // @public (undocumented)
 export const ConfigContent: () => React_2.JSX.Element;

plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx

@@ -15,16 +15,16 @@
  */
 
 import { Progress, WarningPanel } from '@backstage/core-components';
+import Box from '@material-ui/core/Box';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
 import {
-  Box,
   createStyles,
   makeStyles,
-  Paper,
   Theme,
-  Typography,
   useTheme,
-} from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+} from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import ReactJson from 'react-json-view';
 import { useConfig } from '../../../hooks';

plugins/devtools/src/components/Content/ExternalDependenciesContent/ExternalDependenciesContent.tsx

@@ -23,16 +23,12 @@ import {
   TableColumn,
 } from '@backstage/core-components';
 import { ExternalDependency } from '@backstage/plugin-devtools-common';
-import {
-  Box,
-  createStyles,
-  Grid,
-  makeStyles,
-  Paper,
-  Theme,
-  Typography,
-} from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import { useExternalDependencies } from '../../../hooks';
 

plugins/devtools/src/components/Content/InfoContent/BackstageLogoIcon.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { SvgIcon, SvgIconProps } from '@material-ui/core';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
 
 import React from 'react';
 

plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx

@@ -15,20 +15,16 @@
  */
 
 import { Progress } from '@backstage/core-components';
-import {
-  Avatar,
-  Box,
-  createStyles,
-  Divider,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  makeStyles,
-  Paper,
-  Theme,
-} from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import Avatar from '@material-ui/core/Avatar';
+import Box from '@material-ui/core/Box';
+import Divider from '@material-ui/core/Divider';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemText from '@material-ui/core/ListItemText';
+import Paper from '@material-ui/core/Paper';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import { useInfo } from '../../../hooks';
 import { InfoDependenciesTable } from './InfoDependenciesTable';

plugins/devtools/src/components/DevToolsLayout/DevToolsLayout.tsx

@@ -19,7 +19,7 @@ import {
   attachComponentData,
   useElementFilter,
 } from '@backstage/core-plugin-api';
-import { TabProps } from '@material-ui/core';
+import { TabProps } from '@material-ui/core/Tab';
 import { default as React } from 'react';
 
 /** @public */