feat: site language control button in authenticated learning header

[jansenk]

Adds a new icon in the authenticated learning header to control the site language.

Calls the endpoint added in edx/edx-platform#87 to determine of the feature is enabled. If it is, adds an icon to the header which when clicked opens a modal with a set of pre-selected and hard-coded languages, which allows the learner to select the site language. Updates the user-preferences api and the django i18n api on save.

Icon

On Hover

Modal

Language Change after save

Modal Reflects New Language

[Copilot]

Pull request overview

This pull request adds a site language control feature to the authenticated learning header. It introduces a language selection button that, when enabled via a backend feature toggle, displays a modal allowing learners to choose from 14 pre-configured languages. Upon selection, the feature updates both the user preferences API and Django's i18n API, then reloads the page to apply the changes.

Changes:

• Added TypeScript support to the ESLint configuration and lint script
• Created site language components (button, modal, language selector, disclaimer)
• Implemented data layer functions for cookie handling and API calls
• Integrated the site language button into the authenticated user header

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 20 comments.

Show a summary per file

File	Description
package.json	Added TypeScript linting support and react-redux dependency
.eslintrc.js	Configured ESLint rules for TypeScript and React TSX files
src/learning-header/site-language/messages.js	Defined i18n messages for modal UI text and error messages
src/learning-header/site-language/languagesList.js	Hard-coded list of 14 supported languages with codes and localized names
src/learning-header/site-language/data.ts	Implemented cookie parsing, language getter/setter, and feature toggle API
src/learning-header/site-language/index.scss	Styled the language selection button with focus states
src/learning-header/site-language/SiteLanguageModal.tsx	Modal component with language selection, loading states, and error handling
src/learning-header/site-language/SiteLanguageModal.scss	Styled the modal's scrollable language list
src/learning-header/site-language/SiteLanguageButton.tsx	Main button component with feature toggle check and analytics tracking
src/learning-header/site-language/LanguageSelector.tsx	Language selection UI with radio buttons and disclaimer
src/learning-header/site-language/LanguageSelector.scss	Styled the language selection list with borders
src/learning-header/site-language/TranslationDisclaimer.tsx	Disclaimer popover with translation warranties and scope information
src/learning-header/AuthenticatedUser.jsx	Integrated site language button into the authenticated header

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.