Adds the no-top-level-material-ui-4-import ESLint rule to the home-react plugin to aid with the migration to Material UI v5.

Issue: #23467
Signed-off-by: Binishma SS <binishma_s@TVMATP567911L.ad.infosys.com>

.changeset/giant-pots-count.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home-react': patch
+---
+
+Added ESLint rule `no-top-level-material-ui-4-imports` in the `home-react` plugin to migrate the Material UI imports.

plugins/home-react/.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/home-react/src/components/SettingsModal.tsx

@@ -15,13 +15,11 @@
  */
 
 import React from 'react';
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  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 DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
 
 /** @public */
 export const SettingsModal = (props: {

plugins/home-react/src/extensions.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { Suspense } from 'react';
-import { IconButton } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
 import SettingsIcon from '@material-ui/icons/Settings';
 import { InfoCard } from '@backstage/core-components';
 import { SettingsModal } from './components';