diff --git a/.changeset/happy-hotels-explain.md b/.changeset/happy-hotels-explain.md new file mode 100644 index 0000000000..ede18c3187 --- /dev/null +++ b/.changeset/happy-hotels-explain.md @@ -0,0 +1,7 @@ +--- +'@backstage/core-app-api': patch +'@backstage/core-components': patch +'@backstage/theme': patch +--- + +Internal refactor to avoid importing all of `@material-ui/core`. diff --git a/packages/core-app-api/src/app/AppThemeProvider.tsx b/packages/core-app-api/src/app/AppThemeProvider.tsx index 4e283a1d00..4e3a8487a6 100644 --- a/packages/core-app-api/src/app/AppThemeProvider.tsx +++ b/packages/core-app-api/src/app/AppThemeProvider.tsx @@ -15,7 +15,8 @@ */ import React, { useMemo, useEffect, useState, PropsWithChildren } from 'react'; -import { ThemeProvider, CssBaseline } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core/styles'; +import CssBaseline from '@material-ui/core/CssBaseline'; import { useApi, appThemeApiRef, AppTheme } from '@backstage/core-plugin-api'; import { useObservable } from 'react-use'; diff --git a/packages/core-components/.eslintrc.js b/packages/core-components/.eslintrc.js index d592a653c8..65a93d3660 100644 --- a/packages/core-components/.eslintrc.js +++ b/packages/core-components/.eslintrc.js @@ -1,8 +1,25 @@ +const base = require('@backstage/cli/config/eslint'); +const [, baseRestrictedImports] = base.rules['no-restricted-imports']; + module.exports = { extends: [require.resolve('@backstage/cli/config/eslint')], rules: { // TODO: add prop types to JS and remove 'react/prop-types': 0, 'jest/expect-expect': 0, + 'no-restricted-imports': [ + 2, + { + ...baseRestrictedImports, + paths: [ + { + // Importing the entire MUI icons packages kills build performance as the list of icons is huge. + name: '@material-ui/core', + message: "Please import '@material-ui/core/...' instead.", + }, + ...baseRestrictedImports.paths, + ], + }, + ], }, }; diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 4a94135b4a..3d9559632f 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -8,9 +8,8 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstageIdentityApi } from '@backstage/core-plugin-api'; import { BackstageTheme } from '@backstage/theme'; -import { Breadcrumbs as Breadcrumbs_2 } from '@material-ui/core'; -import { ButtonProps as ButtonProps_2 } from '@material-ui/core'; -import { CardHeaderProps } from '@material-ui/core'; +import { ButtonProps as ButtonProps_2 } from '@material-ui/core/Button'; +import { CardHeaderProps } from '@material-ui/core/CardHeader'; import { Column } from '@material-table/core'; import { ComponentClass } from 'react'; import { ComponentProps } from 'react'; @@ -21,9 +20,10 @@ import { default as dagre_2 } from 'dagre'; import { ElementType } from 'react'; import { ErrorInfo } from 'react'; import { IconComponent } from '@backstage/core-plugin-api'; -import { LinearProgressProps } from '@material-ui/core'; -import { LinkProps as LinkProps_2 } from '@material-ui/core'; +import { LinearProgressProps } from '@material-ui/core/LinearProgress'; +import { LinkProps as LinkProps_2 } from '@material-ui/core/Link'; import { LinkProps as LinkProps_3 } from 'react-router-dom'; +import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs'; import { MaterialTableProps } from '@material-table/core'; import { NavLinkProps } from 'react-router-dom'; import { Overrides } from '@material-ui/core/styles/overrides'; @@ -37,14 +37,14 @@ import { SessionApi } from '@backstage/core-plugin-api'; import { SignInPageProps } from '@backstage/core-plugin-api'; import { SparklinesLineProps } from 'react-sparklines'; import { SparklinesProps } from 'react-sparklines'; -import { StyledComponentProps } from '@material-ui/core'; +import { StyledComponentProps } from '@material-ui/core/styles'; import { StyleRules } from '@material-ui/styles'; import { StyleRules as StyleRules_2 } from '@material-ui/core/styles/withStyles'; -import { TabProps } from '@material-ui/core'; +import { TabProps } from '@material-ui/core/Tab'; import { TextTruncateProps } from 'react-text-truncate'; -import { Theme } from '@material-ui/core'; -import { TooltipProps } from '@material-ui/core'; -import { WithStyles } from '@material-ui/core'; +import { Theme } from '@material-ui/core/styles'; +import { TooltipProps } from '@material-ui/core/Tooltip'; +import { WithStyles } from '@material-ui/core/styles'; // Warning: (ae-missing-release-tag) "AlertDisplay" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index f43dbd08dd..3a7ec392ee 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -15,7 +15,8 @@ */ import React, { useEffect, useState } from 'react'; -import { Snackbar, IconButton } from '@material-ui/core'; +import Snackbar from '@material-ui/core/Snackbar'; +import IconButton from '@material-ui/core/IconButton'; import CloseIcon from '@material-ui/icons/Close'; import { Alert } from '@material-ui/lab'; import { AlertMessage, useApi, alertApiRef } from '@backstage/core-plugin-api'; diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 0156c58b92..32ce92b46b 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -14,12 +14,8 @@ * limitations under the License. */ import React, { CSSProperties } from 'react'; -import { - Avatar as MaterialAvatar, - createStyles, - makeStyles, - Theme, -} from '@material-ui/core'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import MaterialAvatar from '@material-ui/core/Avatar'; import { extractInitials, stringToColor } from './utils'; export type AvatarClassKey = 'avatar'; diff --git a/packages/core-components/src/components/Button/Button.stories.tsx b/packages/core-components/src/components/Button/Button.stories.tsx index 3451a77765..32c3a98bcc 100644 --- a/packages/core-components/src/components/Button/Button.stories.tsx +++ b/packages/core-components/src/components/Button/Button.stories.tsx @@ -17,15 +17,13 @@ import React, { ComponentType } from 'react'; import { Button } from './Button'; import { useLocation } from 'react-router-dom'; import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api'; -import { - Divider, - Link, - List, - ListItem, - ListItemText, - Typography, - Button as MaterialButton, -} from '@material-ui/core'; +import Divider from '@material-ui/core/Divider'; +import Link from '@material-ui/core/Link'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import Typography from '@material-ui/core/Typography'; +import MaterialButton from '@material-ui/core/Button'; import { wrapInTestApp } from '@backstage/test-utils'; const routeRef = createRouteRef({ diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx index f2fc9f93f9..5c0ba3e956 100644 --- a/packages/core-components/src/components/Button/Button.tsx +++ b/packages/core-components/src/components/Button/Button.tsx @@ -14,10 +14,9 @@ * limitations under the License. */ -import { - Button as MaterialButton, +import MaterialButton, { ButtonProps as MaterialButtonProps, -} from '@material-ui/core'; +} from '@material-ui/core/Button'; import React from 'react'; import { Link, LinkProps } from '../Link'; diff --git a/packages/core-components/src/components/Chip/Chip.stories.tsx b/packages/core-components/src/components/Chip/Chip.stories.tsx index ff52a81c16..f5cdfd3f16 100644 --- a/packages/core-components/src/components/Chip/Chip.stories.tsx +++ b/packages/core-components/src/components/Chip/Chip.stories.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { Chip } from '@material-ui/core'; +import Chip from '@material-ui/core/Chip'; export default { title: 'Data Display/Chip', diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx index f8a7d2ff9e..3aa2f42984 100644 --- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx @@ -15,7 +15,7 @@ */ import React, { lazy, Suspense } from 'react'; -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; import { CopyTextButton } from '../CopyTextButton'; import { Progress } from '../Progress'; diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx index 2d2fb4006a..3986b8fa43 100644 --- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx +++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx @@ -15,7 +15,8 @@ */ import { errorApiRef, useApi } from '@backstage/core-plugin-api'; -import { IconButton, Tooltip } from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@material-ui/core/Tooltip'; import CopyIcon from '@material-ui/icons/FileCopy'; import React, { MouseEventHandler, useEffect, useState } from 'react'; import { useCopyToClipboard } from 'react-use'; diff --git a/packages/core-components/src/components/CreateButton/CreateButton.tsx b/packages/core-components/src/components/CreateButton/CreateButton.tsx index c6b9b7abed..074ee9fc9f 100644 --- a/packages/core-components/src/components/CreateButton/CreateButton.tsx +++ b/packages/core-components/src/components/CreateButton/CreateButton.tsx @@ -15,7 +15,9 @@ */ import { BackstageTheme } from '@backstage/theme'; -import { Button, IconButton, useMediaQuery } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; import React from 'react'; import { Link as RouterLink, LinkProps } from 'react-router-dom'; import AddCircleOutline from '@material-ui/icons/AddCircleOutline'; diff --git a/packages/core-components/src/components/Dialog/Dialog.stories.tsx b/packages/core-components/src/components/Dialog/Dialog.stories.tsx index b4c0a7da57..200124ce9d 100644 --- a/packages/core-components/src/components/Dialog/Dialog.stories.tsx +++ b/packages/core-components/src/components/Dialog/Dialog.stories.tsx @@ -14,15 +14,13 @@ * limitations under the License. */ -import { - Button, - Dialog, - DialogActions, - DialogContent, - DialogTitle, - IconButton, - Typography, -} from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import CloseIcon from '@material-ui/icons/Close'; import React, { useState } from 'react'; diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx index 583413eb35..a64514be61 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx @@ -16,7 +16,8 @@ import React from 'react'; import { DismissableBanner } from './DismissableBanner'; -import { Link, Typography } from '@material-ui/core'; +import Link from '@material-ui/core/Link'; +import Typography from '@material-ui/core/Typography'; import { ApiProvider, ApiRegistry, WebStorage } from '@backstage/core-app-api'; import { ErrorApi, diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx index 3d229a5d54..be8e613b61 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx @@ -18,7 +18,7 @@ import React, { ReactNode, useState, useEffect } from 'react'; import { useApi, storageApiRef } from '@backstage/core-plugin-api'; import { useObservable } from 'react-use'; import classNames from 'classnames'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; import Snackbar from '@material-ui/core/Snackbar'; import SnackbarContent from '@material-ui/core/SnackbarContent'; diff --git a/packages/core-components/src/components/Drawer/Drawer.stories.tsx b/packages/core-components/src/components/Drawer/Drawer.stories.tsx index 2538af855e..7e1c8a728f 100644 --- a/packages/core-components/src/components/Drawer/Drawer.stories.tsx +++ b/packages/core-components/src/components/Drawer/Drawer.stories.tsx @@ -15,15 +15,11 @@ */ import React, { useState } from 'react'; -import { - Drawer, - Button, - Typography, - makeStyles, - IconButton, - createStyles, - Theme, -} from '@material-ui/core'; +import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import Drawer from '@material-ui/core/Drawer'; +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; import Close from '@material-ui/icons/Close'; export default { diff --git a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx index ed4dbe2101..53314497fb 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { EmptyState } from './EmptyState'; -import { Button } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import { MissingAnnotationEmptyState } from './MissingAnnotationEmptyState'; export default { diff --git a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx index 2f4e4e883d..620e8d4d31 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { EmptyState } from './EmptyState'; import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; -import { Button } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; describe('', () => { it('render EmptyState component with type annotaion is missing', async () => { diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx index f3fc3b2399..a7298c4192 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; -import { makeStyles, Typography, Grid } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import Grid from '@material-ui/core/Grid'; import { EmptyStateImage } from './EmptyStateImage'; export type EmptyStateClassKey = 'root' | 'action' | 'imageContainer'; diff --git a/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx b/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx index 012fb04e76..f82d8e6e57 100644 --- a/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx @@ -19,7 +19,7 @@ import missingAnnotation from './assets/missingAnnotation.svg'; import noInformation from './assets/noInformation.svg'; import createComponent from './assets/createComponent.svg'; import noBuild from './assets/noBuild.svg'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; type Props = { missing: 'field' | 'info' | 'content' | 'data'; diff --git a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx index 6f20f7c8e6..61131bad9b 100644 --- a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx +++ b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; -import { Button, makeStyles, Typography } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; import { BackstageTheme } from '@backstage/theme'; import { Link } from '../Link'; import { EmptyState } from './EmptyState'; diff --git a/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx b/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx index 22f28a7a73..3ef35d6eaa 100644 --- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx +++ b/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx @@ -14,7 +14,10 @@ * limitations under the License. */ -import { List, ListItem, ListItemText, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; import React, { PropsWithChildren } from 'react'; import { CopyTextButton } from '../CopyTextButton'; import { WarningPanel } from '../WarningPanel'; diff --git a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx index 7c4b9736b7..3152d701c8 100644 --- a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx +++ b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx @@ -14,7 +14,9 @@ * limitations under the License. */ -import { ClickAwayListener, makeStyles, Typography } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import ClickAwayListener from '@material-ui/core/ClickAwayListener'; +import Typography from '@material-ui/core/Typography'; import React, { PropsWithChildren, useCallback, diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx index c4508eb9bc..4e83976a96 100644 --- a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx +++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; import { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; export type HeaderIconLinkRowClassKey = 'links'; diff --git a/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx b/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx index 532ba2f959..421147753b 100644 --- a/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx +++ b/packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx @@ -15,7 +15,8 @@ */ import React from 'react'; import classnames from 'classnames'; -import { makeStyles, Link } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Link from '@material-ui/core/Link'; import LinkIcon from '@material-ui/icons/Link'; import { Link as RouterLink } from '../Link'; diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx index 080e48919b..a3ef93d9fa 100644 --- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx +++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx @@ -18,7 +18,7 @@ import React from 'react'; import { fireEvent } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import { HorizontalScrollGrid } from './HorizontalScrollGrid'; -import { Grid } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; describe('', () => { beforeEach(() => { diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx index 88b61d56bb..483d27d657 100644 --- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx +++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx @@ -18,7 +18,9 @@ import React, { PropsWithChildren } from 'react'; import classNames from 'classnames'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; -import { Grid, IconButton, makeStyles, Theme } from '@material-ui/core'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import Grid from '@material-ui/core/Grid'; +import IconButton from '@material-ui/core/IconButton'; const generateGradientStops = (themeType: 'dark' | 'light') => { // 97% corresponds to the theme.palette.background.default for the light theme diff --git a/packages/core-components/src/components/Lifecycle/Lifecycle.tsx b/packages/core-components/src/components/Lifecycle/Lifecycle.tsx index 76e63854f5..f553129927 100644 --- a/packages/core-components/src/components/Lifecycle/Lifecycle.tsx +++ b/packages/core-components/src/components/Lifecycle/Lifecycle.tsx @@ -16,7 +16,7 @@ import React from 'react'; import CSS from 'csstype'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; type Props = CSS.Properties & { shorthand?: boolean; diff --git a/packages/core-components/src/components/Link/Link.tsx b/packages/core-components/src/components/Link/Link.tsx index d20773a8bb..8866150f86 100644 --- a/packages/core-components/src/components/Link/Link.tsx +++ b/packages/core-components/src/components/Link/Link.tsx @@ -15,10 +15,9 @@ */ import { useAnalytics } from '@backstage/core-plugin-api'; -import { - Link as MaterialLink, +import MaterialLink, { LinkProps as MaterialLinkProps, -} from '@material-ui/core'; +} from '@material-ui/core/Link'; import React, { ElementType } from 'react'; import { Link as RouterLink, diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx index 65be789bb4..eacd9adc8a 100644 --- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import ReactMarkdown from 'react-markdown'; import gfm from 'remark-gfm'; import React from 'react'; diff --git a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx index 7f7f51abba..b911a9a1d9 100644 --- a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx +++ b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx @@ -14,15 +14,12 @@ * limitations under the License. */ -import { - ListItem, - ListItemAvatar, - ListItemText, - makeStyles, - Typography, - Theme, - Button, -} from '@material-ui/core'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; +import ListItemText from '@material-ui/core/ListItemText'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; import React, { useState } from 'react'; import { PendingAuthRequest } from '@backstage/core-plugin-api'; diff --git a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx index 73e276fce9..5378fa6c15 100644 --- a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx +++ b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx @@ -14,16 +14,13 @@ * limitations under the License. */ -import { - Dialog, - DialogActions, - DialogContent, - DialogTitle, - List, - makeStyles, - Theme, - Button, -} from '@material-ui/core'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import List from '@material-ui/core/List'; +import Button from '@material-ui/core/Button'; import React, { useMemo, useState } from 'react'; import { useObservable } from 'react-use'; import LoginRequestListItem from './LoginRequestListItem'; diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx index 0882a63e9c..a022b3b5c2 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Box } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; import React from 'react'; import { OverflowTooltip } from './OverflowTooltip'; diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index a06930cdfa..fb21813f89 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ -import { makeStyles, Tooltip, TooltipProps } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip'; import React, { useState } from 'react'; import TextTruncate, { TextTruncateProps } from 'react-text-truncate'; diff --git a/packages/core-components/src/components/Progress/Progress.tsx b/packages/core-components/src/components/Progress/Progress.tsx index 00ad532b5e..f199c5640f 100644 --- a/packages/core-components/src/components/Progress/Progress.tsx +++ b/packages/core-components/src/components/Progress/Progress.tsx @@ -15,7 +15,9 @@ */ import React, { useState, useEffect, PropsWithChildren } from 'react'; -import { LinearProgress, LinearProgressProps } from '@material-ui/core'; +import LinearProgress, { + LinearProgressProps, +} from '@material-ui/core/LinearProgress'; export function Progress(props: PropsWithChildren) { const [isVisible, setIsVisible] = useState(false); diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx index 2699f8a289..2f6973e4d8 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { makeStyles, useTheme } from '@material-ui/core'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; import { Circle } from 'rc-progress'; import React from 'react'; diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx index da81100a99..ad3323f8d3 100644 --- a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx +++ b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx @@ -16,7 +16,7 @@ import React, { PropsWithChildren } from 'react'; import { GaugeCard } from './GaugeCard'; -import { Grid } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; import { MemoryRouter } from 'react-router'; const linkInfo = { title: 'Go to XYZ Location', link: '#' }; diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx index aec63add11..5c5a825921 100644 --- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx +++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { InfoCard, InfoCardVariants } from '../../layout/InfoCard'; import { BottomLinkProps } from '../../layout/BottomLink'; import { Gauge } from './Gauge'; diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx index cf8c022852..afc93fd337 100644 --- a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx +++ b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx @@ -15,7 +15,8 @@ */ import React from 'react'; -import { Tooltip, useTheme } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; +import Tooltip from '@material-ui/core/Tooltip'; // @ts-ignore import { Line } from 'rc-progress'; import { BackstageTheme } from '@backstage/theme'; diff --git a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx index 37143000a3..68d7360400 100644 --- a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx +++ b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx @@ -15,7 +15,10 @@ */ import { ResponseError } from '@backstage/errors'; -import { Divider, ListItem, ListItemText, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Divider from '@material-ui/core/Divider'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; import React from 'react'; import { CodeSnippet } from '../CodeSnippet'; import { CopyTextButton } from '../CopyTextButton'; diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx index 23ed2cf62c..a0e3aba94b 100644 --- a/packages/core-components/src/components/Select/Select.tsx +++ b/packages/core-components/src/components/Select/Select.tsx @@ -14,16 +14,14 @@ * limitations under the License. */ -import { - Checkbox, - Chip, - ClickAwayListener, - FormControl, - InputBase, - MenuItem, - Select, - Typography, -} from '@material-ui/core'; +import Checkbox from '@material-ui/core/Checkbox'; +import Chip from '@material-ui/core/Chip'; +import ClickAwayListener from '@material-ui/core/ClickAwayListener'; +import FormControl from '@material-ui/core/FormControl'; +import InputBase from '@material-ui/core/InputBase'; +import MenuItem from '@material-ui/core/MenuItem'; +import Select from '@material-ui/core/Select'; +import Typography from '@material-ui/core/Typography'; import { createStyles, makeStyles, diff --git a/packages/core-components/src/components/Select/static/ClosedDropdown.tsx b/packages/core-components/src/components/Select/static/ClosedDropdown.tsx index 61a24abcef..eb93f5a354 100644 --- a/packages/core-components/src/components/Select/static/ClosedDropdown.tsx +++ b/packages/core-components/src/components/Select/static/ClosedDropdown.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ import React from 'react'; -import { SvgIcon, makeStyles, createStyles } from '@material-ui/core'; +import { makeStyles, createStyles } from '@material-ui/core/styles'; +import SvgIcon from '@material-ui/core/SvgIcon'; export type ClosedDropdownClassKey = 'icon'; diff --git a/packages/core-components/src/components/Select/static/OpenedDropdown.tsx b/packages/core-components/src/components/Select/static/OpenedDropdown.tsx index eb86a34fe0..617288ded6 100644 --- a/packages/core-components/src/components/Select/static/OpenedDropdown.tsx +++ b/packages/core-components/src/components/Select/static/OpenedDropdown.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ import React from 'react'; -import { SvgIcon, makeStyles, createStyles } from '@material-ui/core'; +import { makeStyles, createStyles } from '@material-ui/core/styles'; +import SvgIcon from '@material-ui/core/SvgIcon'; export type OpenedDropdownClassKey = 'icon'; diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx index 9d958f766d..aa6846bc8f 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { TextField } from '@material-ui/core'; +import TextField from '@material-ui/core/TextField'; import React, { useState } from 'react'; import { SimpleStepper } from './SimpleStepper'; import { SimpleStepperStep } from './SimpleStepperStep'; diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx index 9ffb63c085..4a1a4ab919 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx @@ -20,7 +20,7 @@ import React, { useEffect, PropsWithChildren, } from 'react'; -import { Stepper as MuiStepper } from '@material-ui/core'; +import MuiStepper from '@material-ui/core/Stepper'; type InternalState = { stepperLength: number; diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx index 270099a104..5f4bdbf0c6 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ import React, { useContext, ReactNode, PropsWithChildren } from 'react'; -import { Button, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; import { StepActions } from './types'; import { VerticalStepperContext } from './SimpleStepper'; diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx index 0696a1256a..bb46163105 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx @@ -14,13 +14,11 @@ * limitations under the License. */ import React, { PropsWithChildren } from 'react'; -import { - Step as MuiStep, - StepContent, - StepLabel, - Typography, - makeStyles, -} from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import MuiStep from '@material-ui/core/Step'; +import StepContent from '@material-ui/core/StepContent'; +import StepLabel from '@material-ui/core/StepLabel'; +import Typography from '@material-ui/core/Typography'; import { SimpleStepperFooter } from './SimpleStepperFooter'; import { StepProps } from './types'; diff --git a/packages/core-components/src/components/Status/Status.tsx b/packages/core-components/src/components/Status/Status.tsx index a6215d6127..a855fe3ebe 100644 --- a/packages/core-components/src/components/Status/Status.tsx +++ b/packages/core-components/src/components/Status/Status.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; import classNames from 'classnames'; import React, { PropsWithChildren } from 'react'; diff --git a/packages/core-components/src/components/StructuredMetadataTable/MetadataTable.tsx b/packages/core-components/src/components/StructuredMetadataTable/MetadataTable.tsx index 3c869f88c3..2f5dc0b6b5 100644 --- a/packages/core-components/src/components/StructuredMetadataTable/MetadataTable.tsx +++ b/packages/core-components/src/components/StructuredMetadataTable/MetadataTable.tsx @@ -16,15 +16,15 @@ import React from 'react'; import { - Table, - TableBody, - TableCell, - TableRow, withStyles, createStyles, WithStyles, Theme, -} from '@material-ui/core'; +} from '@material-ui/core/styles'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableRow from '@material-ui/core/TableRow'; export type MetadataTableTitleCellClassKey = 'root'; diff --git a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx index 458c431b27..f48e959073 100644 --- a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx +++ b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx @@ -15,7 +15,7 @@ */ import React, { PropsWithChildren } from 'react'; import { InfoCard } from '../../layout/InfoCard'; -import { Grid } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; import { StructuredMetadataTable } from './StructuredMetadataTable'; const cardContentStyle = { heightX: 200, width: 500 }; diff --git a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx index abaa662159..9ef7890820 100644 --- a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx +++ b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx @@ -15,7 +15,12 @@ */ import React, { Fragment, ReactElement } from 'react'; -import { withStyles, createStyles, WithStyles, Theme } from '@material-ui/core'; +import { + withStyles, + createStyles, + WithStyles, + Theme, +} from '@material-ui/core/styles'; import startCase from 'lodash/startCase'; import { diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx index bee2928314..841bfe9429 100644 --- a/packages/core-components/src/components/SupportButton/SupportButton.tsx +++ b/packages/core-components/src/components/SupportButton/SupportButton.tsx @@ -16,20 +16,18 @@ import { useApp } from '@backstage/core-plugin-api'; import { BackstageTheme } from '@backstage/theme'; -import { - Box, - Button, - DialogActions, - IconButton, - List, - ListItem, - ListItemIcon, - ListItemText, - makeStyles, - Popover, - Typography, - useMediaQuery, -} from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; +import Box from '@material-ui/core/Box'; +import Button from '@material-ui/core/Button'; +import DialogActions from '@material-ui/core/DialogActions'; +import IconButton from '@material-ui/core/IconButton'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import Popover from '@material-ui/core/Popover'; +import Typography from '@material-ui/core/Typography'; import React, { MouseEventHandler, useState } from 'react'; import { SupportItem, SupportItemLink, useSupportConfig } from '../../hooks'; import { HelpIcon } from '../../icons'; diff --git a/packages/core-components/src/components/TabbedLayout/TabbedLayout.tsx b/packages/core-components/src/components/TabbedLayout/TabbedLayout.tsx index 03f012b78f..26e70e33b5 100644 --- a/packages/core-components/src/components/TabbedLayout/TabbedLayout.tsx +++ b/packages/core-components/src/components/TabbedLayout/TabbedLayout.tsx @@ -23,7 +23,7 @@ import React, { ReactNode, } from 'react'; import { RoutedTabs } from './RoutedTabs'; -import { TabProps } from '@material-ui/core'; +import { TabProps } from '@material-ui/core/Tab'; type SubRoute = { path: string; diff --git a/packages/core-components/src/components/TabbedLayout/types.ts b/packages/core-components/src/components/TabbedLayout/types.ts index b70ab3da0a..59e26305bd 100644 --- a/packages/core-components/src/components/TabbedLayout/types.ts +++ b/packages/core-components/src/components/TabbedLayout/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { TabProps } from '@material-ui/core'; +import { TabProps } from '@material-ui/core/Tab'; import * as React from 'react'; export type SubRoute = { diff --git a/packages/core-components/src/components/Table/Filters.tsx b/packages/core-components/src/components/Table/Filters.tsx index 7498138751..0f4143d442 100644 --- a/packages/core-components/src/components/Table/Filters.tsx +++ b/packages/core-components/src/components/Table/Filters.tsx @@ -16,7 +16,8 @@ import React, { useEffect, useState } from 'react'; import { BackstageTheme } from '@backstage/theme'; -import { Button, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; import { Select } from '../Select'; import { SelectProps } from '../Select/Select'; diff --git a/packages/core-components/src/components/Table/SubvalueCell.tsx b/packages/core-components/src/components/Table/SubvalueCell.tsx index 43fb54fca8..2564e8e4eb 100644 --- a/packages/core-components/src/components/Table/SubvalueCell.tsx +++ b/packages/core-components/src/components/Table/SubvalueCell.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { BackstageTheme } from '@backstage/theme'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; export type SubvalueCellClassKey = 'value' | 'subvalue'; diff --git a/packages/core-components/src/components/Table/Table.stories.tsx b/packages/core-components/src/components/Table/Table.stories.tsx index 27fd33f32c..7785764b22 100644 --- a/packages/core-components/src/components/Table/Table.stories.tsx +++ b/packages/core-components/src/components/Table/Table.stories.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; import { Link } from '../Link'; import { SubvalueCell, Table, TableColumn } from '.'; diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx index 61e9cc7969..f61811938e 100644 --- a/packages/core-components/src/components/Table/Table.tsx +++ b/packages/core-components/src/components/Table/Table.tsx @@ -15,13 +15,9 @@ */ import { BackstageTheme } from '@backstage/theme'; -import { - IconButton, - makeStyles, - Typography, - useTheme, - withStyles, -} from '@material-ui/core'; +import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; // Material-table is not using the standard icons available in in material-ui. https://github.com/mbrn/material-table/issues/51 import AddBox from '@material-ui/icons/AddBox'; import ArrowUpward from '@material-ui/icons/ArrowUpward'; diff --git a/packages/core-components/src/components/Tabs/Tab.tsx b/packages/core-components/src/components/Tabs/Tab.tsx index 7b284940f1..571640d970 100644 --- a/packages/core-components/src/components/Tabs/Tab.tsx +++ b/packages/core-components/src/components/Tabs/Tab.tsx @@ -15,7 +15,8 @@ */ import React from 'react'; -import { Tab, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Tab from '@material-ui/core/Tab'; import { BackstageTheme } from '@backstage/theme'; interface StyledTabProps { diff --git a/packages/core-components/src/components/Tabs/TabBar.tsx b/packages/core-components/src/components/Tabs/TabBar.tsx index d0febebc6a..d2f0250fd4 100644 --- a/packages/core-components/src/components/Tabs/TabBar.tsx +++ b/packages/core-components/src/components/Tabs/TabBar.tsx @@ -15,7 +15,8 @@ */ import React, { PropsWithChildren } from 'react'; -import { Tabs, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Tabs from '@material-ui/core/Tabs'; import { BackstageTheme } from '@backstage/theme'; interface StyledTabsProps { diff --git a/packages/core-components/src/components/Tabs/TabIcon.tsx b/packages/core-components/src/components/Tabs/TabIcon.tsx index 37b38217a3..9743469aa7 100644 --- a/packages/core-components/src/components/Tabs/TabIcon.tsx +++ b/packages/core-components/src/components/Tabs/TabIcon.tsx @@ -15,7 +15,8 @@ */ import React from 'react'; -import { IconButton, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import IconButton from '@material-ui/core/IconButton'; import { BackstageTheme } from '@backstage/theme'; interface StyledIconProps { diff --git a/packages/core-components/src/components/Tabs/Tabs.tsx b/packages/core-components/src/components/Tabs/Tabs.tsx index d60f3ff639..31bf1d2027 100644 --- a/packages/core-components/src/components/Tabs/Tabs.tsx +++ b/packages/core-components/src/components/Tabs/Tabs.tsx @@ -16,7 +16,7 @@ import React, { useRef, useEffect, MutableRefObject, useState } from 'react'; import { BackstageTheme } from '@backstage/theme'; -import { AppBar } from '@material-ui/core'; +import AppBar from '@material-ui/core/AppBar'; import { makeStyles } from '@material-ui/core/styles'; import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; import NavigateNextIcon from '@material-ui/icons/NavigateNext'; diff --git a/packages/core-components/src/components/TrendLine/TrendLine.tsx b/packages/core-components/src/components/TrendLine/TrendLine.tsx index cb44d2b36b..b59d748c2c 100644 --- a/packages/core-components/src/components/TrendLine/TrendLine.tsx +++ b/packages/core-components/src/components/TrendLine/TrendLine.tsx @@ -21,7 +21,7 @@ import { SparklinesLineProps, SparklinesProps, } from 'react-sparklines'; -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; function color(data: number[], theme: BackstageTheme): string | undefined { diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx index bab831e905..838cb02a76 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx @@ -16,7 +16,9 @@ import React from 'react'; import { WarningPanel } from './WarningPanel'; -import { Button, Link, Typography } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Link from '@material-ui/core/Link'; +import Typography from '@material-ui/core/Typography'; export default { title: 'Feedback/Warning Panel', diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx index 4ae6423333..25cf642c28 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { fireEvent, screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; -import { Typography } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; import { WarningPanel, WarningProps } from './WarningPanel'; diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index bf845617c9..0cf250497b 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -14,16 +14,12 @@ * limitations under the License. */ import { BackstageTheme } from '@backstage/theme'; -import { - Accordion, - AccordionSummary, - AccordionDetails, - Grid, - makeStyles, - Typography, - darken, - lighten, -} from '@material-ui/core'; +import { makeStyles, darken, lighten } from '@material-ui/core/styles'; +import Accordion from '@material-ui/core/Accordion'; +import AccordionSummary from '@material-ui/core/AccordionSummary'; +import AccordionDetails from '@material-ui/core/AccordionDetails'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import React from 'react'; diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.tsx index cb168600e5..e097724385 100644 --- a/packages/core-components/src/layout/BottomLink/BottomLink.tsx +++ b/packages/core-components/src/layout/BottomLink/BottomLink.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; -import { Divider, Typography, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Divider from '@material-ui/core/Divider'; +import Typography from '@material-ui/core/Typography'; import ArrowIcon from '@material-ui/icons/ArrowForward'; import { BackstageTheme } from '@backstage/theme'; import Box from '@material-ui/core/Box'; diff --git a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx index 9716471d9f..12bd757aa3 100644 --- a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx +++ b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx @@ -13,7 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Box, List, ListItem, Popover, Typography } from '@material-ui/core'; + +import Box from '@material-ui/core/Box'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import Popover from '@material-ui/core/Popover'; +import Typography from '@material-ui/core/Typography'; import ExpandLessIcon from '@material-ui/icons/ExpandLess'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import React, { Fragment } from 'react'; diff --git a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.test.tsx b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.test.tsx index 4c8d707501..12125bafc9 100644 --- a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.test.tsx +++ b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.test.tsx @@ -15,7 +15,7 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import { Typography } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; import { fireEvent } from '@testing-library/react'; import React from 'react'; import { Link } from '../../components/Link'; diff --git a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx index 26304f9e2b..4423c5c0b7 100644 --- a/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx @@ -14,15 +14,13 @@ * limitations under the License. */ -import { - Box, - Breadcrumbs as MaterialBreadcrumbs, - List, - ListItem, - Popover, - Typography, - withStyles, -} from '@material-ui/core'; +import { withStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import Popover from '@material-ui/core/Popover'; +import Typography from '@material-ui/core/Typography'; +import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs'; import React, { ComponentProps, Fragment } from 'react'; type Props = ComponentProps; diff --git a/packages/core-components/src/layout/Content/Content.tsx b/packages/core-components/src/layout/Content/Content.tsx index 588c9fd630..122eb07e2a 100644 --- a/packages/core-components/src/layout/Content/Content.tsx +++ b/packages/core-components/src/layout/Content/Content.tsx @@ -16,7 +16,7 @@ import React, { PropsWithChildren } from 'react'; import classNames from 'classnames'; -import { Theme, makeStyles } from '@material-ui/core'; +import { Theme, makeStyles } from '@material-ui/core/styles'; export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding'; diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx index c3faec64a2..b4a80ac4b1 100644 --- a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx +++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx @@ -19,7 +19,8 @@ */ import React, { PropsWithChildren, ReactNode } from 'react'; -import { Typography, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; import { Helmet } from 'react-helmet'; export type ContentHeaderClassKey = diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx index 79aaaebfc6..46257f85bb 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; -import { Typography, Link, Grid } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import Link from '@material-ui/core/Link'; +import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; import { MicDrop } from './MicDrop'; diff --git a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx index 5500994e4f..efa101b23b 100644 --- a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx +++ b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import MicDropSvgUrl from './mic-drop.svg'; const useStyles = makeStyles( diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index 535e3c4ed8..aed9e9f8e4 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -16,7 +16,11 @@ import { useApi, configApiRef } from '@backstage/core-plugin-api'; import { BackstageTheme } from '@backstage/theme'; -import { Box, Grid, makeStyles, Tooltip, Typography } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; +import Grid from '@material-ui/core/Grid'; +import Tooltip from '@material-ui/core/Tooltip'; +import Typography from '@material-ui/core/Typography'; import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react'; import { Helmet } from 'react-helmet'; import { Link } from '../../components/Link'; diff --git a/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx b/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx index 5243a65498..d8dc398ce3 100644 --- a/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx +++ b/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx @@ -15,15 +15,14 @@ */ import React, { Fragment, ReactElement, ComponentType } from 'react'; -import { - IconButton, - List, - ListItem, - ListItemIcon, - ListItemText, - Popover, +import IconButton from '@material-ui/core/IconButton'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText, { ListItemTextProps, -} from '@material-ui/core'; +} from '@material-ui/core/ListItemText'; +import Popover from '@material-ui/core/Popover'; import { VerticalMenuIcon } from './VerticalMenuIcon'; type ActionItemProps = { diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx index 5071971f48..3b9bde0f62 100644 --- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx +++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx @@ -14,7 +14,10 @@ * limitations under the License. */ -import { Link, makeStyles, Typography, Grid } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Link from '@material-ui/core/Link'; +import Typography from '@material-ui/core/Typography'; +import Grid from '@material-ui/core/Grid'; import React from 'react'; export type HeaderLabelClassKey = 'root' | 'label' | 'value'; diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx index e6762de90e..2501785701 100644 --- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx +++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx @@ -17,7 +17,8 @@ import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import { HeaderTabs } from '.'; -import { Badge, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Badge from '@material-ui/core/Badge'; const mockTabs = [ { id: 'overview', label: 'Overview' }, diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx index b34af3eb83..dd740d1c53 100644 --- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx +++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx @@ -18,7 +18,9 @@ // This is just a temporary solution to implementing tabs for now import React, { useState, useEffect } from 'react'; -import { makeStyles, Tabs, Tab as TabUI, TabProps } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import TabUI, { TabProps } from '@material-ui/core/Tab'; +import Tabs from '@material-ui/core/Tabs'; export type HeaderTabsClassKey = | 'tabsWrapper' diff --git a/packages/core-components/src/layout/HomepageTimer/HomepageTimer.test.tsx b/packages/core-components/src/layout/HomepageTimer/HomepageTimer.test.tsx index eda877884e..1d4bf6954a 100644 --- a/packages/core-components/src/layout/HomepageTimer/HomepageTimer.test.tsx +++ b/packages/core-components/src/layout/HomepageTimer/HomepageTimer.test.tsx @@ -18,7 +18,7 @@ import { renderWithEffects } from '@backstage/test-utils'; import { HomepageTimer } from './HomepageTimer'; import React from 'react'; import { lightTheme } from '@backstage/theme'; -import { ThemeProvider } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core/styles'; import { ApiProvider, ApiRegistry, diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx index cf012a129a..8dd8272f5a 100644 --- a/packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx +++ b/packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx @@ -13,7 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Grid, Typography } from '@material-ui/core'; + +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; import React, { PropsWithChildren } from 'react'; import { MemoryRouter } from 'react-router'; import { InfoCard } from './InfoCard'; diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx index a3094b792e..0b9c4c7dcf 100644 --- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx +++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx @@ -15,16 +15,12 @@ */ import React, { ReactNode } from 'react'; -import { - Card, - CardActions, - CardContent, - CardHeader, - CardHeaderProps, - Divider, - withStyles, - makeStyles, -} from '@material-ui/core'; +import { withStyles, makeStyles } from '@material-ui/core/styles'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; +import CardHeader, { CardHeaderProps } from '@material-ui/core/CardHeader'; +import Divider from '@material-ui/core/Divider'; import classNames from 'classnames'; import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary'; import { BottomLink, BottomLinkProps } from '../BottomLink'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx b/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx index 7cd67ff00d..1d336fc5f5 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx @@ -14,14 +14,12 @@ * limitations under the License. */ -import { - Card, - CardActions, - CardContent, - CardMedia, - makeStyles, - Typography, -} from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; +import CardMedia from '@material-ui/core/CardMedia'; +import Typography from '@material-ui/core/Typography'; import React from 'react'; import { MemoryRouter } from 'react-router'; import { Button } from '../../components'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCard.tsx b/packages/core-components/src/layout/ItemCard/ItemCard.tsx index 81a88d2c09..82426c14e1 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCard.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCard.tsx @@ -13,14 +13,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { - Box, - Card, - CardActions, - CardContent, - CardMedia, - Chip, -} from '@material-ui/core'; + +import Box from '@material-ui/core/Box'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; +import CardMedia from '@material-ui/core/CardMedia'; +import Chip from '@material-ui/core/Chip'; import React, { ReactNode } from 'react'; import { Button } from '../../components'; import { ItemCardHeader } from './ItemCardHeader'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx b/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx index 30fdb415e5..f8759ffd17 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx @@ -15,7 +15,7 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import { Card } from '@material-ui/core'; +import Card from '@material-ui/core/Card'; import { screen } from '@testing-library/react'; import React from 'react'; import { ItemCardGrid } from './ItemCardGrid'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx index 739398252e..b4fe504c31 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx @@ -14,7 +14,12 @@ * limitations under the License. */ -import { createStyles, makeStyles, Theme, WithStyles } from '@material-ui/core'; +import { + createStyles, + makeStyles, + Theme, + WithStyles, +} from '@material-ui/core/styles'; import React from 'react'; export type ItemCardGridClassKey = 'root'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.test.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.test.tsx index 41b150a900..a401dfb4a5 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.test.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardHeader.test.tsx @@ -15,7 +15,8 @@ */ import { renderInTestApp } from '@backstage/test-utils'; -import { Card, CardMedia } from '@material-ui/core'; +import Card from '@material-ui/core/Card'; +import CardMedia from '@material-ui/core/CardMedia'; import { screen } from '@testing-library/react'; import React from 'react'; import { ItemCardHeader } from './ItemCardHeader'; diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx index 7ad6732e02..c604f24e3f 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx @@ -14,12 +14,8 @@ * limitations under the License. */ -import { - createStyles, - makeStyles, - Typography, - WithStyles, -} from '@material-ui/core'; +import { createStyles, makeStyles, WithStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; import React from 'react'; import { BackstageTheme } from '@backstage/theme'; diff --git a/packages/core-components/src/layout/Page/Page.stories.tsx b/packages/core-components/src/layout/Page/Page.stories.tsx index 3ad9ecfe72..7386d198a3 100644 --- a/packages/core-components/src/layout/Page/Page.stories.tsx +++ b/packages/core-components/src/layout/Page/Page.stories.tsx @@ -14,7 +14,11 @@ * limitations under the License. */ -import { Box, Chip, Grid, Link, Typography } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Chip from '@material-ui/core/Chip'; +import Grid from '@material-ui/core/Grid'; +import Link from '@material-ui/core/Link'; +import Typography from '@material-ui/core/Typography'; import React, { useState } from 'react'; import { MemoryRouter } from 'react-router'; import { createApp } from '@backstage/core-app-api'; diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index 37d6c663f2..57653d23b5 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -16,7 +16,7 @@ import React, { PropsWithChildren } from 'react'; import { BackstageTheme } from '@backstage/theme'; -import { makeStyles, ThemeProvider } from '@material-ui/core'; +import { makeStyles, ThemeProvider } from '@material-ui/core/styles'; export type PageClassKey = 'root'; diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index 750ec6bbdc..e6fa3820ad 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ -import { makeStyles, useMediaQuery } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; import clsx from 'clsx'; import React, { useRef, useState, useContext, PropsWithChildren } from 'react'; import { sidebarConfig, SidebarContext } from './config'; diff --git a/packages/core-components/src/layout/Sidebar/Intro.tsx b/packages/core-components/src/layout/Sidebar/Intro.tsx index 70b952588d..8086898e64 100644 --- a/packages/core-components/src/layout/Sidebar/Intro.tsx +++ b/packages/core-components/src/layout/Sidebar/Intro.tsx @@ -16,7 +16,10 @@ import React, { useContext, useState } from 'react'; import { useLocalStorage } from 'react-use'; -import { Link, Typography, makeStyles, Collapse } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Link from '@material-ui/core/Link'; +import Typography from '@material-ui/core/Typography'; +import Collapse from '@material-ui/core/Collapse'; import CloseIcon from '@material-ui/icons/Close'; import { BackstageTheme } from '@backstage/theme'; import { diff --git a/packages/core-components/src/layout/Sidebar/Items.test.tsx b/packages/core-components/src/layout/Sidebar/Items.test.tsx index 89d2a2c294..48fcd98666 100644 --- a/packages/core-components/src/layout/Sidebar/Items.test.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.test.tsx @@ -23,7 +23,7 @@ import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; import { Sidebar } from './Bar'; import { SidebarItem } from './Items'; import { renderHook } from '@testing-library/react-hooks'; -import { hexToRgb, makeStyles } from '@material-ui/core'; +import { hexToRgb, makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ spotlight: { diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 8bd80b6825..8a66e182f6 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -16,14 +16,10 @@ import { IconComponent } from '@backstage/core-plugin-api'; import { BackstageTheme } from '@backstage/theme'; -import { - Badge, - makeStyles, - styled, - TextField, - Theme, - Typography, -} from '@material-ui/core'; +import { makeStyles, styled, Theme } from '@material-ui/core/styles'; +import Badge from '@material-ui/core/Badge'; +import TextField from '@material-ui/core/TextField'; +import Typography from '@material-ui/core/Typography'; import { CreateCSSProperties } from '@material-ui/core/styles/withStyles'; import SearchIcon from '@material-ui/icons/Search'; import clsx from 'clsx'; diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index c375112321..cc50c5af6b 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import React, { createContext, PropsWithChildren, diff --git a/packages/core-components/src/layout/SignInPage/SignInPage.tsx b/packages/core-components/src/layout/SignInPage/SignInPage.tsx index 910fc6a7bf..bd4fe37480 100644 --- a/packages/core-components/src/layout/SignInPage/SignInPage.tsx +++ b/packages/core-components/src/layout/SignInPage/SignInPage.tsx @@ -20,7 +20,9 @@ import { SignInPageProps, useApi, } from '@backstage/core-plugin-api'; -import { Button, Grid, Typography } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; import React, { useState } from 'react'; import { useMount } from 'react-use'; import { Progress } from '../../components/Progress'; diff --git a/packages/core-components/src/layout/SignInPage/auth0Provider.tsx b/packages/core-components/src/layout/SignInPage/auth0Provider.tsx index 78043cb3fb..19836827c9 100644 --- a/packages/core-components/src/layout/SignInPage/auth0Provider.tsx +++ b/packages/core-components/src/layout/SignInPage/auth0Provider.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; -import { Grid, Typography, Button } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; import { InfoCard } from '../InfoCard/InfoCard'; import { ProviderComponent, ProviderLoader, SignInProvider } from './types'; import { diff --git a/packages/core-components/src/layout/SignInPage/commonProvider.tsx b/packages/core-components/src/layout/SignInPage/commonProvider.tsx index 3160bd171b..8df5faf34e 100644 --- a/packages/core-components/src/layout/SignInPage/commonProvider.tsx +++ b/packages/core-components/src/layout/SignInPage/commonProvider.tsx @@ -15,7 +15,8 @@ */ import React from 'react'; -import { Typography, Button } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; import { InfoCard } from '../InfoCard/InfoCard'; import { ProviderComponent, diff --git a/packages/core-components/src/layout/SignInPage/customProvider.tsx b/packages/core-components/src/layout/SignInPage/customProvider.tsx index 46fed6b5ae..3be375ed3d 100644 --- a/packages/core-components/src/layout/SignInPage/customProvider.tsx +++ b/packages/core-components/src/layout/SignInPage/customProvider.tsx @@ -16,14 +16,12 @@ import React from 'react'; import { useForm, UseFormRegisterReturn } from 'react-hook-form'; -import { - Typography, - Button, - FormControl, - TextField, - FormHelperText, - makeStyles, -} from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import FormControl from '@material-ui/core/FormControl'; +import TextField from '@material-ui/core/TextField'; +import FormHelperText from '@material-ui/core/FormHelperText'; import isEmpty from 'lodash/isEmpty'; import { InfoCard } from '../InfoCard/InfoCard'; import { ProviderComponent, ProviderLoader, SignInProvider } from './types'; diff --git a/packages/core-components/src/layout/SignInPage/guestProvider.tsx b/packages/core-components/src/layout/SignInPage/guestProvider.tsx index 8673c17ffa..e91d9cbc75 100644 --- a/packages/core-components/src/layout/SignInPage/guestProvider.tsx +++ b/packages/core-components/src/layout/SignInPage/guestProvider.tsx @@ -15,7 +15,8 @@ */ import React from 'react'; -import { Typography, Button } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; import { InfoCard } from '../InfoCard/InfoCard'; import { GridItem } from './styles'; import { ProviderComponent, ProviderLoader, SignInProvider } from './types'; diff --git a/packages/core-components/src/layout/SignInPage/styles.tsx b/packages/core-components/src/layout/SignInPage/styles.tsx index 55db36229b..6cf5ded226 100644 --- a/packages/core-components/src/layout/SignInPage/styles.tsx +++ b/packages/core-components/src/layout/SignInPage/styles.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ import React from 'react'; -import { Grid, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import Grid from '@material-ui/core/Grid'; export type SignInPageClassKey = 'container' | 'item'; diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.stories.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.stories.tsx index 3214d26653..77fff64fb5 100644 --- a/packages/core-components/src/layout/TabbedCard/TabbedCard.stories.tsx +++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.stories.tsx @@ -13,7 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Grid } from '@material-ui/core'; + +import Grid from '@material-ui/core/Grid'; import React, { PropsWithChildren, useState } from 'react'; import { MemoryRouter } from 'react-router'; import { CardTab, TabbedCard } from './TabbedCard'; diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx index e9905663b2..f9ec755e00 100644 --- a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx +++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx @@ -20,17 +20,13 @@ import React, { ReactNode, PropsWithChildren, } from 'react'; -import { - Card, - CardContent, - CardHeader, - Divider, - withStyles, - makeStyles, - Tabs, - Tab, - TabProps, -} from '@material-ui/core'; +import { withStyles, makeStyles } from '@material-ui/core/styles'; +import Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; +import CardHeader from '@material-ui/core/CardHeader'; +import Divider from '@material-ui/core/Divider'; +import Tabs from '@material-ui/core/Tabs'; +import Tab, { TabProps } from '@material-ui/core/Tab'; import { BottomLink, BottomLinkProps } from '../BottomLink'; import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary'; diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts index b2d964c4db..4a45516a55 100644 --- a/packages/theme/src/baseTheme.ts +++ b/packages/theme/src/baseTheme.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { createTheme as createMuiTheme } from '@material-ui/core'; +import { createTheme as createMuiTheme } from '@material-ui/core/styles'; import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index 7f50e87e03..ce7282276e 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -257,13 +257,14 @@ export const EntityRefLink: React_2.ForwardRefExoticComponent< | 'children' | 'key' | 'id' + | 'className' | 'classes' + | 'innerRef' | 'defaultChecked' | 'defaultValue' | 'suppressContentEditableWarning' | 'suppressHydrationWarning' | 'accessKey' - | 'className' | 'contentEditable' | 'contextMenu' | 'draggable' @@ -504,7 +505,6 @@ export const EntityRefLink: React_2.ForwardRefExoticComponent< | 'onTransitionEndCapture' | 'component' | 'variant' - | 'innerRef' | 'download' | 'href' | 'hrefLang'