From 6a562b458a81888e49fa6a3a7bdf972e7878e68b Mon Sep 17 00:00:00 2001 From: rvveber Date: Mon, 25 Nov 2024 15:36:07 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20sync=20user=20and=20front?= =?UTF-8?q?end=20language?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On Language change in the frontend, the user language is updated via API. If user language is available, it will be preferred and set in the frontend. --- CHANGELOG.md | 2 + src/backend/core/api/serializers.py | 2 +- src/backend/demo/defaults.py | 17 +-- .../demo/management/commands/create_demo.py | 3 +- .../__tests__/app-impress/doc-editor.spec.ts | 35 ------ .../app-impress/doc-member-create.spec.ts | 46 -------- .../__tests__/app-impress/language.spec.ts | 90 +++++++++++++-- .../apps/impress/src/core/AppProvider.tsx | 1 - .../apps/impress/src/core/auth/api/types.ts | 2 + .../src/core/config/ConfigProvider.tsx | 21 ++++ .../doc-editor/components/BlockNoteEditor.tsx | 2 +- .../src/features/language/LanguagePicker.tsx | 103 ++++++++++++------ .../language/api/useChangeUserLanguage.tsx | 45 ++++++++ src/frontend/apps/impress/src/i18n/conf.ts | 7 -- .../apps/impress/src/i18n/initI18n.ts | 11 +- src/frontend/apps/impress/src/i18n/types.ts | 2 - 16 files changed, 239 insertions(+), 150 deletions(-) create mode 100644 src/frontend/apps/impress/src/features/language/api/useChangeUserLanguage.tsx delete mode 100644 src/frontend/apps/impress/src/i18n/conf.ts delete mode 100644 src/frontend/apps/impress/src/i18n/types.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 18da1b871..ded44e650 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,8 @@ and this project adheres to ## Changed +- ✨(frontend) sync user and frontend language #401 + ## Fixed - 🐛(backend) invitation e-mails in receivers language #401 diff --git a/src/backend/core/api/serializers.py b/src/backend/core/api/serializers.py index 9a81fc47e..e26afdec8 100644 --- a/src/backend/core/api/serializers.py +++ b/src/backend/core/api/serializers.py @@ -18,7 +18,7 @@ class UserSerializer(serializers.ModelSerializer): class Meta: model = models.User - fields = ["id", "email", "full_name", "short_name"] + fields = ["id", "email", "full_name", "short_name", "language"] read_only_fields = ["id", "email", "full_name", "short_name"] diff --git a/src/backend/demo/defaults.py b/src/backend/demo/defaults.py index 4f6fb5a2f..4b082e39c 100644 --- a/src/backend/demo/defaults.py +++ b/src/backend/demo/defaults.py @@ -7,17 +7,12 @@ } DEV_USERS = [ + {"username": "impress", "email": "impress@impress.world", "language": "en-us"}, + {"username": "user-e2e-webkit", "email": "user@webkit.e2e", "language": "en-us"}, + {"username": "user-e2e-firefox", "email": "user@firefox.e2e", "language": "en-us"}, { - "username": "impress", - "email": "impress@impress.world", + "username": "user-e2e-chromium", + "email": "user@chromium.e2e", + "language": "en-us", }, - { - "username": "user-e2e-webkit", - "email": "user@webkit.e2e", - }, - { - "username": "user-e2e-firefox", - "email": "user@firefox.e2e", - }, - {"username": "user-e2e-chromium", "email": "user@chromium.e2e"}, ] diff --git a/src/backend/demo/management/commands/create_demo.py b/src/backend/demo/management/commands/create_demo.py index 4ac9efc71..d7ce3266a 100644 --- a/src/backend/demo/management/commands/create_demo.py +++ b/src/backend/demo/management/commands/create_demo.py @@ -174,7 +174,8 @@ def create_demo(stdout): is_superuser=False, is_active=True, is_staff=False, - language=random.choice(settings.LANGUAGES)[0], + language=dev_user["language"] + or random.choice(settings.LANGUAGES)[0], ) ) diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts index d41660a5d..3771ebcb0 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts @@ -9,41 +9,6 @@ test.beforeEach(async ({ page }) => { }); test.describe('Doc Editor', () => { - test('it check translations of the slash menu when changing language', async ({ - page, - browserName, - }) => { - await createDoc(page, 'doc-toolbar', browserName, 1); - - const header = page.locator('header').first(); - const editor = page.locator('.ProseMirror'); - // Trigger slash menu to show english menu - await editor.click(); - await editor.fill('/'); - await expect(page.getByText('Headings', { exact: true })).toBeVisible(); - await header.click(); - await expect(page.getByText('Headings', { exact: true })).toBeHidden(); - - // Reset menu - await editor.click(); - await editor.fill(''); - - // Change language to French - await header.click(); - await header.getByRole('combobox').getByText('English').click(); - await header.getByRole('option', { name: 'Français' }).click(); - await expect( - header.getByRole('combobox').getByText('Français'), - ).toBeVisible(); - - // Trigger slash menu to show french menu - await editor.click(); - await editor.fill('/'); - await expect(page.getByText('Titres', { exact: true })).toBeVisible(); - await header.click(); - await expect(page.getByText('Titres', { exact: true })).toBeHidden(); - }); - test('it checks default toolbar buttons are displayed', async ({ page, browserName, diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts index 8450b6f33..58a4ec079 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts @@ -111,9 +111,6 @@ test.describe('Document create member', () => { await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible(); const responseCreateInvitation = await responsePromiseCreateInvitation; expect(responseCreateInvitation.ok()).toBeTruthy(); - expect( - responseCreateInvitation.request().headers()['content-language'], - ).toBe('en-us'); // Check user added await expect( @@ -121,9 +118,6 @@ test.describe('Document create member', () => { ).toBeVisible(); const responseAddUser = await responsePromiseAddUser; expect(responseAddUser.ok()).toBeTruthy(); - expect(responseAddUser.request().headers()['content-language']).toBe( - 'en-us', - ); const listInvitation = page.getByLabel('List invitation card'); await expect(listInvitation.locator('li').getByText(email)).toBeVisible(); @@ -225,46 +219,6 @@ test.describe('Document create member', () => { expect(responseCreateInvitationFail.ok()).toBeFalsy(); }); - test('The invitation endpoint get the language of the website', async ({ - page, - browserName, - }) => { - await createDoc(page, 'user-invitation', browserName, 1); - - const header = page.locator('header').first(); - await header.getByRole('combobox').getByText('EN').click(); - await header.getByRole('option', { name: 'FR' }).click(); - - await page.getByRole('button', { name: 'Partager' }).click(); - - const inputSearch = page.getByLabel( - /Trouver un membre à ajouter au document/, - ); - - const email = randomName('test@test.fr', browserName, 1)[0]; - await inputSearch.fill(email); - await page.getByRole('option', { name: email }).click(); - - // Choose a role - await page.getByRole('combobox', { name: /Choisissez un rôle/ }).click(); - await page.getByRole('option', { name: 'Administrateur' }).click(); - - const responsePromiseCreateInvitation = page.waitForResponse( - (response) => - response.url().includes('/invitations/') && response.status() === 201, - ); - - await page.getByRole('button', { name: 'Valider' }).click(); - - // Check invitation sent - await expect(page.getByText(`Invitation envoyée à ${email}`)).toBeVisible(); - const responseCreateInvitation = await responsePromiseCreateInvitation; - expect(responseCreateInvitation.ok()).toBeTruthy(); - expect( - responseCreateInvitation.request().headers()['content-language'], - ).toBe('fr-fr'); - }); - test('it manages invitation', async ({ page, browserName }) => { await createDoc(page, 'user-invitation', browserName, 1); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts index 9d7e3f3dc..94402d6e7 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts @@ -1,20 +1,25 @@ -import { expect, test } from '@playwright/test'; +import { Page, expect, test } from '@playwright/test'; + +import { createDoc } from './common'; test.beforeEach(async ({ page }) => { await page.goto('/'); }); test.describe('Language', () => { - test('checks the language picker', async ({ page }) => { + test('checks language switching', async ({ page }) => { + const header = page.locator('header').first(); + + // initial language should be english await expect( page.getByRole('button', { name: 'Create a new document', }), ).toBeVisible(); - const header = page.locator('header').first(); - await header.getByRole('combobox').getByText('English').click(); - await header.getByRole('option', { name: 'Français' }).click(); + // switch to french + await waitForLanguageSwitch(page, TestLanguage.French); + await expect( header.getByRole('combobox').getByText('Français'), ).toBeVisible(); @@ -63,12 +68,79 @@ test.describe('Language', () => { // Check for English 404 response await check404Response('Not found.'); - // Switch language to French - const header = page.locator('header').first(); - await header.getByRole('combobox').getByText('English').click(); - await header.getByRole('option', { name: 'Français' }).click(); + await waitForLanguageSwitch(page, TestLanguage.French); // Check for French 404 response await check404Response('Pas trouvé.'); }); + + test('it check translations of the slash menu when changing language', async ({ + page, + browserName, + }) => { + await createDoc(page, 'doc-toolbar', browserName, 1); + + const header = page.locator('header').first(); + const editor = page.locator('.ProseMirror'); + // Trigger slash menu to show english menu + await editor.click(); + await editor.fill('/'); + await expect(page.getByText('Headings', { exact: true })).toBeVisible(); + await header.click(); + await expect(page.getByText('Headings', { exact: true })).toBeHidden(); + + // Reset menu + await editor.click(); + await editor.fill(''); + + // Change language to French + await waitForLanguageSwitch(page, TestLanguage.French); + + // Trigger slash menu to show french menu + await editor.click(); + await editor.fill('/'); + await expect(page.getByText('Titres', { exact: true })).toBeVisible(); + await header.click(); + await expect(page.getByText('Titres', { exact: true })).toBeHidden(); + }); }); + +test.afterEach(async ({ page }) => { + // Switch back to English - important for other tests to run as expected + await waitForLanguageSwitch(page, TestLanguage.English); +}); + +// language helper +export const TestLanguage = { + English: { + label: 'English', + expectedLocale: ['en-us'], + }, + French: { + label: 'Français', + expectedLocale: ['fr-fr'], + }, +} as const; + +type TestLanguageKey = keyof typeof TestLanguage; +type TestLanguageValue = (typeof TestLanguage)[TestLanguageKey]; + +export async function waitForLanguageSwitch( + page: Page, + lang: TestLanguageValue, +) { + const header = page.locator('header').first(); + await header.getByRole('combobox').click(); + + const [response] = await Promise.all([ + page.waitForResponse( + (resp) => + resp.url().includes('/user') && resp.request().method() === 'PATCH', + ), + header.getByRole('option', { name: lang.label }).click(), + ]); + + const updatedUserResponse = await response.json(); + + expect(lang.expectedLocale).toContain(updatedUserResponse.language); +} diff --git a/src/frontend/apps/impress/src/core/AppProvider.tsx b/src/frontend/apps/impress/src/core/AppProvider.tsx index 39a2f9629..0c2f68848 100644 --- a/src/frontend/apps/impress/src/core/AppProvider.tsx +++ b/src/frontend/apps/impress/src/core/AppProvider.tsx @@ -3,7 +3,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { useEffect } from 'react'; import { useCunninghamTheme } from '@/cunningham'; -import '@/i18n/initI18n'; import { useResponsiveStore } from '@/stores/'; import { Auth } from './auth/'; diff --git a/src/frontend/apps/impress/src/core/auth/api/types.ts b/src/frontend/apps/impress/src/core/auth/api/types.ts index ef1893606..07097f550 100644 --- a/src/frontend/apps/impress/src/core/auth/api/types.ts +++ b/src/frontend/apps/impress/src/core/auth/api/types.ts @@ -4,10 +4,12 @@ * @property {string} id - The id of the user. * @property {string} email - The email of the user. * @property {string} name - The name of the user. + * @property {string} language - The language of the user. */ export interface User { id: string; email: string; full_name: string; short_name: string; + language: string; } diff --git a/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx b/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx index 570331107..705c805c6 100644 --- a/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx +++ b/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx @@ -3,12 +3,16 @@ import { PropsWithChildren, useEffect } from 'react'; import { Box } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; +import i18n from '@/i18n/initI18n'; import { configureCrispSession } from '@/services'; import { useSentryStore } from '@/stores/useSentryStore'; +import { useAuthStore } from '../auth'; + import { useConfig } from './api/useConfig'; export const ConfigProvider = ({ children }: PropsWithChildren) => { + const { userData } = useAuthStore(); const { data: conf } = useConfig(); const { setSentry } = useSentryStore(); const { setTheme } = useCunninghamTheme(); @@ -37,6 +41,23 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => { configureCrispSession(conf.CRISP_WEBSITE_ID); }, [conf?.CRISP_WEBSITE_ID]); + useEffect(() => { + if (!userData?.language || !conf?.LANGUAGES) { + return; + } + + conf.LANGUAGES.some(([available_lang]) => { + if ( + userData.language === available_lang && // language is expected by user + i18n.language !== available_lang // language not set as expected + ) { + void i18n.changeLanguage(available_lang); // change language to expected + return true; + } + return false; + }); + }, [conf?.LANGUAGES, userData?.language]); + if (!conf) { return ( diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index 8c04127b8..b03559fae 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx @@ -81,7 +81,7 @@ export const BlockNoteEditor = ({ useSaveDoc(doc.id, provider.document, !readOnly); const { setHeadings, resetHeadings } = useHeadingStore(); const { i18n } = useTranslation(); - const lang = i18n.language; + const lang = i18n.resolvedLanguage; const { uploadFile, errorAttachment } = useUploadFile(doc.id); diff --git a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx index 0953fae5b..47f5bf927 100644 --- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx +++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx @@ -1,10 +1,15 @@ -import { Select } from '@openfun/cunningham-react'; -import { useMemo } from 'react'; +import { + Select, + VariantType, + useToastProvider, +} from '@openfun/cunningham-react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; import { Box, Text } from '@/components/'; -import { LANGUAGES_ALLOWED } from '@/i18n/conf'; +import { useAuthStore, useConfig } from '@/core'; + +import { useChangeUserLanguage } from './api/useChangeUserLanguage'; const SelectStyled = styled(Select)<{ $isSmall?: boolean }>` flex-shrink: 0; @@ -33,29 +38,69 @@ const SelectStyled = styled(Select)<{ $isSmall?: boolean }>` export const LanguagePicker = () => { const { t, i18n } = useTranslation(); - const { preload: languages } = i18n.options; + const { toast } = useToastProvider(); + const { mutateAsync: changeUserLanguage } = useChangeUserLanguage(); + const { userData } = useAuthStore(); + const { data: conf } = useConfig(); + + // Early return if LANGUAGES is not available or empty + if (!conf?.LANGUAGES || conf.LANGUAGES.length === 0) { + return null; + } + + // Create options for the select component + const optionsPicker = conf.LANGUAGES.map(([locale, label]) => ({ + value: locale, + label: label, + render: () => ( + + + translate + + + {label} + + + ), + })); + + // Soft match locale + const getMatchingLocale = (): string => { + const availableLocales = conf.LANGUAGES.map(([locale]) => locale); + return ( + availableLocales.find( + (availableLocale) => + availableLocale === i18n.language || + availableLocale.startsWith(i18n.language.split('-')[0]), + ) || availableLocales[0] + ); + }; + + // Switch i18n.language and user.language via API + const switchLanguage = (targetLocale: string): void => { + const actions: Promise[] = [i18n.changeLanguage(targetLocale)]; + + if (userData?.id) { + actions.push( + changeUserLanguage({ + userId: userData.id, + language: targetLocale, + }), + ); + } - const optionsPicker = useMemo(() => { - return (languages || []).map((lang) => ({ - value: lang, - label: lang, - render: () => ( - - - translate - - - {LANGUAGES_ALLOWED[lang]} - - - ), - })); - }, [languages]); + void Promise.all(actions).catch((err) => { + console.error('Error changing language', err); + toast(t('Failed to change the language'), VariantType.ERROR, { + duration: 3000, + }); + }); + }; return ( { showLabelWhenSelected={false} clearable={false} hideLabel - defaultValue={i18n.language} + value={getMatchingLocale()} className="c_select__no_bg" options={optionsPicker} - onChange={(e) => { - i18n.changeLanguage(e.target.value as string).catch((err) => { - console.error('Error changing language', err); - }); - }} + onChange={(e) => switchLanguage(e.target.value as string)} /> ); }; diff --git a/src/frontend/apps/impress/src/features/language/api/useChangeUserLanguage.tsx b/src/frontend/apps/impress/src/features/language/api/useChangeUserLanguage.tsx new file mode 100644 index 000000000..0b1e960a7 --- /dev/null +++ b/src/frontend/apps/impress/src/features/language/api/useChangeUserLanguage.tsx @@ -0,0 +1,45 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; + +import { APIError, errorCauses, fetchAPI } from '@/api'; +import { User } from '@/core'; + +interface ChangeUserLanguageParams { + userId: User['id']; + language: User['language']; +} + +export const changeUserLanguage = async ({ + userId, + language, +}: ChangeUserLanguageParams): Promise => { + const response = await fetchAPI(`users/${userId}/`, { + method: 'PATCH', + body: JSON.stringify({ + language, + }), + }); + + if (!response.ok) { + throw new APIError( + `Failed to change the user language to ${language}`, + await errorCauses(response, { + value: language, + type: 'language', + }), + ); + } + + return response.json() as Promise; +}; + +export function useChangeUserLanguage() { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: changeUserLanguage, + onSuccess: () => { + void queryClient.invalidateQueries({ + queryKey: ['change-user-language'], + }); + }, + }); +} diff --git a/src/frontend/apps/impress/src/i18n/conf.ts b/src/frontend/apps/impress/src/i18n/conf.ts deleted file mode 100644 index dd42827c4..000000000 --- a/src/frontend/apps/impress/src/i18n/conf.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const LANGUAGES_ALLOWED: { [key: string]: string } = { - en: 'English', - fr: 'Français', - de: 'Deutsch', -}; -export const LANGUAGE_COOKIE_NAME = 'docs_language'; -export const BASE_LANGUAGE = 'en'; diff --git a/src/frontend/apps/impress/src/i18n/initI18n.ts b/src/frontend/apps/impress/src/i18n/initI18n.ts index cc98586b2..fe2d573c7 100644 --- a/src/frontend/apps/impress/src/i18n/initI18n.ts +++ b/src/frontend/apps/impress/src/i18n/initI18n.ts @@ -2,7 +2,6 @@ import i18n from 'i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import { initReactI18next } from 'react-i18next'; -import { BASE_LANGUAGE, LANGUAGES_ALLOWED, LANGUAGE_COOKIE_NAME } from './conf'; import resources from './translations.json'; i18n @@ -10,18 +9,20 @@ i18n .use(initReactI18next) .init({ resources, - fallbackLng: BASE_LANGUAGE, - supportedLngs: Object.keys(LANGUAGES_ALLOWED), detection: { order: ['cookie', 'navigator'], // detection order caches: ['cookie'], // Use cookies to store the language preference - lookupCookie: LANGUAGE_COOKIE_NAME, + lookupCookie: 'docs_language', cookieMinutes: 525600, // Expires after one year + cookieOptions: { + sameSite: 'lax', + }, }, interpolation: { escapeValue: false, }, - preload: Object.keys(LANGUAGES_ALLOWED), + preload: Object.keys(resources), + lowerCaseLng: true, nsSeparator: false, keySeparator: false, }) diff --git a/src/frontend/apps/impress/src/i18n/types.ts b/src/frontend/apps/impress/src/i18n/types.ts deleted file mode 100644 index ccedc350c..000000000 --- a/src/frontend/apps/impress/src/i18n/types.ts +++ /dev/null @@ -1,2 +0,0 @@ -// See: https://github.com/numerique-gouv/impress/blob/ac58341984c99c10ebfac7f8bbe1e8756c48e4d4/src/backend/impress/settings.py#L156-L161 -export type UserLanguage = 'en-us' | 'fr-fr';