feat: add eslint rule for top level imports

Signed-off-by: Timothy Deakin <cftad@protonmail.com>

.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

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',
+  },
+});

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';
 

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';
 

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<T extends string> {
   value: T;

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';
 

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';

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 => ({

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';

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;

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';