feat: add eslint rule for top level imports

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

.changeset/itchy-melons-battle.md

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

plugins/graphiql/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
   rules: {
     'jest/expect-expect': 0,
+    '@backstage/no-top-level-material-ui-4-imports': 'error',
   },
 });

plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx

@@ -15,7 +15,11 @@
  */
 
 import React, { useState, Suspense } from 'react';
-import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import { makeStyles } from '@material-ui/core/styles';
 import 'graphiql/graphiql.css';
 import { StorageBucket } from '../../lib/storage';
 import { GraphQLEndpoint } from '../../lib/api';

plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx

@@ -19,7 +19,7 @@ import useAsync from 'react-use/esm/useAsync';
 import 'graphiql/graphiql.css';
 import { graphQlBrowseApiRef } from '../../lib/api';
 import { GraphiQLBrowser } from '../GraphiQLBrowser';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import {
   Content,
   Header,