From 8721510032d0ad3d57ce400dc5920fd3d8fe94e4 Mon Sep 17 00:00:00 2001 From: Timothy Deakin Date: Thu, 14 Mar 2024 17:22:45 +0000 Subject: [PATCH 1/4] feat: add eslint rule for top level imports Signed-off-by: Timothy Deakin --- plugins/catalog/.eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/catalog/.eslintrc.js b/plugins/catalog/.eslintrc.js index 45bb6db521..157ee11e08 100644 --- a/plugins/catalog/.eslintrc.js +++ b/plugins/catalog/.eslintrc.js @@ -1,5 +1,6 @@ module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, { rules: { 'testing-library/prefer-screen-queries': 'error', + '@backstage/no-top-level-material-ui-4-imports': 'error', }, }); From c293e58692b6907352aac6ee8949c1063b3dd8d4 Mon Sep 17 00:00:00 2001 From: Timothy Deakin Date: Thu, 14 Mar 2024 17:24:07 +0000 Subject: [PATCH 2/4] refactor: update material ui imports Signed-off-by: Timothy Deakin --- .../src/components/AboutCard/AboutCard.tsx | 14 ++++++-------- .../src/components/AboutCard/AboutContent.tsx | 4 +++- .../src/components/AboutCard/AboutField.tsx | 4 +++- .../CatalogKindHeader/CatalogKindHeader.tsx | 12 ++++-------- .../CatalogSearchResultListItem.tsx | 14 ++++++-------- .../src/components/CatalogTable/columns.tsx | 2 +- .../EntityContextMenu/EntityContextMenu.tsx | 18 ++++++++---------- .../EntityContextMenu/UnregisterEntity.tsx | 4 +++- .../EntityLabelsCard/EntityLabelsCard.tsx | 3 ++- .../EntityLabelsEmptyState.tsx | 4 +++- .../components/EntityLayout/EntityLayout.tsx | 5 +++-- .../EntityLinksCard/EntityLinksEmptyState.tsx | 4 +++- .../components/EntityLinksCard/IconLink.tsx | 4 +++- .../EntityLinksCard/LinksGridList.tsx | 3 ++- .../EntityLinksCard/useDynamicColumns.tsx | 3 ++- .../EntityNotFound/EntityNotFound.tsx | 4 +++- .../components/EntityNotFound/Illo/Illo.tsx | 2 +- .../EntityOrphanWarning/DeleteEntityDialog.tsx | 5 ++++- .../EntityOrphanWarning.tsx | 2 +- .../EntityProcessingErrorsPanel.tsx | 2 +- .../EntityRelationWarning.tsx | 4 ++-- .../RelatedEntitiesCard.tsx | 2 +- .../SystemDiagramCard/SystemDiagramCard.tsx | 4 +++- 23 files changed, 68 insertions(+), 55 deletions(-) diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index 763f6fc094..09e1790f3b 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -20,14 +20,12 @@ import { DEFAULT_NAMESPACE, stringifyEntityRef, } from '@backstage/catalog-model'; -import { - Card, - CardContent, - CardHeader, - Divider, - IconButton, - makeStyles, -} from '@material-ui/core'; +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 IconButton from '@material-ui/core/IconButton'; +import { makeStyles } from '@material-ui/core/styles'; import { HeaderIconLinkRow, IconLinkVerticalProps, diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.tsx index 245308cee2..571f2018dd 100644 --- a/plugins/catalog/src/components/AboutCard/AboutContent.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutContent.tsx @@ -25,7 +25,9 @@ import { getEntityRelations, } from '@backstage/plugin-catalog-react'; import { JsonArray } from '@backstage/types'; -import { Chip, Grid, makeStyles } from '@material-ui/core'; +import Chip from '@material-ui/core/Chip'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles } from '@material-ui/core/styles'; import { MarkdownContent } from '@backstage/core-components'; import React from 'react'; import { AboutField } from './AboutField'; diff --git a/plugins/catalog/src/components/AboutCard/AboutField.tsx b/plugins/catalog/src/components/AboutCard/AboutField.tsx index 28c22bff37..7587867af0 100644 --- a/plugins/catalog/src/components/AboutCard/AboutField.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutField.tsx @@ -15,7 +15,9 @@ */ import { useElementFilter } from '@backstage/core-plugin-api'; -import { Grid, makeStyles, Typography } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; const useStyles = makeStyles(theme => ({ diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx index 1455c2a182..58fd0cfc0f 100644 --- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx +++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx @@ -15,14 +15,10 @@ */ import React, { useEffect, useState, useMemo } from 'react'; -import { - createStyles, - InputBase, - makeStyles, - MenuItem, - Select, - Theme, -} from '@material-ui/core'; +import InputBase from '@material-ui/core/InputBase'; +import MenuItem from '@material-ui/core/MenuItem'; +import Select from '@material-ui/core/Select'; +import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import { EntityKindFilter, useEntityList, diff --git a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx index f2ef05b128..32c86f38b7 100644 --- a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx +++ b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx @@ -15,14 +15,12 @@ */ import React, { ReactNode } from 'react'; -import { - Box, - Chip, - ListItemIcon, - ListItemText, - Typography, - makeStyles, -} from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Chip from '@material-ui/core/Chip'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import { Link } from '@backstage/core-components'; import { IndexableDocument, diff --git a/plugins/catalog/src/components/CatalogTable/columns.tsx b/plugins/catalog/src/components/CatalogTable/columns.tsx index a955aaadb9..86e8ced86a 100644 --- a/plugins/catalog/src/components/CatalogTable/columns.tsx +++ b/plugins/catalog/src/components/CatalogTable/columns.tsx @@ -19,7 +19,7 @@ import { EntityRefLink, EntityRefLinks, } from '@backstage/plugin-catalog-react'; -import { Chip } from '@material-ui/core'; +import Chip from '@material-ui/core/Chip'; import { CatalogTableRow } from './types'; import { OverflowTooltip, TableColumn } from '@backstage/core-components'; import { Entity } from '@backstage/catalog-model'; diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx index 0fc746f455..7c94887a37 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx @@ -14,16 +14,14 @@ * limitations under the License. */ -import { - Divider, - IconButton, - ListItemIcon, - ListItemText, - MenuItem, - MenuList, - Popover, - Tooltip, -} from '@material-ui/core'; +import Divider from '@material-ui/core/Divider'; +import IconButton from '@material-ui/core/IconButton'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import MenuItem from '@material-ui/core/MenuItem'; +import MenuList from '@material-ui/core/MenuList'; +import Popover from '@material-ui/core/Popover'; +import Tooltip from '@material-ui/core/Tooltip'; import { Theme, makeStyles } from '@material-ui/core/styles'; import BugReportIcon from '@material-ui/icons/BugReport'; import MoreVert from '@material-ui/icons/MoreVert'; diff --git a/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx b/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx index 05044bf935..3de890097b 100644 --- a/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/UnregisterEntity.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; -import { ListItemIcon, ListItemText, MenuItem } from '@material-ui/core'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import MenuItem from '@material-ui/core/MenuItem'; import CancelIcon from '@material-ui/icons/Cancel'; type VisibleType = 'visible' | 'hidden' | 'disable'; diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx index 500c651cc0..0b1448bb1f 100644 --- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx +++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx @@ -23,7 +23,8 @@ import { TableColumn, } from '@backstage/core-components'; import { EntityLabelsEmptyState } from './EntityLabelsEmptyState'; -import { makeStyles, Typography } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; /** @public */ export interface EntityLabelsCardProps { diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx index 8878cb827f..5f5db0baa5 100644 --- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx +++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx @@ -14,7 +14,9 @@ * limitations under the License. */ -import { Button, makeStyles, Typography } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; import { CodeSnippet } from '@backstage/core-components'; diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx index 8e11f92599..274972283f 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx +++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx @@ -46,8 +46,9 @@ import { UnregisterEntityDialog, useAsyncEntity, } from '@backstage/plugin-catalog-react'; -import { Box, TabProps } from '@material-ui/core'; -import { Alert } from '@material-ui/lab'; +import Box from '@material-ui/core/Box'; +import { TabProps } from '@material-ui/core/Tab'; +import Alert from '@material-ui/lab/Alert'; import React, { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu'; diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx index 59ab3f3db2..81009c5393 100644 --- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx @@ -14,7 +14,9 @@ * limitations under the License. */ -import { Button, makeStyles, Typography } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; import { CodeSnippet } from '@backstage/core-components'; diff --git a/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx b/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx index 9afdd1f1da..77ee12bd36 100644 --- a/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx @@ -14,7 +14,9 @@ * limitations under the License. */ -import { makeStyles, Box, Typography } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import LanguageIcon from '@material-ui/icons/Language'; import React from 'react'; import { Link } from '@backstage/core-components'; diff --git a/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx b/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx index 7861b177ce..9e046abf76 100644 --- a/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ -import { ImageList, ImageListItem } from '@material-ui/core'; +import ImageList from '@material-ui/core/ImageList'; +import ImageListItem from '@material-ui/core/ImageListItem'; import React from 'react'; import { IconLink } from './IconLink'; import { ColumnBreakpoints } from './types'; diff --git a/plugins/catalog/src/components/EntityLinksCard/useDynamicColumns.tsx b/plugins/catalog/src/components/EntityLinksCard/useDynamicColumns.tsx index cb6868632c..75da59b4ec 100644 --- a/plugins/catalog/src/components/EntityLinksCard/useDynamicColumns.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/useDynamicColumns.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ -import { Theme, useMediaQuery } from '@material-ui/core'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; +import { Theme } from '@material-ui/core/styles'; import { Breakpoint, ColumnBreakpoints } from './types'; const colDefaults: ColumnBreakpoints = { diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx index d8d9fe0855..479edf3984 100644 --- a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx +++ b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; -import { Grid, Button, Typography } from '@material-ui/core'; +import Grid from '@material-ui/core/Grid'; +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import { Illo } from './Illo'; diff --git a/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx b/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx index 03b23ec6b0..295db57f03 100644 --- a/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx +++ b/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import IlloSvgUrl from './illo.svg'; const useStyles = makeStyles(theme => ({ diff --git a/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.tsx b/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.tsx index fc1391152a..603f2040d9 100644 --- a/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.tsx +++ b/plugins/catalog/src/components/EntityOrphanWarning/DeleteEntityDialog.tsx @@ -16,7 +16,10 @@ import { Entity } from '@backstage/catalog-model'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; -import { Button, Dialog, DialogActions, DialogTitle } 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 DialogTitle from '@material-ui/core/DialogTitle'; import React, { useState } from 'react'; import { alertApiRef, useApi } from '@backstage/core-plugin-api'; import { assertError } from '@backstage/errors'; diff --git a/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.tsx b/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.tsx index 253cfb23fe..8a17559681 100644 --- a/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.tsx +++ b/plugins/catalog/src/components/EntityOrphanWarning/EntityOrphanWarning.tsx @@ -16,7 +16,7 @@ import { Entity } from '@backstage/catalog-model'; import { useEntity } from '@backstage/plugin-catalog-react'; -import { Alert } from '@material-ui/lab'; +import Alert from '@material-ui/lab/Alert'; import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { DeleteEntityDialog } from './DeleteEntityDialog'; diff --git a/plugins/catalog/src/components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.tsx b/plugins/catalog/src/components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.tsx index ef91e7b26e..57736dba40 100644 --- a/plugins/catalog/src/components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.tsx +++ b/plugins/catalog/src/components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.tsx @@ -21,7 +21,7 @@ import { EntityRefLink, useEntity, } from '@backstage/plugin-catalog-react'; -import { Box } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; import React from 'react'; import { ResponseErrorPanel } from '@backstage/core-components'; import { diff --git a/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.tsx b/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.tsx index 16384ac1d2..f52fdae39d 100644 --- a/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.tsx +++ b/plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.tsx @@ -20,10 +20,10 @@ import { catalogApiRef, useEntity, } from '@backstage/plugin-catalog-react'; -import { Alert } from '@material-ui/lab'; +import Alert from '@material-ui/lab/Alert'; import React from 'react'; import useAsync from 'react-use/lib/useAsync'; -import { Box } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; import { ResponseErrorPanel } from '@backstage/core-components'; import { useApi, ApiHolder } from '@backstage/core-plugin-api'; diff --git a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx index 7a533dcf5b..eb37973c27 100644 --- a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx +++ b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx @@ -15,7 +15,7 @@ */ import { Entity } from '@backstage/catalog-model'; -import { Typography } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; import { EntityTable, useEntity, diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx index f3cc265653..f141e3b06b 100644 --- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx +++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx @@ -29,7 +29,9 @@ import { getEntityRelations, useEntity, } from '@backstage/plugin-catalog-react'; -import { Box, makeStyles, Typography, useTheme } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; import React from 'react'; import useAsync from 'react-use/lib/useAsync'; From 1c0b179da12111a1dbd51dc2b9b5599ff7cfd396 Mon Sep 17 00:00:00 2001 From: Timothy Deakin Date: Thu, 14 Mar 2024 17:26:15 +0000 Subject: [PATCH 3/4] chore: add changeset Signed-off-by: Timothy Deakin --- .changeset/perfect-buses-burn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/perfect-buses-burn.md diff --git a/.changeset/perfect-buses-burn.md b/.changeset/perfect-buses-burn.md new file mode 100644 index 0000000000..9671b13c97 --- /dev/null +++ b/.changeset/perfect-buses-burn.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Added the `no-top-level-material-ui-4-imports` ESLint rule to aid with the migration to Material UI v5 From 9e7cbeb1098ee66e566eeba4735e6c4ab9c1c9b7 Mon Sep 17 00:00:00 2001 From: Timothy Deakin Date: Thu, 14 Mar 2024 17:42:41 +0000 Subject: [PATCH 4/4] chore: update api report Signed-off-by: Timothy Deakin --- plugins/catalog/api-report.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 6da30f6f84..8766b983ca 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -36,7 +36,7 @@ import { StyleRules } from '@material-ui/core/styles/withStyles'; import { TableColumn } from '@backstage/core-components'; import { TableOptions } from '@backstage/core-components'; import { TableProps } from '@backstage/core-components'; -import { TabProps } from '@material-ui/core'; +import { TabProps } from '@material-ui/core/Tab'; import { UserListFilterKind } from '@backstage/plugin-catalog-react'; // @public