From 9daf3016076d015bccf89dc8fae91ffb945db397 Mon Sep 17 00:00:00 2001 From: Aditya Kumar Date: Fri, 15 Mar 2024 17:06:37 +0530 Subject: [PATCH] Add ESLint Rule to Xcmetrics Plugin Signed-off-by: Aditya Kumar --- .changeset/popular-poems-battle.md | 5 +++++ plugins/xcmetrics/.eslintrc.js | 6 +++++- .../src/components/Accordion/Accordion.tsx | 13 +++++-------- .../components/BuildDetails/BuildDetails.tsx | 6 ++++-- .../src/components/BuildList/BuildList.tsx | 3 ++- .../BuildListFilter/BuildListFilter.tsx | 5 ++++- .../src/components/BuildTableColumns.tsx | 2 +- .../components/BuildTimeline/BuildTimeline.tsx | 2 +- .../src/components/DataValue/DataValue.tsx | 4 +++- .../src/components/DatePicker/DatePicker.tsx | 16 +++++++--------- .../src/components/Overview/Overview.tsx | 4 ++-- .../OverviewTrends/OverviewTrends.tsx | 6 ++++-- .../PreformattedText/PreformattedText.tsx | 17 +++++++---------- .../src/components/StatusCell/StatusCell.tsx | 3 ++- .../components/StatusMatrix/StatusMatrix.tsx | 4 ++-- .../xcmetrics/src/components/Trend/Trend.tsx | 2 +- 16 files changed, 55 insertions(+), 43 deletions(-) create mode 100644 .changeset/popular-poems-battle.md diff --git a/.changeset/popular-poems-battle.md b/.changeset/popular-poems-battle.md new file mode 100644 index 0000000000..481603f03c --- /dev/null +++ b/.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. diff --git a/plugins/xcmetrics/.eslintrc.js b/plugins/xcmetrics/.eslintrc.js index e2a53a6ad2..a2d8179106 100644 --- a/plugins/xcmetrics/.eslintrc.js +++ b/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', + }, +}); diff --git a/plugins/xcmetrics/src/components/Accordion/Accordion.tsx b/plugins/xcmetrics/src/components/Accordion/Accordion.tsx index 5c418de496..866b4148e8 100644 --- a/plugins/xcmetrics/src/components/Accordion/Accordion.tsx +++ b/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'; diff --git a/plugins/xcmetrics/src/components/BuildDetails/BuildDetails.tsx b/plugins/xcmetrics/src/components/BuildDetails/BuildDetails.tsx index 86db3be858..52806797dc 100644 --- a/plugins/xcmetrics/src/components/BuildDetails/BuildDetails.tsx +++ b/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'; diff --git a/plugins/xcmetrics/src/components/BuildList/BuildList.tsx b/plugins/xcmetrics/src/components/BuildList/BuildList.tsx index 85eee6009d..0ddcd75aca 100644 --- a/plugins/xcmetrics/src/components/BuildList/BuildList.tsx +++ b/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'; diff --git a/plugins/xcmetrics/src/components/BuildListFilter/BuildListFilter.tsx b/plugins/xcmetrics/src/components/BuildListFilter/BuildListFilter.tsx index ce2a2f4c05..121a5cafab 100644 --- a/plugins/xcmetrics/src/components/BuildListFilter/BuildListFilter.tsx +++ b/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'; diff --git a/plugins/xcmetrics/src/components/BuildTableColumns.tsx b/plugins/xcmetrics/src/components/BuildTableColumns.tsx index 0d1141dfae..709dc7bc90 100644 --- a/plugins/xcmetrics/src/components/BuildTableColumns.tsx +++ b/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'; diff --git a/plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx b/plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx index 5c0a1b1e67..ca4ce39d16 100644 --- a/plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx +++ b/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 { diff --git a/plugins/xcmetrics/src/components/DataValue/DataValue.tsx b/plugins/xcmetrics/src/components/DataValue/DataValue.tsx index 78f1cdcaea..fc38bd3bd6 100644 --- a/plugins/xcmetrics/src/components/DataValue/DataValue.tsx +++ b/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 { diff --git a/plugins/xcmetrics/src/components/DatePicker/DatePicker.tsx b/plugins/xcmetrics/src/components/DatePicker/DatePicker.tsx index e247f05cb6..58104e1b53 100644 --- a/plugins/xcmetrics/src/components/DatePicker/DatePicker.tsx +++ b/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({ diff --git a/plugins/xcmetrics/src/components/Overview/Overview.tsx b/plugins/xcmetrics/src/components/Overview/Overview.tsx index 22fd3185a0..84e0b5e23e 100644 --- a/plugins/xcmetrics/src/components/Overview/Overview.tsx +++ b/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'; diff --git a/plugins/xcmetrics/src/components/OverviewTrends/OverviewTrends.tsx b/plugins/xcmetrics/src/components/OverviewTrends/OverviewTrends.tsx index e6a1601e37..012b1a5df2 100644 --- a/plugins/xcmetrics/src/components/OverviewTrends/OverviewTrends.tsx +++ b/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'; diff --git a/plugins/xcmetrics/src/components/PreformattedText/PreformattedText.tsx b/plugins/xcmetrics/src/components/PreformattedText/PreformattedText.tsx index 2b6a77cc9d..712d94f8aa 100644 --- a/plugins/xcmetrics/src/components/PreformattedText/PreformattedText.tsx +++ b/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'; diff --git a/plugins/xcmetrics/src/components/StatusCell/StatusCell.tsx b/plugins/xcmetrics/src/components/StatusCell/StatusCell.tsx index 98ddadc1ff..7e73d8483a 100644 --- a/plugins/xcmetrics/src/components/StatusCell/StatusCell.tsx +++ b/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'; diff --git a/plugins/xcmetrics/src/components/StatusMatrix/StatusMatrix.tsx b/plugins/xcmetrics/src/components/StatusMatrix/StatusMatrix.tsx index 4c5af54017..b51852607f 100644 --- a/plugins/xcmetrics/src/components/StatusMatrix/StatusMatrix.tsx +++ b/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; diff --git a/plugins/xcmetrics/src/components/Trend/Trend.tsx b/plugins/xcmetrics/src/components/Trend/Trend.tsx index 575872e813..29ed737a71 100644 --- a/plugins/xcmetrics/src/components/Trend/Trend.tsx +++ b/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[];