Merge pull request #23554 from cftad/plugin-cost-insights-mui-imports

Add ESLint Rule to Cost Insights Plugin

.changeset/perfect-countries-appear.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+Added the `no-top-level-material-ui-4-imports` ESLint rule to aid with the migration to Material UI v5

plugins/cost-insights/.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/cost-insights/api-report.md

@@ -30,7 +30,7 @@ import { RefAttributes } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { SetStateAction } from 'react';
 import { TooltipProps } from 'recharts';
-import { TypographyProps } from '@material-ui/core';
+import { TypographyProps } from '@material-ui/core/Typography';
 
 // @public
 export type Alert = {

plugins/cost-insights/dev/index.tsx

@@ -26,7 +26,7 @@ import {
   EntityCostInsightsContent,
 } from '../src/plugin';
 import { Content, Header, Page } from '@backstage/core-components';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { Entity } from '@backstage/catalog-model';
 

plugins/cost-insights/src/components/ActionItems/ActionItemCard.tsx

@@ -15,7 +15,8 @@
  */
 import React, { MouseEventHandler } from 'react';
 import classnames from 'classnames';
-import { Card, CardHeader } from '@material-ui/core';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
 import { useScroll } from '../../hooks';
 import { Alert } from '../../types';
 import { useActionItemCardStyles as useStyles } from '../../utils/styles';

plugins/cost-insights/src/components/ActionItems/ActionItems.tsx

@@ -14,16 +14,14 @@
  * limitations under the License.
  */
 import React, { Fragment, MouseEventHandler } from 'react';
-import {
-  Avatar,
-  Badge,
-  Box,
-  IconButtonProps,
-  IconButton,
-  Paper,
-  Divider,
-  Tooltip,
-} from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import { IconButtonProps } from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@material-ui/core/IconButton';
+import Badge from '@material-ui/core/Badge';
+import Box from '@material-ui/core/Box';
+import Paper from '@material-ui/core/Paper';
+import Divider from '@material-ui/core/Divider';
 import { default as SnoozeIcon } from '@material-ui/icons/AccessTime';
 import { default as AcceptIcon } from '@material-ui/icons/Check';
 import { default as DismissIcon } from '@material-ui/icons/Delete';

plugins/cost-insights/src/components/AlertInsights/AlertDialog.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { capitalize } from '@material-ui/core';
+import { capitalize } from '@material-ui/core/utils';
 import { AlertDialog } from './AlertDialog';
 import { render } from '@testing-library/react';
 import { Alert, AlertFormProps, AlertStatus } from '../../types';

plugins/cost-insights/src/components/AlertInsights/AlertDialog.tsx

@@ -15,17 +15,15 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import {
-  capitalize,
-  Box,
-  Button,
-  Divider,
-  Dialog,
-  DialogActions,
-  IconButton,
-  DialogContent,
-  Typography,
-} from '@material-ui/core';
+import { capitalize } from '@material-ui/core/utils';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import DialogContent from '@material-ui/core/DialogContent';
+import Typography from '@material-ui/core/Typography';
 import { default as CloseIcon } from '@material-ui/icons/Close';
 import { useAlertDialogStyles as useStyles } from '../../utils/styles';
 import { Alert, AlertStatus } from '../../types';

plugins/cost-insights/src/components/AlertInsights/AlertInsights.tsx

@@ -16,7 +16,9 @@
 
 import React, { useEffect, useState } from 'react';
 import pluralize from 'pluralize';
-import { Box, Grid, Snackbar } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Snackbar from '@material-ui/core/Snackbar';
 import { default as MuiAlert } from '@material-ui/lab/Alert';
 import { AlertDialog } from './AlertDialog';
 import { AlertStatusSummary } from './AlertStatusSummary';

plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import { useCostInsightsStyles as useStyles } from '../../utils/styles';
 import { ScrollAnchor } from '../../utils/scroll';
 import { DefaultNavigation } from '../../utils/navigation';

plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Box, Button } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
 import { default as SnoozeIcon } from '@material-ui/icons/AccessTime';
 import { default as AcceptIcon } from '@material-ui/icons/Check';
 import { default as DismissIcon } from '@material-ui/icons/Delete';

plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx

@@ -15,7 +15,11 @@
  */
 
 import React from 'react';
-import { Avatar, Box, Button, Grid, Typography } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import { useAlertInsightsSectionStyles as useStyles } from '../../utils/styles';
 import { ScrollAnchor } from '../../utils/scroll';
 import { Alert } from '../../types';

plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.tsx

@@ -15,7 +15,11 @@
  */
 
 import React, { Fragment } from 'react';
-import { Avatar, Box, Collapse, Divider, Tooltip } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import Box from '@material-ui/core/Box';
+import Collapse from '@material-ui/core/Collapse';
+import Divider from '@material-ui/core/Divider';
+import Tooltip from '@material-ui/core/Tooltip';
 import { default as AcceptIcon } from '@material-ui/icons/Check';
 import { default as DismissIcon } from '@material-ui/icons/Delete';
 import { default as SnoozeIcon } from '@material-ui/icons/AccessTime';

plugins/cost-insights/src/components/AlertInsights/AlertStatusSummaryButton.tsx

@@ -16,7 +16,7 @@
 
 import React, { useState, MouseEventHandler, PropsWithChildren } from 'react';
 import classnames from 'classnames';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import { default as ExpandMoreIcon } from '@material-ui/icons/ExpandMore';
 import { useAlertStatusSummaryButtonStyles as useStyles } from '../../utils/styles';
 

plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx

@@ -15,7 +15,10 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { Box, Button, Container, makeStyles } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Container from '@material-ui/core/Container';
+import { makeStyles } from '@material-ui/core/styles';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';
 import { ConfigProvider, CurrencyProvider } from '../../hooks';

plugins/cost-insights/src/components/BarChart/BarChart.tsx

@@ -24,7 +24,8 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { Box, useTheme } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import { useTheme } from '@material-ui/core/styles';
 import { BarChartTick } from './BarChartTick';
 import { BarChartStepper } from './BarChartStepper';
 import { BarChartTooltip } from './BarChartTooltip';

plugins/cost-insights/src/components/BarChart/BarChartLabel.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import { useBarChartLabelStyles } from '../../utils/styles';
 
 type BarChartLabelProps = {

plugins/cost-insights/src/components/BarChart/BarChartLegend.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { Box, useTheme } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import { useTheme } from '@material-ui/core/styles';
 import { LegendItem } from '../LegendItem';
 import { currencyFormatter } from '../../utils/formatters';
 import { CostInsightsTheme } from '../../types';

plugins/cost-insights/src/components/BarChart/BarChartStepper.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { Paper, Slide } from '@material-ui/core';
+import Paper from '@material-ui/core/Paper';
+import Slide from '@material-ui/core/Slide';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import { BarChartStepperButton } from './BarChartStepperButton';

plugins/cost-insights/src/components/BarChart/BarChartStepperButton.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { forwardRef, PropsWithChildren, Ref } from 'react';
-import { ButtonBase, ButtonBaseProps } from '@material-ui/core';
+import ButtonBase, { ButtonBaseProps } from '@material-ui/core/ButtonBase';
 import { useBarChartStepperButtonStyles as useStyles } from '../../utils/styles';
 
 interface BarChartStepperButtonProps extends ButtonBaseProps {

plugins/cost-insights/src/components/BarChart/BarChartSteps.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { ButtonBase } from '@material-ui/core';
+import ButtonBase from '@material-ui/core/ButtonBase';
 import { useBarChartStepperStyles as useStyles } from '../../utils/styles';
 
 export type BarChartStepsProps = {

plugins/cost-insights/src/components/BarChart/BarChartTooltip.tsx

@@ -16,7 +16,9 @@
 
 import React, { ReactNode, PropsWithChildren } from 'react';
 import classnames from 'classnames';
-import { Box, Divider, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
 import { useTooltipStyles as useStyles } from '../../utils/styles';
 
 /** @public */

plugins/cost-insights/src/components/BarChart/BarChartTooltipItem.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import LensIcon from '@material-ui/icons/Lens';
 import { useTooltipStyles as useStyles } from '../../utils/styles';
 

plugins/cost-insights/src/components/CopyUrlToClipboard/CopyUrlToClipboard.tsx

@@ -17,7 +17,8 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
-import { Tooltip, IconButton } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@material-ui/core/IconButton';
 import AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';
 import AssignmentTurnedInOutlinedIcon from '@material-ui/icons/AssignmentTurnedInOutlined';
 import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';

plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import classnames from 'classnames';
-import { Typography, TypographyProps } from '@material-ui/core';
+import Typography, { TypographyProps } from '@material-ui/core/Typography';
 import { default as ArrowDropUp } from '@material-ui/icons/ArrowDropUp';
 import { default as ArrowDropDown } from '@material-ui/icons/ArrowDropDown';
 import { growthOf } from '../../utils/change';

plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import useAsync from 'react-use/lib/useAsync';
 import { useCostInsightsStyles } from '../../utils/styles';
 import { Group } from '@backstage/plugin-cost-insights-common';

plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { PropsWithChildren } from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { Group } from '@backstage/plugin-cost-insights-common';
 import { CostInsightsTabs } from '../CostInsightsTabs';
 import { Header, Page } from '@backstage/core-components';

plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx

@@ -15,15 +15,13 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import {
-  Collapse,
-  MenuList,
-  MenuItem,
-  ListItemIcon,
-  ListItemText,
-  Typography,
-  Badge,
-} from '@material-ui/core';
+import Collapse from '@material-ui/core/Collapse';
+import MenuList from '@material-ui/core/MenuList';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Typography from '@material-ui/core/Typography';
+import Badge from '@material-ui/core/Badge';
 import { useNavigationStyles as useStyles } from '../../utils/styles';
 import { useConfig, useScroll } from '../../hooks';
 import { findAlways } from '../../utils/assert';

plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx

@@ -15,14 +15,12 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Box,
-  Collapse,
-  Container,
-  Divider,
-  Grid,
-  Typography,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Collapse from '@material-ui/core/Collapse';
+import Container from '@material-ui/core/Container';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import { default as MaterialAlert } from '@material-ui/lab/Alert';
 import { costInsightsApiRef } from '../../api';
 import { ActionItems } from '../ActionItems';

plugins/cost-insights/src/components/CostInsightsPage/CostInsightsThemeProvider.tsx

@@ -16,10 +16,10 @@
 
 import React, { PropsWithChildren } from 'react';
 import {
-  createTheme as createMuiTheme,
-  Theme,
   ThemeProvider,
-} from '@material-ui/core';
+  createTheme as createMuiTheme,
+} from '@material-ui/core/styles';
+import { Theme } from '@material-ui/core/styles';
 import {
   costInsightsDarkTheme,
   costInsightsLightTheme,

plugins/cost-insights/src/components/CostInsightsTabs/CostInsightsTabs.tsx

@@ -15,7 +15,11 @@
  */
 
 import React, { useState } from 'react';
-import { Menu, MenuItem, Tab, Tabs, Typography } from '@material-ui/core';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { mapLoadingToProps, mapFiltersToProps } from './selector';
 import { Group } from '@backstage/plugin-cost-insights-common';

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewBreakdownChart.tsx

@@ -15,13 +15,11 @@
  */
 import React, { useState } from 'react';
 import { DateTime } from 'luxon';
-import {
-  Box,
-  Divider,
-  emphasize,
-  Typography,
-  useTheme,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Divider from '@material-ui/core/Divider';
+import { emphasize } from '@material-ui/core/styles/colorManipulator';
+import Typography from '@material-ui/core/Typography';
+import { useTheme } from '@material-ui/core/styles';
 import { default as FullScreenIcon } from '@material-ui/icons/Fullscreen';
 import {
   Area,

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx

@@ -15,16 +15,14 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import {
-  Box,
-  capitalize,
-  Card,
-  CardContent,
-  Divider,
-  Tab,
-  Tabs,
-  useTheme,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import { capitalize } from '@material-ui/core/utils';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Divider from '@material-ui/core/Divider';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import { useTheme } from '@material-ui/core/styles';
 import { CostOverviewChart } from './CostOverviewChart';
 import { CostOverviewBreakdownChart } from './CostOverviewBreakdownChart';
 import { CostOverviewHeader } from './CostOverviewHeader';

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx

@@ -15,7 +15,8 @@
  */
 import React from 'react';
 import { DateTime } from 'luxon';
-import { useTheme, Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import { useTheme } from '@material-ui/core/styles';
 import {
   ComposedChart,
   XAxis,

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import React, { PropsWithChildren } from 'react';
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 
 type CostOverviewHeaderProps = {
   title: string;

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { Box, useTheme } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import { useTheme } from '@material-ui/core/styles';
 import { LegendItem } from '../LegendItem';
 import { CostInsightsTheme } from '../../types';
 import {

plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx

@@ -15,13 +15,10 @@
  */
 
 import React from 'react';
-import {
-  InputLabel,
-  FormControl,
-  MenuItem,
-  Select,
-  SelectProps,
-} from '@material-ui/core';
+import InputLabel from '@material-ui/core/InputLabel';
+import Select, { SelectProps } from '@material-ui/core/Select';
+import FormControl from '@material-ui/core/FormControl';
+import MenuItem from '@material-ui/core/MenuItem';
 import Typography from '@material-ui/core/Typography';
 import { Currency, CurrencyType } from '../../types';
 import { findAlways } from '../../utils/assert';

plugins/cost-insights/src/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import { AlertInstructionsLayout } from '../AlertInstructionsLayout';
 import { CodeSnippet, Link } from '@backstage/core-components';
 

plugins/cost-insights/src/components/LegendItem/LegendItem.tsx

@@ -15,7 +15,9 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { Box, Typography, Tooltip } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
 import LensIcon from '@material-ui/icons/Lens';
 import HelpOutlineOutlinedIcon from '@material-ui/icons/HelpOutlineOutlined';
 import { useCostGrowthLegendStyles } from '../../utils/styles';

plugins/cost-insights/src/components/MetricSelect/MetricSelect.tsx

@@ -15,7 +15,10 @@
  */
 
 import React from 'react';
-import { InputLabel, FormControl, Select, MenuItem } from '@material-ui/core';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
 import { Maybe, Metric } from '@backstage/plugin-cost-insights-common';
 import { useSelectStyles as useStyles } from '../../utils/styles';
 

plugins/cost-insights/src/components/PeriodSelect/PeriodSelect.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { MenuItem, Select, SelectProps } from '@material-ui/core';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select, { SelectProps } from '@material-ui/core/Select';
 import { Duration } from '../../types';
 import { formatLastTwoLookaheadQuarters } from '../../utils/formatters';
 import { findAlways } from '../../utils/assert';

plugins/cost-insights/src/components/ProductInsights/ProductInsights.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import { default as Alert } from '@material-ui/lab/Alert';
 import { costInsightsApiRef } from '../../api';
 import { ProductInsightsCardList } from '../ProductInsightsCard/ProductInsightsCardList';

plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { useState } from 'react';
-import { Dialog, IconButton } from '@material-ui/core';
+import Dialog from '@material-ui/core/Dialog';
+import IconButton from '@material-ui/core/IconButton';
 import { default as CloseButton } from '@material-ui/icons/Close';
 import { useEntityDialogStyles as useStyles } from '../../utils/styles';
 import { Entity } from '@backstage/plugin-cost-insights-common';

plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityTable.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import classnames from 'classnames';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import { formatChange } from '../../utils/formatters';
 import { useEntityDialogStyles as useStyles } from '../../utils/styles';
 import { CostGrowthIndicator } from '../CostGrowth';

plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx

@@ -22,7 +22,7 @@ import React, {
   useState,
 } from 'react';
 import pluralize from 'pluralize';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import { default as Alert } from '@material-ui/lab/Alert';
 import { PeriodSelect } from '../PeriodSelect';
 import { ProductInsightsChart } from './ProductInsightsChart';

plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCardList.tsx

@@ -15,7 +15,9 @@
  */
 
 import React from 'react';
-import { Box, CircularProgress, Collapse } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Collapse from '@material-ui/core/Collapse';
 import { ProductInsightsCard } from './ProductInsightsCard';
 import { Duration } from '../../types';
 import { Entity, Product } from '@backstage/plugin-cost-insights-common';

plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx

@@ -16,7 +16,8 @@
 
 import React, { useMemo, useState } from 'react';
 import pluralize from 'pluralize';
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import { default as FullScreenIcon } from '@material-ui/icons/Fullscreen';
 import { LegendItem } from '../LegendItem';
 import { ProductEntityDialog } from './ProductEntityDialog';

plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertChart.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { DateTime } from 'luxon';
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import { BarChart, BarChartLegend, BarChartLegendOptions } from '../BarChart';
 import { LegendItem } from '../LegendItem';
 import { CostGrowth } from '../CostGrowth';

plugins/cost-insights/src/components/ProjectGrowthInstructionsPage/ProjectGrowthInstructionsPage.tsx

@@ -16,7 +16,8 @@
 
 import React from 'react';
 import { DateTime } from 'luxon';
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import { AlertInstructionsLayout } from '../AlertInstructionsLayout';
 import { ProductInsightsChart } from '../ProductInsightsCard';
 import {

plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-import { MenuItem, Select } from '@material-ui/core';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 import { Maybe, Project } from '@backstage/plugin-cost-insights-common';
 import { useSelectStyles as useStyles } from '../../utils/styles';
 

plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import pluralize from 'pluralize';
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import { BarChart, BarChartLegend } from '../BarChart';
 import { UnlabeledDataflowData, ResourceData } from '../../types';
 import { useBarChartLayoutStyles as useStyles } from '../../utils/styles';

plugins/cost-insights/src/components/WhyCostsMatter/WhyCostsMatter.tsx

@@ -15,7 +15,11 @@
  */
 
 import React from 'react';
-import { Typography, Box, Grid, Container, Divider } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Container from '@material-ui/core/Container';
+import Divider from '@material-ui/core/Divider';
 
 export const WhyCostsMatter = () => {
   return (

plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationAlertCard.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import { KubernetesMigrationBarChartLegend } from './KubernetesMigrationBarChartLegend';
 import { KubernetesMigrationBarChart } from './KubernetesMigrationBarChart';
 import { KubernetesMigrationData } from '../../alerts';

plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChart.tsx

@@ -22,7 +22,7 @@ import {
   ResourceData,
 } from '../../../types';
 import { Entity } from '@backstage/plugin-cost-insights-common';
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 
 type MigrationBarChartProps = {
   currentProduct: string;

plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChartLegend.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Box, useTheme } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import { useTheme } from '@material-ui/core/styles';
 import { CostGrowth, LegendItem } from '../../../components';
 import { CostInsightsTheme, Duration } from '../../../types';
 import { ChangeStatistic } from '@backstage/plugin-cost-insights-common';

plugins/cost-insights/src/example/forms/KubernetesMigrationDismissForm.tsx

@@ -21,13 +21,11 @@ import React, {
   FormEventHandler,
   ChangeEvent,
 } from 'react';
-import {
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  Typography,
-} from '@material-ui/core';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import Typography from '@material-ui/core/Typography';
 import { AlertFormProps } from '../../types';
 import { Entity } from '@backstage/plugin-cost-insights-common';
 import { KubernetesMigrationAlert } from '../alerts';

plugins/cost-insights/src/forms/AlertAcceptForm.tsx

@@ -20,7 +20,9 @@ import React, {
   ChangeEvent,
   FormEventHandler,
 } from 'react';
-import { Checkbox, FormControl, FormControlLabel } from '@material-ui/core';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
 import { Alert, AlertFormProps } from '../types';
 
 export type AlertAcceptFormProps = AlertFormProps<Alert, null>;

plugins/cost-insights/src/forms/AlertDismissForm.tsx

@@ -21,16 +21,14 @@ import React, {
   forwardRef,
   FormEventHandler,
 } from 'react';
-import {
-  Box,
-  Collapse,
-  FormControl,
-  FormControlLabel,
-  TextField,
-  Typography,
-  Radio,
-  RadioGroup,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Collapse from '@material-ui/core/Collapse';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
 import {
   Alert,
   AlertFormProps,

plugins/cost-insights/src/forms/AlertSnoozeForm.tsx

@@ -22,14 +22,12 @@ import React, {
   FormEventHandler,
 } from 'react';
 import { DateTime } from 'luxon';
-import {
-  Box,
-  FormControl,
-  FormControlLabel,
-  RadioGroup,
-  Radio,
-  Typography,
-} from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import Typography from '@material-ui/core/Typography';
 import {
   Alert,
   AlertFormProps,

plugins/cost-insights/src/hooks/useFilters.tsx

@@ -22,7 +22,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import { PageFilters, ProductFilters } from '../types';
 import { Maybe } from '@backstage/plugin-cost-insights-common';
 import { useLocation, useNavigate } from 'react-router-dom';

plugins/cost-insights/src/hooks/useGroups.tsx

@@ -20,7 +20,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import { costInsightsApiRef } from '../api';
 import { MapLoadingToProps, useLoading } from './useLoading';
 import { Group, Maybe } from '@backstage/plugin-cost-insights-common';

plugins/cost-insights/src/hooks/useLastCompleteBillingDate.tsx

@@ -21,7 +21,7 @@ import React, {
   useState,
 } from 'react';
 import * as yup from 'yup';
-import { Alert } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
 import { costInsightsApiRef } from '../api';
 import { MapLoadingToProps, useLoading } from './useLoading';
 import { DefaultLoadingAction } from '../utils/loading';

plugins/cost-insights/src/hooks/useLoading.tsx

@@ -25,7 +25,8 @@ import React, {
   useReducer,
   useState,
 } from 'react';
-import { Backdrop, CircularProgress } from '@material-ui/core';
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import { Loading } from '../types';
 import {
   DefaultLoadingAction,

plugins/cost-insights/src/utils/styles.ts

@@ -15,14 +15,12 @@
  */
 
 import {
-  createStyles,
   emphasize,
+  lighten,
   darken,
   getLuminance,
-  lighten,
-  makeStyles,
-  Theme,
-} from '@material-ui/core';
+} from '@material-ui/core/styles/colorManipulator';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { CostInsightsTheme, CostInsightsThemeOptions } from '../types';
 
 export const costInsightsLightTheme = {