Add ESLint Rule to UserSettings Plugin

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

.changeset/khaki-penguins-whisper.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Added ESLint rule `no-top-level-material-ui-4-imports` in the `user-settings` plugin to migrate the Material UI imports.

plugins/user-settings/.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/user-settings/src/components/AuthProviders/EmptyProviders.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Button, Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import { CodeSnippet, EmptyState } from '@backstage/core-components';
 
 const EXAMPLE = `auth:

plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { makeStyles, Avatar, Theme } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import { sidebarConfig } from '@backstage/core-components';
 
 const useStyles = makeStyles<Theme, { size: number }>(theme => ({

plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx

@@ -15,16 +15,14 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import {
-  Button,
-  Grid,
-  ListItem,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
-  Tooltip,
-  Typography,
-} from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
 import {
   ApiRef,
   SessionApi,

plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { List } from '@material-ui/core';
+import List from '@material-ui/core/List';
 import { EmptyProviders } from './EmptyProviders';
 import { DefaultProviderSettings } from './DefaultProviderSettings';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';

plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Button, Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import { CodeSnippet, EmptyState } from '@backstage/core-components';
 
 const EXAMPLE = `import { createPlugin } from '@backstage/core-plugin-api';

plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx

@@ -15,13 +15,11 @@
  */
 
 import React from 'react';
-import {
-  ListItem,
-  ListItemText,
-  ListItemIcon,
-  Switch,
-  Tooltip,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Switch from '@material-ui/core/Switch';
+import Tooltip from '@material-ui/core/Tooltip';
 import { FeatureFlag } from '@backstage/core-plugin-api';
 
 type Props = {

plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx

@@ -15,13 +15,11 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import {
-  List,
-  TextField,
-  IconButton,
-  Grid,
-  Typography,
-} from '@material-ui/core';
+import List from '@material-ui/core/List';
+import TextField from '@material-ui/core/TextField';
+import IconButton from '@material-ui/core/IconButton';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import { EmptyFlags } from './EmptyFlags';
 import { FlagItem } from './FeatureFlagsItem';
 import {

plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx

@@ -15,7 +15,7 @@
  */
 
 import { InfoCard, useSidebarPinState } from '@backstage/core-components';
-import { List } from '@material-ui/core';
+import List from '@material-ui/core/List';
 import React from 'react';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';

plugins/user-settings/src/components/General/UserSettingsGeneral.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import React from 'react';
 import { UserSettingsProfileCard } from './UserSettingsProfileCard';
 import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';

plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx

@@ -19,12 +19,10 @@ import {
   useTranslationRef,
   appLanguageApiRef,
 } from '@backstage/core-plugin-api/alpha';
-import {
-  ListItem,
-  ListItemText,
-  ListItemSecondaryAction,
-  makeStyles,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import { makeStyles } from '@material-ui/core/styles';
 import { userSettingsTranslationRef } from '../../translation';
 import { useApi } from '@backstage/core-plugin-api';
 import useObservable from 'react-use/lib/useObservable';

plugins/user-settings/src/components/General/UserSettingsMenu.tsx

@@ -15,7 +15,10 @@
  */
 
 import React from 'react';
-import { IconButton, ListItemIcon, Menu, MenuItem } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
 import SignOutIcon from '@material-ui/icons/MeetingRoom';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import {

plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx

@@ -15,13 +15,11 @@
  */
 
 import React from 'react';
-import {
-  ListItem,
-  ListItemSecondaryAction,
-  ListItemText,
-  Switch,
-  Tooltip,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import Switch from '@material-ui/core/Switch';
+import Tooltip from '@material-ui/core/Tooltip';
 import { useSidebarPinState } from '@backstage/core-components';
 
 /** @public */

plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Grid, Typography } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';
 import { UserSettingsMenu } from './UserSettingsMenu';

plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { makeStyles, Avatar, Theme } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import { useUserProfile } from '../useUserProfileInfo';
 import { sidebarConfig } from '@backstage/core-components';
 

plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx

@@ -19,13 +19,11 @@ import useObservable from 'react-use/lib/useObservable';
 import AutoIcon from '@material-ui/icons/BrightnessAuto';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import {
-  ListItem,
-  ListItemText,
-  ListItemSecondaryAction,
-  Tooltip,
-  makeStyles,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Tooltip from '@material-ui/core/Tooltip';
+import { makeStyles } from '@material-ui/core/styles';
 import { appThemeApiRef, useApi } from '@backstage/core-plugin-api';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { userSettingsTranslationRef } from '../../translation';

plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { TabProps } from '@material-ui/core';
+import { TabProps } from '@material-ui/core/Tab';
 import {
   Header,
   Page,