From cb64381adf7b445e504fbaafe6bc714edcf3011b Mon Sep 17 00:00:00 2001 From: Aditya Kumar Date: Wed, 13 Mar 2024 10:34:35 +0530 Subject: [PATCH] Added Material UI 4 import rule to plugins/bazaar Signed-off-by: Aditya Kumar --- .changeset/neat-rivers-happen.md | 5 +++++ plugins/bazaar/.eslintrc.js | 6 +++++- plugins/bazaar/src/components/About/About.tsx | 4 +++- .../BazaarOverviewCard/BazaarOverviewCard.tsx | 2 +- .../components/CardContentFields/AboutField.tsx | 4 +++- .../CardContentFields/CardContentFields.tsx | 12 +++++------- .../src/components/DateSelector/DateSelector.tsx | 8 +++----- .../DoubleDateSelector/DoubleDateSelector.tsx | 3 ++- .../EditProjectDialog/EditProjectDialog.tsx | 3 ++- .../EntityBazaarInfoCard/EntityBazaarInfoCard.tsx | 2 +- .../EntityBazaarInfoContent.tsx | 7 +++++-- .../HomePageBazaarInfoCard.tsx | 14 ++++++-------- .../src/components/InputField/InputField.tsx | 2 +- .../LinkProjectDialog/LinkProjectDialog.tsx | 12 +++++------- .../src/components/ProjectCard/ProjectCard.tsx | 14 ++++++-------- .../src/components/ProjectDialog/ProjectDialog.tsx | 3 ++- .../components/ProjectPreview/ProjectPreview.tsx | 12 +++++------- .../components/ProjectSelector/ProjectSelector.tsx | 5 +++-- .../SortMethodSelector/SortMethodSelector.tsx | 5 ++++- .../bazaar/src/components/SortView/SortView.tsx | 5 +++-- 20 files changed, 70 insertions(+), 58 deletions(-) create mode 100644 .changeset/neat-rivers-happen.md diff --git a/.changeset/neat-rivers-happen.md b/.changeset/neat-rivers-happen.md new file mode 100644 index 0000000000..e275b7a55f --- /dev/null +++ b/.changeset/neat-rivers-happen.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-bazaar': patch +--- + +Added an optional ESLint rule - no-top-level-material-ui-4-imports -in bazzar plugin which has an auto fix function to migrate the imports and used it to migrate the Material UI imports for plugins/bazaar diff --git a/plugins/bazaar/.eslintrc.js b/plugins/bazaar/.eslintrc.js index e2a53a6ad2..9d5b45a010 100644 --- a/plugins/bazaar/.eslintrc.js +++ b/plugins/bazaar/.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', + }, + }); \ No newline at end of file diff --git a/plugins/bazaar/src/components/About/About.tsx b/plugins/bazaar/src/components/About/About.tsx index 68525ab642..c94a149de9 100644 --- a/plugins/bazaar/src/components/About/About.tsx +++ b/plugins/bazaar/src/components/About/About.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; -import { Grid, Typography, makeStyles } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import { InfoCard, Link } from '@backstage/core-components'; const useStyles = makeStyles({ diff --git a/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx b/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx index da43d4a206..3dc5521275 100644 --- a/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx +++ b/plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx @@ -26,7 +26,7 @@ import { fetchCatalogItems } from '../../util/fetchMethods'; import { parseBazaarProject } from '../../util/parseMethods'; import { ErrorPanel, InfoCard, Link } from '@backstage/core-components'; import { bazaarPlugin } from '../../plugin'; -import { IconButton } from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton'; import StorefrontIcon from '@material-ui/icons/Storefront'; /** @public */ diff --git a/plugins/bazaar/src/components/CardContentFields/AboutField.tsx b/plugins/bazaar/src/components/CardContentFields/AboutField.tsx index e8c49bf4d7..8efb901682 100644 --- a/plugins/bazaar/src/components/CardContentFields/AboutField.tsx +++ b/plugins/bazaar/src/components/CardContentFields/AboutField.tsx @@ -15,7 +15,9 @@ */ import { useElementFilter } from '@backstage/core-plugin-api'; -import { Grid, makeStyles, Typography } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; const useStyles = makeStyles(theme => ({ diff --git a/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx b/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx index f252efebee..96a85b6daa 100644 --- a/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx +++ b/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx @@ -15,13 +15,11 @@ */ import React from 'react'; -import { - Grid, - Card, - CardContent, - Typography, - GridSize, -} from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; +import Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; +import Typography from '@material-ui/core/Typography'; +import GridSize from '@material-ui/core/GridSize'; import { parseEntityRef } from '@backstage/catalog-model'; import { Avatar, Link } from '@backstage/core-components'; import { useRouteRef } from '@backstage/core-plugin-api'; diff --git a/plugins/bazaar/src/components/DateSelector/DateSelector.tsx b/plugins/bazaar/src/components/DateSelector/DateSelector.tsx index 600247a53f..34666fdc74 100644 --- a/plugins/bazaar/src/components/DateSelector/DateSelector.tsx +++ b/plugins/bazaar/src/components/DateSelector/DateSelector.tsx @@ -18,12 +18,10 @@ import React from 'react'; import FormControl from '@material-ui/core/FormControl'; import { Controller, Control, UseFormSetValue } from 'react-hook-form'; import { FormValues } from '../../types'; -import { - KeyboardDatePicker, - MuiPickersUtilsProvider, -} from '@material-ui/pickers'; +import KeyboardDatePicker from '@material-ui/pickers/KeyboardDatePicker'; +import MuiPickersUtilsProvider from '@material-ui/pickers/MuiPickersUtilsProvider'; import LuxonUtils from '@date-io/luxon'; -import { IconButton } from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton'; import ClearIcon from '@material-ui/icons/Clear'; type Props = { diff --git a/plugins/bazaar/src/components/DoubleDateSelector/DoubleDateSelector.tsx b/plugins/bazaar/src/components/DoubleDateSelector/DoubleDateSelector.tsx index eb72ee67dc..7cd208cd3f 100644 --- a/plugins/bazaar/src/components/DoubleDateSelector/DoubleDateSelector.tsx +++ b/plugins/bazaar/src/components/DoubleDateSelector/DoubleDateSelector.tsx @@ -18,7 +18,8 @@ import React from 'react'; import { Control, UseFormSetValue } from 'react-hook-form'; import { FormValues } from '../../types'; import { DateSelector } from '../DateSelector/DateSelector'; -import { Typography, makeStyles } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; type Props = { control: Control; diff --git a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx index 2c5539b988..01c36a8d72 100644 --- a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx +++ b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx @@ -21,7 +21,8 @@ import { BazaarProject, FormValues } from '../../types'; import { bazaarApiRef } from '../../api'; import { UseFormGetValues } from 'react-hook-form'; import { ConfirmationDialog } from '../ConfirmationDialog'; -import { Button, makeStyles } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import { makeStyles } from '@material-ui/core/styles'; type Props = { bazaarProject: BazaarProject; diff --git a/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx b/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx index ba38f3189e..c89e2ec34e 100644 --- a/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx +++ b/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx @@ -21,7 +21,7 @@ import { stringifyEntityRef } from '@backstage/catalog-model'; import { useEntity } from '@backstage/plugin-catalog-react'; import { bazaarApiRef } from '../../api'; import { EntityBazaarInfoContent } from '../EntityBazaarInfoContent'; -import { Card } from '@material-ui/core'; +import Card from '@material-ui/core/Card'; import { parseBazaarResponse } from '../../util/parseMethods'; /** @public */ diff --git a/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx b/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx index 0c7b0bb126..250a4a489d 100644 --- a/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx +++ b/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx @@ -15,7 +15,10 @@ */ import React, { useState, useEffect } from 'react'; -import { CardHeader, Divider, IconButton, makeStyles } from '@material-ui/core'; +import CardHeader from '@material-ui/core/CardHeader'; +import Divider from '@material-ui/core/Divider'; +import IconButton from '@material-ui/core/IconButton'; +import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import { HeaderIconLinkRow, @@ -31,7 +34,7 @@ import { EditProjectDialog } from '../EditProjectDialog'; import { useApi, identityApiRef } from '@backstage/core-plugin-api'; import { BazaarProject, Member } from '../../types'; import { bazaarApiRef } from '../../api'; -import { Alert } from '@material-ui/lab'; +import Alert from '@material-ui/lab/Alert'; import useAsyncFn from 'react-use/lib/useAsyncFn'; import ExitToAppIcon from '@material-ui/icons/ExitToApp'; import { parseEntityRef } from '@backstage/catalog-model'; diff --git a/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx b/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx index c361098273..e522b6b8c4 100644 --- a/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx +++ b/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx @@ -15,13 +15,11 @@ */ import React, { useState, useEffect } from 'react'; -import { - Card, - CardHeader, - Divider, - IconButton, - makeStyles, -} from '@material-ui/core'; +import Card from '@material-ui/core/Card'; +import CardHeader from '@material-ui/core/CardHeader'; +import Divider from '@material-ui/core/Divider'; +import IconButton from '@material-ui/core/IconButton'; +import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import { HeaderIconLinkRow, @@ -45,7 +43,7 @@ import { } from '@backstage/core-plugin-api'; import { Member, BazaarProject } from '../../types'; import { bazaarApiRef } from '../../api'; -import { Alert } from '@material-ui/lab'; +import Alert from '@material-ui/lab/Alert'; import useAsyncFn from 'react-use/lib/useAsyncFn'; import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react'; diff --git a/plugins/bazaar/src/components/InputField/InputField.tsx b/plugins/bazaar/src/components/InputField/InputField.tsx index a926ac41ad..bd6cbfce51 100644 --- a/plugins/bazaar/src/components/InputField/InputField.tsx +++ b/plugins/bazaar/src/components/InputField/InputField.tsx @@ -21,7 +21,7 @@ import { FieldError, ValidationRule, } from 'react-hook-form'; -import { TextField } from '@material-ui/core'; +import TextField from '@material-ui/core/TextField'; import { FormValues } from '../../types'; type Rules = { diff --git a/plugins/bazaar/src/components/LinkProjectDialog/LinkProjectDialog.tsx b/plugins/bazaar/src/components/LinkProjectDialog/LinkProjectDialog.tsx index e1ef1e217f..3cf474b97a 100644 --- a/plugins/bazaar/src/components/LinkProjectDialog/LinkProjectDialog.tsx +++ b/plugins/bazaar/src/components/LinkProjectDialog/LinkProjectDialog.tsx @@ -15,13 +15,11 @@ */ import React, { useState } from 'react'; -import { - Dialog, - DialogActions, - Button, - DialogContent, - makeStyles, -} from '@material-ui/core'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import Button from '@material-ui/core/Button'; +import DialogContent from '@material-ui/core/DialogContent'; +import { makeStyles } from '@material-ui/core/styles'; import { ProjectSelector } from '../ProjectSelector'; import { CustomDialogTitle } from '../CustomDialogTitle'; import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; diff --git a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx index eb125d2111..46b64c9f5d 100644 --- a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx +++ b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx @@ -16,14 +16,12 @@ import React, { useState } from 'react'; import { ItemCardHeader } from '@backstage/core-components'; -import { - Card, - CardActionArea, - CardContent, - Dialog, - makeStyles, - Typography, -} from '@material-ui/core'; +import Card from '@material-ui/core/Card'; +import CardActionArea from '@material-ui/core/CardActionArea'; +import CardContent from '@material-ui/core/CardContent'; +import Dialog from '@material-ui/core/Dialog'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import { StatusTag } from '../StatusTag/StatusTag'; import { BazaarProject } from '../../types'; import { DateTime } from 'luxon'; diff --git a/plugins/bazaar/src/components/ProjectDialog/ProjectDialog.tsx b/plugins/bazaar/src/components/ProjectDialog/ProjectDialog.tsx index 3a0d156fd8..3ec0c87cfe 100644 --- a/plugins/bazaar/src/components/ProjectDialog/ProjectDialog.tsx +++ b/plugins/bazaar/src/components/ProjectDialog/ProjectDialog.tsx @@ -15,7 +15,8 @@ */ import React from 'react'; -import { Button, Dialog } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Dialog from '@material-ui/core/Dialog'; import { useForm, UseFormReset, UseFormGetValues } from 'react-hook-form'; import { InputField } from '../InputField/InputField'; import { InputSelector } from '../InputSelector/InputSelector'; diff --git a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx index 39319b6353..28d835d082 100644 --- a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx +++ b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx @@ -16,13 +16,11 @@ import React, { ChangeEvent, useState } from 'react'; import { ProjectCard } from '../ProjectCard/ProjectCard'; -import { - Box, - makeStyles, - Grid, - TablePagination, - GridSize, -} from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Grid from '@material-ui/core/Grid'; +import TablePagination from '@material-ui/core/TablePagination'; +import GridSize from '@material-ui/core/GridSize'; +import { makeStyles } from '@material-ui/core/styles'; import { BazaarProject } from '../../types'; import { Entity } from '@backstage/catalog-model'; diff --git a/plugins/bazaar/src/components/ProjectSelector/ProjectSelector.tsx b/plugins/bazaar/src/components/ProjectSelector/ProjectSelector.tsx index 41ddacceb4..00553da7d7 100644 --- a/plugins/bazaar/src/components/ProjectSelector/ProjectSelector.tsx +++ b/plugins/bazaar/src/components/ProjectSelector/ProjectSelector.tsx @@ -17,8 +17,9 @@ import React from 'react'; import { Entity } from '@backstage/catalog-model'; import Typography from '@material-ui/core/Typography'; -import { Autocomplete } from '@material-ui/lab'; -import { TextField, makeStyles } from '@material-ui/core'; +import Autocomplete from '@material-ui/lab/Autocomplete'; +import TextField from '@material-ui/core/TextField'; +import { makeStyles } from '@material-ui/core/styles'; type Props = { catalogEntities: Entity[]; diff --git a/plugins/bazaar/src/components/SortMethodSelector/SortMethodSelector.tsx b/plugins/bazaar/src/components/SortMethodSelector/SortMethodSelector.tsx index 2ce7f623d1..b2851b667b 100644 --- a/plugins/bazaar/src/components/SortMethodSelector/SortMethodSelector.tsx +++ b/plugins/bazaar/src/components/SortMethodSelector/SortMethodSelector.tsx @@ -15,7 +15,10 @@ */ import React, { ChangeEvent, ReactNode } from 'react'; -import { FormControl, MenuItem, Select, makeStyles } from '@material-ui/core'; +import FormControl from '@material-ui/core/FormControl'; +import MenuItem from '@material-ui/core/MenuItem'; +import Select from '@material-ui/core/Select'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ select: { diff --git a/plugins/bazaar/src/components/SortView/SortView.tsx b/plugins/bazaar/src/components/SortView/SortView.tsx index aa310ba55d..427f3c1ff1 100644 --- a/plugins/bazaar/src/components/SortView/SortView.tsx +++ b/plugins/bazaar/src/components/SortView/SortView.tsx @@ -18,14 +18,15 @@ import React, { ChangeEvent, useEffect, useState } from 'react'; import { Content, SupportButton } from '@backstage/core-components'; import { AddProjectDialog } from '../AddProjectDialog'; import { ProjectPreview } from '../ProjectPreview/ProjectPreview'; -import { Button, makeStyles } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import { makeStyles } from '@material-ui/core/styles'; import useAsyncFn from 'react-use/lib/useAsyncFn'; import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; import { useApi } from '@backstage/core-plugin-api'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { BazaarProject } from '../../types'; import { bazaarApiRef } from '../../api'; -import { Alert } from '@material-ui/lab'; +import Alert from '@material-ui/lab/Alert'; import SearchBar from 'material-ui-search-bar'; import { sortByDate,