Add ESLint Rule to gitops-profile Plugin

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

.changeset/mean-pumpkins-whisper.md

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

plugins/gitops-profiles/.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/gitops-profiles/src/components/ClusterList/ClusterList.tsx

@@ -17,10 +17,10 @@
 import React, { useState } from 'react';
 
 import ClusterTable from '../ClusterTable/ClusterTable';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import useAsync from 'react-use/esm/useAsync';
 import { gitOpsApiRef } from '../../api';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 
 import {
   Content,

plugins/gitops-profiles/src/components/ClusterTemplateCardList/ClusterTemplateCardList.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import ClusterTemplateCard from '../ClusterTemplateCard';
 
 interface Props {

plugins/gitops-profiles/src/components/ProfileCard/ProfileCard.tsx

@@ -15,17 +15,14 @@
  */
 
 import React, { useState } from 'react';
-import {
-  Avatar,
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  createStyles,
-  IconButton,
-  Theme,
-  Typography,
-} from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardHeader from '@material-ui/core/CardHeader';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import { createStyles, Theme } from '@material-ui/core/styles';
 import { green } from '@material-ui/core/colors';
 import { makeStyles } from '@material-ui/core/styles';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';

plugins/gitops-profiles/src/components/ProfileCardList/ProfileCardList.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { useState } from 'react';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import ProfileCard from '../ProfileCard';
 
 interface Props {

plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx

@@ -15,7 +15,9 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { TextField, List, ListItem } from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
 
 import ClusterTemplateCardList from '../ClusterTemplateCardList';
 import ProfileCardList from '../ProfileCardList';