Merge pull request #3252 from illume/nobarrel

frontend: Refactoring mui named imports from top level to individual component imports

Author: illume

frontend/src/components/App/AppContainer.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { GlobalStyles } from '@mui/material';
+import GlobalStyles from '@mui/material/GlobalStyles';
 import { SnackbarProvider } from 'notistack';
 import React from 'react';
 import { BrowserRouter, HashRouter } from 'react-router-dom';

frontend/src/components/App/AppLogo.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Theme } from '@mui/material';
+import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import React, { isValidElement, ReactElement } from 'react';
 import { getThemeName, useNavBarMode } from '../../lib/themes';

frontend/src/components/App/CreateCluster/AddCluster.tsx

@@ -15,7 +15,12 @@
  */
 
 import { InlineIcon } from '@iconify/react';
-import { Button, Card, CardContent, CardHeader, Grid, Typography } from '@mui/material';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';

frontend/src/components/App/Home/ClusterTable.tsx

@@ -15,8 +15,9 @@
  */
 
 import { Icon } from '@iconify/react';
-import { Button, useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useHistory } from 'react-router-dom';

frontend/src/components/App/Home/RecentClusters.tsx

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import { Button, Grid, ToggleButton as MuiToggledButton, ToggleButtonGroup } from '@mui/material';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import MuiToggledButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { styled } from '@mui/system';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

frontend/src/components/App/Home/SquareButton.tsx

@@ -15,10 +15,10 @@
  */
 
 import { Icon } from '@iconify/react';
-import { useTheme } from '@mui/material';
 import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
+import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
 export interface SquareButtonProps extends ButtonBaseProps {

frontend/src/components/App/Layout.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Box, Button } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
 import CssBaseline from '@mui/material/CssBaseline';
 import Link from '@mui/material/Link';

frontend/src/components/App/Notifications/List/List.tsx

@@ -15,7 +15,13 @@
  */
 
 import { Icon } from '@iconify/react';
-import { Box, IconButton, Menu, MenuItem, Tooltip, Typography, useTheme } from '@mui/material';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { useTheme } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';

frontend/src/components/App/Notifications/Notifications.tsx

@@ -16,18 +16,16 @@
 
 import bellIcon from '@iconify/icons-mdi/bell';
 import { Icon } from '@iconify/react';
-import {
-  Badge,
-  Box,
-  Button,
-  Grid,
-  IconButton,
-  ListItem,
-  Popover,
-  Tooltip,
-  Typography,
-  useTheme,
-} from '@mui/material';
+import Badge from '@mui/material/Badge';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import ListItem from '@mui/material/ListItem';
+import Popover from '@mui/material/Popover';
+import { useTheme } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';

frontend/src/components/App/PluginSettings/PluginSettings.tsx

@@ -14,10 +14,13 @@
  * limitations under the License.
  */
 
-import { Switch, SwitchProps, Typography, useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Link from '@mui/material/Link';
+import { useTheme } from '@mui/material/styles';
+import { SwitchProps } from '@mui/material/Switch';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
 import { MRT_Row } from 'material-react-table';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

frontend/src/components/App/PluginSettings/PluginSettingsDetails.stories.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TextField } from '@mui/material';
+import TextField from '@mui/material/TextField';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { PluginInfo, PluginSettingsDetailsProps } from '../../../plugin/pluginsSlice';

frontend/src/components/App/Settings/DrawerModeSettings.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { FormControlLabel, Switch } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';

frontend/src/components/App/Settings/NumRowsInput.tsx

@@ -15,18 +15,16 @@
  */
 
 import { Icon } from '@iconify/react';
-import {
-  Box,
-  Button,
-  FormControl,
-  IconButton,
-  ListItemSecondaryAction,
-  ListItemText,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
-  TextField,
-} from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import { SelectChangeEvent } from '@mui/material/Select';
+import Select from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';

frontend/src/components/App/Settings/Settings.tsx

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import { Box, MenuItem, Select, Switch } from '@mui/material';
+import Box from '@mui/material/Box';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Switch from '@mui/material/Switch';
 import { capitalize } from 'lodash';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

frontend/src/components/App/Settings/SettingsCluster.tsx

@@ -15,18 +15,16 @@
  */
 
 import { Icon, InlineIcon } from '@iconify/react';
-import {
-  Box,
-  Chip,
-  FormControl,
-  IconButton,
-  InputLabel,
-  MenuItem,
-  Select,
-  TextField,
-  Typography,
-} from '@mui/material';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import { useTheme } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';

frontend/src/components/App/VersionDialog.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DialogContent } from '@mui/material';
+import DialogContent from '@mui/material/DialogContent';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { getProductName, getVersion } from '../../helpers/getProductInfo';

frontend/src/components/Sidebar/ListItemLink.tsx

@@ -15,9 +15,12 @@
  */
 
 import { Icon, IconProps } from '@iconify/react';
-import { alpha, ListItemButton, styled, Tooltip } from '@mui/material';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
+import { styled } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import { alpha } from '@mui/system/colorManipulator';
 import React from 'react';
 import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
 

frontend/src/components/Sidebar/NavigationTabs.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { Divider } from '@mui/material';
 import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTranslation } from 'react-i18next';

frontend/src/components/Sidebar/Sidebar.tsx

@@ -15,8 +15,8 @@
  */
 
 import { InlineIcon } from '@iconify/react';
-import { Button } from '@mui/material';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import Drawer from '@mui/material/Drawer';
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';

frontend/src/components/account/Auth.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { Typography } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
@@ -23,6 +22,7 @@ import DialogContentText from '@mui/material/DialogContentText';
 import Link from '@mui/material/Link';
 import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar';
 import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { generatePath, useHistory } from 'react-router-dom';

frontend/src/components/authchooser/index.tsx

@@ -15,7 +15,8 @@
  */
 
 import { InlineIcon } from '@iconify/react';
-import { Box, Button } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import { styled } from '@mui/system';
 import _ from 'lodash';
 import React from 'react';

frontend/src/components/cluster/Chooser.tsx

@@ -15,17 +15,18 @@
  */
 
 import { Icon, InlineIcon } from '@iconify/react';
-import { DialogActions, IconButton } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import ButtonBase from '@mui/material/ButtonBase';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Container from '@mui/material/Container';
 import Dialog, { DialogProps } from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
 import { useTheme } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';

frontend/src/components/cluster/ClusterChooserPopup.tsx

@@ -15,20 +15,18 @@
  */
 
 import { Icon } from '@iconify/react';
-import {
-  ListItemIcon,
-  ListSubheader,
-  MenuItem,
-  MenuList,
-  Popover,
-  useMediaQuery,
-} from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
+import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import Popover from '@mui/material/Popover';
 import { useTheme } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router';

frontend/src/components/cluster/ClusterGroupErrorMessage.tsx

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import { Alert, AlertTitle, Box, Button } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelectedClusters } from '../../lib/k8s';

frontend/src/components/cluster/KubeConfigLoader.tsx

@@ -15,9 +15,13 @@
  */
 
 import { InlineIcon } from '@iconify/react';
-import { Button, Checkbox, FormControl, Grid, Tooltip } from '@mui/material';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import Grid from '@mui/material/Grid';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/system';
 import * as yaml from 'js-yaml';

frontend/src/components/cluster/Overview.tsx

@@ -14,8 +14,10 @@
  * limitations under the License.
  */
 
-import { FormControlLabel, Switch, Theme } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import Grid from '@mui/material/Grid';
+import { Theme } from '@mui/material/styles';
+import Switch from '@mui/material/Switch';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router';

frontend/src/components/common/ActionButton/ActionButton.tsx

@@ -15,8 +15,10 @@
  */
 
 import { Icon, IconifyIcon, IconProps } from '@iconify/react';
-import { ListItemIcon, ListItemText, MenuItem } from '@mui/material';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';