Block a few more things in AIRGAP (github#17657)

* Block a few more things in AIRGAP

* Update middleware/context.js

Co-authored-by: Vanessa Yuen <[email protected]>

* Update product-landing.html

Co-authored-by: Vanessa Yuen <[email protected]>

Dockerfile

@@ -42,7 +42,7 @@ COPY --chown=node:node --from=install /usr/src/docs/dist /usr/src/docs/dist
 ENV NODE_ENV production
 
 # Use Lunr instead of Algolia
-ENV USE_LUNR true
+ENV AIRGAP true
 
 # Copy only what's needed to run the server
 COPY --chown=node:node assets ./assets

includes/explorer.html

@@ -1,7 +1,11 @@
 {% include breadcrumbs %}
 
 <div class="graphql-container">
-  <iframe id="graphiql" class="graphql-explorer" scrolling="no" src="{{ graphql.explorerUrl }}" allowfullscreen>
-    <p>You must have iframes enabled to use this feature.</p>
-  </iframe>
+  {% if process.env.AIRGAP %}
+    <p>GraphQL explorer is not available on this environment.</p>
+  {% else %}
+    <iframe id="graphiql" class="graphql-explorer" scrolling="no" src="{{ graphql.explorerUrl }}" allowfullscreen>
+      <p>You must have iframes enabled to use this feature.</p>
+    </iframe>
+  {% endif %}
 </div>

includes/scripts.html

@@ -1,2 +1,2 @@
-<script id="search-options" type="application/json">{{ searchOptions }}</script>
+<script id="expose" type="application/json">{{ expose }}</script>
 <script src="{{ builtAssets.main.js }}"></script>

javascripts/airgap-links.js

@@ -0,0 +1,14 @@
+export default function airgapLinks () {
+  // When in an airgapped environment,
+  // show a tooltip on external links
+  const { airgap } = JSON.parse(document.getElementById('expose').text)
+  if (!airgap) return
+
+  const externaLinks = Array.from(
+    document.querySelectorAll('a[href^="http"], a[href^="//"]')
+  )
+  externaLinks.forEach(link => {
+    link.classList.add('tooltipped')
+    link.setAttribute('aria-label', 'This link may not work in this environment.')
+  })
+}

javascripts/index.js

@@ -18,6 +18,7 @@ import allArticles from './all-articles'
 import devToc from './dev-toc'
 import releaseNotes from './release-notes'
 import showMore from './show-more'
+import airgapLinks from './airgap-links'
 
 document.addEventListener('DOMContentLoaded', async () => {
   displayPlatformSpecificContent()
@@ -34,6 +35,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   allArticles()
   devToc()
   showMore()
+  airgapLinks()
   releaseNotes()
   initializeEvents()
   experiment()

javascripts/search.js

@@ -26,7 +26,7 @@ export default function search () {
     languages,
     versions,
     nonEnterpriseDefaultVersion
-  } = JSON.parse(document.getElementById('search-options').text)
+  } = JSON.parse(document.getElementById('expose').text).searchOptions
   version = deriveVersionFromPath(versions, nonEnterpriseDefaultVersion)
   language = deriveLanguageCodeFromPath(languages)
 

layouts/graphql-explorer.html

@@ -20,9 +20,13 @@ <h1 class="border-bottom-0">{{ page.title }}</h1>
 
           <div class="mt-2">
             <div>
-              <iframe id="graphiql" class="graphql-explorer" scrolling="no" src="{{ graphql.explorerUrl }}">
-                <p>You must have iframes enabled to use this feature.</p>
-              </iframe>
+              {% if process.env.AIRGAP %}
+                <p>GraphQL explorer is not available on this environment.</p>
+              {% else %}
+                <iframe id="graphiql" class="graphql-explorer" scrolling="no" src="{{ graphql.explorerUrl }}">
+                  <p>You must have iframes enabled to use this feature.</p>
+                </iframe>
+              {% endif %}
             </div>
           </div>
         </article>

layouts/product-landing.html

@@ -41,13 +41,15 @@ <h1 class="mb-3 font-mktg">
           {% if page.product_video %}
             <div class="col-12 col-lg-6">
               <div class="position-relative" style="padding-bottom:56.25%;">
-                <iframe
-                  title="{{ page.shortTitle }} Video"
-                  class="top-0 left-0 position-absolute box-shadow-large rounded-1 width-full height-full"
-                  src="{{ page.product_video }}"
-                  frameborder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
-                ></iframe>
+                {% unless process.env.AIRGAP %}
+                  <iframe
+                    title="{{ page.shortTitle }} Video"
+                    class="top-0 left-0 position-absolute box-shadow-large rounded-1 width-full height-full"
+                    src="{{ page.product_video }}"
+                    frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
+                  ></iframe>
+                {% endunless %}
               </div>
             </div>
           {% endif %}

lib/search/sync.js

@@ -71,7 +71,7 @@ module.exports = async function syncSearchIndexes (opts = {}) {
 
       // The page version will be the new version, e.g., free-pro-team@latest, [email protected]
       const records = await buildRecords(indexName, indexablePages, pageVersion, languageCode)
-      const index = process.env.USE_LUNR
+      const index = process.env.AIRGAP
         ? new LunrIndex(indexName, records)
         : new AlgoliaIndex(indexName, records)
 
@@ -80,7 +80,7 @@ module.exports = async function syncSearchIndexes (opts = {}) {
         fs.writeFileSync(cacheFile, JSON.stringify(index, null, 2))
         console.log('wrote dry-run index to disk: ', cacheFile)
       } else {
-        if (process.env.USE_LUNR) {
+        if (process.env.AIRGAP) {
           await index.write()
           console.log('wrote index to file: ', indexName)
         } else {
@@ -93,7 +93,7 @@ module.exports = async function syncSearchIndexes (opts = {}) {
 
   // Fetch a list of index names and cache it for tests
   // to ensure that an index exists for every language and GHE version
-  const remoteIndexNames = process.env.USE_LUNR
+  const remoteIndexNames = process.env.AIRGAP
     ? await getLunrIndexNames()
     : await getRemoteIndexNames()
   const cachedIndexNamesFile = path.join(__dirname, './cached-index-names.json')

middleware/context.js

@@ -24,6 +24,7 @@ module.exports = async function contextualize (req, res, next) {
   featureFlags.forEach(featureFlagName => {
     req.context.process.env[featureFlagName] = process.env[featureFlagName]
   })
+  if (process.env.AIRGAP) req.context.process.env.AIRGAP = true
 
   // define each context property explicitly for code-search friendliness
   // e.g. searches for "req.context.page" will include results from this file
@@ -48,11 +49,16 @@ module.exports = async function contextualize (req, res, next) {
   // JS + CSS asset paths
   req.context.builtAssets = builtAssets
 
-  // Languages and versions for search
-  req.context.searchOptions = JSON.stringify({
-    languages: Object.keys(languages),
-    versions: searchVersions,
-    nonEnterpriseDefaultVersion
+  // Object exposing selected variables to client
+  req.context.expose = JSON.stringify({
+    // Languages and versions for search
+    searchOptions: {
+      languages: Object.keys(languages),
+      versions: searchVersions,
+      nonEnterpriseDefaultVersion
+    },
+    // `|| undefined` won't show at all for production
+    airgap: Boolean(process.env.AIRGAP) || undefined
   })
 
   return next()

middleware/search.js

@@ -22,7 +22,7 @@ router.get('/', async (req, res) => {
   }
 
   try {
-    const results = process.env.USE_LUNR
+    const results = process.env.AIRGAP
       ? await loadLunrResults({ version, language, query, limit })
       : await loadAlgoliaResults({ version, language, query, limit })
     return res.status(200).json(results)