Add ESLint Rule to Xcmetrics Plugin

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

.changeset/popular-poems-battle.md

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

plugins/xcmetrics/.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/xcmetrics/src/components/Accordion/Accordion.tsx

@@ -14,14 +14,11 @@
  * limitations under the License.
  */
 
-import {
-  Accordion as MuiAccordion,
-  AccordionSummary as MuiAccordionSummary,
-  Typography,
-  AccordionDetails,
-  makeStyles,
-  createStyles,
-} from '@material-ui/core';
+import MuiAccordion from '@material-ui/core/Accordion';
+import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
+import Typography from '@material-ui/core/Typography';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 import React, { PropsWithChildren } from 'react';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 

plugins/xcmetrics/src/components/BuildDetails/BuildDetails.tsx

@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import { createStyles, Divider, Grid, makeStyles } from '@material-ui/core';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { BuildResponse, xcmetricsApiRef } from '../../api';
 import { Progress, StructuredMetadataTable } from '@backstage/core-components';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import useAsync from 'react-use/lib/useAsync';
 import { useApi } from '@backstage/core-plugin-api';
 import { formatDuration, formatStatus, formatTime } from '../../utils';

plugins/xcmetrics/src/components/BuildList/BuildList.tsx

@@ -18,7 +18,8 @@ import React, { useRef, useState } from 'react';
 import { Table } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { BuildFilters, xcmetricsApiRef } from '../../api';
-import { createStyles, Grid, makeStyles } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 import { BuildListFilter as Filters } from '../BuildListFilter';
 import { DateTime } from 'luxon';
 import { buildPageColumns } from '../BuildTableColumns';

plugins/xcmetrics/src/components/BuildListFilter/BuildListFilter.tsx

@@ -15,7 +15,10 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { makeStyles, IconButton, Grid, Button } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
 import FilterList from '@material-ui/icons/FilterList';
 import { InfoCard, Select } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';

plugins/xcmetrics/src/components/BuildTableColumns.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Chip } from '@material-ui/core';
+import Chip from '@material-ui/core/Chip';
 import React from 'react';
 import { TableColumn } from '@backstage/core-components';
 import { Build } from '../api';

plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { createStyles, makeStyles, useTheme } from '@material-ui/core';
+import { createStyles, makeStyles, useTheme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import {

plugins/xcmetrics/src/components/DataValue/DataValue.tsx

@@ -13,7 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Grid, GridSize, Typography } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import { GridSize } from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 
 interface DataValueProps {

plugins/xcmetrics/src/components/DatePicker/DatePicker.tsx

@@ -15,15 +15,13 @@
  */
 
 import React from 'react';
-import {
-  createStyles,
-  InputBase,
-  InputProps,
-  makeStyles,
-  Theme,
-  Typography,
-  withStyles,
-} from '@material-ui/core';
+import { createStyles } from '@material-ui/core/styles';
+import { InputProps } from '@material-ui/core/Input';
+import withStyles from '@material-ui/core/styles/withStyles';
+import { Theme } from '@material-ui/core/styles/createTheme';
+import InputBase from '@material-ui/core/InputBase/InputBase';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import Typography from '@material-ui/core/Typography/Typography';
 
 const BootstrapInput = withStyles((theme: Theme) =>
   createStyles({

plugins/xcmetrics/src/components/Overview/Overview.tsx

@@ -25,9 +25,9 @@ import {
 import { useApi } from '@backstage/core-plugin-api';
 import { xcmetricsApiRef } from '../../api';
 import useAsync from 'react-use/lib/useAsync';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import { StatusMatrix } from '../StatusMatrix';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import { OverviewTrends } from '../OverviewTrends';
 import { overviewColumns } from '../BuildTableColumns';
 

plugins/xcmetrics/src/components/OverviewTrends/OverviewTrends.tsx

@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import { Grid, makeStyles, useTheme } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import React, { useState } from 'react';
 import { Progress, Select } from '@backstage/core-components';
 import { Trend } from '../Trend';
-import { Alert, AlertTitle } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
+import AlertTitle from '@material-ui/lab/AlertTitle';
 import { xcmetricsApiRef } from '../../api';
 import useAsync from 'react-use/lib/useAsync';
 import { useApi } from '@backstage/core-plugin-api';

plugins/xcmetrics/src/components/PreformattedText/PreformattedText.tsx

@@ -14,16 +14,13 @@
  * limitations under the License.
  */
 
-import {
-  Button,
-  createStyles,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  makeStyles,
-} from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import IconButton from '@material-ui/core/IconButton';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import React, { useState } from 'react';
 import { cn } from '../../utils';

plugins/xcmetrics/src/components/StatusCell/StatusCell.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { makeStyles, Theme, Tooltip } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import React from 'react';
 import { BuildStatus, BuildStatusResult, xcmetricsApiRef } from '../../api';
 import { cn, formatDuration, formatStatus } from '../../utils';

plugins/xcmetrics/src/components/StatusMatrix/StatusMatrix.tsx

@@ -15,13 +15,13 @@
  */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { xcmetricsApiRef } from '../../api';
 import useAsync from 'react-use/lib/useAsync';
 import useMeasure from 'react-use/lib/useMeasure';
 import { cn } from '../../utils';
 import { useApi } from '@backstage/core-plugin-api';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import { StatusCell } from '../StatusCell';
 
 const CELL_SIZE = 12;

plugins/xcmetrics/src/components/Trend/Trend.tsx

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { TrendLine } from '@backstage/core-components';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 
 interface TrendProps {
   data?: number[];