Merge pull request #23535 from AdityaK60/Update_plugin_playlist

Added Material UI 4 import rule to plugins/playlist

.changeset/purple-bananas-add.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-playlist': patch
+---
+
+Adjusted MUI imports for better tree shaking.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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