Add dismissible machine translation banner on non-English pages (#60137)

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

Author: heiskr

data/ui.yml

@@ -9,6 +9,7 @@ header:
       ' is currently available as a <a href="/admin/overview/about-upgrades-to-new-releases">release candidate</a>.'
     early_access: 📣 Please <b>do not share</b> this URL publicly. This page contains content about a private preview feature.
     release_notes_use_latest: Please use the latest release for the latest security, performance, and bug fixes.
+    machine_translation: Some of this page may have been machine-translated or translated using AI.
     # GHES release notes
     ghes_release_notes_upgrade_patch_only: 📣 This is not the <a href="#{{ latestPatch }}">latest patch release</a> of Enterprise Server.
     ghes_release_notes_upgrade_release_only: 📣 This is not the <a href="/enterprise-server@{{ latestRelease }}/admin/release-notes">latest release</a> of Enterprise Server.

src/fixtures/fixtures/data/ui.yml

@@ -9,6 +9,7 @@ header:
       ' is currently available as a <a href="/admin/overview/about-upgrades-to-new-releases">release candidate</a>.'
     early_access: 📣 Please <b>do not share</b> this URL publicly. This page contains content about a private preview feature.
     release_notes_use_latest: Please use the latest release for the latest security, performance, and bug fixes.
+    machine_translation: Some of this page may have been machine-translated or translated using AI.
     # GHES release notes
     ghes_release_notes_upgrade_patch_only: 📣 This is not the <a href="#{{ latestPatch }}">latest patch release</a> of Enterprise Server.
     ghes_release_notes_upgrade_release_only: 📣 This is not the <a href="/enterprise-server@{{ latestRelease }}/admin/release-notes">latest release</a> of Enterprise Server.

src/frame/components/page-header/HeaderNotifications.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import cx from 'classnames'
 import { XIcon } from '@primer/octicons-react'
@@ -11,11 +11,14 @@ import { useVersion } from '@/versions/components/useVersion'
 import { useUserLanguage } from '@/languages/components/useUserLanguage'
 import styles from './HeaderNotifications.module.scss'
 import { useSharedUIContext } from '@/frame/components/context/SharedUIContext'
+import Cookies from '@/frame/components/lib/cookies'
+import { MACHINE_TRANSLATION_BANNER_COOKIE_NAME } from '@/frame/lib/constants'
 
 enum NotificationType {
   RELEASE = 'RELEASE',
   TRANSLATION = 'TRANSLATION',
   EARLY_ACCESS = 'EARLY_ACCESS',
+  MACHINE_TRANSLATION = 'MACHINE_TRANSLATION',
 }
 
 type Notif = {
@@ -36,6 +39,11 @@ export const HeaderNotifications = () => {
 
   const { t } = useTranslation('header')
 
+  const [machineTranslationDismissed, setMachineTranslationDismissed] = useState(true)
+  useEffect(() => {
+    setMachineTranslationDismissed(Cookies.get(MACHINE_TRANSLATION_BANNER_COOKIE_NAME) === 'true')
+  }, [])
+
   const translationNotices: Array<Notif> = []
   if (router.locale === 'en') {
     if (userLanguage && userLanguage !== 'en' && languages[userLanguage]) {
@@ -61,6 +69,22 @@ export const HeaderNotifications = () => {
       })
     }
   }
+
+  if (router.locale !== 'en' && !machineTranslationDismissed) {
+    translationNotices.push({
+      type: NotificationType.MACHINE_TRANSLATION,
+      content: t('notices.machine_translation'),
+      onClose: () => {
+        setMachineTranslationDismissed(true)
+        try {
+          Cookies.set(MACHINE_TRANSLATION_BANNER_COOKIE_NAME, 'true')
+        } catch (err) {
+          console.warn('Unable to set cookie', err)
+        }
+      },
+    })
+  }
+
   const releaseNotices: Array<Notif> = []
   if (currentVersion === data.variables.release_candidate.version) {
     releaseNotices.push({
@@ -100,6 +124,7 @@ export const HeaderNotifications = () => {
               styles.container,
               'text-center f5 color-fg-default py-4 px-6 z-1',
               type === NotificationType.TRANSLATION && 'color-bg-accent',
+              type === NotificationType.MACHINE_TRANSLATION && 'color-bg-accent',
               type === NotificationType.RELEASE && 'color-bg-accent',
               type === NotificationType.EARLY_ACCESS && 'color-bg-danger',
               !isLast && 'border-bottom color-border-default',

src/frame/lib/constants.ts

@@ -12,6 +12,7 @@ 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 MAX_REQUEST_TIMEOUT = process.env.REQUEST_TIMEOUT