Restore GraphiQL to seperate concerns in PRs

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

plugins/graphiql/package.json

@@ -35,10 +35,9 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/theme": "workspace:^",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/lab": "5.0.0-alpha.114",
-    "@mui/material": "^5.12.2",
-    "@mui/styles": "^5.11.2",
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.61",
     "graphiql": "^1.5.12",
     "graphql": "^16.0.0",
     "graphql-ws": "^5.4.1",

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

@@ -15,18 +15,18 @@
  */
 
 import React, { useState, Suspense } from 'react';
-import { Tabs, Tab, Typography, Divider } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
+import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core';
 import 'graphiql/graphiql.css';
 import { StorageBucket } from '../../lib/storage';
 import { GraphQLEndpoint } from '../../lib/api';
+import { BackstageTheme } from '@backstage/theme';
 import { Progress } from '@backstage/core-components';
 
 const GraphiQL = React.lazy(() =>
   import('graphiql').then(m => ({ default: m.GraphiQL })),
 );
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     height: '100%',
     display: 'flex',
@@ -69,11 +69,10 @@ export const GraphiQLBrowser = (props: GraphiQLBrowserProps) => {
           classes={{ root: classes.tabs }}
           value={tabIndex}
           onChange={(_, value) => setTabIndex(value)}
-          indicatorColor="secondary"
-          textColor="inherit"
+          indicatorColor="primary"
         >
           {endpoints.map(({ title }, index) => (
-            <Tab key={index} label={title} sx={{ color: 'inherit' }} />
+            <Tab key={index} label={title} value={index} />
           ))}
         </Tabs>
         <Divider />

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

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