From 65ec043e4ee3ad75038e52f654e00278f605119c Mon Sep 17 00:00:00 2001
From: Juan Pablo Garcia Ripa <sarabadu@gmail.com>
Date: Sun, 28 Apr 2024 20:26:04 +0200
Subject: [PATCH] add some known issues and pickers fix

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>
---
 .changeset/modern-radios-guess.md             |  5 ++
 .../no-top-level-material-ui-4-imports.md     | 47 +++++++++++++++++++
 .../no-top-level-material-ui-4-imports.js     |  6 ++-
 ...no-top-level-material-ui-4-imports.test.ts |  5 ++
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/modern-radios-guess.md

diff --git a/.changeset/modern-radios-guess.md b/.changeset/modern-radios-guess.md
new file mode 100644
index 0000000000..8b68ebcdf4
--- /dev/null
+++ b/.changeset/modern-radios-guess.md
@@ -0,0 +1,5 @@
+---
+'@backstage/eslint-plugin': patch
+---
+
+add some `pickers` fixes
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 a105014abc..e2143354d2 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
@@ -41,3 +41,50 @@ import {
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 ```
+
+## --fix known issues
+
+This rule provides automatic fixes for the imports, but it has some known issues:
+
+### Non Props types import
+
+The fix will handle correctly 3 groups of imports:
+
+- Any import from related to styles (i.e `makeStyles`, `styled`, `WithStyles`) will be auto fixed to the `@material-ui/core/styles` import.
+- Any import with `Props` suffix will be auto fixed to actual component for example `DialogProps` will be imported from `@material-ui/core/Dialog`.
+- Any other import will be considered as a component import and will be auto fixed to the actual component import.
+
+This means that some types of imports without `Props` suffix will be wrongly auto fixed to the component import, for example this fix will be wrong:
+
+```diff
+-   import { Alert, Color } from '@material-ui/lab';
++   import Alert from '@material-ui/lab/Alert';
++   import Color  from '@material-ui/lab/Color'; // this import is wrong
+```
+
+The correct import should look like this:
+
+```diff
+-   import { Alert, Color } from '@material-ui/lab';
++   import Alert, {Color} from '@material-ui/lab/Alert';
+```
+
+Because `Color` is a type coming from the Alert component.
+
+### No default export available
+
+Some components do not have a default export, for example `@material-ui/pickers/DateTimePicker` does not have a default export, so the fix will not work for these cases.
+
+The fix will be wrong for this import:
+
+```diff
+- import { DateTimePicker } from '@material-ui/pickers';
++ import DateTimePicker from '@material-ui/pickers/DateTimePicker'; // this default import does not exist
+```
+
+The correct import should look like this:
+
+```diff
+- import { DateTimePicker } from '@material-ui/pickers';
++ import { DateTimePicker } from '@material-ui/pickers/DateTimePicker'; // this is the correct import
+```
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 adf04492b4..78fd3d63e9 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
@@ -155,7 +155,11 @@ module.exports = {
               const value = s.imported.name;
               const alias = s.local.name === value ? undefined : s.local.name;
 
-              const propsMatch = /^([A-Z]\w+)Props$/.exec(value);
+              const propsMatch =
+                /^([A-Z]\w+)Props$/.exec(value) ??
+                (node.source.value === '@material-ui/pickers'
+                  ? /^Keyboard([A-Z]\w+Picker)$/.exec(value)
+                  : null);
 
               const emitProp = propsMatch !== null;
               const emitComponent = !emitProp;
diff --git a/packages/eslint-plugin/src/no-top-level-material-ui-4-imports.test.ts b/packages/eslint-plugin/src/no-top-level-material-ui-4-imports.test.ts
index fdde615c3e..4b675bd038 100644
--- a/packages/eslint-plugin/src/no-top-level-material-ui-4-imports.test.ts
+++ b/packages/eslint-plugin/src/no-top-level-material-ui-4-imports.test.ts
@@ -161,5 +161,10 @@ import { styled, withStyles, alpha, duration } from '@material-ui/core/styles';`
 import TreeView from '@material-ui/lab/TreeView';
 import { AlertProps } from '@material-ui/lab/Alert';`,
     },
+    {
+      code: `import { KeyboardDatePicker  } from '@material-ui/pickers';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import { KeyboardDatePicker } from '@material-ui/pickers/DatePicker';`,
+    },
   ],
 });