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

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

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

@@ -22,7 +22,7 @@ import { Readme } from '@backstage/plugin-azure-devops-common';
 import { ReadmeConfig } from '@backstage/plugin-azure-devops-common';
 import { RepoBuild } from '@backstage/plugin-azure-devops-common';
 import { RepoBuildOptions } from '@backstage/plugin-azure-devops-common';
-import { SvgIconProps } from '@material-ui/core';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import { Team } from '@backstage/plugin-azure-devops-common';
 
 // @public (undocumented)

plugins/azure-devops/src/components/AzureGitTagsIcon/AzureGitTagsIcon.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/azure-devops/src/components/AzurePipelinesIcon/AzurePipelinesIcon.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/azure-devops/src/components/AzurePullRequestsIcon/AzurePullRequestsIcon.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { SvgIcon, SvgIconProps } from '@material-ui/core';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
 
 /** @public */
 export const AzurePullRequestsIcon = (props: SvgIconProps) => (

plugins/azure-devops/src/components/BuildTable/BuildTable.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import {
   BuildResult,
   BuildRun,

plugins/azure-devops/src/components/GitTagTable/GitTagTable.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import {
   Link,
   ResponseErrorPanel,

plugins/azure-devops/src/components/PullRequestStatusButtonGroup/PullRequestStatusButtonGroup.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
 
 import { PullRequestStatus } from '@backstage/plugin-azure-devops-common';
 import React from 'react';

plugins/azure-devops/src/components/PullRequestTable/PullRequestTable.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Box, Chip } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Chip from '@material-ui/core/Chip';
 import {
   Link,
   ResponseErrorPanel,

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx

@@ -15,7 +15,9 @@
  */
 
 import { Avatar, Link } from '@backstage/core-components';
-import { Card, CardContent, CardHeader } from '@material-ui/core';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardHeader from '@material-ui/core/CardHeader';
 import Typography from '@material-ui/core/Typography';
 
 import { AutoCompleteIcon } from '../AutoCompleteIcon';

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/PullRequestGrid.tsx

@@ -17,7 +17,7 @@
 import { PullRequestGridColumn } from '../PullRequestGridColumn';
 import { PullRequestGroup } from '../types';
 import React from 'react';
-import { styled } from '@material-ui/core';
+import { styled } from '@material-ui/core/styles';
 
 const GridDiv = styled('div')(({ theme }) => ({
   display: 'flex',

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGridColumn/PullRequestGridColumn.tsx

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import { Paper, Typography, styled, withStyles } from '@material-ui/core';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import { styled, withStyles } from '@material-ui/core/styles';
 
 import { PullRequestCard } from '../PullRequestCard';
 import { PullRequestGroup } from '../types';

plugins/azure-devops/src/components/ReadmeCard/ReadmeCard.tsx

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import { Box, Button, makeStyles } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
 import {
   InfoCard,
   Progress,

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 */

plugins/linguist/.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/linguist/src/components/LinguistCard/LinguistCard.tsx

@@ -14,15 +14,12 @@
  * limitations under the License.
  */
 
-import {
-  Box,
-  Chip,
-  Tooltip,
-  Typography,
-  makeStyles,
-  Grid,
-  useTheme,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Chip from '@material-ui/core/Chip';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { InfoCard, Progress } from '@backstage/core-components';
 import Alert from '@material-ui/lab/Alert';
 import { DateTime } from 'luxon';