diff --git a/.changeset/purple-bananas-add.md b/.changeset/purple-bananas-add.md new file mode 100644 index 0000000000..71eee2d154 --- /dev/null +++ b/.changeset/purple-bananas-add.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-playlist': patch +--- + +Added an optional ESLint rule - no-top-level-material-ui-4-imports - in Playlist plugin which has an auto fix function to migrate the imports and used it to migrate the Material UI imports for `plugins/playlist`. diff --git a/plugins/playlist/.eslintrc.js b/plugins/playlist/.eslintrc.js index e2a53a6ad2..9d5b45a010 100644 --- a/plugins/playlist/.eslintrc.js +++ b/plugins/playlist/.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/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.test.tsx b/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.test.tsx index ab839c9a85..589f85b369 100644 --- a/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.test.tsx +++ b/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.test.tsx @@ -21,7 +21,7 @@ import { permissionApiRef, } from '@backstage/plugin-permission-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; -import { Button } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import { fireEvent, waitFor, act } from '@testing-library/react'; import React from 'react'; import { SWRConfig } from 'swr'; diff --git a/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx b/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx index 26c7b3fd45..bbbb97392b 100644 --- a/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx +++ b/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx @@ -25,7 +25,10 @@ import { permissions, PlaylistMetadata, } from '@backstage/plugin-playlist-common'; -import { Button, IconButton, Theme, useMediaQuery } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; +import { Theme } from '@material-ui/core/styles'; import AddCircleOutline from '@material-ui/icons/AddCircleOutline'; import React, { useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; diff --git a/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.test.tsx b/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.test.tsx index 3595f42d00..cf51f4d44e 100644 --- a/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.test.tsx +++ b/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.test.tsx @@ -23,7 +23,7 @@ import { PermissionApi, permissionApiRef, } from '@backstage/plugin-permission-react'; -import { Button } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import { fireEvent, getByRole, waitFor, act } from '@testing-library/react'; import React from 'react'; import { SWRConfig } from 'swr'; diff --git a/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.tsx b/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.tsx index 38ea156320..b3cb472714 100644 --- a/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.tsx +++ b/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.tsx @@ -27,22 +27,20 @@ import { Playlist, PlaylistMetadata, } from '@backstage/plugin-playlist-common'; -import { - Button, - Dialog, - DialogActions, - DialogContent, - DialogTitle, - IconButton, - InputAdornment, - LinearProgress, - List, - ListItem, - ListItemIcon, - ListItemText, - makeStyles, - TextField, -} 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 InputAdornment from '@material-ui/core/InputAdornment'; +import LinearProgress from '@material-ui/core/LinearProgress'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import TextField from '@material-ui/core/TextField'; +import { makeStyles } from '@material-ui/core/styles'; import ClearButton from '@material-ui/icons/Clear'; import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'; import SearchIcon from '@material-ui/icons/Search'; diff --git a/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx b/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx index 0691d26732..bfd633e084 100644 --- a/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx +++ b/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx @@ -21,16 +21,14 @@ import { useApi, } from '@backstage/core-plugin-api'; import { Playlist } from '@backstage/plugin-playlist-common'; -import { - Card, - List, - ListItemIcon, - ListItemSecondaryAction, - ListItemText, - makeStyles, - MenuItem, - Typography, -} from '@material-ui/core'; +import Card from '@material-ui/core/Card'; +import List from '@material-ui/core/List'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import ListItemText from '@material-ui/core/ListItemText'; +import MenuItem from '@material-ui/core/MenuItem'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay'; import SettingsIcon from '@material-ui/icons/Settings'; import { compact } from 'lodash'; diff --git a/plugins/playlist/src/components/PlaylistCard/PlaylistCard.tsx b/plugins/playlist/src/components/PlaylistCard/PlaylistCard.tsx index 8b52bcc1de..755798b13a 100644 --- a/plugins/playlist/src/components/PlaylistCard/PlaylistCard.tsx +++ b/plugins/playlist/src/components/PlaylistCard/PlaylistCard.tsx @@ -22,17 +22,15 @@ import { import { useRouteRef } from '@backstage/core-plugin-api'; import { EntityRefLinks } from '@backstage/plugin-catalog-react'; import { Playlist } from '@backstage/plugin-playlist-common'; -import { - Box, - Card, - CardActions, - CardContent, - CardMedia, - Chip, - makeStyles, - Tooltip, - Typography, -} from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; +import CardMedia from '@material-ui/core/CardMedia'; +import Chip from '@material-ui/core/Chip'; +import Tooltip from '@material-ui/core/Tooltip'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import LockIcon from '@material-ui/icons/Lock'; import React from 'react'; import { playlistRouteRef } from '../../routes'; diff --git a/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.tsx b/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.tsx index 97bd4728b9..a7e7b6d976 100644 --- a/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.tsx +++ b/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.tsx @@ -19,23 +19,21 @@ import { identityApiRef, useApi } from '@backstage/core-plugin-api'; import { humanizeEntityRef } from '@backstage/plugin-catalog-react'; import { PlaylistMetadata } from '@backstage/plugin-playlist-common'; import { playlistApiRef } from '../../api'; -import { - Button, - CircularProgress, - Dialog, - DialogActions, - DialogContent, - FormControl, - FormControlLabel, - InputLabel, - makeStyles, - MenuItem, - LinearProgress, - Radio, - RadioGroup, - Select, - TextField, -} from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import CircularProgress from '@material-ui/core/CircularProgress'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import FormControl from '@material-ui/core/FormControl'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import InputLabel from '@material-ui/core/InputLabel'; +import MenuItem from '@material-ui/core/MenuItem'; +import LinearProgress from '@material-ui/core/LinearProgress'; +import Radio from '@material-ui/core/Radio'; +import RadioGroup from '@material-ui/core/RadioGroup'; +import Select from '@material-ui/core/Select'; +import TextField from '@material-ui/core/TextField'; +import { makeStyles } from '@material-ui/core/styles'; import React, { useState } from 'react'; import { useForm, Controller } from 'react-hook-form'; import useAsync from 'react-use/lib/useAsync'; diff --git a/plugins/playlist/src/components/PlaylistList/PlaylistList.tsx b/plugins/playlist/src/components/PlaylistList/PlaylistList.tsx index 6ec06f3e05..b81ae0125c 100644 --- a/plugins/playlist/src/components/PlaylistList/PlaylistList.tsx +++ b/plugins/playlist/src/components/PlaylistList/PlaylistList.tsx @@ -21,7 +21,7 @@ import { Progress, WarningPanel, } from '@backstage/core-components'; -import { Typography } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; import { useTitle, usePlaylistList } from '../../hooks'; import { PlaylistCard } from '../PlaylistCard'; diff --git a/plugins/playlist/src/components/PlaylistOwnerPicker/PlaylistOwnerPicker.tsx b/plugins/playlist/src/components/PlaylistOwnerPicker/PlaylistOwnerPicker.tsx index d7fd97ff19..f031d53aa8 100644 --- a/plugins/playlist/src/components/PlaylistOwnerPicker/PlaylistOwnerPicker.tsx +++ b/plugins/playlist/src/components/PlaylistOwnerPicker/PlaylistOwnerPicker.tsx @@ -17,18 +17,16 @@ import { parseEntityRef } from '@backstage/catalog-model'; import { humanizeEntityRef } from '@backstage/plugin-catalog-react'; import { Playlist } from '@backstage/plugin-playlist-common'; -import { - Box, - Checkbox, - Chip, - FormControlLabel, - TextField, - Typography, -} from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Checkbox from '@material-ui/core/Checkbox'; +import Chip from '@material-ui/core/Chip'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import TextField from '@material-ui/core/TextField'; +import Typography from '@material-ui/core/Typography'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { Autocomplete } from '@material-ui/lab'; +import Autocomplete from '@material-ui/lab/Autocomplete'; import React, { useEffect, useMemo, useState } from 'react'; import { usePlaylistList } from '../../hooks'; diff --git a/plugins/playlist/src/components/PlaylistPage/AddEntitiesDrawer.tsx b/plugins/playlist/src/components/PlaylistPage/AddEntitiesDrawer.tsx index 529327776e..5f404ef8f7 100644 --- a/plugins/playlist/src/components/PlaylistPage/AddEntitiesDrawer.tsx +++ b/plugins/playlist/src/components/PlaylistPage/AddEntitiesDrawer.tsx @@ -32,23 +32,19 @@ import { SearchResultPager, useSearch, } from '@backstage/plugin-search-react'; -import { - Box, - Button, - Chip, - createStyles, - Divider, - Drawer, - Grid, - List, - ListItem, - ListItemSecondaryAction, - ListItemText, - makeStyles, - Paper, - Theme, - Typography, -} from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Button from '@material-ui/core/Button'; +import Chip from '@material-ui/core/Chip'; +import Divider from '@material-ui/core/Divider'; +import Drawer from '@material-ui/core/Drawer'; +import Grid from '@material-ui/core/Grid'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import ListItemText from '@material-ui/core/ListItemText'; +import Paper from '@material-ui/core/Paper'; +import Typography from '@material-ui/core/Typography'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import React, { useCallback, useEffect, useMemo } from 'react'; const useStyles = makeStyles((theme: Theme) => diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.test.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.test.tsx index ba6f94e945..0ee1bf7ebc 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.test.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.test.tsx @@ -22,7 +22,7 @@ import { permissionApiRef, } from '@backstage/plugin-permission-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; -import { Button } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import { fireEvent, waitFor, act } from '@testing-library/react'; import React from 'react'; import { SWRConfig } from 'swr'; diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.test.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.test.tsx index 480ac038f2..7a9283b163 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.test.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.test.tsx @@ -26,7 +26,7 @@ import { } from '@backstage/plugin-permission-react'; import { permissions, Playlist } from '@backstage/plugin-playlist-common'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; -import { Button } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import { fireEvent, waitFor, act } from '@testing-library/react'; import React from 'react'; import { SWRConfig } from 'swr'; diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx index 23a41b734b..868559695f 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx @@ -32,15 +32,13 @@ import { Playlist, PlaylistMetadata, } from '@backstage/plugin-playlist-common'; -import { - Button, - Chip, - CircularProgress, - Dialog, - DialogActions, - DialogContent, - makeStyles, -} from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Chip from '@material-ui/core/Chip'; +import CircularProgress from '@material-ui/core/CircularProgress'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import { makeStyles } from '@material-ui/core/styles'; import EditIcon from '@material-ui/icons/Edit'; import DeleteIcon from '@material-ui/icons/Delete'; import React, { useCallback, useState } from 'react'; diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx index b17fbd2fb7..ebd5c407f1 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx @@ -19,16 +19,14 @@ import { errorApiRef, useApi } from '@backstage/core-plugin-api'; import { ResponseError } from '@backstage/errors'; import { usePermission } from '@backstage/plugin-permission-react'; import { permissions } from '@backstage/plugin-playlist-common'; -import { - Button, - Card, - CardContent, - CardHeader, - Divider, - LinearProgress, - makeStyles, - Typography, -} from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; +import CardHeader from '@material-ui/core/CardHeader'; +import Divider from '@material-ui/core/Divider'; +import LinearProgress from '@material-ui/core/LinearProgress'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import React, { useEffect } from 'react'; import { useParams } from 'react-router-dom'; import useAsyncFn from 'react-use/lib/useAsyncFn'; diff --git a/plugins/playlist/src/components/PlaylistSearchBar/PlaylistSearchBar.tsx b/plugins/playlist/src/components/PlaylistSearchBar/PlaylistSearchBar.tsx index 44e0b28c13..566240cf1d 100644 --- a/plugins/playlist/src/components/PlaylistSearchBar/PlaylistSearchBar.tsx +++ b/plugins/playlist/src/components/PlaylistSearchBar/PlaylistSearchBar.tsx @@ -15,14 +15,12 @@ */ import { Playlist } from '@backstage/plugin-playlist-common'; -import { - FormControl, - IconButton, - Input, - InputAdornment, - makeStyles, - Toolbar, -} from '@material-ui/core'; +import FormControl from '@material-ui/core/FormControl'; +import IconButton from '@material-ui/core/IconButton'; +import Input from '@material-ui/core/Input'; +import InputAdornment from '@material-ui/core/InputAdornment'; +import Toolbar from '@material-ui/core/Toolbar'; +import { makeStyles } from '@material-ui/core/styles'; import Clear from '@material-ui/icons/Clear'; import Search from '@material-ui/icons/Search'; import React, { useState } from 'react'; diff --git a/plugins/playlist/src/components/PlaylistSortPicker/PlaylistSortPicker.tsx b/plugins/playlist/src/components/PlaylistSortPicker/PlaylistSortPicker.tsx index 219792e2dc..4f6e7baf6d 100644 --- a/plugins/playlist/src/components/PlaylistSortPicker/PlaylistSortPicker.tsx +++ b/plugins/playlist/src/components/PlaylistSortPicker/PlaylistSortPicker.tsx @@ -15,13 +15,11 @@ */ import { Playlist } from '@backstage/plugin-playlist-common'; -import { - ListSubheader, - makeStyles, - MenuItem, - Select, - Typography, -} from '@material-ui/core'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import MenuItem from '@material-ui/core/MenuItem'; +import Select from '@material-ui/core/Select'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import SwapVertIcon from '@material-ui/icons/SwapVert'; import React from 'react'; import useEffectOnce from 'react-use/lib/useEffectOnce';