From 995f66b79d84f16cba96f020d64c0ae32aa198c3 Mon Sep 17 00:00:00 2001
From: Juan Pablo Garcia Ripa <sarabadu@gmail.com>
Date: Mon, 8 Apr 2024 22:44:31 +0200
Subject: [PATCH] add mui lint rule

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>
---
 .changeset/swift-moles-shave.md                             | 5 +++++
 packages/dev-utils/.eslintrc.js                             | 6 +++++-
 packages/dev-utils/api-report.md                            | 2 +-
 .../src/components/EntityGridItem/EntityGridItem.tsx        | 3 ++-
 packages/dev-utils/src/devApp/SidebarThemeSwitcher.tsx      | 5 ++++-
 packages/dev-utils/src/devApp/render.tsx                    | 2 +-
 6 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/swift-moles-shave.md

diff --git a/.changeset/swift-moles-shave.md b/.changeset/swift-moles-shave.md
new file mode 100644
index 0000000000..9680bc9305
--- /dev/null
+++ b/.changeset/swift-moles-shave.md
@@ -0,0 +1,5 @@
+---
+'@backstage/dev-utils': patch
+---
+
+add @backstage/no-top-level-material-ui-4-imports lint rule
diff --git a/packages/dev-utils/.eslintrc.js b/packages/dev-utils/.eslintrc.js
index e2a53a6ad2..e487f765b2 100644
--- a/packages/dev-utils/.eslintrc.js
+++ b/packages/dev-utils/.eslintrc.js
@@ -1 +1,5 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
+  rules: {
+    '@backstage/no-top-level-material-ui-4-imports': 'error',
+  },
+});
diff --git a/packages/dev-utils/api-report.md b/packages/dev-utils/api-report.md
index 7ff48db175..3f21ba5502 100644
--- a/packages/dev-utils/api-report.md
+++ b/packages/dev-utils/api-report.md
@@ -10,7 +10,7 @@ import { AppTheme } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { ComponentType } from 'react';
 import { Entity } from '@backstage/catalog-model';
-import { GridProps } from '@material-ui/core';
+import { GridProps } from '@material-ui/core/Grid';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
diff --git a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx
index 55bac24a34..41ddc2d695 100644
--- a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx
+++ b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx
@@ -16,7 +16,8 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
-import { Grid, GridProps, Theme, makeStyles } from '@material-ui/core';
+import Grid, { GridProps } from '@material-ui/core/Grid';
+import { Theme, makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 const useStyles = makeStyles<Theme, { entity: Entity }>(theme => ({
diff --git a/packages/dev-utils/src/devApp/SidebarThemeSwitcher.tsx b/packages/dev-utils/src/devApp/SidebarThemeSwitcher.tsx
index 8226f01f17..5b4e2dc4d4 100644
--- a/packages/dev-utils/src/devApp/SidebarThemeSwitcher.tsx
+++ b/packages/dev-utils/src/devApp/SidebarThemeSwitcher.tsx
@@ -15,7 +15,10 @@
  */
 import { SidebarItem } from '@backstage/core-components';
 import { appThemeApiRef, useApi } from '@backstage/core-plugin-api';
-import { ListItemIcon, ListItemText, Menu, MenuItem } from '@material-ui/core';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
 import AutoIcon from '@material-ui/icons/BrightnessAuto';
 import React, { cloneElement, useCallback, useState } from 'react';
 import useObservable from 'react-use/esm/useObservable';
diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx
index ccb1cca2e8..79834cddc8 100644
--- a/packages/dev-utils/src/devApp/render.tsx
+++ b/packages/dev-utils/src/devApp/render.tsx
@@ -42,7 +42,7 @@ import {
   ScmIntegrationsApi,
   scmIntegrationsApiRef,
 } from '@backstage/integration-react';
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import BookmarkIcon from '@material-ui/icons/Bookmark';
 import React, { ComponentType, ReactNode, PropsWithChildren } from 'react';
 import { createRoutesFromChildren, Route } from 'react-router-dom';