add miu import rules to Search-react

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>

.changeset/few-dots-greet.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search-react': patch
+---
+
+add mui imports eslint rule

plugins/search-react/.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/search-react/api-report-alpha.md

@@ -7,7 +7,7 @@
 
 import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
-import { ListItemProps } from '@material-ui/core';
+import { ListItemProps } from '@material-ui/core/ListItem';
 import { PortableSchema } from '@backstage/frontend-plugin-api';
 import { SearchDocument } from '@backstage/plugin-search-common';
 import { SearchResult } from '@backstage/plugin-search-common';

plugins/search-react/api-report.md

@@ -7,15 +7,15 @@
 
 import { ApiRef } from '@backstage/core-plugin-api';
 import { AsyncState } from 'react-use/esm/useAsync';
-import { AutocompleteProps } from '@material-ui/lab';
+import { AutocompleteProps } from '@material-ui/lab/Autocomplete';
 import { Extension } from '@backstage/core-plugin-api';
 import { ForwardRefExoticComponent } from 'react';
 import { JsonObject } from '@backstage/types';
 import { JsonValue } from '@backstage/types';
 import { LinkProps } from '@backstage/core-components';
-import { ListItemProps } from '@material-ui/core';
-import { ListItemTextProps } from '@material-ui/core';
-import { ListProps } from '@material-ui/core';
+import { ListItemProps } from '@material-ui/core/ListItem';
+import { ListItemTextProps } from '@material-ui/core/ListItemText';
+import { ListProps } from '@material-ui/core/List';
 import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
@@ -26,7 +26,7 @@ import { SearchQuery } from '@backstage/plugin-search-common';
 import { SearchResult as SearchResult_2 } from '@backstage/plugin-search-common';
 import { SearchResultSet } from '@backstage/plugin-search-common';
 import { TextFieldProps } from '@material-ui/core/TextField';
-import { TypographyProps } from '@material-ui/core';
+import { TypographyProps } from '@material-ui/core/Typography';
 
 // @public (undocumented)
 export const AutocompleteFilter: (

plugins/search-react/src/alpha.tsx

@@ -16,7 +16,7 @@
 
 import React, { lazy } from 'react';
 
-import { ListItemProps } from '@material-ui/core';
+import { ListItemProps } from '@material-ui/core/ListItem';
 
 import {
   ExtensionBoundary,

plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx

@@ -16,7 +16,7 @@
 
 import { LinkButton } from '@backstage/core-components';
 import { lightTheme } from '@backstage/theme';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';
 import FindInPageIcon from '@material-ui/icons/FindInPage';

plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx

@@ -21,7 +21,9 @@ import {
   SearchDocument,
 } from '@backstage/plugin-search-common';
 import { HighlightedSearchResultText } from '../HighlightedSearchResultText';
-import { ListItemIcon, ListItemText, Box } from '@material-ui/core';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import { Link } from '@backstage/core-components';
 

plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(
   () => ({

plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx

@@ -16,7 +16,7 @@
 
 import React, { ComponentType, PropsWithChildren } from 'react';
 
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import LabelIcon from '@material-ui/icons/Label';
 
 import { TestApiProvider } from '@backstage/test-utils';

plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -16,14 +16,16 @@
 
 import React, { ChangeEvent, useCallback, useMemo } from 'react';
 
-import { CircularProgress, makeStyles } from '@material-ui/core';
-import {
-  Autocomplete,
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles } from '@material-ui/core/styles';
+import Autocomplete, {
   AutocompleteProps,
+  AutocompleteRenderInputParams,
+} from '@material-ui/lab/Autocomplete';
+import {
   AutocompleteChangeDetails,
   AutocompleteChangeReason,
-  AutocompleteRenderInputParams,
-} from '@material-ui/lab';
+} from '@material-ui/lab/useAutocomplete';
 
 import { SearchContextProvider, useSearch } from '../../context';
 import { SearchBar, SearchBarProps } from '../SearchBar';

plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx

@@ -16,7 +16,8 @@
 
 import React, { ComponentType, PropsWithChildren } from 'react';
 
-import { Grid, ListItem } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import ListItem from '@material-ui/core/ListItem';
 import LabelIcon from '@material-ui/icons/Label';
 
 import { TestApiProvider } from '@backstage/test-utils';

plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.tsx

@@ -15,11 +15,10 @@
  */
 
 import React, { ReactNode } from 'react';
-import {
-  ListItemIcon,
-  ListItemText,
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText, {
   ListItemTextProps,
-} from '@material-ui/core';
+} from '@material-ui/core/ListItemText';
 
 /**
  * Props for {@link SearchAutocompleteDefaultOption}.

plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { ComponentType, PropsWithChildren } from 'react';
-import { Grid, makeStyles } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 
 import { TestApiProvider } from '@backstage/test-utils';
 

plugins/search-react/src/components/SearchBar/SearchBar.tsx

@@ -19,7 +19,9 @@ import {
   configApiRef,
   useApi,
 } from '@backstage/core-plugin-api';
-import { IconButton, InputAdornment, TextField } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import SearchIcon from '@material-ui/icons/Search';

plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx

@@ -15,12 +15,12 @@
  */
 
 import React, { ChangeEvent, useState } from 'react';
-import { Chip, TextField } from '@material-ui/core';
-import {
-  Autocomplete,
+import Chip from '@material-ui/core/Chip';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete, {
   AutocompleteGetTagProps,
   AutocompleteRenderInputParams,
-} from '@material-ui/lab';
+} from '@material-ui/lab/Autocomplete';
 
 import { useSearch } from '../../context';
 import { useAsyncFilterValues, useDefaultFilterValue } from './hooks';

plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { ComponentType, PropsWithChildren } from 'react';
-import { Grid, Paper } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
 
 import { TestApiProvider } from '@backstage/test-utils';
 

plugins/search-react/src/components/SearchFilter/SearchFilter.tsx

@@ -15,17 +15,15 @@
  */
 
 import React, { ReactElement, ChangeEvent } from 'react';
-import {
-  makeStyles,
-  FormControl,
-  FormControlLabel,
-  InputLabel,
-  Checkbox,
-  Select,
-  MenuItem,
-  FormLabel,
-  Typography,
-} from '@material-ui/core';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import InputLabel from '@material-ui/core/InputLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormLabel from '@material-ui/core/FormLabel';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 
 import { useSearch } from '../../context';
 import {

plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentType, PropsWithChildren } from 'react';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 
 import { TestApiProvider } from '@backstage/test-utils';
 

plugins/search-react/src/components/SearchPagination/SearchPagination.tsx

@@ -21,7 +21,7 @@ import React, {
   useCallback,
   useMemo,
 } from 'react';
-import { TablePagination } from '@material-ui/core';
+import TablePagination from '@material-ui/core/TablePagination';
 import { useSearch } from '../../context';
 
 const encodePageCursor = (pageCursor: number): string => {

plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx

@@ -16,7 +16,8 @@
 
 import React, { ComponentType, PropsWithChildren } from 'react';
 
-import { List, ListItem } from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
 import DefaultIcon from '@material-ui/icons/InsertDriveFile';
 import CustomIcon from '@material-ui/icons/NoteAdd';
 

plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx

@@ -21,13 +21,11 @@ import React, {
   PropsWithChildren,
 } from 'react';
 
-import {
-  Grid,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-} from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
 import DocsIcon from '@material-ui/icons/InsertDriveFile';
 
 import { JsonValue } from '@backstage/types';

plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { MenuItem } from '@material-ui/core';
+import MenuItem from '@material-ui/core/MenuItem';
 import DocsIcon from '@material-ui/icons/InsertDriveFile';
 
 import {

plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.tsx

@@ -23,20 +23,15 @@ import React, {
 } from 'react';
 import qs from 'qs';
 
-import {
-  makeStyles,
-  Theme,
-  List,
-  ListProps,
-  ListSubheader,
-  Menu,
-  MenuItem,
-  InputBase,
-  Select,
-  Chip,
-  Typography,
-  TypographyProps,
-} from '@material-ui/core';
+import List, { ListProps } from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import InputBase from '@material-ui/core/InputBase';
+import Select from '@material-ui/core/Select';
+import Chip from '@material-ui/core/Chip';
+import Typography, { TypographyProps } from '@material-ui/core/Typography';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import AddIcon from '@material-ui/icons/Add';
 import ArrowRightIcon from '@material-ui/icons/ArrowForwardIos';
 

plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx

@@ -16,7 +16,10 @@
 
 import React, { ComponentType, useState, PropsWithChildren } from 'react';
 
-import { Grid, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
 
 import { CatalogIcon, Link } from '@backstage/core-components';
 import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';

plugins/search-react/src/components/SearchResultList/SearchResultList.tsx

@@ -16,7 +16,7 @@
 
 import React, { ReactNode } from 'react';
 
-import { List, ListProps } from '@material-ui/core';
+import List, { ListProps } from '@material-ui/core/List';
 
 import {
   Progress,

plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx

@@ -16,7 +16,8 @@
 
 import React from 'react';
 
-import { Button, makeStyles } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 

plugins/search-react/src/extensions.test.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { ListItemText } from '@material-ui/core';
+import ListItemText from '@material-ui/core/ListItemText';
 
 import {
   renderInTestApp,

plugins/search-react/src/extensions.tsx

@@ -33,7 +33,8 @@ import {
 } from '@backstage/core-plugin-api';
 import { SearchDocument, SearchResult } from '@backstage/plugin-search-common';
 
-import { ListItem, List, ListProps, ListItemProps } from '@material-ui/core';
+import List, { ListProps } from '@material-ui/core/List';
+import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
 
 import { DefaultResultListItem } from './components/DefaultResultListItem';