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

Add ESLint Rule to Catalog Graph Plugin

.changeset/weak-vans-heal.md

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

plugins/catalog-graph/.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-graph/dev/index.tsx

@@ -43,7 +43,7 @@ import {
   EntityProvider,
 } from '@backstage/plugin-catalog-react';
 import { JsonObject } from '@backstage/types';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import _ from 'lodash';
 import React from 'react';
 import {

plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx

@@ -26,7 +26,7 @@ import {
   useEntity,
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
-import { makeStyles, Theme } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import qs from 'qs';
 import React, { MouseEvent, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';

plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx

@@ -27,10 +27,13 @@ import {
   entityRouteRef,
   humanizeEntityRef,
 } from '@backstage/plugin-catalog-react';
-import { Grid, makeStyles, Paper, Typography } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import FilterListIcon from '@material-ui/icons/FilterList';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
-import { ToggleButton } from '@material-ui/lab';
+import ToggleButton from '@material-ui/lab/ToggleButton';
 import React, { MouseEvent, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {

plugins/catalog-graph/src/components/CatalogGraphPage/CurveFilter.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Select, SelectedItems } from '@backstage/core-components';
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import React, { useCallback } from 'react';
 
 type Curve = 'curveStepBefore' | 'curveMonotoneX';

plugins/catalog-graph/src/components/CatalogGraphPage/DirectionFilter.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Select, SelectedItems } from '@backstage/core-components';
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import React, { useCallback } from 'react';
 import { Direction } from '../EntityRelationsGraph';
 

plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.tsx

@@ -13,15 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  Box,
-  FormControl,
-  IconButton,
-  InputAdornment,
-  makeStyles,
-  OutlinedInput,
-  Typography,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import FormControl from '@material-ui/core/FormControl';
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import ClearIcon from '@material-ui/icons/Clear';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 

plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.tsx

@@ -15,18 +15,16 @@
  */
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
-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 { Autocomplete } from '@material-ui/lab';
+import Autocomplete from '@material-ui/lab/Autocomplete';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 

plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.tsx

@@ -13,18 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-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 { Autocomplete } from '@material-ui/lab';
+import Autocomplete from '@material-ui/lab/Autocomplete';
 import React, { useCallback, useMemo } from 'react';
 import { RelationPairs } from '../EntityRelationsGraph';
 

plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.tsx

@@ -13,7 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Box, FormControlLabel, makeStyles, Switch } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import { makeStyles } from '@material-ui/core/styles';
 import React, { useCallback } from 'react';
 
 export type Props = {

plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx

@@ -23,7 +23,8 @@ import {
   DependencyGraphTypes,
 } from '@backstage/core-components';
 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
-import { CircularProgress, makeStyles, useTheme } from '@material-ui/core';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import React, { MouseEvent, useEffect, useMemo } from 'react';
 import { DefaultRenderLabel } from './DefaultRenderLabel';