From eca08359ec32b30433c67a346e41c59c307e05f0 Mon Sep 17 00:00:00 2001
From: Aditya Kumar <aditya.kumar60@infosys.com>
Date: Fri, 15 Mar 2024 08:38:56 +0530
Subject: [PATCH] Add ESLint Rule to Code-Coverage Plugin

Signed-off-by: Aditya Kumar <aditya.kumar60@infosys.com>
---
 .changeset/yellow-panthers-refuse.md           |  5 +++++
 plugins/code-coverage/.eslintrc.js             |  6 +++++-
 .../CoverageHistoryChart.tsx                   | 18 ++++++++----------
 .../src/components/FileExplorer/CodeRow.tsx    |  2 +-
 .../components/FileExplorer/FileContent.tsx    |  5 +++--
 .../components/FileExplorer/FileExplorer.tsx   |  6 ++++--
 6 files changed, 26 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/yellow-panthers-refuse.md

diff --git a/.changeset/yellow-panthers-refuse.md b/.changeset/yellow-panthers-refuse.md
new file mode 100644
index 0000000000..fde2dca0ac
--- /dev/null
+++ b/.changeset/yellow-panthers-refuse.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-code-coverage': patch
+---
+
+Added ESLint rule `no-top-level-material-ui-4-imports` in the Code-Coverage plugin to migrate the Material UI imports.
diff --git a/plugins/code-coverage/.eslintrc.js b/plugins/code-coverage/.eslintrc.js
index e2a53a6ad2..6f6668b53d 100644
--- a/plugins/code-coverage/.eslintrc.js
+++ b/plugins/code-coverage/.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',
+    },
+});
diff --git a/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx b/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx
index 3cb4ad5d56..bea6a8bec7 100644
--- a/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx
+++ b/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx
@@ -15,19 +15,17 @@
  */
 
 import { useEntity } from '@backstage/plugin-catalog-react';
-import {
-  Box,
-  Card,
-  CardContent,
-  CardHeader,
-  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 CardHeader from '@material-ui/core/CardHeader';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import TrendingDownIcon from '@material-ui/icons/TrendingDown';
 import TrendingFlatIcon from '@material-ui/icons/TrendingFlat';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
-import { Alert } from '@material-ui/lab';
-import { ClassNameMap } from '@material-ui/styles';
+import Alert from '@material-ui/lab/Alert';
+import ClassNameMap from '@material-ui/styles/ClassNameMap';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import {
diff --git a/plugins/code-coverage/src/components/FileExplorer/CodeRow.tsx b/plugins/code-coverage/src/components/FileExplorer/CodeRow.tsx
index 20f0548f16..28ff8e241d 100644
--- a/plugins/code-coverage/src/components/FileExplorer/CodeRow.tsx
+++ b/plugins/code-coverage/src/components/FileExplorer/CodeRow.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   lineNumberCell: {
diff --git a/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx b/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx
index 2ca6987be7..b401e66334 100644
--- a/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx
+++ b/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx
@@ -15,8 +15,9 @@
  */
 
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { makeStyles, Paper } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { codeCoverageApiRef } from '../../api';
diff --git a/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx b/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx
index 57bb9a2be0..4fb20dbd52 100644
--- a/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx
+++ b/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx
@@ -15,10 +15,12 @@
  */
 
 import { humanizeEntityRef, useEntity } from '@backstage/plugin-catalog-react';
-import { Box, Modal, makeStyles } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Modal from '@material-ui/core/Modal';
+import { makeStyles } from '@material-ui/core/styles';
 import FolderIcon from '@material-ui/icons/Folder';
 import FileOutlinedIcon from '@material-ui/icons/InsertDriveFileOutlined';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import React, { Fragment, useEffect, useState } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { codeCoverageApiRef } from '../../api';