From 51f814bca132e98217098b18ace9cbda187906bb Mon Sep 17 00:00:00 2001 From: Aditya Kumar Date: Tue, 19 Mar 2024 08:43:51 +0530 Subject: [PATCH] Add ESLint Rule to SplunkOnCall Plugin Signed-off-by: Aditya Kumar --- .changeset/twenty-seahorses-wave.md | 5 +++ plugins/splunk-on-call/.eslintrc.js | 6 +++- .../src/components/EntitySplunkOnCallCard.tsx | 16 ++++------ .../Errors/MissingApiKeyOrApiIdError.tsx | 2 +- .../Escalation/EscalationPolicy.tsx | 12 +++---- .../components/Escalation/EscalationUser.tsx | 18 +++++------ .../Escalation/EscalationUsersEmptyState.tsx | 10 +++--- .../Incident/IncidentEmptyState.tsx | 3 +- .../components/Incident/IncidentListItem.tsx | 18 +++++------ .../src/components/Incident/Incidents.tsx | 12 +++---- .../src/components/SplunkOnCallPage.tsx | 3 +- .../TriggerDialog/TriggerDialog.tsx | 32 ++++++++----------- 12 files changed, 64 insertions(+), 73 deletions(-) create mode 100644 .changeset/twenty-seahorses-wave.md diff --git a/.changeset/twenty-seahorses-wave.md b/.changeset/twenty-seahorses-wave.md new file mode 100644 index 0000000000..f388d6abfd --- /dev/null +++ b/.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. diff --git a/plugins/splunk-on-call/.eslintrc.js b/plugins/splunk-on-call/.eslintrc.js index e2a53a6ad2..a2d8179106 100644 --- a/plugins/splunk-on-call/.eslintrc.js +++ b/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', + }, +}); diff --git a/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx b/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx index 5800ea98b6..84770c6d6e 100644 --- a/plugins/splunk-on-call/src/components/EntitySplunkOnCallCard.tsx +++ b/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'; diff --git a/plugins/splunk-on-call/src/components/Errors/MissingApiKeyOrApiIdError.tsx b/plugins/splunk-on-call/src/components/Errors/MissingApiKeyOrApiIdError.tsx index bc8aa05813..e302a25105 100644 --- a/plugins/splunk-on-call/src/components/Errors/MissingApiKeyOrApiIdError.tsx +++ b/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 = () => ( diff --git a/plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx b/plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx index 7902453490..b35464f303 100644 --- a/plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx +++ b/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'; diff --git a/plugins/splunk-on-call/src/components/Escalation/EscalationUser.tsx b/plugins/splunk-on-call/src/components/Escalation/EscalationUser.tsx index ba7abbddab..8f7944753f 100644 --- a/plugins/splunk-on-call/src/components/Escalation/EscalationUser.tsx +++ b/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'; diff --git a/plugins/splunk-on-call/src/components/Escalation/EscalationUsersEmptyState.tsx b/plugins/splunk-on-call/src/components/Escalation/EscalationUsersEmptyState.tsx index b4c10ddcf8..8a32069a50 100644 --- a/plugins/splunk-on-call/src/components/Escalation/EscalationUsersEmptyState.tsx +++ b/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({ diff --git a/plugins/splunk-on-call/src/components/Incident/IncidentEmptyState.tsx b/plugins/splunk-on-call/src/components/Incident/IncidentEmptyState.tsx index 87108f3d74..181ff6ad84 100644 --- a/plugins/splunk-on-call/src/components/Incident/IncidentEmptyState.tsx +++ b/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 = () => { diff --git a/plugins/splunk-on-call/src/components/Incident/IncidentListItem.tsx b/plugins/splunk-on-call/src/components/Incident/IncidentListItem.tsx index d8b6a56efc..3689db9b0a 100644 --- a/plugins/splunk-on-call/src/components/Incident/IncidentListItem.tsx +++ b/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'; diff --git a/plugins/splunk-on-call/src/components/Incident/Incidents.tsx b/plugins/splunk-on-call/src/components/Incident/Incidents.tsx index 6dcb4f9989..fba7e540da 100644 --- a/plugins/splunk-on-call/src/components/Incident/Incidents.tsx +++ b/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'; diff --git a/plugins/splunk-on-call/src/components/SplunkOnCallPage.tsx b/plugins/splunk-on-call/src/components/SplunkOnCallPage.tsx index 4cbefa244d..58df3e3304 100644 --- a/plugins/splunk-on-call/src/components/SplunkOnCallPage.tsx +++ b/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, diff --git a/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.tsx b/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.tsx index dd8f0b1909..db16c12c04 100644 --- a/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.tsx +++ b/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';