refactor: update material ui imports

Signed-off-by: Timothy Deakin <cftad@protonmail.com>

plugins/home/src/assets/TemplateBackstageLogoIcon.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   svg: {

plugins/home/src/componentRenderers/ComponentAccordion.tsx

@@ -16,14 +16,12 @@
 
 import React from 'react';
 import { SettingsModal } from '@backstage/plugin-home-react';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Typography,
-  IconButton,
-  Theme,
-} from '@material-ui/core';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import { Theme } from '@material-ui/core/styles';
 import { makeStyles } from '@material-ui/core/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import SettingsIcon from '@material-ui/icons/Settings';

plugins/home/src/componentRenderers/ComponentTabs/ComponentTabs.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Tabs, Tab } from '@material-ui/core';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
 import { InfoCard } from '@backstage/core-components';
 
 type TabType = {

plugins/home/src/components/CustomHomepage/AddWidgetDialog.tsx

@@ -17,7 +17,9 @@
 import { Widget } from './types';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import { DialogContent, DialogTitle, ListItemAvatar } from '@material-ui/core';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import AddIcon from '@material-ui/icons/Add';
 import ListItemText from '@material-ui/core/ListItemText';
 import React from 'react';

plugins/home/src/components/CustomHomepage/CustomHomepageButtons.tsx

@@ -15,7 +15,7 @@
  */
 import Button from '@material-ui/core/Button';
 import React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import SaveIcon from '@material-ui/icons/Save';
 import DeleteIcon from '@material-ui/icons/Delete';
 import AddIcon from '@material-ui/icons/Add';

plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx

@@ -25,13 +25,13 @@ import {
 } from '@backstage/core-plugin-api';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
+import Dialog from '@material-ui/core/Dialog';
 import {
   createStyles,
-  Dialog,
   makeStyles,
   Theme,
   useTheme,
-} from '@material-ui/core';
+} from '@material-ui/core/styles';
 import { compact } from 'lodash';
 import useObservable from 'react-use/lib/useObservable';
 import { ContentHeader, ErrorBoundary } from '@backstage/core-components';

plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx

@@ -13,15 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  createStyles,
-  Dialog,
-  DialogContent,
-  Grid,
-  makeStyles,
-  Theme,
-  Tooltip,
-} from '@material-ui/core';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import Grid from '@material-ui/core/Grid';
+import Tooltip from '@material-ui/core/Tooltip';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import SettingsIcon from '@material-ui/icons/Settings';
 import DeleteIcon from '@material-ui/icons/Delete';

plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx

@@ -15,13 +15,11 @@
  */
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { entityRouteParams } from '@backstage/plugin-catalog-react';
-import {
-  ListItem,
-  ListItemIcon,
-  Tooltip,
-  IconButton,
-  ListItemText,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@material-ui/core/IconButton';
+import ListItemText from '@material-ui/core/ListItemText';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';

plugins/home/src/components/VisitList/ItemCategory.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Chip, makeStyles } from '@material-ui/core';
+import Chip from '@material-ui/core/Chip';
+import { makeStyles } from '@material-ui/core/styles';
 import { colorVariants } from '@backstage/theme';
 import { Visit } from '../../api/VisitsApi';
 import { CompoundEntityRef, parseEntityRef } from '@backstage/catalog-model';

plugins/home/src/components/VisitList/ItemDetail.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import { Visit } from '../../api/VisitsApi';
 import { DateTime } from 'luxon';
 

plugins/home/src/components/VisitList/ItemName.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Typography, makeStyles } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import { Visit } from '../../api/VisitsApi';
 import { Link } from '@backstage/core-components';
 

plugins/home/src/components/VisitList/VisitList.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Collapse, List } from '@material-ui/core';
+import Collapse from '@material-ui/core/Collapse';
+import List from '@material-ui/core/List';
 import { Visit } from '../../api/VisitsApi';
 import { VisitListItem } from './VisitListItem';
 import { ItemDetailType } from './ItemDetail';

plugins/home/src/components/VisitList/VisitListEmpty.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 
 export const VisitListEmpty = () => (
   <>

plugins/home/src/components/VisitList/VisitListFew.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 
 export const VisitListFew = () => (
   <>

plugins/home/src/components/VisitList/VisitListItem.tsx

@@ -15,12 +15,10 @@
  */
 
 import React from 'react';
-import {
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  makeStyles,
-} from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from '@material-ui/core/styles';
 import { Visit } from '../../api/VisitsApi';
 import { ItemName } from './ItemName';
 import { ItemDetail, ItemDetailType } from './ItemDetail';

plugins/home/src/components/VisitList/VisitListSkeleton.tsx

@@ -15,14 +15,12 @@
  */
 
 import React from 'react';
-import {
-  Collapse,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  makeStyles,
-} from '@material-ui/core';
-import { Skeleton } from '@material-ui/lab';
+import Collapse from '@material-ui/core/Collapse';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from '@material-ui/core/styles';
+import Skeleton from '@material-ui/lab/Skeleton';
 
 const useStyles = makeStyles(_theme => ({
   skeleton: {

plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.stories.tsx

@@ -20,7 +20,8 @@ import { rootRouteRef } from '../../routes';
 import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { configApiRef } from '@backstage/core-plugin-api';
 import { ConfigReader } from '@backstage/core-app-api';
-import { Grid, makeStyles } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 import React, { ComponentType, PropsWithChildren } from 'react';
 
 export default {

plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.test.tsx

@@ -17,7 +17,7 @@ import { CompanyLogo } from './CompanyLogo';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { configApiRef } from '@backstage/core-plugin-api';
 import { ConfigReader } from '@backstage/core-app-api';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 
 describe('<CompanyLogo>', () => {

plugins/home/src/homePageComponents/CompanyLogo/CompanyLogo.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import React from 'react';
 

plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx

@@ -31,7 +31,8 @@ import {
 import { useApi } from '@backstage/core-plugin-api';
 import { EntityFilterQuery } from '@backstage/catalog-client';
 
-import { makeStyles, Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 
 /**

plugins/home/src/homePageComponents/FeaturedDocsCard/FeaturedDocsCard.stories.tsx

@@ -18,7 +18,7 @@ import { FeaturedDocsCard } from '../../plugin';
 import React, { ComponentType, PropsWithChildren } from 'react';
 import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 
 const docsEntities = [
   {

plugins/home/src/homePageComponents/RandomJoke/Actions.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import { useRandomJoke } from './Context';
 
 export const Actions = () => {

plugins/home/src/homePageComponents/RandomJoke/Settings.tsx

@@ -13,13 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  FormControl,
-  FormLabel,
-  RadioGroup,
-  FormControlLabel,
-  Radio,
-} from '@material-ui/core';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
 import React from 'react';
 import { useRandomJoke, JokeType } from './Context';
 import upperFirst from 'lodash/upperFirst';

plugins/home/src/homePageComponents/StarredEntities/Content.tsx

@@ -21,7 +21,10 @@ import {
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import { Progress, ResponseErrorPanel } from '@backstage/core-components';
-import { List, Typography, Tabs, Tab } from '@material-ui/core';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { StarredEntityListItem } from '../../components/StarredEntityListItem/StarredEntityListItem';

plugins/home/src/homePageComponents/StarredEntities/StarredEntities.stories.tsx

@@ -22,7 +22,7 @@ import {
   MockStarredEntitiesApi,
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import React, { ComponentType, PropsWithChildren } from 'react';
 
 const starredEntitiesApi = new MockStarredEntitiesApi();

plugins/home/src/homePageComponents/Toolkit/Content.tsx

@@ -15,12 +15,10 @@
  */
 
 import { Link } from '@backstage/core-components';
-import {
-  makeStyles,
-  List,
-  ListItemIcon,
-  ListItemText,
-} from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { useToolkit, Tool } from './Context';
 

plugins/home/src/homePageComponents/Toolkit/Toolkit.stories.tsx

@@ -16,7 +16,7 @@
 
 import { InfoCard } from '@backstage/core-components';
 import { wrapInTestApp } from '@backstage/test-utils';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import React, { ComponentType, PropsWithChildren } from 'react';
 import { ComponentAccordion } from '../../componentRenderers';
 import { HomePageToolkit } from '../../plugin';

plugins/home/src/homePageComponents/VisitedByType/Actions.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import { useContext } from './Context';
 
 export const Actions = () => {

plugins/home/src/homePageComponents/VisitedByType/HomePageVisitedByType.stories.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';
 import { ComponentType, PropsWithChildren } from 'react';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import { homePlugin } from '../../plugin';
 import { Visit, visitsApiRef } from '../../api/VisitsApi';
 import { createCardExtension } from '@backstage/plugin-home-react';

plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx

@@ -18,7 +18,8 @@ import {
   identityApiRef,
   useApi,
 } from '@backstage/core-plugin-api';
-import { Tooltip, Typography } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
 import React, { useEffect, useMemo } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { getTimeBasedGreeting } from './timeUtil';