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

Replaced GraphiQL in Api Docs with DocExplorer

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>
   );