From d9bad8c2f8500e4aa0cfe6b81998024c412f0e51 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 | 1 + 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 | 89 +++++++++++++++++-- .../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 | 83 +++++++++++------ .../language/api/useChangeUserLanguage.tsx | 45 ++++++++++ .../src/features/service-worker/ApiPlugin.ts | 1 + src/frontend/apps/impress/src/i18n/conf.ts | 8 +- .../apps/impress/src/i18n/initI18n.ts | 10 ++- src/frontend/apps/impress/src/i18n/types.ts | 2 - 17 files changed, 225 insertions(+), 143 deletions(-) create mode 100644 src/frontend/apps/impress/src/features/language/api/useChangeUserLanguage.tsx delete mode 100644 src/frontend/apps/impress/src/i18n/types.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index a6b92b82a..4b8b08aa6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ and this project adheres to - 🚸(backend) improve users similarity search and sort results #391 - ♻️(frontend) simplify stores #402 - ✨(frontend) update $css Box props type to add styled components RuleSet #423 +- ✨(frontend) sync user and frontend language #401 ## Fixed diff --git a/src/backend/core/api/serializers.py b/src/backend/core/api/serializers.py index 2947e3b8f..8967b6e27 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 49cde524b..02d34f8d5 100644 --- a/src/backend/demo/management/commands/create_demo.py +++ b/src/backend/demo/management/commands/create_demo.py @@ -172,7 +172,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..41a8233a3 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 { 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,80 @@ 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(), + ]); + + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + 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 217866e9e..c160f1bc7 100644 --- a/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx +++ b/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx @@ -3,11 +3,15 @@ import { PropsWithChildren, useEffect } from 'react'; import { Box } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; +import i18n from '@/i18n/initI18n'; 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(); @@ -28,6 +32,23 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => { setTheme(conf.FRONTEND_THEME); }, [conf?.FRONTEND_THEME, setTheme]); + 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 cbca2d9e2..41951b8d7 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 @@ -103,7 +103,7 @@ export const BlockNoteEditor = ({ } = useCreateDocAttachment(); const { setHeadings, resetHeadings } = useHeadingStore(); const { i18n } = useTranslation(); - const lang = i18n.language; + const lang = i18n.resolvedLanguage; const uploadFile = useCallback( async (file: File) => { diff --git a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx index 0953fae5b..e8b82d7ce 100644 --- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx +++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx @@ -1,10 +1,16 @@ -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 } from '@/core'; +import { BASE_LANGUAGE, LANGUAGES_ALLOWED } from '@/i18n/conf'; + +import { useChangeUserLanguage } from './api/useChangeUserLanguage'; const SelectStyled = styled(Select)<{ $isSmall?: boolean }>` flex-shrink: 0; @@ -33,29 +39,29 @@ 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 optionsPicker = useMemo(() => { - return (languages || []).map((lang) => ({ - value: lang, - label: lang, - render: () => ( - - - translate - - - {LANGUAGES_ALLOWED[lang]} - - - ), - })); - }, [languages]); + const optionsPicker = Object.keys(LANGUAGES_ALLOWED).map((lang) => ({ + value: lang, + label: lang, + render: () => ( + + + translate + + + {LANGUAGES_ALLOWED[lang]} + + + ), + })); return ( { showLabelWhenSelected={false} clearable={false} hideLabel - defaultValue={i18n.language} + value={ + Object.keys(LANGUAGES_ALLOWED).find( + (key) => + key === i18n.language || + key.startsWith(i18n.language.split('-')[0]), + ) ?? BASE_LANGUAGE + } className="c_select__no_bg" options={optionsPicker} onChange={(e) => { - i18n.changeLanguage(e.target.value as string).catch((err) => { - console.error('Error changing language', err); - }); + void i18n + .changeLanguage(e.target.value as string) + .then(() => { + if (userData?.id) { + return changeUserLanguage({ + userId: userData.id, + language: i18n.language, + }); + } + }) + .catch((err) => { + console.error('Error changing language', err); + toast(t('Failed to change the language'), VariantType.ERROR, { + duration: 3000, + }); + }); }} /> ); 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/features/service-worker/ApiPlugin.ts b/src/frontend/apps/impress/src/features/service-worker/ApiPlugin.ts index 5e13d7430..98fef92be 100644 --- a/src/frontend/apps/impress/src/features/service-worker/ApiPlugin.ts +++ b/src/frontend/apps/impress/src/features/service-worker/ApiPlugin.ts @@ -216,6 +216,7 @@ export class ApiPlugin implements WorkboxPlugin { email: 'dummy-email', full_name: 'dummy-full-name', short_name: 'dummy-short-name', + language: 'en-us', }, abilities: { destroy: false, diff --git a/src/frontend/apps/impress/src/i18n/conf.ts b/src/frontend/apps/impress/src/i18n/conf.ts index dd42827c4..73bd38d2b 100644 --- a/src/frontend/apps/impress/src/i18n/conf.ts +++ b/src/frontend/apps/impress/src/i18n/conf.ts @@ -1,7 +1,7 @@ export const LANGUAGES_ALLOWED: { [key: string]: string } = { - en: 'English', - fr: 'Français', - de: 'Deutsch', + 'en-us': 'English', + 'fr-fr': 'Français', + 'de-de': 'Deutsch', }; export const LANGUAGE_COOKIE_NAME = 'docs_language'; -export const BASE_LANGUAGE = 'en'; +export const BASE_LANGUAGE = Object.keys(LANGUAGES_ALLOWED)[0]; diff --git a/src/frontend/apps/impress/src/i18n/initI18n.ts b/src/frontend/apps/impress/src/i18n/initI18n.ts index cc98586b2..fd2d155e2 100644 --- a/src/frontend/apps/impress/src/i18n/initI18n.ts +++ b/src/frontend/apps/impress/src/i18n/initI18n.ts @@ -2,7 +2,7 @@ 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 { LANGUAGE_COOKIE_NAME } from './conf'; import resources from './translations.json'; i18n @@ -10,18 +10,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, 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';