Added Material UI 4 import rule to plugins/bazaar

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

.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

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

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

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 */

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

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

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

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<FormValues, object>;

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;

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 */

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

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

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

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

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

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

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

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[];

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: {

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,