Merge pull request #20743 from thefrontside/tm/use-graphiql-docs-explorer

Replaced GraphiQL in Api Docs with DocExplorer

plugins/api-docs/package.json

@@ -40,11 +40,12 @@
     "@backstage/plugin-catalog": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
     "@backstage/theme": "workspace:^",
+    "@graphiql/react": "^0.19.4",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@types/react": "^16.13.1 || ^17.0.0",
-    "graphiql": "^1.8.8",
+    "graphiql": "3.0.6",
     "graphql": "^16.0.0",
     "graphql-ws": "^5.4.1",
     "isomorphic-form-data": "^2.0.0",

plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx

@@ -16,7 +16,12 @@
 
 import { BackstageTheme } from '@backstage/theme';
 import { makeStyles } from '@material-ui/core/styles';
-import GraphiQL from 'graphiql';
+import {
+  DocExplorer,
+  EditorContextProvider,
+  ExplorerContextProvider,
+  SchemaContextProvider,
+} from '@graphiql/react';
 import 'graphiql/graphiql.css';
 import { buildSchema } from 'graphql';
 import React from 'react';
@@ -36,6 +41,9 @@ const useStyles = makeStyles<BackstageTheme>(() => ({
         minHeight: '600px',
         flex: '1 1 auto',
       },
+      '.graphiql-sidebar': {
+        width: '100%',
+      },
     },
   },
 }));
@@ -51,12 +59,22 @@ export const GraphQlDefinition = ({ definition }: Props) => {
   return (
     <div className={classes.root}>
       <div className={classes.graphiQlWrapper}>
-        <GraphiQL
-          fetcher={() => Promise.resolve(null) as any}
-          schema={schema}
-          docExplorerOpen
-          defaultSecondaryEditorOpen={false}
-        />
+        <EditorContextProvider>
+          <SchemaContextProvider
+            schema={schema}
+            fetcher={() => Promise.resolve(null) as any}
+          >
+            <div className="graphiql-container">
+              <div className="graphiql-sidebar">
+                <div className="graphiql-sidebar-section">
+                  <ExplorerContextProvider>
+                    <DocExplorer />
+                  </ExplorerContextProvider>
+                </div>
+              </div>
+            </div>
+          </SchemaContextProvider>
+        </EditorContextProvider>
       </div>
     </div>
   );