Added Material UI 4 import rule to plugins/explore

Signed-off-by: Aditya Kumar <aditya.kumar60@infosys.com>

.changeset/fluffy-rocks-confess.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Added an optional ESLint rule - no-top-level-material-ui-4-imports -in explore plugin which has an auto fix function to migrate the imports and used it to migrate the Material UI imports for plugins/explore.

plugins/explore/.eslintrc.js

@@ -1 +1,6 @@
-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/explore/src/components/CatalogKindExploreContent/CatalogKindExploreContent.tsx

@@ -16,7 +16,7 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { EntityCard } from '../EntityCard';

plugins/explore/src/components/DomainCard/DomainCard.tsx

@@ -21,14 +21,12 @@ import {
   getEntityRelations,
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
-import {
-  Box,
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  Chip,
-} 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 CardMedia from '@material-ui/core/CardMedia';
+import Chip from '@material-ui/core/Chip';
 import React from 'react';
 
 import { LinkButton, ItemCardHeader } from '@backstage/core-components';

plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.tsx

@@ -16,7 +16,7 @@
 
 import { DomainEntity } from '@backstage/catalog-model';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import {

plugins/explore/src/components/EntityCard/EntityCard.tsx

@@ -21,14 +21,12 @@ import {
   getEntityRelations,
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
-import {
-  Box,
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  Chip,
-} 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 CardMedia from '@material-ui/core/CardMedia';
+import Chip from '@material-ui/core/Chip';
 import React from 'react';
 
 import { LinkButton, ItemCardHeader } from '@backstage/core-components';

plugins/explore/src/components/ExploreLayout/ExploreLayout.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';
 
 // TODO: This layout could be a shared based component if it was possible to create custom TabbedLayouts

plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx

@@ -33,7 +33,8 @@ import {
   getEntityRelations,
   EntityDisplayName,
 } from '@backstage/plugin-catalog-react';
-import { makeStyles, Typography, useTheme } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import classNames from 'classnames';
 import React from 'react';

plugins/explore/src/components/ToolCard/ToolCard.tsx

@@ -15,17 +15,14 @@
  */
 
 import { ExploreTool } from '@backstage/plugin-explore-react';
-import {
-  Box,
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  Chip,
-  makeStyles,
-  Theme,
-  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 CardMedia from '@material-ui/core/CardMedia';
+import Chip from '@material-ui/core/Chip';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import { LinkButton } from '@backstage/core-components';
 import classNames from 'classnames';
 import React from 'react';

plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx

@@ -15,13 +15,11 @@
  */
 
 import React, { ReactNode } from 'react';
-import {
-  Box,
-  Chip,
-  ListItemIcon,
-  ListItemText,
-  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 { makeStyles } from '@material-ui/core/styles';
 import { Link } from '@backstage/core-components';
 import {
   IndexableDocument,