diff --git a/.changeset/perfect-countries-appear.md b/.changeset/perfect-countries-appear.md new file mode 100644 index 0000000000..8005e443d5 --- /dev/null +++ b/.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 diff --git a/plugins/cost-insights/.eslintrc.js b/plugins/cost-insights/.eslintrc.js index e2a53a6ad2..e487f765b2 100644 --- a/plugins/cost-insights/.eslintrc.js +++ b/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', + }, +}); diff --git a/plugins/cost-insights/api-report.md b/plugins/cost-insights/api-report.md index 11cdbd8141..546c7e2873 100644 --- a/plugins/cost-insights/api-report.md +++ b/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 = { diff --git a/plugins/cost-insights/dev/index.tsx b/plugins/cost-insights/dev/index.tsx index 622abaffc9..49f18f9d65 100644 --- a/plugins/cost-insights/dev/index.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/ActionItems/ActionItemCard.tsx b/plugins/cost-insights/src/components/ActionItems/ActionItemCard.tsx index 93025a8052..33005d0ba6 100644 --- a/plugins/cost-insights/src/components/ActionItems/ActionItemCard.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/ActionItems/ActionItems.tsx b/plugins/cost-insights/src/components/ActionItems/ActionItems.tsx index 78c40045be..a0a5461e37 100644 --- a/plugins/cost-insights/src/components/ActionItems/ActionItems.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertDialog.test.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertDialog.test.tsx index 31e83cf039..3d6e653910 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertDialog.test.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertDialog.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertDialog.tsx index 385116e188..e4e87fc70c 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertDialog.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsights.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsights.tsx index e48ae2789d..0ca254908d 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertInsights.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx index 97def45b76..b2cd796e6e 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx index 70dbfe66c7..725a902417 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx index e4abf3a3ac..d4c2acd3a8 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.tsx index 211167931c..10e10d0770 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummaryButton.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummaryButton.tsx index 95a4c44c3a..392d6eda2c 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummaryButton.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx index 3749763fad..983778103d 100644 --- a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/BarChart/BarChart.tsx b/plugins/cost-insights/src/components/BarChart/BarChart.tsx index fa4ae18e24..18a6a56962 100644 --- a/plugins/cost-insights/src/components/BarChart/BarChart.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/BarChart/BarChartLabel.tsx b/plugins/cost-insights/src/components/BarChart/BarChartLabel.tsx index c3a6570a35..857d5f148f 100644 --- a/plugins/cost-insights/src/components/BarChart/BarChartLabel.tsx +++ b/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 = { diff --git a/plugins/cost-insights/src/components/BarChart/BarChartLegend.tsx b/plugins/cost-insights/src/components/BarChart/BarChartLegend.tsx index becd5467d1..44d3684c70 100644 --- a/plugins/cost-insights/src/components/BarChart/BarChartLegend.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/BarChart/BarChartStepper.tsx b/plugins/cost-insights/src/components/BarChart/BarChartStepper.tsx index d2153c673f..ae85065ff2 100644 --- a/plugins/cost-insights/src/components/BarChart/BarChartStepper.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/BarChart/BarChartStepperButton.tsx b/plugins/cost-insights/src/components/BarChart/BarChartStepperButton.tsx index 20562b1097..18d75d114d 100644 --- a/plugins/cost-insights/src/components/BarChart/BarChartStepperButton.tsx +++ b/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 { diff --git a/plugins/cost-insights/src/components/BarChart/BarChartSteps.tsx b/plugins/cost-insights/src/components/BarChart/BarChartSteps.tsx index 556154d046..aec3bab323 100644 --- a/plugins/cost-insights/src/components/BarChart/BarChartSteps.tsx +++ b/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 = { diff --git a/plugins/cost-insights/src/components/BarChart/BarChartTooltip.tsx b/plugins/cost-insights/src/components/BarChart/BarChartTooltip.tsx index 0b522e5e09..127b6bec04 100644 --- a/plugins/cost-insights/src/components/BarChart/BarChartTooltip.tsx +++ b/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 */ diff --git a/plugins/cost-insights/src/components/BarChart/BarChartTooltipItem.tsx b/plugins/cost-insights/src/components/BarChart/BarChartTooltipItem.tsx index 123720cbc0..79190f700d 100644 --- a/plugins/cost-insights/src/components/BarChart/BarChartTooltipItem.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/CopyUrlToClipboard/CopyUrlToClipboard.tsx b/plugins/cost-insights/src/components/CopyUrlToClipboard/CopyUrlToClipboard.tsx index bef6f159de..d67a2814f1 100644 --- a/plugins/cost-insights/src/components/CopyUrlToClipboard/CopyUrlToClipboard.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx b/plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx index cf07d97d0a..583a279231 100644 --- a/plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx b/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx index c1b3e12575..ae885d9277 100644 --- a/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx b/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx index 55d5668189..818518acb1 100644 --- a/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx b/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx index 0bdfed3855..26506040a3 100644 --- a/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx index d113f1b8f3..e579f155c2 100644 --- a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsThemeProvider.tsx b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsThemeProvider.tsx index 40745c4301..f05fb1072f 100644 --- a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsThemeProvider.tsx +++ b/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, diff --git a/plugins/cost-insights/src/components/CostInsightsTabs/CostInsightsTabs.tsx b/plugins/cost-insights/src/components/CostInsightsTabs/CostInsightsTabs.tsx index 152ce56902..928e6c98ed 100644 --- a/plugins/cost-insights/src/components/CostInsightsTabs/CostInsightsTabs.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewBreakdownChart.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewBreakdownChart.tsx index 842e76c991..dd92b80faf 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewBreakdownChart.tsx +++ b/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, diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx index c816da97ed..7fcf45ed67 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx index 2201dcc650..f272fe0219 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx +++ b/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, diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx index 849ffeeab6..c6f23449c4 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx +++ b/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; diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx index d823c54691..303dd63018 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx +++ b/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 { diff --git a/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx b/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx index 8f7d466de7..2706364f89 100644 --- a/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.tsx b/plugins/cost-insights/src/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.tsx index 8a6fcded77..705a690c7a 100644 --- a/plugins/cost-insights/src/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/LegendItem/LegendItem.tsx b/plugins/cost-insights/src/components/LegendItem/LegendItem.tsx index 93b1df7bdb..3ef093f366 100644 --- a/plugins/cost-insights/src/components/LegendItem/LegendItem.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/MetricSelect/MetricSelect.tsx b/plugins/cost-insights/src/components/MetricSelect/MetricSelect.tsx index fd534eb8f0..da9d6f3df8 100644 --- a/plugins/cost-insights/src/components/MetricSelect/MetricSelect.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/PeriodSelect/PeriodSelect.tsx b/plugins/cost-insights/src/components/PeriodSelect/PeriodSelect.tsx index 29a77ae420..96f7374187 100644 --- a/plugins/cost-insights/src/components/PeriodSelect/PeriodSelect.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/ProductInsights/ProductInsights.tsx b/plugins/cost-insights/src/components/ProductInsights/ProductInsights.tsx index 9df763a5d4..11803246fc 100644 --- a/plugins/cost-insights/src/components/ProductInsights/ProductInsights.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx index 55fa795728..90edec5fc1 100644 --- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityTable.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityTable.tsx index affb16cb30..1b21f8db72 100644 --- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityTable.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx index a587bfb26e..7d0ec4dba3 100644 --- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCardList.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCardList.tsx index 3ae97daecb..f031b52cd7 100644 --- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCardList.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx index 2976b1f30f..7e2e6d6244 100644 --- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertChart.tsx b/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertChart.tsx index 74c0cea34b..fd4d2ef004 100644 --- a/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertChart.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/ProjectGrowthInstructionsPage/ProjectGrowthInstructionsPage.tsx b/plugins/cost-insights/src/components/ProjectGrowthInstructionsPage/ProjectGrowthInstructionsPage.tsx index 0435210a98..7dfad406e8 100644 --- a/plugins/cost-insights/src/components/ProjectGrowthInstructionsPage/ProjectGrowthInstructionsPage.tsx +++ b/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 { diff --git a/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx b/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx index c83fa67d94..0d3a86c3a1 100644 --- a/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.tsx b/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.tsx index af44f434bf..f1cccc2dd0 100644 --- a/plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/components/WhyCostsMatter/WhyCostsMatter.tsx b/plugins/cost-insights/src/components/WhyCostsMatter/WhyCostsMatter.tsx index 0b3ea9f00d..e58ccbb525 100644 --- a/plugins/cost-insights/src/components/WhyCostsMatter/WhyCostsMatter.tsx +++ b/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 ( diff --git a/plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationAlertCard.tsx b/plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationAlertCard.tsx index bc61ffbf2b..f0ca5a3ee3 100644 --- a/plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationAlertCard.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChart.tsx b/plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChart.tsx index bdc7af551a..67cbadb4d3 100644 --- a/plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChart.tsx +++ b/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; diff --git a/plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChartLegend.tsx b/plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChartLegend.tsx index 1b46b15a10..d516ab9c33 100644 --- a/plugins/cost-insights/src/example/components/KubernetesMigrationAlertCard/KubernetesMigrationBarChartLegend.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/example/forms/KubernetesMigrationDismissForm.tsx b/plugins/cost-insights/src/example/forms/KubernetesMigrationDismissForm.tsx index 7efd32616c..181e3492ce 100644 --- a/plugins/cost-insights/src/example/forms/KubernetesMigrationDismissForm.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/forms/AlertAcceptForm.tsx b/plugins/cost-insights/src/forms/AlertAcceptForm.tsx index ab22a0f330..b31bf8ff74 100644 --- a/plugins/cost-insights/src/forms/AlertAcceptForm.tsx +++ b/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; diff --git a/plugins/cost-insights/src/forms/AlertDismissForm.tsx b/plugins/cost-insights/src/forms/AlertDismissForm.tsx index 7506fe8ee1..0755664935 100644 --- a/plugins/cost-insights/src/forms/AlertDismissForm.tsx +++ b/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, diff --git a/plugins/cost-insights/src/forms/AlertSnoozeForm.tsx b/plugins/cost-insights/src/forms/AlertSnoozeForm.tsx index 3f87c87771..95ceb4b7e8 100644 --- a/plugins/cost-insights/src/forms/AlertSnoozeForm.tsx +++ b/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, diff --git a/plugins/cost-insights/src/hooks/useFilters.tsx b/plugins/cost-insights/src/hooks/useFilters.tsx index e888da369e..49ae2b3b43 100644 --- a/plugins/cost-insights/src/hooks/useFilters.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/hooks/useGroups.tsx b/plugins/cost-insights/src/hooks/useGroups.tsx index ec10faa7de..2dc4f624d1 100644 --- a/plugins/cost-insights/src/hooks/useGroups.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/hooks/useLastCompleteBillingDate.tsx b/plugins/cost-insights/src/hooks/useLastCompleteBillingDate.tsx index 24c5716442..c75e510395 100644 --- a/plugins/cost-insights/src/hooks/useLastCompleteBillingDate.tsx +++ b/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'; diff --git a/plugins/cost-insights/src/hooks/useLoading.tsx b/plugins/cost-insights/src/hooks/useLoading.tsx index 84828491de..9242c05410 100644 --- a/plugins/cost-insights/src/hooks/useLoading.tsx +++ b/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, diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts index c4c330138b..179f7eb295 100644 --- a/plugins/cost-insights/src/utils/styles.ts +++ b/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 = {