From e38b29cc79c3b17d055f26609b720dd5d7c43df9 Mon Sep 17 00:00:00 2001
From: Aditya Kumar <aditya.kumar60@infosys.com>
Date: Tue, 19 Mar 2024 09:29:19 +0530
Subject: [PATCH] Add ESLint Rule to SonarQube Plugin

Signed-off-by: Aditya Kumar <aditya.kumar60@infosys.com>
---
 .changeset/few-rules-accept.md                              | 5 +++++
 plugins/sonarqube/.eslintrc.js                              | 6 +++++-
 plugins/sonarqube/dev/index.tsx                             | 2 +-
 .../sonarqube/src/components/SonarQubeCard/Percentage.tsx   | 2 +-
 plugins/sonarqube/src/components/SonarQubeCard/Rating.tsx   | 4 ++--
 .../sonarqube/src/components/SonarQubeCard/RatingCard.tsx   | 3 ++-
 .../src/components/SonarQubeCard/SonarQubeCard.tsx          | 3 ++-
 7 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/few-rules-accept.md

diff --git a/.changeset/few-rules-accept.md b/.changeset/few-rules-accept.md
new file mode 100644
index 0000000000..7e3efca161
--- /dev/null
+++ b/.changeset/few-rules-accept.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-sonarqube': patch
+---
+
+Added ESLint rule `no-top-level-material-ui-4-imports` in the `sonarqube` plugin to migrate the Material UI imports.
diff --git a/plugins/sonarqube/.eslintrc.js b/plugins/sonarqube/.eslintrc.js
index e2a53a6ad2..a2d8179106 100644
--- a/plugins/sonarqube/.eslintrc.js
+++ b/plugins/sonarqube/.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/sonarqube/dev/index.tsx b/plugins/sonarqube/dev/index.tsx
index 33a36bcaef..24b1894a7b 100644
--- a/plugins/sonarqube/dev/index.tsx
+++ b/plugins/sonarqube/dev/index.tsx
@@ -16,7 +16,7 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { createDevApp, EntityGridItem } from '@backstage/dev-utils';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import React from 'react';
 import { EntitySonarQubeCard, sonarQubePlugin } from '../src';
 import { Content, Header, Page } from '@backstage/core-components';
diff --git a/plugins/sonarqube/src/components/SonarQubeCard/Percentage.tsx b/plugins/sonarqube/src/components/SonarQubeCard/Percentage.tsx
index efc19d4bf5..1cbed3311f 100644
--- a/plugins/sonarqube/src/components/SonarQubeCard/Percentage.tsx
+++ b/plugins/sonarqube/src/components/SonarQubeCard/Percentage.tsx
@@ -15,7 +15,7 @@
  */
 
 import { makeStyles } from '@material-ui/core/styles';
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { Circle } from 'rc-progress';
 import React from 'react';
 
diff --git a/plugins/sonarqube/src/components/SonarQubeCard/Rating.tsx b/plugins/sonarqube/src/components/SonarQubeCard/Rating.tsx
index fb722fd857..ce73fa3f2e 100644
--- a/plugins/sonarqube/src/components/SonarQubeCard/Rating.tsx
+++ b/plugins/sonarqube/src/components/SonarQubeCard/Rating.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Avatar } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
 import { lighten, makeStyles } from '@material-ui/core/styles';
-import { CSSProperties } from '@material-ui/styles';
+import { CSSProperties } from '@material-ui/styles/withStyles';
 import React, { useMemo } from 'react';
 
 const useStyles = makeStyles(theme => {
diff --git a/plugins/sonarqube/src/components/SonarQubeCard/RatingCard.tsx b/plugins/sonarqube/src/components/SonarQubeCard/RatingCard.tsx
index 547c3008c0..a8e0cf1c78 100644
--- a/plugins/sonarqube/src/components/SonarQubeCard/RatingCard.tsx
+++ b/plugins/sonarqube/src/components/SonarQubeCard/RatingCard.tsx
@@ -15,7 +15,8 @@
  */
 
 import { Link } from '@backstage/core-components';
-import { Grid, 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, { ReactNode } from 'react';
 
diff --git a/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx b/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx
index 9a6e9fb8ed..4f4f4e4fd7 100644
--- a/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx
+++ b/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx
@@ -23,7 +23,8 @@ import {
   useProjectInfo,
 } from '@backstage/plugin-sonarqube-react';
 import { SONARQUBE_PROJECT_KEY_ANNOTATION } from '@backstage/plugin-sonarqube-react';
-import { Chip, Grid } 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 BugReport from '@material-ui/icons/BugReport';
 import Lock from '@material-ui/icons/Lock';