Merge pull request #23547 from cftad/plugin-catalog-mui-imports

Add ESLint Rule to Catalog Plugin

.changeset/perfect-buses-burn.md

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

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

@@ -36,7 +36,7 @@ import { StyleRules } from '@material-ui/core/styles/withStyles';
 import { TableColumn } from '@backstage/core-components';
 import { TableOptions } from '@backstage/core-components';
 import { TableProps } from '@backstage/core-components';
-import { TabProps } from '@material-ui/core';
+import { TabProps } from '@material-ui/core/Tab';
 import { UserListFilterKind } from '@backstage/plugin-catalog-react';
 
 // @public

plugins/catalog/src/components/AboutCard/AboutCard.tsx

@@ -20,14 +20,12 @@ import {
   DEFAULT_NAMESPACE,
   stringifyEntityRef,
 } from '@backstage/catalog-model';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Divider,
-  IconButton,
-  makeStyles,
-} 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 Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import { makeStyles } from '@material-ui/core/styles';
 import {
   HeaderIconLinkRow,
   IconLinkVerticalProps,

plugins/catalog/src/components/AboutCard/AboutContent.tsx

@@ -25,7 +25,9 @@ import {
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
 import { JsonArray } from '@backstage/types';
-import { Chip, Grid, makeStyles } from '@material-ui/core';
+import Chip from '@material-ui/core/Chip';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 import { MarkdownContent } from '@backstage/core-components';
 import React from 'react';
 import { AboutField } from './AboutField';

plugins/catalog/src/components/AboutCard/AboutField.tsx

@@ -15,7 +15,9 @@
  */
 
 import { useElementFilter } from '@backstage/core-plugin-api';
-import { Grid, makeStyles, Typography } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 const useStyles = makeStyles(theme => ({

plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx

@@ -15,14 +15,10 @@
  */
 
 import React, { useEffect, useState, useMemo } from 'react';
-import {
-  createStyles,
-  InputBase,
-  makeStyles,
-  MenuItem,
-  Select,
-  Theme,
-} from '@material-ui/core';
+import InputBase from '@material-ui/core/InputBase';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import {
   EntityKindFilter,
   useEntityList,

plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx

@@ -15,14 +15,12 @@
  */
 
 import React, { ReactNode } from 'react';
-import {
-  Box,
-  Chip,
-  ListItemIcon,
-  ListItemText,
-  Typography,
-  makeStyles,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Chip from '@material-ui/core/Chip';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import { Link } from '@backstage/core-components';
 import {
   IndexableDocument,

plugins/catalog/src/components/CatalogTable/columns.tsx

@@ -19,7 +19,7 @@ import {
   EntityRefLink,
   EntityRefLinks,
 } from '@backstage/plugin-catalog-react';
-import { Chip } from '@material-ui/core';
+import Chip from '@material-ui/core/Chip';
 import { CatalogTableRow } from './types';
 import { OverflowTooltip, TableColumn } from '@backstage/core-components';
 import { Entity } from '@backstage/catalog-model';

plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx

@@ -14,16 +14,14 @@
  * limitations under the License.
  */
 
-import {
-  Divider,
-  IconButton,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-  MenuList,
-  Popover,
-  Tooltip,
-} from '@material-ui/core';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import Popover from '@material-ui/core/Popover';
+import Tooltip from '@material-ui/core/Tooltip';
 import { Theme, makeStyles } from '@material-ui/core/styles';
 import BugReportIcon from '@material-ui/icons/BugReport';
 import MoreVert from '@material-ui/icons/MoreVert';

plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx

@@ -15,7 +15,9 @@
  */
 
 import React from 'react';
-import { ListItemIcon, ListItemText, MenuItem } from '@material-ui/core';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
 import CancelIcon from '@material-ui/icons/Cancel';
 
 type VisibleType = 'visible' | 'hidden' | 'disable';

plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx

@@ -23,7 +23,8 @@ import {
   TableColumn,
 } from '@backstage/core-components';
 import { EntityLabelsEmptyState } from './EntityLabelsEmptyState';
-import { makeStyles, Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 
 /** @public */
 export interface EntityLabelsCardProps {

plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import { Button, makeStyles, Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { CodeSnippet } from '@backstage/core-components';
 

plugins/catalog/src/components/EntityLayout/EntityLayout.tsx

@@ -46,8 +46,9 @@ import {
   UnregisterEntityDialog,
   useAsyncEntity,
 } from '@backstage/plugin-catalog-react';
-import { Box, TabProps } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import Box from '@material-ui/core/Box';
+import { TabProps } from '@material-ui/core/Tab';
+import Alert from '@material-ui/lab/Alert';
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';

plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import { Button, makeStyles, Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { CodeSnippet } from '@backstage/core-components';
 

plugins/catalog/src/components/EntityLinksCard/IconLink.tsx

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import { makeStyles, Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import LanguageIcon from '@material-ui/icons/Language';
 import React from 'react';
 import { Link } from '@backstage/core-components';

plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { ImageList, ImageListItem } from '@material-ui/core';
+import ImageList from '@material-ui/core/ImageList';
+import ImageListItem from '@material-ui/core/ImageListItem';
 import React from 'react';
 import { IconLink } from './IconLink';
 import { ColumnBreakpoints } from './types';

plugins/catalog/src/components/EntityLinksCard/useDynamicColumns.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Theme, useMediaQuery } from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { Theme } from '@material-ui/core/styles';
 import { Breakpoint, ColumnBreakpoints } from './types';
 
 const colDefaults: ColumnBreakpoints = {

plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx

@@ -15,7 +15,9 @@
  */
 
 import React from 'react';
-import { Grid, Button, Typography } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import { Illo } from './Illo';
 

plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import IlloSvgUrl from './illo.svg';
 
 const useStyles = makeStyles(theme => ({

plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.tsx

@@ -16,7 +16,10 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import { Button, Dialog, DialogActions, DialogTitle } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogTitle from '@material-ui/core/DialogTitle';
 import React, { useState } from 'react';
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 import { assertError } from '@backstage/errors';

plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.tsx

@@ -16,7 +16,7 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { DeleteEntityDialog } from './DeleteEntityDialog';

plugins/catalog/src/components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.tsx

@@ -21,7 +21,7 @@ import {
   EntityRefLink,
   useEntity,
 } from '@backstage/plugin-catalog-react';
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import React from 'react';
 import { ResponseErrorPanel } from '@backstage/core-components';
 import {

plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.tsx

@@ -20,10 +20,10 @@ import {
   catalogApiRef,
   useEntity,
 } from '@backstage/plugin-catalog-react';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import { ResponseErrorPanel } from '@backstage/core-components';
 import { useApi, ApiHolder } from '@backstage/core-plugin-api';
 

plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import {
   EntityTable,
   useEntity,

plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx

@@ -29,7 +29,9 @@ import {
   getEntityRelations,
   useEntity,
 } from '@backstage/plugin-catalog-react';
-import { Box, makeStyles, Typography, useTheme } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';