diff --git a/components/page-header/LanguagePicker.tsx b/components/page-header/LanguagePicker.tsx index f4ac20ef6f3e..a98362257b1d 100644 --- a/components/page-header/LanguagePicker.tsx +++ b/components/page-header/LanguagePicker.tsx @@ -1,9 +1,14 @@ import { useRouter } from 'next/router' +import Cookies from 'js-cookie' + import { Link } from 'components/Link' import { useLanguages } from 'components/context/LanguagesContext' import { Picker } from 'components/ui/Picker' import { useTranslation } from 'components/hooks/useTranslation' +// This value is replicated in two places! See middleware/detect-language.js +const PREFERRED_LOCALE_COOKIE_NAME = 'preferredlang' + type Props = { variant?: 'inline' } @@ -22,6 +27,22 @@ export const LanguagePicker = ({ variant }: Props) => { // in a "denormalized" way. const routerPath = router.asPath.split('#')[0] + function rememberPreferredLanguage(code: string) { + try { + Cookies.set(PREFERRED_LOCALE_COOKIE_NAME, code, { + expires: 365, + secure: document.location.protocol !== 'http:', + }) + } catch (err) { + // You can never be too careful because setting a cookie + // can fail. For example, some browser + // extensions disallow all setting of cookies and attempts + // at the `document.cookie` setter could throw. Just swallow + // and move on. + console.warn('Unable to set preferred language cookie', err) + } + } + return ( { text: lang.nativeName || lang.name, selected: lang === selectedLang, item: ( - + { + rememberPreferredLanguage(lang.code) + }} + > {lang.nativeName ? ( <> {lang.nativeName} ( diff --git a/lib/get-redirect.js b/lib/get-redirect.js index d9c5b5ec8103..52810ac88dd0 100644 --- a/lib/get-redirect.js +++ b/lib/get-redirect.js @@ -9,9 +9,9 @@ const nonEnterpriseDefaultVersionPrefix = `/${nonEnterpriseDefaultVersion}` // Return the new URI if there is one, otherwise return undefined. export default function getRedirect(uri, context) { - const { redirects, pages } = context + const { redirects, userLanguage } = context - let language = 'en' + let language = userLanguage || 'en' let withoutLanguage = uri if (languagePrefixRegex.test(uri)) { language = uri.match(languagePrefixRegex)[1] @@ -109,12 +109,7 @@ export default function getRedirect(uri, context) { } if (basicCorrection) { - return ( - getRedirect(basicCorrection, { - redirects, - pages, - }) || basicCorrection - ) + return getRedirect(basicCorrection, context) || basicCorrection } if (withoutLanguage.startsWith('/admin/')) { diff --git a/middleware/detect-language.js b/middleware/detect-language.js index 1d222ede5bd9..9472e8d36c14 100644 --- a/middleware/detect-language.js +++ b/middleware/detect-language.js @@ -1,14 +1,17 @@ -import libLanguages from '../lib/languages.js' +import languages, { languageKeys } from '../lib/languages.js' import parser from 'accept-language-parser' -const languageCodes = Object.keys(libLanguages) const chineseRegions = ['CN', 'HK'] +// This value is replicated in two places! See component. +// Note, the only reason this is exported is to benefit the tests. +export const PREFERRED_LOCALE_COOKIE_NAME = 'preferredlang' + function translationExists(language) { if (language.code === 'zh') { return chineseRegions.includes(language.region) } - return languageCodes.includes(language.code) + return languageKeys.includes(language.code) } function getLanguageCode(language) { @@ -17,33 +20,41 @@ function getLanguageCode(language) { function getUserLanguage(browserLanguages) { try { - let userLanguage = getLanguageCode(browserLanguages[0]) let numTopPreferences = 1 for (let lang = 0; lang < browserLanguages.length; lang++) { // If language has multiple regions, Chrome adds the non-region language to list if (lang > 0 && browserLanguages[lang].code !== browserLanguages[lang - 1].code) numTopPreferences++ if (translationExists(browserLanguages[lang]) && numTopPreferences < 3) { - userLanguage = getLanguageCode(browserLanguages[lang]) - break + return getLanguageCode(browserLanguages[lang]) } } - return userLanguage } catch { return undefined } } +function getUserLanguageFromCookie(req) { + const value = req.cookies[PREFERRED_LOCALE_COOKIE_NAME] + // But if it's a WIP language, reject it. + if (value && languages[value] && !languages[value].wip) { + return value + } +} + // determine language code from a path. Default to en if no valid match export function getLanguageCodeFromPath(path) { const maybeLanguage = (path.split('/')[path.startsWith('/_next/data/') ? 4 : 1] || '').slice(0, 2) - return languageCodes.includes(maybeLanguage) ? maybeLanguage : 'en' + return languageKeys.includes(maybeLanguage) ? maybeLanguage : 'en' } export default function detectLanguage(req, res, next) { req.language = getLanguageCodeFromPath(req.path) // Detecting browser language by user preference - const browserLanguages = parser.parse(req.headers['accept-language']) - req.userLanguage = getUserLanguage(browserLanguages) + req.userLanguage = getUserLanguageFromCookie(req) + if (!req.userLanguage) { + const browserLanguages = parser.parse(req.headers['accept-language']) + req.userLanguage = getUserLanguage(browserLanguages) + } return next() } diff --git a/middleware/redirects/handle-redirects.js b/middleware/redirects/handle-redirects.js index d799f161a564..22f81c9705ef 100644 --- a/middleware/redirects/handle-redirects.js +++ b/middleware/redirects/handle-redirects.js @@ -1,6 +1,6 @@ import patterns from '../../lib/patterns.js' import { URL } from 'url' -import languages, { pathLanguagePrefixed } from '../../lib/languages.js' +import { pathLanguagePrefixed } from '../../lib/languages.js' import getRedirect from '../../lib/get-redirect.js' import { cacheControlFactory } from '../cache-control.js' @@ -13,16 +13,7 @@ export default function handleRedirects(req, res, next) { // blanket redirects for languageless homepage if (req.path === '/') { - let language = 'en' - - // if set, redirect to user's preferred language translation or else English - if ( - req.context.userLanguage && - languages[req.context.userLanguage] && - !languages[req.context.userLanguage].wip - ) { - language = req.context.userLanguage - } + const language = getLanguage(req) // Undo the cookie setting that CSRF sets. res.removeHeader('set-cookie') @@ -70,17 +61,12 @@ export default function handleRedirects(req, res, next) { // needs to become `/en/authentication/connecting-to-github-with-ssh` const possibleRedirectTo = `/en${req.path}` if (possibleRedirectTo in req.context.pages) { - // As of Jan 2022 we always redirect to `/en` if the URL doesn't - // specify a language. ...except for the root home page (`/`). - // It's unfortunate but that's how it currently works. - // It's tracked in #1145 - // Perhaps a more ideal solution would be to do something similar to - // the code above for `req.path === '/'` where we look at the user - // agent for a header and/or cookie. + const language = getLanguage(req) + // Note, it's important to use `req.url` here and not `req.path` // because the full URL can contain query strings. // E.g. `/foo?json=breadcrumbs` - redirect = `/en${req.url}` + redirect = `/${language}${req.url}` } } @@ -112,6 +98,13 @@ export default function handleRedirects(req, res, next) { return res.redirect(permanent ? 301 : 302, redirect) } +function getLanguage(req, default_ = 'en') { + // req.context.userLanguage, if it truthy, is always a valid supported + // language. It's whatever was in the user's request but filtered + // based on non-WIP languages in lib/languages.js + return req.context.userLanguage || default_ +} + function usePermanentRedirect(req) { // If the redirect was to essentially swap `enterprise-server@latest` // for `enterprise-server@3.x` then, we definitely don't want to diff --git a/tests/routing/redirects.js b/tests/routing/redirects.js index 27dd42623bb0..fdc9340f04c1 100644 --- a/tests/routing/redirects.js +++ b/tests/routing/redirects.js @@ -2,12 +2,14 @@ import { fileURLToPath } from 'url' import path from 'path' import { isPlainObject } from 'lodash-es' import supertest from 'supertest' +import { jest } from '@jest/globals' + import createApp from '../../lib/app.js' import enterpriseServerReleases from '../../lib/enterprise-server-releases.js' import Page from '../../lib/page.js' import { get } from '../helpers/supertest.js' import versionSatisfiesRange from '../../lib/version-satisfies-range.js' -import { jest } from '@jest/globals' +import { PREFERRED_LOCALE_COOKIE_NAME } from '../../middleware/detect-language.js' const __dirname = path.dirname(fileURLToPath(import.meta.url)) @@ -132,6 +134,28 @@ describe('redirects', () => { expect(res.headers.location).toBe('/ja') expect(res.headers['cache-control']).toBe('private, no-store') }) + test('homepage redirects to preferred language by cookie', async () => { + const res = await get('/', { + headers: { + Cookie: `${PREFERRED_LOCALE_COOKIE_NAME}=ja`, + 'Accept-Language': 'es', // note how this is going to be ignored + }, + }) + expect(res.statusCode).toBe(302) + expect(res.headers.location).toBe('/ja') + expect(res.headers['cache-control']).toBe('private, no-store') + }) + test('homepage redirects to preferred language by cookie if valid', async () => { + const res = await get('/', { + headers: { + Cookie: `${PREFERRED_LOCALE_COOKIE_NAME}=xy`, + 'Accept-Language': 'ja', // note how this is going to be ignored + }, + }) + expect(res.statusCode).toBe(302) + expect(res.headers.location).toBe('/ja') + expect(res.headers['cache-control']).toBe('private, no-store') + }) }) describe('external redirects', () => { @@ -149,13 +173,63 @@ describe('redirects', () => { }) describe('localized redirects', () => { + const redirectFrom = + '/desktop/contributing-to-projects/changing-a-remote-s-url-from-github-desktop' + const redirectTo = + '/desktop/contributing-and-collaborating-using-github-desktop/working-with-your-remote-repository-on-github-or-github-enterprise/changing-a-remotes-url-from-github-desktop' + test('redirect_from for renamed pages', async () => { - const { res } = await get( - '/ja/desktop/contributing-to-projects/changing-a-remote-s-url-from-github-desktop' - ) + const { res } = await get(`/ja${redirectFrom}`) expect(res.statusCode).toBe(301) - const expected = - '/ja/desktop/contributing-and-collaborating-using-github-desktop/working-with-your-remote-repository-on-github-or-github-enterprise/changing-a-remotes-url-from-github-desktop' + const expected = `/ja${redirectTo}` + expect(res.headers.location).toBe(expected) + }) + + test('redirect_from for renamed pages by Accept-Language header', async () => { + const { res } = await get(redirectFrom, { + headers: { + 'Accept-Language': 'ja', + }, + }) + expect(res.statusCode).toBe(302) + const expected = `/ja${redirectTo}` + expect(res.headers.location).toBe(expected) + }) + + test('redirect_from for renamed pages but ignore Accept-Language header if not recognized', async () => { + const { res } = await get(redirectFrom, { + headers: { + // None of these are recognized + 'Accept-Language': 'sv,fr,gr', + }, + }) + expect(res.statusCode).toBe(302) + const expected = `/en${redirectTo}` + expect(res.headers.location).toBe(expected) + }) + + test('redirect_from for renamed pages but ignore unrecognized Accept-Language header values', async () => { + const { res } = await get(redirectFrom, { + headers: { + // Only the last one is recognized + 'Accept-Language': 'sv,ja', + }, + }) + expect(res.statusCode).toBe(302) + const expected = `/ja${redirectTo}` + expect(res.headers.location).toBe(expected) + }) + + test('will inject the preferred language from cookie', async () => { + const { res } = await get(redirectFrom, { + headers: { + Cookie: `${PREFERRED_LOCALE_COOKIE_NAME}=ja`, + 'Accept-Language': 'es', // note how this is going to be ignored + }, + }) + // 302 because the redirect depended on cookie + expect(res.statusCode).toBe(302) + const expected = `/ja${redirectTo}` expect(res.headers.location).toBe(expected) }) }) diff --git a/tests/unit/get-redirect.js b/tests/unit/get-redirect.js index 5ad969f6edc3..ad425e0be385 100644 --- a/tests/unit/get-redirect.js +++ b/tests/unit/get-redirect.js @@ -148,4 +148,18 @@ describe('getRedirect basics', () => { // it already has the enterprise-server prefix. expect(getRedirect('/enterprise-server/foo', ctx)).toBe(`/en/enterprise-server@${latest}/bar`) }) + + it('should redirect according to the req.context.userLanguage', () => { + const ctx = { + pages: {}, + redirects: { + '/foo': '/bar', + }, + userLanguage: 'ja', + } + expect(getRedirect('/foo', ctx)).toBe(`/ja/bar`) + // falls back to 'en' if it's falsy + ctx.userLanguage = null + expect(getRedirect('/foo', ctx)).toBe(`/en/bar`) + }) })