From 053d43f6c86a7de7cc61e35e8988dfcfdcb7e390 Mon Sep 17 00:00:00 2001 From: Aditya Kumar Date: Thu, 14 Mar 2024 14:33:11 +0530 Subject: [PATCH 1/2] Added Material UI 4 import rule to plugins/explore Signed-off-by: Aditya Kumar --- .changeset/fluffy-rocks-confess.md | 5 +++++ plugins/explore/.eslintrc.js | 7 ++++++- .../CatalogKindExploreContent.tsx | 2 +- .../src/components/DomainCard/DomainCard.tsx | 14 ++++++-------- .../DomainExplorerContent.tsx | 2 +- .../src/components/EntityCard/EntityCard.tsx | 14 ++++++-------- .../ExploreLayout/ExploreLayout.tsx | 2 +- .../GroupsExplorerContent/GroupsDiagram.tsx | 3 ++- .../src/components/ToolCard/ToolCard.tsx | 19 ++++++++----------- .../ToolSearchResultListItem.tsx | 12 +++++------- 10 files changed, 41 insertions(+), 39 deletions(-) create mode 100644 .changeset/fluffy-rocks-confess.md diff --git a/.changeset/fluffy-rocks-confess.md b/.changeset/fluffy-rocks-confess.md new file mode 100644 index 0000000000..892ec39ad7 --- /dev/null +++ b/.changeset/fluffy-rocks-confess.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-explore': patch +--- + +Added an optional ESLint rule - no-top-level-material-ui-4-imports -in explore plugin which has an auto fix function to migrate the imports and used it to migrate the Material UI imports for plugins/explore. diff --git a/plugins/explore/.eslintrc.js b/plugins/explore/.eslintrc.js index e2a53a6ad2..a70295ae42 100644 --- a/plugins/explore/.eslintrc.js +++ b/plugins/explore/.eslintrc.js @@ -1 +1,6 @@ -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname); +module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, { + rules: { + '@backstage/no-top-level-material-ui-4-imports': 'error', + }, + }); + \ No newline at end of file diff --git a/plugins/explore/src/components/CatalogKindExploreContent/CatalogKindExploreContent.tsx b/plugins/explore/src/components/CatalogKindExploreContent/CatalogKindExploreContent.tsx index 69607b58da..07a2a0eae1 100644 --- a/plugins/explore/src/components/CatalogKindExploreContent/CatalogKindExploreContent.tsx +++ b/plugins/explore/src/components/CatalogKindExploreContent/CatalogKindExploreContent.tsx @@ -16,7 +16,7 @@ import { Entity } from '@backstage/catalog-model'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; -import { Button } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import React from 'react'; import useAsync from 'react-use/lib/useAsync'; import { EntityCard } from '../EntityCard'; diff --git a/plugins/explore/src/components/DomainCard/DomainCard.tsx b/plugins/explore/src/components/DomainCard/DomainCard.tsx index c70df46b1a..1f6b234e2a 100644 --- a/plugins/explore/src/components/DomainCard/DomainCard.tsx +++ b/plugins/explore/src/components/DomainCard/DomainCard.tsx @@ -21,14 +21,12 @@ import { getEntityRelations, entityRouteRef, } from '@backstage/plugin-catalog-react'; -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 from 'react'; import { LinkButton, ItemCardHeader } from '@backstage/core-components'; diff --git a/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.tsx b/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.tsx index 15c0d650cc..62b44d0076 100644 --- a/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.tsx +++ b/plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.tsx @@ -16,7 +16,7 @@ import { DomainEntity } from '@backstage/catalog-model'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; -import { Button } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import React from 'react'; import useAsync from 'react-use/lib/useAsync'; import { diff --git a/plugins/explore/src/components/EntityCard/EntityCard.tsx b/plugins/explore/src/components/EntityCard/EntityCard.tsx index 9589d4721e..a6cb1e14ca 100644 --- a/plugins/explore/src/components/EntityCard/EntityCard.tsx +++ b/plugins/explore/src/components/EntityCard/EntityCard.tsx @@ -21,14 +21,12 @@ import { getEntityRelations, entityRouteRef, } from '@backstage/plugin-catalog-react'; -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 from 'react'; import { LinkButton, ItemCardHeader } from '@backstage/core-components'; diff --git a/plugins/explore/src/components/ExploreLayout/ExploreLayout.tsx b/plugins/explore/src/components/ExploreLayout/ExploreLayout.tsx index 3ddf0b17f8..6ad36675cf 100644 --- a/plugins/explore/src/components/ExploreLayout/ExploreLayout.tsx +++ b/plugins/explore/src/components/ExploreLayout/ExploreLayout.tsx @@ -19,7 +19,7 @@ import { attachComponentData, useElementFilter, } from '@backstage/core-plugin-api'; -import { TabProps } from '@material-ui/core'; +import { TabProps } from '@material-ui/core/Tab'; import { default as React } from 'react'; // TODO: This layout could be a shared based component if it was possible to create custom TabbedLayouts diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index dd0705908a..fe7367cfb9 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -33,7 +33,8 @@ import { getEntityRelations, EntityDisplayName, } from '@backstage/plugin-catalog-react'; -import { makeStyles, Typography, useTheme } from '@material-ui/core'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; import classNames from 'classnames'; import React from 'react'; diff --git a/plugins/explore/src/components/ToolCard/ToolCard.tsx b/plugins/explore/src/components/ToolCard/ToolCard.tsx index 47c2cfb41d..55631bbd91 100644 --- a/plugins/explore/src/components/ToolCard/ToolCard.tsx +++ b/plugins/explore/src/components/ToolCard/ToolCard.tsx @@ -15,17 +15,14 @@ */ import { ExploreTool } from '@backstage/plugin-explore-react'; -import { - Box, - Card, - CardActions, - CardContent, - CardMedia, - Chip, - makeStyles, - Theme, - Typography, -} 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 Typography from '@material-ui/core/Typography'; +import { makeStyles, Theme } from '@material-ui/core/styles'; import { LinkButton } from '@backstage/core-components'; import classNames from 'classnames'; import React from 'react'; diff --git a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx index cb99f1c125..d4a1ab627e 100644 --- a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx +++ b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx @@ -15,13 +15,11 @@ */ import React, { ReactNode } from 'react'; -import { - Box, - Chip, - ListItemIcon, - ListItemText, - 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 { makeStyles } from '@material-ui/core/styles'; import { Link } from '@backstage/core-components'; import { IndexableDocument, From 94fa1a0f126333fa9b8cc86228580866fbf0a060 Mon Sep 17 00:00:00 2001 From: Aditya Kumar Date: Thu, 14 Mar 2024 14:52:11 +0530 Subject: [PATCH 2/2] Added Material UI 4 import rule to plugins/explore Signed-off-by: Aditya Kumar --- plugins/explore/api-report.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/explore/api-report.md b/plugins/explore/api-report.md index 532b853671..b6bc769800 100644 --- a/plugins/explore/api-report.md +++ b/plugins/explore/api-report.md @@ -23,7 +23,7 @@ import { ReactNode } from 'react'; import { ResultHighlight } from '@backstage/plugin-search-common'; import { RouteRef } from '@backstage/core-plugin-api'; import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react'; -import { TabProps } from '@material-ui/core'; +import { TabProps } from '@material-ui/core/Tab'; // @public @deprecated (undocumented) export const catalogEntityRouteRef: ExternalRouteRef<