feat: add eslint rule for top level imports

Signed-off-by: Timothy Deakin <cftad@protonmail.com>

.changeset/fifty-jokes-guess.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Added the `no-top-level-material-ui-4-imports` ESLint rule to aid with the migration to Material UI v5

plugins/catalog-react/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
   rules: {
     'testing-library/prefer-screen-queries': 'error',
+    '@backstage/no-top-level-material-ui-4-imports': 'error',
   },
 });

plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx

@@ -15,16 +15,13 @@
  */
 
 import React, { useState } from 'react';
-import {
-  Box,
-  Button,
-  Drawer,
-  Grid,
-  Theme,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Drawer from '@material-ui/core/Drawer';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { Theme, useTheme } from '@material-ui/core/styles';
 import FilterListIcon from '@material-ui/icons/FilterList';
 
 /** @public */

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx

@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
-import { Box, TextFieldProps, Typography, makeStyles } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import { TextFieldProps } from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { Autocomplete } from '@material-ui/lab';
+import Autocomplete from '@material-ui/lab/Autocomplete';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/esm/useAsync';

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerInput.tsx

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { makeStyles, TextField, TextFieldProps } from '@material-ui/core';
+import TextField, { TextFieldProps } from '@material-ui/core/TextField';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import classnames from 'classnames';
 

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerOption.tsx

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Checkbox, FormControlLabel } from '@material-ui/core';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import React, { memo } from 'react';

plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx

@@ -15,7 +15,9 @@
  */
 
 import { CompoundEntityRef, Entity } from '@backstage/catalog-model';
-import { Box, Theme, Tooltip, makeStyles } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Tooltip from '@material-ui/core/Tooltip';
+import { Theme, makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { useEntityPresentation } from '../../apis';
 

plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx

@@ -16,7 +16,7 @@
 
 import { Select } from '@backstage/core-components';
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import React, { useEffect, useMemo, useState } from 'react';
 import { EntityKindFilter } from '../../filters';
 import { useEntityList } from '../../hooks';

plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { EntityLifecycleFilter } from '../../filters';
 import { EntityAutocompletePicker } from '../EntityAutocompletePicker';

plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.tsx

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

plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx

@@ -19,19 +19,17 @@ import {
   parseEntityRef,
   stringifyEntityRef,
 } from '@backstage/catalog-model';
-import {
-  Box,
-  Checkbox,
-  FormControlLabel,
-  TextField,
-  Typography,
-  makeStyles,
-  Tooltip,
-} 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 Tooltip from '@material-ui/core/Tooltip';
+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 React, { useEffect, useMemo, useState } from 'react';
 import { useEntityList } from '../../hooks/useEntityListProvider';
 import { EntityOwnerFilter } from '../../filters';

plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EmailCardAction.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { IconButton } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
 import EmailIcon from '@material-ui/icons/Email';
 import React from 'react';
 import { Link } from '@backstage/core-components';

plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EntityCardActions.tsx

@@ -15,7 +15,7 @@
  */
 
 import { entityRouteRef } from '../../../routes';
-import { IconButton } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
 import InfoIcon from '@material-ui/icons/Info';
 import React from 'react';
 import { useRouteRef } from '@backstage/core-plugin-api';

plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.test.tsx

@@ -23,7 +23,7 @@ import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils';
 import { catalogApiRef } from '../../api';
 import { Entity } from '@backstage/catalog-model';
 import { CatalogApi } from '@backstage/catalog-client';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import { entityRouteRef } from '../../routes';
 
 const catalogApi: Partial<CatalogApi> = {

plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx

@@ -23,16 +23,14 @@ import {
   bindPopover,
   usePopupState,
 } from 'material-ui-popup-state/hooks';
-import {
-  Box,
-  Card,
-  CardActions,
-  CardContent,
-  Chip,
-  makeStyles,
-  Tooltip,
-  Typography,
-} 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 Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import { useApiHolder } from '@backstage/core-plugin-api';
 import { isGroupEntity, isUserEntity } from '@backstage/catalog-model';
 import { Progress, ResponseErrorPanel } from '@backstage/core-components';

plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx

@@ -15,20 +15,18 @@
  */
 
 import { EntityErrorFilter, EntityOrphanFilter } from '../../filters';
-import {
-  Box,
-  Checkbox,
-  FormControlLabel,
-  makeStyles,
-  TextField,
-  Typography,
-} 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 React, { useState } from 'react';
 import { useEntityList } from '../../hooks';
-import { Autocomplete } from '@material-ui/lab';
+import Autocomplete from '@material-ui/lab/Autocomplete';
 
 /** @public */
 export type CatalogReactEntityProcessingStatusPickerClassKey = 'input';

plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx

@@ -14,14 +14,12 @@
  * limitations under the License.
  */
 
-import {
-  FormControl,
-  IconButton,
-  Input,
-  InputAdornment,
-  makeStyles,
-  Toolbar,
-} from '@material-ui/core';
+import FormControl from '@material-ui/core/FormControl';
+import IconButton from '@material-ui/core/IconButton';
+import Input from '@material-ui/core/Input';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import Toolbar from '@material-ui/core/Toolbar';
+import { makeStyles } from '@material-ui/core/styles';
 import Clear from '@material-ui/icons/Clear';
 import Search from '@material-ui/icons/Search';
 import React, { useEffect, useMemo, useState } from 'react';

plugins/catalog-react/src/components/EntityTable/EntityTable.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import React, { ReactNode } from 'react';
 import { columnFactories } from './columns';
 import { componentEntityColumns, systemEntityColumns } from './presets';

plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { EntityTagFilter } from '../../filters';
 import { EntityAutocompletePicker } from '../EntityAutocompletePicker/EntityAutocompletePicker';

plugins/catalog-react/src/components/EntityTypePicker/EntityTypePicker.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect } from 'react';
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import { useEntityTypeFilter } from '../../hooks/useEntityTypeFilter';
 
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';

plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx

@@ -15,7 +15,9 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { IconButton, Tooltip, withStyles } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import { withStyles } from '@material-ui/core/styles';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import React, { ComponentProps } from 'react';

plugins/catalog-react/src/components/InspectEntityDialog/InspectEntityDialog.tsx

@@ -15,17 +15,15 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  makeStyles,
-  Tab,
-  Tabs,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import { makeStyles } from '@material-ui/core/styles';
 import React, { useEffect } from 'react';
 import { AncestryPage } from './components/AncestryPage';
 import { ColocatedPage } from './components/ColocatedPage';

plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx

@@ -27,7 +27,9 @@ import {
   ResponseErrorPanel,
 } from '@backstage/core-components';
 import { useApi, useApp, useRouteRef } from '@backstage/core-plugin-api';
-import { Box, DialogContentText, makeStyles } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import { makeStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';

plugins/catalog-react/src/components/InspectEntityDialog/components/ColocatedPage.tsx

@@ -22,13 +22,11 @@ import {
 } from '@backstage/catalog-model';
 import { Progress, ResponseErrorPanel } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import {
-  DialogContentText,
-  List,
-  ListItem,
-  makeStyles,
-} from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import { makeStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../../api';

plugins/catalog-react/src/components/InspectEntityDialog/components/JsonPage.tsx

@@ -16,7 +16,7 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { CodeSnippet } from '@backstage/core-components';
-import { DialogContentText } from '@material-ui/core';
+import DialogContentText from '@material-ui/core/DialogContentText';
 import React from 'react';
 import { sortKeys } from './util';
 

plugins/catalog-react/src/components/InspectEntityDialog/components/OverviewPage.tsx

@@ -15,16 +15,14 @@
  */
 
 import { AlphaEntity } from '@backstage/catalog-model/alpha';
-import {
-  Box,
-  DialogContentText,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  makeStyles,
-  Typography,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import groupBy from 'lodash/groupBy';
 import sortBy from 'lodash/sortBy';
 import React from 'react';

plugins/catalog-react/src/components/InspectEntityDialog/components/common.tsx

@@ -15,17 +15,15 @@
  */
 
 import { Link } from '@backstage/core-components';
-import {
-  Box,
-  Card,
-  CardContent,
-  ListItem,
-  ListItemIcon,
-  ListItemText as MuiListItemText,
-  ListSubheader as MuiListSubheader,
-  makeStyles,
-  Typography,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import MuiListItemText from '@material-ui/core/ListItemText';
+import MuiListSubheader from '@material-ui/core/ListSubheader';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import React from 'react';
 

plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.tsx

@@ -16,17 +16,15 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { EntityRefLink } from '../EntityRefLink';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Divider,
-  makeStyles,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Divider from '@material-ui/core/Divider';
+import { makeStyles } from '@material-ui/core/styles';
 import Alert from '@material-ui/lab/Alert';
 import React, { useCallback, useState } from 'react';
 import { useUnregisterEntityDialogState } from './useUnregisterEntityDialogState';

plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx

@@ -19,16 +19,14 @@ import {
   IconComponent,
   useApi,
 } from '@backstage/core-plugin-api';
-import {
-  Card,
-  List,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
-  makeStyles,
-  MenuItem,
-  Typography,
-} from '@material-ui/core';
+import Card from '@material-ui/core/Card';
+import List from '@material-ui/core/List';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import SettingsIcon from '@material-ui/icons/Settings';
 import StarIcon from '@material-ui/icons/Star';
 import React, { Fragment, useEffect, useMemo, useState } from 'react';