Update current JavaScripts to use Typescript (#19824)

* Update index to make it clear what has hasn't updated to Next/React yet

* Typescriptify events and experiments

* Typescript the old JS for easier integration

* Update release-notes.ts

* Lint

* Run npm i

* Fix a few lint issues

* Update airgap-links.ts

* Update airgap-links.ts

* Update set-next-env to ts

* Update airgap-links.ts

* Update package-lock.json

* Update set-next-env.ts

* Update package-lock.json

* Revert "Update package-lock.json"

This reverts commit b45e8250beeb700719d3b44e1092b0bbd093baba.

* readd fsevents

* Revert "readd fsevents"

This reverts commit 419f3c35080ac4a9072f0b4e8e291e1712ce3639.

* Update openapi-schema-check.yml

* Revert "Update openapi-schema-check.yml"

This reverts commit 5e9f4a29ea11ee343ca17291a40a751920c5b923.

* Update package-lock.json

* Update package-lock.json

Author: heiskr

components/Search.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, ReactNode } from 'react'
 import { useRouter } from 'next/router'
 import debounce from 'lodash/debounce'
 import { useTranslation } from 'components/hooks/useTranslation'
-import { sendEvent } from '../javascripts/events'
+import { sendEvent, EventType } from '../javascripts/events'
 import { useMainContext } from './context/MainContext'
 import { useVersion } from 'components/hooks/useVersion'
 
@@ -126,7 +126,7 @@ export function Search({ isStandalone = false, updateSearchParams = true, childr
     // Analytics tracking
     if (xquery) {
       sendEvent({
-        type: 'search',
+        type: EventType.search,
         search_query: xquery,
         // search_context
       })

components/Survey.tsx

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react'
 import { ThumbsdownIcon, ThumbsupIcon } from '@primer/octicons-react'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { Link } from 'components/Link'
-import { sendEvent } from '../javascripts/events'
+import { sendEvent, EventType } from '../javascripts/events'
 
 enum ViewState {
   START = 'START',
@@ -137,10 +137,10 @@ function trackEvent(formData: FormData | undefined) {
   if (!formData) return
   // Nota bene: convert empty strings to undefined
   return sendEvent({
-    type: 'survey',
-    survey_token: formData.get('survey-token') || undefined, // Honeypot
+    type: EventType.survey,
+    survey_token: (formData.get('survey-token') as string) || undefined, // Honeypot
     survey_vote: formData.get('survey-vote') === 'Y',
-    survey_comment: formData.get('survey-comment') || undefined,
-    survey_email: formData.get('survey-email') || undefined,
+    survey_comment: (formData.get('survey-comment') as string) || undefined,
+    survey_email: (formData.get('survey-email') as string) || undefined,
   })
 }

javascripts/airgap-links.js

@@ -0,0 +1,17 @@
+export default function airgapLinks() {
+  // @ts-ignore
+  if (window.IS_NEXTJS_PAGE) return
+
+  // When in an airgapped environment,
+  // show a tooltip on external links
+  const exposeEl = document?.getElementById('expose') as HTMLScriptElement
+  const { airgap } = JSON.parse(exposeEl.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.')
+    link.setAttribute('rel', 'noopener')
+  })
+}

javascripts/airgap-links.ts

@@ -0,0 +1,17 @@
+/**
+ * Handles the client-side events for `includes/all-articles.html`.
+ */
+export default function allArticles() {
+  const buttons = document.querySelectorAll('button.js-all-articles-show-more')
+
+  buttons.forEach((btn) =>
+    btn.addEventListener('click', (evt) => {
+      const target = evt.currentTarget as HTMLButtonElement
+      // Show all hidden links
+      const hiddenLinks = target?.parentElement?.querySelectorAll('li.d-none')
+      hiddenLinks?.forEach((link) => link.classList.remove('d-none'))
+      // Remove the button, since we don't need it anymore
+      target?.parentElement?.removeChild(target)
+    })
+  )
+}

javascripts/all-articles.js

@@ -0,0 +1,3 @@
+declare module 'browser-date-formatter' {
+  export default function browserDateFormatter(): void
+}

javascripts/all-articles.ts

@@ -3,12 +3,13 @@ export default () => {
 
   if (!buttons) return
 
-  buttons.forEach(button =>
-    button.addEventListener('click', async evt => {
-      const text = button.dataset.clipboardText
+  buttons.forEach((button) =>
+    button.addEventListener('click', async () => {
+      const text = (button as HTMLElement).dataset.clipboardText
+      if (!text) return
       await navigator.clipboard.writeText(text)
 
-      const beforeTooltip = button.getAttribute('aria-label')
+      const beforeTooltip = button.getAttribute('aria-label') || ''
       button.setAttribute('aria-label', 'Copied!')
 
       setTimeout(() => {

javascripts/browser-date-formatter.d.ts

@@ -1,39 +1,37 @@
 const expandText = 'Expand All'
 const closeText = 'Close All'
 
-export default function devToc () {
+export default function devToc() {
   const expandButton = document.querySelector('.js-expand')
   if (!expandButton) return
 
   const detailsElements = document.querySelectorAll('details')
 
   expandButton.addEventListener('click', () => {
     // on click, toggle all the details elements open or closed
-    const anyDetailsOpen = Array.from(detailsElements).find(details => details.open)
+    const anyDetailsOpen = Array.from(detailsElements).find((details) => details.open)
 
-    for (const detailsElement of detailsElements) {
-      anyDetailsOpen
-        ? detailsElement.removeAttribute('open')
-        : detailsElement.open = true
-    }
+    detailsElements.forEach((detailsElement) => {
+      anyDetailsOpen ? detailsElement.removeAttribute('open') : (detailsElement.open = true)
+    })
 
     // toggle the button text on click
     anyDetailsOpen
-      ? expandButton.textContent = expandText
-      : expandButton.textContent = closeText
+      ? (expandButton.textContent = expandText)
+      : (expandButton.textContent = closeText)
   })
 
   // also toggle the button text on clicking any of the details elements
-  for (const detailsElement of detailsElements) {
+  detailsElements.forEach((detailsElement) => {
     detailsElement.addEventListener('click', () => {
       expandButton.textContent = closeText
 
       // we can only get an accurate count of the open details elements if we wait a fraction after click
       setTimeout(() => {
-        if (!Array.from(detailsElements).find(details => details.open)) {
+        if (!Array.from(detailsElements).find((details) => details.open)) {
           expandButton.textContent = expandText
         }
       }, 50)
     })
-  }
+  })
 }