Add ESLint Rule to Pagerduty Plugin

Signed-off-by: Aditya Kumar <aditya.kumar60@infosys.com>

.changeset/giant-dancers-know.md

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

plugins/pagerduty/.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/pagerduty/src/components/ChangeEvents/ChangeEventEmptyState.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Grid, Typography } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import EmptyStateImage from '../../assets/emptystate.svg';
 
 export const ChangeEventEmptyState = () => {

plugins/pagerduty/src/components/ChangeEvents/ChangeEventListItem.tsx

@@ -16,15 +16,13 @@
 
 import React from 'react';
 import { Link } from '@backstage/core-components';
-import {
-  ListItem,
-  ListItemSecondaryAction,
-  Tooltip,
-  ListItemText,
-  makeStyles,
-  IconButton,
-  Typography,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Tooltip from '@material-ui/core/Tooltip';
+import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import { DateTime, Duration } from 'luxon';
 import { PagerDutyChangeEvent } from '../types';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';

plugins/pagerduty/src/components/ChangeEvents/ChangeEvents.tsx

@@ -15,14 +15,15 @@
  */
 
 import React, { useEffect } from 'react';
-import { List, ListSubheader } from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
 import { ChangeEventListItem } from './ChangeEventListItem';
 import { ChangeEventEmptyState } from './ChangeEventEmptyState';
 import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { pagerDutyApiRef } from '../../api';
 import { useApi } from '@backstage/core-plugin-api';
 import { Progress } from '@backstage/core-components';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 
 type Props = {
   serviceId: string;

plugins/pagerduty/src/components/Errors/MissingTokenError.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import { EmptyState } from '@backstage/core-components';
 
 export const MissingTokenError = () => (

plugins/pagerduty/src/components/Errors/ServiceNotFoundError.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import { EmptyState } from '@backstage/core-components';
 
 export const ServiceNotFoundError = () => (

plugins/pagerduty/src/components/Escalation/EscalationPolicy.tsx

@@ -15,12 +15,13 @@
  */
 
 import React from 'react';
-import { List, ListSubheader } from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
 import { EscalationUsersEmptyState } from './EscalationUsersEmptyState';
 import { EscalationUser } from './EscalationUser';
 import useAsync from 'react-use/esm/useAsync';
 import { pagerDutyApiRef } from '../../api';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 
 import { useApi } from '@backstage/core-plugin-api';
 import { Progress } from '@backstage/core-components';

plugins/pagerduty/src/components/Escalation/EscalationUser.tsx

@@ -15,16 +15,14 @@
  */
 
 import React from 'react';
-import {
-  ListItem,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  Tooltip,
-  ListItemText,
-  makeStyles,
-  IconButton,
-  Typography,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Tooltip from '@material-ui/core/Tooltip';
+import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
 import EmailIcon from '@material-ui/icons/Email';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';

plugins/pagerduty/src/components/Escalation/EscalationUsersEmptyState.tsx

@@ -15,12 +15,10 @@
  */
 
 import React from 'react';
-import {
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  makeStyles,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from '@material-ui/core/styles';
 import { StatusWarning } from '@backstage/core-components';
 
 const useStyles = makeStyles({

plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Grid, Typography } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import EmptyStateImage from '../../assets/emptystate.svg';
 
 export const IncidentsEmptyState = () => {

plugins/pagerduty/src/components/Incident/IncidentListItem.tsx

@@ -15,16 +15,14 @@
  */
 
 import React from 'react';
-import {
-  ListItem,
-  ListItemSecondaryAction,
-  Tooltip,
-  ListItemText,
-  makeStyles,
-  IconButton,
-  Typography,
-  Chip,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Tooltip from '@material-ui/core/Tooltip';
+import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import Chip from '@material-ui/core/Chip';
+import { makeStyles } from '@material-ui/core/styles';
 import Done from '@material-ui/icons/Done';
 import Warning from '@material-ui/icons/Warning';
 import { DateTime, Duration } from 'luxon';

plugins/pagerduty/src/components/Incident/Incidents.tsx

@@ -15,12 +15,13 @@
  */
 
 import React, { useEffect } from 'react';
-import { List, ListSubheader } from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
 import { IncidentListItem } from './IncidentListItem';
 import { IncidentsEmptyState } from './IncidentEmptyState';
 import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { pagerDutyApiRef } from '../../api';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 
 import { useApi } from '@backstage/core-plugin-api';
 import { Progress } from '@backstage/core-components';

plugins/pagerduty/src/components/PagerDutyCard/PagerDutyCard.tsx

@@ -15,17 +15,15 @@
  */
 
 import React, { ReactNode, useState, useCallback } from 'react';
-import {
-  Card,
-  CardHeader,
-  Divider,
-  CardContent,
-  TabProps,
-} from '@material-ui/core';
+import Card from '@material-ui/core/Card';
+import { TabProps } from '@material-ui/core/Tab';
+import CardHeader from '@material-ui/core/CardHeader';
+import Divider from '@material-ui/core/Divider';
+import CardContent from '@material-ui/core/CardContent';
 import { Incidents } from '../Incident';
 import { EscalationPolicy } from '../Escalation';
 import useAsync from 'react-use/esm/useAsync';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import { pagerDutyApiRef, UnauthorizedError } from '../../api';
 import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
 import { MissingTokenError, ServiceNotFoundError } from '../Errors';

plugins/pagerduty/src/components/TriggerButton/index.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { useCallback, ReactNode, useState } from 'react';
-import { makeStyles, Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
 import { usePagerdutyEntity } from '../../hooks';
 import { TriggerDialog } from '../TriggerDialog';
 

plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.tsx

@@ -15,19 +15,17 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import {
-  Dialog,
-  DialogTitle,
-  TextField,
-  DialogActions,
-  Button,
-  DialogContent,
-  Typography,
-  CircularProgress,
-} from '@material-ui/core';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import TextField from '@material-ui/core/TextField';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
+import DialogContent from '@material-ui/core/DialogContent';
+import Typography from '@material-ui/core/Typography';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import useAsyncFn from 'react-use/esm/useAsyncFn';
 import { pagerDutyApiRef } from '../../api';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import {
   useApi,
   alertApiRef,