From e377d74419e7d2877ffc2b7943e068024999520b Mon Sep 17 00:00:00 2001
From: Mike Surowiec <mikesurowiec@users.noreply.github.com>
Date: Mon, 21 Jun 2021 14:55:49 -0700
Subject: [PATCH] React: import necessary javascripts directly (#20001)

* import javascript files directly

* move globally required js to _app

* fix: js initialization

* set next env for tests
---
 components/DefaultLayout.tsx                  |  4 +-
 components/PrintAction.tsx                    | 16 +++++++
 components/article/ArticleTitle.tsx           | 19 +++-----
 components/context/MainContext.tsx            |  2 -
 .../release-notes/GHESReleaseNotePatch.tsx    |  5 +-
 components/sublanding/LearningTrack.tsx       | 48 ++++++++++---------
 javascripts/copy-code.ts                      |  2 +-
 javascripts/experiment.ts                     |  1 -
 pages/[versionId]/[productId]/index.tsx       | 19 ++++++++
 .../[versionId]/graphql/overview/explorer.tsx | 16 ++++---
 pages/_app.tsx                                | 12 +++++
 11 files changed, 95 insertions(+), 49 deletions(-)
 create mode 100644 components/PrintAction.tsx

diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
index 3440cf2470e0..a88f2bd228ec 100644
--- a/components/DefaultLayout.tsx
+++ b/components/DefaultLayout.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from './hooks/useTranslation'
 
 type Props = { children?: React.ReactNode }
 export const DefaultLayout = (props: Props) => {
-  const { builtAssets, page, error, isHomepageVersion } = useMainContext()
+  const { page, error, isHomepageVersion } = useMainContext()
   const { t } = useTranslation('errors')
   return (
     <div className="d-lg-flex">
@@ -22,8 +22,6 @@ export const DefaultLayout = (props: Props) => {
           <title>{page.fullTitle}</title>
         ) : null}
 
-        <script src={builtAssets.main.js} />
-
         {/* For Google and Bots */}
         {page.introPlainText && <meta name="description" content={page.introPlainText} />}
 
diff --git a/components/PrintAction.tsx b/components/PrintAction.tsx
new file mode 100644
index 000000000000..fd324b0f8c92
--- /dev/null
+++ b/components/PrintAction.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+type Props = {
+  children: React.ReactElement
+}
+export function PrintAction({ children }: Props) {
+  const onClick = () => {
+    try {
+      document.execCommand('print', false)
+    } catch (e) {
+      window.print()
+    }
+  }
+
+  return React.cloneElement(React.Children.only(children), { onClick })
+}
diff --git a/components/article/ArticleTitle.tsx b/components/article/ArticleTitle.tsx
index 293e89934ae4..813616657ad0 100644
--- a/components/article/ArticleTitle.tsx
+++ b/components/article/ArticleTitle.tsx
@@ -1,6 +1,8 @@
 import { Tooltip } from '@primer/components'
 import { PrinterIcon } from './PrinterIcon'
 
+import { PrintAction } from 'components/PrintAction'
+
 type Props = {
   children: React.ReactNode
 }
@@ -10,18 +12,11 @@ export const ArticleTitle = ({ children }: Props) => {
       <h1 className="my-4 border-bottom-0">{children}</h1>
       <div className="d-none d-lg-block ml-2">
         <Tooltip aria-label="Print this article" noDelay direction="n">
-          <button
-            className="btn-link Link--muted"
-            onClick={() => {
-              try {
-                document.execCommand('print', false)
-              } catch (e) {
-                window.print()
-              }
-            }}
-          >
-            <PrinterIcon />
-          </button>
+          <PrintAction>
+            <button className="btn-link Link--muted">
+              <PrinterIcon />
+            </button>
+          </PrintAction>
         </Tooltip>
       </div>
     </div>
diff --git a/components/context/MainContext.tsx b/components/context/MainContext.tsx
index e20ea15e2455..0a624b0ccf40 100644
--- a/components/context/MainContext.tsx
+++ b/components/context/MainContext.tsx
@@ -68,7 +68,6 @@ export type MainContextT = {
     maptopic?: BreadcrumbT
     article?: BreadcrumbT
   }
-  builtAssets: { main: { js: string } }
   activeProducts: Array<ProductT>
   currentProduct?: ProductT
   currentLayoutName: string
@@ -112,7 +111,6 @@ export type MainContextT = {
 
 export const getMainContextFromRequest = (req: any): MainContextT => {
   return {
-    builtAssets: { main: { js: req.context.builtAssets.main.js } },
     breadcrumbs: req.context.breadcrumbs || {},
     activeProducts: req.context.activeProducts,
     currentProduct: req.context.productMap[req.context.currentProduct] || null,
diff --git a/components/release-notes/GHESReleaseNotePatch.tsx b/components/release-notes/GHESReleaseNotePatch.tsx
index 826b7129e89a..9b72d1de7724 100644
--- a/components/release-notes/GHESReleaseNotePatch.tsx
+++ b/components/release-notes/GHESReleaseNotePatch.tsx
@@ -6,6 +6,7 @@ import { PatchNotes } from './PatchNotes'
 import { Link } from 'components/Link'
 import { CurrentVersion, ReleaseNotePatch, GHESMessage } from './types'
 import { useOnScreen } from 'components/hooks/useOnScreen'
+import { PrintAction } from 'components/PrintAction'
 
 type Props = {
   patch: ReleaseNotePatch
@@ -65,7 +66,9 @@ export function GHESReleaseNotePatch({
             </Link>
           )}
 
-          <button className="js-print btn-link ml-3 text-small text-bold">Print</button>
+          <PrintAction>
+            <button className="btn-link ml-3 text-small text-bold">Print</button>
+          </PrintAction>
         </div>
 
         <p className="color-text-secondary mt-1">{dayjs(patch.date).format('MMMM, DD, YYYY')}</p>
diff --git a/components/sublanding/LearningTrack.tsx b/components/sublanding/LearningTrack.tsx
index 0b394fc6529b..68ac30f5d570 100644
--- a/components/sublanding/LearningTrack.tsx
+++ b/components/sublanding/LearningTrack.tsx
@@ -7,17 +7,17 @@ type Props = {
   track: FeaturedTrack
 }
 
-const MAX_VISIBLE_GUIDES = 4
+const DEFAULT_VISIBLE_GUIDES = 4
 export const LearningTrack = ({ track }: Props) => {
-  const [visibleGuides, setVisibleGuides] = useState(track?.guides?.slice(0, 4))
+  const [numVisible, setNumVisible] = useState(DEFAULT_VISIBLE_GUIDES)
   const showAll = () => {
-    setVisibleGuides(track?.guides)
+    setNumVisible(track?.guides?.length || 0)
   }
   const { t } = useTranslation('product_sublanding')
 
   return (
     <div className="my-3 px-4 col-12 col-md-6 learning-track">
-      <div className="Box js-show-more-container d-flex flex-column">
+      <div className="Box d-flex flex-column">
         <div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
           <div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
             <div className="my-xl-0 mr-xl-3">
@@ -38,10 +38,11 @@ export const LearningTrack = ({ track }: Props) => {
             </span>
           </a>
         </div>
-        {visibleGuides?.map((guide) => (
-          <div>
+
+        {track?.guides?.slice(0, numVisible).map((guide) => (
+          <div key={guide.href + track?.trackName}>
             <a
-              className="Box-row d-flex flex-items-center color-text-primary no-underline js-show-more-item"
+              className="Box-row d-flex flex-items-center color-text-primary no-underline"
               href={`${guide.href}?learn=${track?.trackName}`}
             >
               <div className="circle color-bg-tertiary d-inline-flex mr-4">
@@ -56,24 +57,25 @@ export const LearningTrack = ({ track }: Props) => {
                 {t('guide_types')[guide.page?.type || '']}
               </div>
             </a>
-            {track?.guides && track?.guides?.indexOf(guide) + 1 === MAX_VISIBLE_GUIDES ? (
-              <button
-                className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
-                onClick={showAll}
-              >
-                <div
-                  className="position-absolute left-0 right-0 py-5 fade-background-bottom"
-                  style={{ bottom: '50px' }}
-                ></div>
-                <span>
-                  Show {track?.guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}
-                </span>
-              </button>
-            ) : (
-              <div />
-            )}
           </div>
         ))}
+
+        {(track?.guides?.length || 0) > numVisible ? (
+          <button
+            className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12"
+            onClick={showAll}
+          >
+            <div
+              className="position-absolute left-0 right-0 py-5 fade-background-bottom"
+              style={{ bottom: '50px' }}
+            ></div>
+            <span>
+              Show {(track?.guides?.length || 0) - numVisible} {t(`more_guides`)}
+            </span>
+          </button>
+        ) : (
+          <div />
+        )}
       </div>
     </div>
   )
diff --git a/javascripts/copy-code.ts b/javascripts/copy-code.ts
index 709573bb1183..8b0f3793c13a 100644
--- a/javascripts/copy-code.ts
+++ b/javascripts/copy-code.ts
@@ -1,4 +1,4 @@
-export default () => {
+export default function copyCode() {
   const buttons = Array.from(document.querySelectorAll('button.js-btn-copy'))
 
   if (!buttons) return
diff --git a/javascripts/experiment.ts b/javascripts/experiment.ts
index dd0228e76e60..664c26e1c8cd 100644
--- a/javascripts/experiment.ts
+++ b/javascripts/experiment.ts
@@ -1,6 +1,5 @@
 import murmur from 'imurmurhash'
 import { getUserEventsId, sendEvent, EventType } from './events'
-// import h from './hyperscript'
 
 const TREATMENT = 'TREATMENT'
 const CONTROL = 'CONTROL'
diff --git a/pages/[versionId]/[productId]/index.tsx b/pages/[versionId]/[productId]/index.tsx
index 8a1a9e853ebb..fa9b35a69667 100644
--- a/pages/[versionId]/[productId]/index.tsx
+++ b/pages/[versionId]/[productId]/index.tsx
@@ -1,5 +1,14 @@
 import { GetServerSideProps } from 'next'
 
+// "legacy" javascript needed to maintain existing functionality
+// typically operating on elements **within** an article.
+import copyCode from 'javascripts/copy-code'
+import displayPlatformSpecificContent from 'javascripts/display-platform-specific-content'
+import displayToolSpecificContent from 'javascripts/display-tool-specific-content'
+import localization from 'javascripts/localization'
+import toggleImages from 'javascripts/toggle-images'
+import wrapCodeTerms from 'javascripts/wrap-code-terms'
+
 import {
   MainContextT,
   MainContext,
@@ -32,6 +41,7 @@ import {
   TocLandingContext,
   TocLandingContextT,
 } from 'components/context/TocLandingContext'
+import { useEffect } from 'react'
 
 type Props = {
   mainContext: MainContextT
@@ -49,6 +59,15 @@ const GlobalPage = ({
 }: Props) => {
   const { currentLayoutName, relativePath } = mainContext
 
+  useEffect(() => {
+    copyCode()
+    displayPlatformSpecificContent()
+    displayToolSpecificContent()
+    localization()
+    toggleImages()
+    wrapCodeTerms()
+  }, [])
+
   let content
   if (currentLayoutName === 'product-landing') {
     content = (
diff --git a/pages/[versionId]/graphql/overview/explorer.tsx b/pages/[versionId]/graphql/overview/explorer.tsx
index e25d23d2cc56..11fd22b0f25d 100644
--- a/pages/[versionId]/graphql/overview/explorer.tsx
+++ b/pages/[versionId]/graphql/overview/explorer.tsx
@@ -7,6 +7,7 @@ import {
 } from 'components/context/MainContext'
 import { Breadcrumbs } from 'components/Breadcrumbs'
 import { DefaultLayout } from 'components/DefaultLayout'
+import { useEffect, useRef } from 'react'
 
 type Props = {
   mainContext: MainContextT
@@ -14,6 +15,14 @@ type Props = {
 }
 export default function GQLExplorer({ mainContext, graphqlExplorerUrl }: Props) {
   const { page, airGap } = mainContext
+  const graphiqlRef = useRef<HTMLIFrameElement>(null)
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.location.search) {
+      graphiqlRef.current?.contentWindow?.postMessage(window.location.search, graphqlExplorerUrl)
+    }
+  }, [])
+
   return (
     <MainContext.Provider value={mainContext}>
       <DefaultLayout>
@@ -33,12 +42,7 @@ export default function GQLExplorer({ mainContext, graphqlExplorerUrl }: Props)
                   <p>GraphQL explorer is not available on this environment.</p>
                 ) : (
                   /* eslint-disable-next-line jsx-a11y/iframe-has-title */
-                  <iframe
-                    id="graphiql"
-                    className="graphql-explorer"
-                    scrolling="no"
-                    src={graphqlExplorerUrl}
-                  >
+                  <iframe ref={graphiqlRef} id="graphiql" scrolling="no" src={graphqlExplorerUrl}>
                     <p>You must have iframes enabled to use this feature.</p>
                   </iframe>
                 )}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f33c82aedbb0..b90f53e98d48 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,8 +7,20 @@ import { defaultThemeProps, getThemeProps } from 'components/lib/getThemeProps'
 
 import '../stylesheets/index.scss'
 
+import events from 'javascripts/events'
+import experiment from 'javascripts/experiment'
+import setNextEnv from 'javascripts/set-next-env'
+
+
 type MyAppProps = AppProps & { csrfToken: string; themeProps: typeof defaultThemeProps }
 const MyApp = ({ Component, pageProps, csrfToken, themeProps }: MyAppProps) => {
+
+  useEffect(() => {
+    events()
+    experiment()
+    setNextEnv()
+  }, [])
+
   return (
     <>
       <Head>