feat: add eslint rule for top level imports

Signed-off-by: Timothy Deakin <cftad@protonmail.com>

.changeset/weak-files-admire.md

@@ -0,0 +1,5 @@
+---
+'@internal/plugin-todo-list': patch
+---
+
+Added the `no-top-level-material-ui-4-imports` ESLint rule to aid with the migration to Material UI v5

plugins/example-todo-list/.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',
+  },
+});

plugins/example-todo-list/src/components/TodoList/TodoList.tsx

@@ -22,7 +22,7 @@ import {
   fetchApiRef,
   useApi,
 } from '@backstage/core-plugin-api';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 
 export type Todo = {
   title: string;

plugins/example-todo-list/src/components/TodoListPage/TodoListPage.tsx

@@ -14,17 +14,15 @@
  * limitations under the License.
  */
 import React, { useReducer, useRef, useState } from 'react';
-import {
-  Typography,
-  Grid,
-  TextField,
-  Button,
-  Dialog,
-  Box,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-} from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import Box from '@material-ui/core/Box';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
 import {
   Header,
   Page,