Standardize cookie names to snake_case with central constants (#60140)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: heiskr

src/color-schemes/components/useTheme.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import Cookies from '../../frame/components/lib/cookies'
+import { COLOR_MODE_COOKIE_NAME } from '@/frame/lib/constants'
 
 enum CssColorMode {
   auto = 'auto',
@@ -118,7 +119,7 @@ export function useTheme() {
     // under the hood, which Primer is planning to do in the next couple quarters.
     // Reference: https://github.com/primer/react/issues/2229
     setTimeout(() => {
-      const cookieValue = Cookies.get('color_mode')
+      const cookieValue = Cookies.get(COLOR_MODE_COOKIE_NAME)
       const css = getCssTheme(cookieValue)
       const component = getComponentTheme(cookieValue)
       setTheme({ css, component })

src/events/components/events.ts

@@ -1,5 +1,11 @@
 import Cookies from '@/frame/components/lib/cookies'
-import { ANALYTICS_ENABLED } from '@/frame/lib/constants'
+import {
+  ANALYTICS_ENABLED,
+  ANNOTATE_MODE_COOKIE_NAME,
+  DOCS_EVENTS_COOKIE_NAME,
+  TOOL_PREFERRED_COOKIE_NAME,
+  OS_PREFERRED_COOKIE_NAME,
+} from '@/frame/lib/constants'
 import { parseUserAgent } from './user-agent'
 import { Router } from 'next/router'
 import { isLoggedIn } from '@/frame/components/hooks/useHasAccount'
@@ -8,8 +14,6 @@ import { EventType, EventPropsByType } from '../types'
 import { isHeadless } from './is-headless'
 import { sendHydroAnalyticsEvent, getOctoClientId } from './hydro-analytics'
 
-const COOKIE_NAME = '_docs-events'
-
 const startVisitTime = Date.now()
 
 const BATCH_INTERVAL = 5000 // 5 seconds
@@ -66,10 +70,10 @@ export function uuidv4(): string {
 
 export function getUserEventsId() {
   if (cookieValue) return cookieValue
-  cookieValue = Cookies.get(COOKIE_NAME)
+  cookieValue = Cookies.get(DOCS_EVENTS_COOKIE_NAME)
   if (cookieValue) return cookieValue
   cookieValue = uuidv4()
-  Cookies.set(COOKIE_NAME, cookieValue)
+  Cookies.set(DOCS_EVENTS_COOKIE_NAME, cookieValue)
   return cookieValue
 }
 
@@ -136,10 +140,10 @@ export function sendEvent<T extends EventType>({
       user_language: navigator.language,
 
       // Preference information
-      application_preference: Cookies.get('toolPreferred'),
+      application_preference: Cookies.get(TOOL_PREFERRED_COOKIE_NAME),
       color_mode_preference: getColorModePreference(),
-      os_preference: Cookies.get('osPreferred'),
-      code_display_preference: Cookies.get('annotate-mode'),
+      os_preference: Cookies.get(OS_PREFERRED_COOKIE_NAME),
+      code_display_preference: Cookies.get(ANNOTATE_MODE_COOKIE_NAME),
 
       experiment_variation:
         getExperimentVariationForContext(

src/events/middleware.ts

@@ -13,6 +13,7 @@ import { noCacheControl } from '@/frame/middleware/cache-control'
 import { getJsonValidator } from '@/tests/lib/validate-json-schema'
 import { formatErrors } from './lib/middleware-errors'
 import { publish as _publish } from './lib/hydro'
+import { DOTCOM_USER_COOKIE_NAME, STAFFONLY_COOKIE_NAME } from '@/frame/lib/constants'
 import { analyzeComment, getGuessedLanguage } from './lib/analyze-comment'
 import { EventType, EventProps, EventPropsByType } from './types'
 
@@ -77,8 +78,10 @@ router.post(
         if (body.context) {
           // Add dotcom_user to the context if it's available
           // JSON.stringify removes `undefined` values but not `null`, and we don't want to send `null` to Hydro
-          body.context.dotcom_user = req.cookies?.dotcom_user ? req.cookies.dotcom_user : undefined
-          body.context.is_staff = Boolean(req.cookies?.staffonly)
+          body.context.dotcom_user = req.cookies?.[DOTCOM_USER_COOKIE_NAME]
+            ? req.cookies[DOTCOM_USER_COOKIE_NAME]
+            : undefined
+          body.context.is_staff = Boolean(req.cookies?.[STAFFONLY_COOKIE_NAME])
           // Add IP address and user agent from request
           // Moda forwards the client's IP using the `fastly-client-ip` header
           body.context.ip = req.headers['fastly-client-ip'] as string | undefined

src/frame/components/hooks/useHasAccount.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import Cookies from '@/frame/components/lib/cookies'
+import { COLOR_MODE_COOKIE_NAME, PREFERRED_COLOR_MODE_COOKIE_NAME } from '@/frame/lib/constants'
 
 // Measure if the user has a github.com account and signed in during this session.
 // The github.com sends the color_mode cookie every request when you sign in,
@@ -21,7 +22,7 @@ export function useHasAccount() {
 }
 
 export function isLoggedIn() {
-  const cookieValue = Cookies.get('color_mode')
-  const altCookieValue = Cookies.get('preferred_color_mode')
+  const cookieValue = Cookies.get(COLOR_MODE_COOKIE_NAME)
+  const altCookieValue = Cookies.get(PREFERRED_COLOR_MODE_COOKIE_NAME)
   return Boolean(cookieValue || altCookieValue)
 }

src/frame/components/lib/toggle-annotations.ts

@@ -1,6 +1,7 @@
 import Cookies from '@/frame/components/lib/cookies'
 import { sendEvent } from '@/events/components/events'
 import { EventType } from '@/events/types'
+import { ANNOTATE_MODE_COOKIE_NAME } from '@/frame/lib/constants'
 
 enum annotationMode {
   Beside = 'beside',
@@ -23,7 +24,7 @@ export default function toggleAnnotation() {
   const annotationButtons = Array.from(document.querySelectorAll('.annotate-toggle button'))
   if (!annotationButtons.length) return
 
-  const cookie = validateMode(Cookies.get('annotate-mode')) // will default to beside
+  const cookie = validateMode(Cookies.get(ANNOTATE_MODE_COOKIE_NAME)) // will default to beside
   displayAnnotationMode(annotationButtons, cookie)
 
   // this loop adds event listeners for both the annotation buttons
@@ -33,7 +34,7 @@ export default function toggleAnnotation() {
 
       // validate the annotation mode and set the cookie with the valid mode
       const validMode = validateMode(annotationBtn.getAttribute('value')!)
-      Cookies.set('annotate-mode', validMode!)
+      Cookies.set(ANNOTATE_MODE_COOKIE_NAME, validMode!)
       sendEvent({
         type: EventType.preference,
         preference_name: 'code_display',

src/frame/lib/constants.ts

@@ -1,24 +1,35 @@
-const isDev = process.env.NODE_ENV === 'development'
-
-// 10 seconds, by default in production and tests.
-// 15 seconds, by default in development.
-// Why more in development? Because Next.js compilation is JIT (Just-In-Time)
-// so that starting `npm start` and viewing your first page on localhost:4000
-// can, these days, take more than 10 seconds when the computer isn't
-// very fast. That first compilation can take long even of fast hardware
-// if the local contributor is running several other resource-intensive
-// applications at the same time.
-const DEFAULT_MAX_REQUEST_TIMEOUT = isDev ? 15_000 : 10_000
-
 export const ROOT = process.env.ROOT || '.'
-export const USER_LANGUAGE_COOKIE_NAME = 'user_language'
-export const MACHINE_TRANSLATION_BANNER_COOKIE_NAME = 'machine_translation_banner_seen'
-export const USER_VERSION_COOKIE_NAME = 'user_version'
 export const TRANSLATIONS_ROOT = process.env.TRANSLATIONS_ROOT || 'translations'
+export const TRANSLATIONS_FIXTURE_ROOT = process.env.TRANSLATIONS_FIXTURE_ROOT
+
+const isDev = process.env.NODE_ENV === 'development'
+// Higher in development to account for JIT compilation on first page load.
+const DEFAULT_MAX_REQUEST_TIMEOUT = isDev ? 15_000 : 10_000
 export const MAX_REQUEST_TIMEOUT = process.env.REQUEST_TIMEOUT
   ? parseInt(process.env.REQUEST_TIMEOUT, 10)
   : DEFAULT_MAX_REQUEST_TIMEOUT
-export const TRANSLATIONS_FIXTURE_ROOT = process.env.TRANSLATIONS_FIXTURE_ROOT
+
+// Docs cookies — we own these and use snake_case naming.
+export const USER_LANGUAGE_COOKIE_NAME = 'user_language' // Also referenced in Fastly VCL
+export const USER_VERSION_COOKIE_NAME = 'user_version' // Also referenced in Fastly VCL
+export const API_VERSION_COOKIE_NAME = 'api_version_preferred'
+export const ANNOTATE_MODE_COOKIE_NAME = 'annotate_mode'
+export const CODE_SAMPLE_LANGUAGE_COOKIE_NAME = 'code_sample_language_preferred'
+export const TOOL_PREFERRED_COOKIE_NAME = 'tool_preferred'
+export const OS_PREFERRED_COOKIE_NAME = 'os_preferred'
+export const DOCS_EVENTS_COOKIE_NAME = 'docs_events'
+export const MACHINE_TRANSLATION_BANNER_COOKIE_NAME = 'machine_translation_banner_seen'
+
+// Monolith cookies — set by github.com, read-only for us. Names are not
+// ours to change so they don't follow our snake_case convention.
+export const COLOR_MODE_COOKIE_NAME = 'color_mode'
+export const PREFERRED_COLOR_MODE_COOKIE_NAME = 'preferred_color_mode'
+export const DOTCOM_USER_COOKIE_NAME = 'dotcom_user'
+export const STAFFONLY_COOKIE_NAME = 'staffonly'
+
+// Feature flags
+export const ANALYTICS_ENABLED = true
+export const HOVERCARDS_ENABLED = true
 
 // Minimum required HTML for 404: W3C valid, no external, legal.
 export const minimumNotFoundHtml = `
@@ -36,6 +47,3 @@ export const minimumNotFoundHtml = `
  &bull; <a href=https://docs.github.com/site-policy/privacy-policies/github-privacy-statement>Privacy</a>
 </small>
 `.replace(/\n/g, '')
-
-export const ANALYTICS_ENABLED = true
-export const HOVERCARDS_ENABLED = true

src/frame/middleware/api.ts

@@ -11,6 +11,7 @@ import article from '@/article-api/middleware/article'
 import webhooks from '@/webhooks/middleware/webhooks'
 import { ExtendedRequest } from '@/types'
 import { noCacheControl } from './cache-control'
+import { STAFFONLY_COOKIE_NAME } from '@/frame/lib/constants'
 
 const router = express.Router()
 
@@ -55,7 +56,7 @@ if (process.env.ELASTICSEARCH_URL) {
 router.get('/cookies', (req, res) => {
   noCacheControl(res)
   const cookies = {
-    isStaff: Boolean(req.cookies?.staffonly?.startsWith('yes')) || false,
+    isStaff: Boolean(req.cookies?.[STAFFONLY_COOKIE_NAME]?.startsWith('yes')) || false,
   }
   res.json(cookies)
 })

src/rest/components/ApiVersionPicker.tsx

@@ -6,7 +6,7 @@ import { useMainContext } from '@/frame/components/context/MainContext'
 import { DEFAULT_VERSION, useVersion } from '@/versions/components/useVersion'
 import { Picker } from '@/tools/components/Picker'
 import { useTranslation } from '@/languages/components/useTranslation'
-import { API_VERSION_COOKIE_NAME } from '@/rest/components/RestRedirect'
+import { API_VERSION_COOKIE_NAME } from '@/frame/lib/constants'
 import { apiVersionPath } from '@/rest/lib/config'
 
 const API_VERSION_SUFFIX = ' (latest)'

src/rest/components/RestCodeSamples.tsx

@@ -13,6 +13,7 @@ import hljsCurl from 'highlightjs-curl'
 
 import { useTranslation } from '@/languages/components/useTranslation'
 import useClipboard from '@/rest/components/useClipboard'
+import { CODE_SAMPLE_LANGUAGE_COOKIE_NAME } from '@/frame/lib/constants'
 import {
   getShellExample,
   getGHExample,
@@ -114,14 +115,14 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
 
   const handleLanguageSelection = (languageKey: CodeSampleKeys) => {
     setSelectedLanguage(languageKey)
-    Cookies.set('codeSampleLanguagePreferred', languageKey)
+    Cookies.set(CODE_SAMPLE_LANGUAGE_COOKIE_NAME, languageKey)
   }
 
   // Change the language based on cookies
   useEffect(() => {
     // If the user previously selected a language preference and the language
     // is available in this component set it as the selected language
-    const cookieValue = Cookies.get('codeSampleLanguagePreferred')
+    const cookieValue = Cookies.get(CODE_SAMPLE_LANGUAGE_COOKIE_NAME)
     const preferredCodeLanguage = languageSelectOptions.find((item) => item === cookieValue)
     if (cookieValue && preferredCodeLanguage) {
       setSelectedLanguage(cookieValue as CodeSampleKeys)

src/rest/components/RestRedirect.tsx

@@ -4,8 +4,7 @@ import Cookies from '@/frame/components/lib/cookies'
 
 import { useVersion } from '@/versions/components/useVersion'
 import { useMainContext } from '@/frame/components/context/MainContext'
-
-export const API_VERSION_COOKIE_NAME = 'apiVersionPreferred'
+import { API_VERSION_COOKIE_NAME } from '@/frame/lib/constants'
 
 // This component allows us to set the URL Param for the REST API Calendar Date version
 // We set a cookie as well to remember what calendar date version the user is on