Merge pull request #23698 from AdityaK60/Update_plugin_splunk-on-call

Add ESLint Rule to SplunkOnCall Plugin

.changeset/twenty-seahorses-wave.md

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

plugins/splunk-on-call/.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/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx

@@ -20,17 +20,15 @@ import {
   useEntity,
   MissingAnnotationEmptyState,
 } from '@backstage/plugin-catalog-react';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Divider,
-  makeStyles,
-  Typography,
-} from '@material-ui/core';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardHeader from '@material-ui/core/CardHeader';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
 import WebIcon from '@material-ui/icons/Web';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import { splunkOnCallApiRef, UnauthorizedError } from '../api';
 import { MissingApiKeyOrApiIdError } from './Errors';
 import { EscalationPolicy } from './Escalation';

plugins/splunk-on-call/src/components/Errors/MissingApiKeyOrApiIdError.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 MissingApiKeyOrApiIdError = () => (

plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx

@@ -15,18 +15,14 @@
  */
 
 import React from 'react';
-import {
-  createStyles,
-  List,
-  ListSubheader,
-  makeStyles,
-  Theme,
-} from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { EscalationUsersEmptyState } from './EscalationUsersEmptyState';
 import { EscalationUser } from './EscalationUser';
 import useAsync from 'react-use/lib/useAsync';
 import { splunkOnCallApiRef } from '../../api';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import { User } from '../types';
 
 import { useApi } from '@backstage/core-plugin-api';

plugins/splunk-on-call/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 { User } from '../types';

plugins/splunk-on-call/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/splunk-on-call/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/splunk-on-call/src/components/Incident/IncidentListItem.tsx

@@ -15,16 +15,14 @@
  */
 
 import React, { useEffect } 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 DoneIcon from '@material-ui/icons/Done';
 import DoneAllIcon from '@material-ui/icons/DoneAll';
 import { DateTime, Duration } from 'luxon';

plugins/splunk-on-call/src/components/Incident/Incidents.tsx

@@ -15,18 +15,14 @@
  */
 
 import React, { useEffect } from 'react';
-import {
-  createStyles,
-  List,
-  ListSubheader,
-  makeStyles,
-  Theme,
-} from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { IncidentListItem } from './IncidentListItem';
 import { IncidentsEmptyState } from './IncidentEmptyState';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import { splunkOnCallApiRef } 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/splunk-on-call/src/components/SplunkOnCallPage.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Grid, makeStyles } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 import { EntitySplunkOnCallCard } from './EntitySplunkOnCallCard';
 import {
   Content,

plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.tsx

@@ -15,26 +15,22 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import {
-  Dialog,
-  DialogTitle,
-  TextField,
-  DialogActions,
-  Button,
-  DialogContent,
-  Typography,
-  CircularProgress,
-  Select,
-  MenuItem,
-  createStyles,
-  makeStyles,
-  Theme,
-  FormControl,
-  InputLabel,
-} 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 Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import { splunkOnCallApiRef } from '../../api';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import { TriggerAlarmRequest } from '../../api';
 import { useApi, alertApiRef } from '@backstage/core-plugin-api';