Use automated page context for GraphQL explorer (#49628)

src/graphql/pages/breaking-changes.tsx

@@ -1,5 +1,4 @@
 import { GetServerSideProps } from 'next'
-import React from 'react'
 import GithubSlugger from 'github-slugger'
 
 import { MainContextT, MainContext, getMainContext } from 'src/frame/components/context/MainContext'

src/graphql/pages/changelog.tsx

@@ -1,5 +1,4 @@
 import { GetServerSideProps } from 'next'
-import React from 'react'
 
 import { MainContextT, MainContext, getMainContext } from 'src/frame/components/context/MainContext'
 import { AutomatedPage } from 'src/automated-pipelines/components/AutomatedPage'

src/graphql/pages/explorer.tsx

@@ -1,19 +1,24 @@
 import { GetServerSideProps } from 'next'
 
 import { MainContextT, MainContext, getMainContext } from 'src/frame/components/context/MainContext'
-import { DefaultLayout } from 'src/frame/components/DefaultLayout'
+import { AutomatedPage } from 'src/automated-pipelines/components/AutomatedPage'
+import {
+  AutomatedPageContext,
+  AutomatedPageContextT,
+  getAutomatedPageContextFromRequest,
+} from 'src/automated-pipelines/components/AutomatedPageContext'
 import { useEffect, useRef } from 'react'
 
 type Props = {
   mainContext: MainContextT
   graphqlExplorerUrl: string
+  automatedPageContext: AutomatedPageContextT
 }
-export default function GQLExplorer({ mainContext, graphqlExplorerUrl }: Props) {
-  // Use TypeScript's "not null assertion" because `context.page` should
-  // will present in main context if it's gotten to the stage of React
-  // rendering.
-  const page = mainContext.page!
-
+export default function GQLExplorer({
+  mainContext,
+  graphqlExplorerUrl,
+  automatedPageContext,
+}: Props) {
   const graphiqlRef = useRef<HTMLIFrameElement>(null)
 
   useEffect(() => {
@@ -24,25 +29,23 @@ export default function GQLExplorer({ mainContext, graphqlExplorerUrl }: Props)
 
   return (
     <MainContext.Provider value={mainContext}>
-      <DefaultLayout>
-        <div className="container-xl px-3 px-md-6 my-4 my-lg-4">
-          <h1 id="title-h1">{page.title}</h1>
-        </div>
-
-        <div>
-          {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
-          <iframe
-            ref={graphiqlRef}
-            style={{ height: 715 }}
-            className="border width-full"
-            scrolling="no"
-            src={graphqlExplorerUrl}
-            title="GitHub GraphQL API"
-          >
-            You must have iframes enabled to use this feature.
-          </iframe>
-        </div>
-      </DefaultLayout>
+      <AutomatedPageContext.Provider value={automatedPageContext}>
+        <AutomatedPage>
+          <div>
+            {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
+            <iframe
+              ref={graphiqlRef}
+              style={{ height: 715 }}
+              className="border width-full"
+              scrolling="no"
+              src={graphqlExplorerUrl}
+              title="GitHub GraphQL API"
+            >
+              You must have iframes enabled to use this feature.
+            </iframe>
+          </div>
+        </AutomatedPage>
+      </AutomatedPageContext.Provider>
     </MainContext.Provider>
   )
 }
@@ -54,11 +57,13 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
     process.env.NODE_ENV === 'production'
       ? 'https://graphql.github.com/explorer'
       : 'http://localhost:3000'
+  const automatedPageContext = getAutomatedPageContextFromRequest(req)
 
   return {
     props: {
       mainContext: await getMainContext(req, res),
       graphqlExplorerUrl,
+      automatedPageContext,
     },
   }
 }

src/graphql/pages/reference.tsx

@@ -1,5 +1,4 @@
 import { GetServerSideProps } from 'next'
-import React from 'react'
 
 import { GraphqlPage } from 'src/graphql/components/GraphqlPage'
 import {

src/graphql/pages/schema-previews.tsx

@@ -1,5 +1,4 @@
 import { GetServerSideProps } from 'next'
-import React from 'react'
 
 import {
   MainContextT,