diff --git a/.changeset/few-dots-greet.md b/.changeset/few-dots-greet.md new file mode 100644 index 0000000000..3e5965b63a --- /dev/null +++ b/.changeset/few-dots-greet.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search-react': patch +--- + +add mui imports eslint rule diff --git a/plugins/search-react/.eslintrc.js b/plugins/search-react/.eslintrc.js index e2a53a6ad2..e487f765b2 100644 --- a/plugins/search-react/.eslintrc.js +++ b/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', + }, +}); diff --git a/plugins/search-react/api-report-alpha.md b/plugins/search-react/api-report-alpha.md index b0edd42646..36f5f049c5 100644 --- a/plugins/search-react/api-report-alpha.md +++ b/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'; diff --git a/plugins/search-react/api-report.md b/plugins/search-react/api-report.md index cf26c60e57..b5b06a2904 100644 --- a/plugins/search-react/api-report.md +++ b/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: ( diff --git a/plugins/search-react/src/alpha.tsx b/plugins/search-react/src/alpha.tsx index e075d9bfb8..db198fa99d 100644 --- a/plugins/search-react/src/alpha.tsx +++ b/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, diff --git a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx index 7049b7f4ef..89c98f6e72 100644 --- a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx index 0d2c59e173..812e951439 100644 --- a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx b/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx index 511635a4d0..d6474f5d56 100644 --- a/plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx +++ b/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( () => ({ diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx index 0eaece87bb..eb113cb5fd 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx index 2a3cb6bee4..bc9e3bff13 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx index f671546efa..3c4cfd8809 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.stories.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.tsx index db0dc81456..d2227ef0d3 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.tsx +++ b/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}. diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx index f342eed211..852a3a1881 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx index 7580228c8e..254f39e48e 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx index 35d1f376e5..09f571a4c9 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx index 505c1e13c3..028fadc276 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.stories.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx index 8579f01caa..acfa6aec3b 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx +++ b/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 { diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx index dfb4e7ea91..84d47b94cd 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx index 743d3ccb52..18b4c5f525 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx +++ b/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 => { diff --git a/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx index a64d053dae..bc08270c28 100644 --- a/plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx index 2f497d4568..a016a7c5ed 100644 --- a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx index 1d572b371b..66513783d4 100644 --- a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.test.tsx +++ b/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 { diff --git a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.tsx b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.tsx index ea1817193c..428e34981b 100644 --- a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx b/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx index d822d0f52d..5b3bd48d41 100644 --- a/plugins/search-react/src/components/SearchResultList/SearchResultList.stories.tsx +++ b/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'; diff --git a/plugins/search-react/src/components/SearchResultList/SearchResultList.tsx b/plugins/search-react/src/components/SearchResultList/SearchResultList.tsx index 1a539b74a6..5abea8d961 100644 --- a/plugins/search-react/src/components/SearchResultList/SearchResultList.tsx +++ b/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, diff --git a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx b/plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx index b4c834a678..14a0dcf395 100644 --- a/plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx +++ b/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'; diff --git a/plugins/search-react/src/extensions.test.tsx b/plugins/search-react/src/extensions.test.tsx index febe82dbe1..170dca2b6d 100644 --- a/plugins/search-react/src/extensions.test.tsx +++ b/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, diff --git a/plugins/search-react/src/extensions.tsx b/plugins/search-react/src/extensions.tsx index 132fad25b5..75b6eaaa1f 100644 --- a/plugins/search-react/src/extensions.tsx +++ b/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';