From 349fa8edbe64f93ec2bf61e5e6c3b87f428f9c94 Mon Sep 17 00:00:00 2001
From: Mike Surowiec <mikesurowiec@users.noreply.github.com>
Date: Mon, 7 Jun 2021 12:26:16 -0700
Subject: [PATCH] feat: add react graphql explorer page (#19704)

---
 components/context/MainContext.tsx            |  2 +
 .../[versionId]/graphql/overview/explorer.tsx | 62 +++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 pages/[versionId]/graphql/overview/explorer.tsx

diff --git a/components/context/MainContext.tsx b/components/context/MainContext.tsx
index 050d1460d8..b6b5f251c0 100644
--- a/components/context/MainContext.tsx
+++ b/components/context/MainContext.tsx
@@ -88,6 +88,7 @@ export type MainContextT = {
     documentType: string
     languageVariants: Array<{ name: string; code: string; hreflang: string; href: string }>
     topics: Array<string>
+    title: string
     fullTitle?: string
     introPlainText?: string
     hidden: boolean
@@ -130,6 +131,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     page: {
       languageVariants: req.context.page.languageVariants,
       documentType: req.context.page.documentType,
+      title: req.context.page.title,
       fullTitle: req.context.page.fullTitle,
       topics: req.context.page.topics || [],
       introPlainText: req.context.page?.introPlainText,
diff --git a/pages/[versionId]/graphql/overview/explorer.tsx b/pages/[versionId]/graphql/overview/explorer.tsx
new file mode 100644
index 0000000000..1aea8d0185
--- /dev/null
+++ b/pages/[versionId]/graphql/overview/explorer.tsx
@@ -0,0 +1,62 @@
+import { GetServerSideProps } from 'next'
+
+import {
+  MainContextT,
+  MainContext,
+  getMainContextFromRequest,
+} from 'components/context/MainContext'
+import { Breadcrumbs } from 'components/Breadcrumbs'
+import { DefaultLayout } from 'components/DefaultLayout'
+
+type Props = {
+  mainContext: MainContextT
+  graphqlExplorerUrl: string
+}
+export default function GQLExplorer({ mainContext, graphqlExplorerUrl }: Props) {
+  const { page, airGap } = mainContext
+  return (
+    <MainContext.Provider value={mainContext}>
+      <DefaultLayout>
+        <main className="container-xl px-3 px-md-6 my-4 my-lg-4 d-xl-flex">
+          <article className="markdown-body width-full">
+            <div className="d-lg-flex flex-justify-between">
+              <div className="d-flex flex-items-center breadcrumbs-wrapper">
+                <Breadcrumbs />
+              </div>
+            </div>
+
+            <h1 className="border-bottom-0">{page.title}</h1>
+
+            <div className="mt-2">
+              <div>
+                {airGap ? (
+                  <p>GraphQL explorer is not available on this environment.</p>
+                ) : (
+                  <iframe
+                    id="graphiql"
+                    className="graphql-explorer"
+                    scrolling="no"
+                    src={graphqlExplorerUrl}
+                  >
+                    <p>You must have iframes enabled to use this feature.</p>
+                  </iframe>
+                )}
+              </div>
+            </div>
+          </article>
+        </main>
+      </DefaultLayout>
+    </MainContext.Provider>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
+  const req = context.req as any
+
+  return {
+    props: {
+      mainContext: getMainContextFromRequest(req),
+      graphqlExplorerUrl: req.context.graphql.explorerUrl,
+    },
+  }
+}