feat: add eslint rule for top level imports

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

.changeset/wise-cougars-knock.md

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

plugins/config-schema/.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/config-schema/src/components/ConfigSchemaPage/ConfigSchemaPage.tsx

@@ -17,7 +17,7 @@ import React, { useMemo } from 'react';
 import useObservable from 'react-use/esm/useObservable';
 import { configSchemaApiRef } from '../../api';
 import { SchemaViewer } from '../SchemaViewer';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 
 import { Header, Page, Content, Progress } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';

plugins/config-schema/src/components/SchemaBrowser/SchemaBrowser.tsx

@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 
-import { createStyles, alpha, withStyles } from '@material-ui/core';
+import alpha from '@material-ui/core/alpha';
+import { createStyles, withStyles } from '@material-ui/core/styles';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { TreeItem, TreeItemProps, TreeView } from '@material-ui/lab';
+import TreeItem, { TreeItemProps } from '@material-ui/core/TreeItem';
+import TreeView from '@material-ui/lab/TreeView';
 import { Schema } from 'jsonschema';
 import React, { ReactNode, useMemo, useRef } from 'react';
 import { useScrollTargets } from '../ScrollTargetsContext';

plugins/config-schema/src/components/SchemaView/ArrayView.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import { Schema } from 'jsonschema';
 import React from 'react';
 import { ChildView } from './ChildView';

plugins/config-schema/src/components/SchemaView/ChildView.tsx

@@ -15,7 +15,11 @@
  */
 
 import { JsonValue } from '@backstage/types';
-import { Box, Chip, Divider, makeStyles, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Chip from '@material-ui/core/Chip';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import { Schema } from 'jsonschema';
 import React, { useEffect, useRef } from 'react';
 import { useScrollTargets } from '../ScrollTargetsContext/ScrollTargetsContext';

plugins/config-schema/src/components/SchemaView/MatchView.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import { Schema } from 'jsonschema';
 import React from 'react';
 import { ChildView } from './ChildView';

plugins/config-schema/src/components/SchemaView/MetadataView.tsx

@@ -15,14 +15,12 @@
  */
 
 import { JsonValue } from '@backstage/types';
-import {
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
-  Typography,
-} from '@material-ui/core';
+import Paper from '@material-ui/core/Paper';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import Typography from '@material-ui/core/Typography';
 import { Schema } from 'jsonschema';
 import React from 'react';
 

plugins/config-schema/src/components/SchemaView/ObjectView.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { ChildView } from './ChildView';
 import { MetadataView } from './MetadataView';

plugins/config-schema/src/components/SchemaView/ScalarView.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Box, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { MetadataView } from './MetadataView';
 import { SchemaViewProps } from './types';

plugins/config-schema/src/components/SchemaViewer/SchemaViewer.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Box, Paper } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Paper from '@material-ui/core/Paper';
 import { Schema } from 'jsonschema';
 import React from 'react';
 import { SchemaView } from '../SchemaView';