Repo sync

content/graphql/guides/using-the-explorer.md

@@ -31,40 +31,9 @@ topics:
 
 {% endif %}
 
-## Using the Altair GraphQL Client IDE
-
-There are many open source GraphQL client IDEs. For example, you can use Altair to access {% data variables.product.company_short %}'s GraphQL API. To access the GraphQL API with Altair, download and install it from [altair-graphql/altair](https://github.com/altair-graphql/altair). Then, follow the configuration steps below.
-
-### Configuring Altair
-
-1. Get an [access token](/graphql/guides/forming-calls-with-graphql#authenticating-with-graphql).
-1. Launch Altair.
-1. In the left sidebar, below the Altair logo, click **Set Headers**. A new window will open.
-1. In the "Header key" field, enter `Authorization`.
-1. In the "Header value" field, enter `Bearer TOKEN`, replacing `TOKEN` with your token from the first step.
-1. Click **Save** in the bottom right corner of the window to save your authorization header.
-1. In the "GraphQL Endpoint" field, enter `{% data variables.product.graphql_url_pre %}`.
-1. To load the {% data variables.product.company_short %} GraphQL schema, download the [public schema](/graphql/overview/public-schema).
-1. In Altair, click on **Docs** on the top right, then the three dots and **Load Schema...**
-1. Select the file public schema that you downloaded in an earlier step.
-
-{% note %}
+## Query autocompletion
 
-**Note**: For more information about why `POST` is the method, see "[AUTOTITLE](/graphql/guides/forming-calls-with-graphql#communicating-with-graphql)."
-
-{% endnote %}
-
-You can test your access by querying yourself:
-
-```graphql
-query {
-  viewer {
-    login
-  }
-}
-```
-
-If everything worked correctly, this will display your login. You're all set to start making queries.
+You can use query autocompletion to help you build queries. In the main pane, within the curly brackets of your query, use <kbd>control</kbd>+<kbd>space</kbd> or <kbd>shift</kbd>+<kbd>space</kbd> to display the autocomplete menu.
 
 ## Accessing the sidebar docs
 
@@ -106,6 +75,41 @@ If you want to run the call in the Explorer, enter the `query` segment in the ma
 }
 ```
 
+## Using the Altair GraphQL Client IDE
+
+There are many open source GraphQL client IDEs. For example, you can use Altair to access {% data variables.product.company_short %}'s GraphQL API. To access the GraphQL API with Altair, download and install it from [altair-graphql/altair](https://github.com/altair-graphql/altair). Then, follow the configuration steps below.
+
+### Configuring Altair
+
+1. Get an [access token](/graphql/guides/forming-calls-with-graphql#authenticating-with-graphql).
+1. Launch Altair.
+1. In the left sidebar, below the Altair logo, click **Set Headers**. A new window will open.
+1. In the "Header key" field, enter `Authorization`.
+1. In the "Header value" field, enter `Bearer TOKEN`, replacing `TOKEN` with your token from the first step.
+1. Click **Save** in the bottom right corner of the window to save your authorization header.
+1. In the "GraphQL Endpoint" field, enter `{% data variables.product.graphql_url_pre %}`.
+1. To load the {% data variables.product.company_short %} GraphQL schema, download the [public schema](/graphql/overview/public-schema).
+1. In Altair, click on **Docs** on the top right, then the three dots and **Load Schema...**
+1. Select the file public schema that you downloaded in an earlier step.
+
+{% note %}
+
+**Note**: For more information about why `POST` is the method, see "[AUTOTITLE](/graphql/guides/forming-calls-with-graphql#communicating-with-graphql)."
+
+{% endnote %}
+
+You can test your access by querying yourself:
+
+```graphql
+query {
+  viewer {
+    login
+  }
+}
+```
+
+If everything worked correctly, this will display your login. You're all set to start making queries.
+
 ## Requesting support
 
 {% data reusables.support.help_resources %}

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,