diff --git a/.changeset/cyan-chefs-promise.md b/.changeset/cyan-chefs-promise.md new file mode 100644 index 0000000000..425bbecd4c --- /dev/null +++ b/.changeset/cyan-chefs-promise.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-cicd-statistics': patch +--- + +Added the `no-top-level-material-ui-4-imports` ESLint rule to aid with the migration to Material UI v5 diff --git a/plugins/cicd-statistics/.eslintrc.js b/plugins/cicd-statistics/.eslintrc.js index e2a53a6ad2..e487f765b2 100644 --- a/plugins/cicd-statistics/.eslintrc.js +++ b/plugins/cicd-statistics/.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/cicd-statistics/src/charts/stage-chart.tsx b/plugins/cicd-statistics/src/charts/stage-chart.tsx index ba3474153c..44cb17f2ab 100644 --- a/plugins/cicd-statistics/src/charts/stage-chart.tsx +++ b/plugins/cicd-statistics/src/charts/stage-chart.tsx @@ -30,13 +30,11 @@ import { ResponsiveContainer, } from 'recharts'; import Alert from '@material-ui/lab/Alert'; -import { - Accordion, - AccordionSummary, - AccordionDetails, - Grid, - Typography, -} from '@material-ui/core'; +import Accordion from '@material-ui/core/Accordion'; +import AccordionSummary from '@material-ui/core/AccordionSummary'; +import AccordionDetails from '@material-ui/core/AccordionDetails'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { capitalize } from 'lodash'; diff --git a/plugins/cicd-statistics/src/charts/status-chart.tsx b/plugins/cicd-statistics/src/charts/status-chart.tsx index ffcdcef7dd..03325f1802 100644 --- a/plugins/cicd-statistics/src/charts/status-chart.tsx +++ b/plugins/cicd-statistics/src/charts/status-chart.tsx @@ -28,12 +28,10 @@ import { ResponsiveContainer, } from 'recharts'; import Alert from '@material-ui/lab/Alert'; -import { - Accordion, - AccordionSummary, - AccordionDetails, - Typography, -} from '@material-ui/core'; +import Accordion from '@material-ui/core/Accordion'; +import AccordionSummary from '@material-ui/core/AccordionSummary'; +import AccordionDetails from '@material-ui/core/AccordionDetails'; +import Typography from '@material-ui/core/Typography'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { capitalize } from 'lodash'; diff --git a/plugins/cicd-statistics/src/components/button-switch.tsx b/plugins/cicd-statistics/src/components/button-switch.tsx index 65f55eee41..5c22bfbff2 100644 --- a/plugins/cicd-statistics/src/components/button-switch.tsx +++ b/plugins/cicd-statistics/src/components/button-switch.tsx @@ -15,7 +15,10 @@ */ import React, { useCallback, MouseEvent } from 'react'; -import { ButtonGroup, Button, Tooltip, Zoom } from '@material-ui/core'; +import ButtonGroup from '@material-ui/core/ButtonGroup'; +import Button from '@material-ui/core/Button'; +import Tooltip from '@material-ui/core/Tooltip'; +import Zoom from '@material-ui/core/Zoom'; export interface SwitchValueDetails { value: T; diff --git a/plugins/cicd-statistics/src/components/chart-filters.tsx b/plugins/cicd-statistics/src/components/chart-filters.tsx index 026e81fd74..72fec83592 100644 --- a/plugins/cicd-statistics/src/components/chart-filters.tsx +++ b/plugins/cicd-statistics/src/components/chart-filters.tsx @@ -15,26 +15,22 @@ */ import React, { useCallback, useState, useEffect, useMemo } from 'react'; -import { - Button, - Card, - CardHeader, - CardContent, - FormControl, - FormGroup, - FormControlLabel, - Grid, - Switch, - Tooltip, - Typography, - makeStyles, -} from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Card from '@material-ui/core/Card'; +import CardHeader from '@material-ui/core/CardHeader'; +import CardContent from '@material-ui/core/CardContent'; +import FormControl from '@material-ui/core/FormControl'; +import FormGroup from '@material-ui/core/FormGroup'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Grid from '@material-ui/core/Grid'; +import Switch from '@material-ui/core/Switch'; +import Tooltip from '@material-ui/core/Tooltip'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import ShowChartIcon from '@material-ui/icons/ShowChart'; import BarChartIcon from '@material-ui/icons/BarChart'; -import { - MuiPickersUtilsProvider, - KeyboardDatePicker, -} from '@material-ui/pickers'; +import MuiPickersUtilsProvider from '@material-ui/pickers/MuiPickersUtilsProvider'; +import KeyboardDatePicker from '@material-ui/pickers/KeyboardDatePicker'; import { DateTime } from 'luxon'; import LuxonUtils from '@date-io/luxon'; diff --git a/plugins/cicd-statistics/src/components/duration-slider.tsx b/plugins/cicd-statistics/src/components/duration-slider.tsx index 6ba4fa88ce..22b13ed485 100644 --- a/plugins/cicd-statistics/src/components/duration-slider.tsx +++ b/plugins/cicd-statistics/src/components/duration-slider.tsx @@ -15,7 +15,7 @@ */ import React, { useCallback, useMemo, useState } from 'react'; -import { Slider } from '@material-ui/core'; +import Slider from '@material-ui/core/Slider'; import { debounce } from 'lodash'; import { formatDuration, formatDurationFromSeconds } from './utils'; diff --git a/plugins/cicd-statistics/src/components/label.tsx b/plugins/cicd-statistics/src/components/label.tsx index 1c9a05b303..51aa89ed21 100644 --- a/plugins/cicd-statistics/src/components/label.tsx +++ b/plugins/cicd-statistics/src/components/label.tsx @@ -15,7 +15,8 @@ */ import React, { PropsWithChildren } from 'react'; -import { Typography, makeStyles } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles( theme => ({ diff --git a/plugins/cicd-statistics/src/components/progress.tsx b/plugins/cicd-statistics/src/components/progress.tsx index 3045bb5eb1..932ce5c653 100644 --- a/plugins/cicd-statistics/src/components/progress.tsx +++ b/plugins/cicd-statistics/src/components/progress.tsx @@ -16,7 +16,8 @@ import React, { CSSProperties, DependencyList } from 'react'; import useAsync from 'react-use/esm/useAsync'; -import { Box, LinearProgress } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import LinearProgress from '@material-ui/core/LinearProgress'; import Timeline from '@material-ui/lab/Timeline'; import TimelineItem from '@material-ui/lab/TimelineItem'; import TimelineSeparator from '@material-ui/lab/TimelineSeparator'; diff --git a/plugins/cicd-statistics/src/components/toggle.tsx b/plugins/cicd-statistics/src/components/toggle.tsx index 02f1941d85..039d8b1a58 100644 --- a/plugins/cicd-statistics/src/components/toggle.tsx +++ b/plugins/cicd-statistics/src/components/toggle.tsx @@ -15,7 +15,8 @@ */ import React, { useCallback, PropsWithChildren } from 'react'; -import { FormControlLabel, Switch } from '@material-ui/core'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Switch from '@material-ui/core/Switch'; export interface ToggleProps { checked: boolean; diff --git a/plugins/cicd-statistics/src/entity-page.tsx b/plugins/cicd-statistics/src/entity-page.tsx index 25b8477f61..ae5dd2ca51 100644 --- a/plugins/cicd-statistics/src/entity-page.tsx +++ b/plugins/cicd-statistics/src/entity-page.tsx @@ -15,8 +15,9 @@ */ import React, { useCallback, useState, useMemo, useEffect } from 'react'; -import { Grid, makeStyles } from '@material-ui/core'; -import { Alert } from '@material-ui/lab'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles } from '@material-ui/core/styles'; +import Alert from '@material-ui/lab/Alert'; import { useEntity } from '@backstage/plugin-catalog-react'; import { useApi, errorApiRef } from '@backstage/core-plugin-api'; import { DateTime } from 'luxon';