From b07ff647d6b2b972e4dbbb0f3cc3f103849faebd Mon Sep 17 00:00:00 2001
From: Andre Wanlin <awanlin@spotify.com>
Date: Sat, 13 Jan 2024 15:05:12 -0600
Subject: [PATCH] Clean-up based on feedback

Signed-off-by: Andre Wanlin <awanlin@spotify.com>
---
 .../no-top-level-material-ui-4-imports.md     |  4 +--
 .../no-top-level-material-ui-4-imports.js     | 27 +++++--------------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md b/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md
index a00eb73ffd..a105014abc 100644
--- a/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md
+++ b/packages/eslint-plugin/docs/rules/no-top-level-material-ui-4-imports.md
@@ -7,12 +7,12 @@ Forbid top level import from Material UI v4 packages.
 Add the rules as follows, it has no options:
 
 ```js
-"@backstage/no-top-level-material-ui-4-imports": ["error"]
+'@backstage/no-top-level-material-ui-4-imports': 'error'
 ```
 
 ## Rule Details
 
-TBD - Not sure what should go here
+Automatically fixes imports from named to default imports. This will help you comply with [Material UI recommendations](https://mui.com/material-ui/guides/minimizing-bundle-size/) and make migrating to Material UI v5 easier.
 
 ### Fail
 
diff --git a/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js b/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js
index dc2a555e24..6a726545fc 100644
--- a/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js
+++ b/packages/eslint-plugin/rules/no-top-level-material-ui-4-imports.js
@@ -57,19 +57,8 @@ module.exports = {
       // Return if import is from '@material-ui/core/styles', as it's valid already
       if (node.source.value === '@material-ui/core/styles') return;
       // Return if proper import eg. `import Box from '@material-ui/core/Box'`
-      if (
-        node.specifiers.length >= 1 &&
-        node.source.value?.split('/').length === 3
-      )
-        return;
-
-      // Return if third level or deeper imports
-      if (
-        node.specifiers.length >= 1 &&
-        node.source.value.split('/').length > 3
-      ) {
-        return;
-      }
+      // Or if third level or deeper imports
+      if (node.source.value?.split('/').length >= 3) return;
 
       // Report all other imports
       context.report({
@@ -84,17 +73,13 @@ module.exports = {
           );
 
           const specifiersMap = specifiers.map(s => {
-            const propsTest = /^([A-Z]\w+)Props$/.test(s.local.name);
             const propsMatch = /^([A-Z]\w+)Props$/.exec(s.local.name);
-            let propValue;
-            if (propsMatch) {
-              propValue = propsMatch[1];
-            }
+
             return {
-              emitComponent: !propsTest,
-              emitProp: propsTest,
+              emitComponent: !(propsMatch !== null),
+              emitProp: propsMatch !== null,
               value: s.local.name,
-              propValue,
+              propValue: propsMatch ? propsMatch[1] : undefined,
             };
           });