Add ESLint Rule to tech-radar Plugin

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>

.changeset/four-terms-think.md

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

plugins/tech-radar/.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/tech-radar/src/components/RadarBubble/RadarBubble.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useRef, useLayoutEffect } from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 export type Props = {
   visible: boolean;

plugins/tech-radar/src/components/RadarDescription/RadarDescription.tsx

@@ -17,7 +17,9 @@
 import React from 'react';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import { Button, DialogActions, DialogContent } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
 import LinkIcon from '@material-ui/icons/Link';
 import { Link, MarkdownContent } from '@backstage/core-components';
 import { isValidUrl } from '../../utils/components';

plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { WithLink } from '../../utils/components';
 import { RadarDescription } from '../RadarDescription';
 import type { EntrySnapshot } from '../../utils/types';

plugins/tech-radar/src/components/RadarFooter/RadarFooter.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 export type Props = {
   x: number;

plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import type { Ring } from '../../utils/types';
 
 export type Props = {

plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { RadarLegendQuadrant } from './RadarLegendQuadrant';
 import { RadarLegendProps } from './types';

plugins/tech-radar/src/components/RadarPage.tsx

@@ -22,7 +22,9 @@ import {
   SupportButton,
   Link,
 } from '@backstage/core-components';
-import { Grid, Input, makeStyles } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Input from '@material-ui/core/Input';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { RadarComponent, type TechRadarComponentProps } from './RadarComponent';