From 6252227bb6a3515aeb63c18d5995efe75dcdf989 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 15 Nov 2024 15:07:10 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20get=20theme=20fr?= =?UTF-8?q?om=20config=20endpoint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We centralized the configuration on the backend side, it is easier to manage and we can change the configuration without having to rebuild the frontend. We now use the config endpoint to get the theme, we refacto to remove the frontend env occurences and to adapt with the new way to get the theme. --- src/frontend/Dockerfile | 3 --- .../e2e/__tests__/app-impress/config.spec.ts | 21 +++++++++++++++++++ src/frontend/apps/impress/.env | 1 - src/frontend/apps/impress/.env.test | 1 - .../src/core/config/ConfigProvider.tsx | 20 ++++++++++++++++++ .../impress/src/core/config/api/useConfig.tsx | 3 ++- .../__tests__/useCunninghamTheme.spec.tsx | 8 +------ .../apps/impress/src/cunningham/index.ts | 6 ++---- .../src/cunningham/useCunninghamTheme.tsx | 15 ++++++------- .../apps/impress/src/custom-next.d.ts | 1 - .../components/ModalRemoveDoc.tsx | 2 +- 11 files changed, 55 insertions(+), 26 deletions(-) diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile index de9611853..c10ce2314 100644 --- a/src/frontend/Dockerfile +++ b/src/frontend/Dockerfile @@ -61,9 +61,6 @@ FROM impress AS impress-builder WORKDIR /home/frontend/apps/impress -ARG FRONTEND_THEME -ENV NEXT_PUBLIC_THEME=${FRONTEND_THEME} - ARG Y_PROVIDER_URL ENV NEXT_PUBLIC_Y_PROVIDER_URL=${Y_PROVIDER_URL} diff --git a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts index 3a6f8c94b..c0a2c4c46 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts @@ -56,4 +56,25 @@ test.describe('Config', () => { expect((await consoleMessage).text()).toContain(invalidMsg); }); + + test('it checks that theme is configured from config endpoint', async ({ + page, + }) => { + const responsePromise = page.waitForResponse( + (response) => + response.url().includes('/config/') && response.status() === 200, + ); + + await page.goto('/'); + + const response = await responsePromise; + expect(response.ok()).toBeTruthy(); + + const jsonResponse = await response.json(); + expect(jsonResponse.FRONTEND_THEME).toStrictEqual('dsfr'); + + const footer = page.locator('footer').first(); + // alt 'Gouvernement Logo' comes from the theme + await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible(); + }); }); diff --git a/src/frontend/apps/impress/.env b/src/frontend/apps/impress/.env index 393b6b3cd..051e45951 100644 --- a/src/frontend/apps/impress/.env +++ b/src/frontend/apps/impress/.env @@ -1,5 +1,4 @@ NEXT_PUBLIC_API_ORIGIN= NEXT_PUBLIC_Y_PROVIDER_URL= NEXT_PUBLIC_MEDIA_URL= -NEXT_PUBLIC_THEME=dsfr NEXT_PUBLIC_SW_DEACTIVATED= diff --git a/src/frontend/apps/impress/.env.test b/src/frontend/apps/impress/.env.test index 6d5094f8c..9a4d51422 100644 --- a/src/frontend/apps/impress/.env.test +++ b/src/frontend/apps/impress/.env.test @@ -1,2 +1 @@ NEXT_PUBLIC_API_ORIGIN=http://test.jest -NEXT_PUBLIC_THEME=test-theme diff --git a/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx b/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx index faa46de29..217866e9e 100644 --- a/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx +++ b/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx @@ -1,5 +1,8 @@ +import { Loader } from '@openfun/cunningham-react'; import { PropsWithChildren, useEffect } from 'react'; +import { Box } from '@/components'; +import { useCunninghamTheme } from '@/cunningham'; import { useSentryStore } from '@/stores/useSentryStore'; import { useConfig } from './api/useConfig'; @@ -7,6 +10,7 @@ import { useConfig } from './api/useConfig'; export const ConfigProvider = ({ children }: PropsWithChildren) => { const { data: conf } = useConfig(); const { setSentry } = useSentryStore(); + const { setTheme } = useCunninghamTheme(); useEffect(() => { if (!conf?.SENTRY_DSN) { @@ -16,5 +20,21 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => { setSentry(conf.SENTRY_DSN, conf.ENVIRONMENT); }, [conf?.SENTRY_DSN, conf?.ENVIRONMENT, setSentry]); + useEffect(() => { + if (!conf?.FRONTEND_THEME) { + return; + } + + setTheme(conf.FRONTEND_THEME); + }, [conf?.FRONTEND_THEME, setTheme]); + + if (!conf) { + return ( + + + + ); + } + return children; }; diff --git a/src/frontend/apps/impress/src/core/config/api/useConfig.tsx b/src/frontend/apps/impress/src/core/config/api/useConfig.tsx index f4b4ef7ad..8717c56b6 100644 --- a/src/frontend/apps/impress/src/core/config/api/useConfig.tsx +++ b/src/frontend/apps/impress/src/core/config/api/useConfig.tsx @@ -1,12 +1,13 @@ import { useQuery } from '@tanstack/react-query'; import { APIError, errorCauses, fetchAPI } from '@/api'; +import { Theme } from '@/cunningham/'; interface ConfigResponse { SENTRY_DSN: string; COLLABORATION_SERVER_URL: string; ENVIRONMENT: string; - FRONTEND_THEME: string; + FRONTEND_THEME: Theme; LANGUAGES: [string, string][]; LANGUAGE_CODE: string; MEDIA_BASE_URL: string; diff --git a/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx b/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx index f6a32fff9..69f1dff23 100644 --- a/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx +++ b/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx @@ -1,12 +1,6 @@ -import useCunninghamTheme from '../useCunninghamTheme'; +import { useCunninghamTheme } from '../useCunninghamTheme'; describe('', () => { - it('has the theme from NEXT_PUBLIC_THEME', () => { - const { theme } = useCunninghamTheme.getState(); - - expect(theme).toBe('test-theme'); - }); - it('has the dsfr logo correctly set', () => { const { themeTokens, setTheme } = useCunninghamTheme.getState(); setTheme('dsfr'); diff --git a/src/frontend/apps/impress/src/cunningham/index.ts b/src/frontend/apps/impress/src/cunningham/index.ts index e955768b2..1e5bd52d5 100644 --- a/src/frontend/apps/impress/src/cunningham/index.ts +++ b/src/frontend/apps/impress/src/cunningham/index.ts @@ -1,4 +1,2 @@ -import { tokens } from './cunningham-tokens'; -import useCunninghamTheme from './useCunninghamTheme'; - -export { tokens, useCunninghamTheme }; +export * from './cunningham-tokens'; +export * from './useCunninghamTheme'; diff --git a/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx b/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx index a951a8303..26ea59756 100644 --- a/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx +++ b/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx @@ -6,22 +6,25 @@ import { tokens } from './cunningham-tokens'; type Tokens = typeof tokens.themes.default & Partial; type ColorsTokens = Tokens['theme']['colors']; type ComponentTokens = Tokens['components']; -type Theme = 'default' | 'dsfr'; +export type Theme = keyof typeof tokens.themes; interface AuthStore { - theme: Theme; + theme: string; setTheme: (theme: Theme) => void; themeTokens: () => Partial; colorsTokens: () => Partial; componentTokens: () => ComponentTokens; } -const useCunninghamTheme = create((set, get) => { +export const useCunninghamTheme = create((set, get) => { const currentTheme = () => - merge(tokens.themes['default'], tokens.themes[get().theme]) as Tokens; + merge( + tokens.themes['default'], + tokens.themes[get().theme as keyof typeof tokens.themes], + ) as Tokens; return { - theme: (process.env.NEXT_PUBLIC_THEME as Theme) || 'dsfr', + theme: 'dsfr', themeTokens: () => currentTheme().theme, colorsTokens: () => currentTheme().theme.colors, componentTokens: () => currentTheme().components, @@ -30,5 +33,3 @@ const useCunninghamTheme = create((set, get) => { }, }; }); - -export default useCunninghamTheme; diff --git a/src/frontend/apps/impress/src/custom-next.d.ts b/src/frontend/apps/impress/src/custom-next.d.ts index ff3906c6f..ec8d7d069 100644 --- a/src/frontend/apps/impress/src/custom-next.d.ts +++ b/src/frontend/apps/impress/src/custom-next.d.ts @@ -23,6 +23,5 @@ namespace NodeJS { NEXT_PUBLIC_MEDIA_URL?: string; NEXT_PUBLIC_Y_PROVIDER_URL?: string; NEXT_PUBLIC_SW_DEACTIVATED?: string; - NEXT_PUBLIC_THEME?: string; } } diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx index f2600b3c5..6b341b70b 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx @@ -10,7 +10,7 @@ import { t } from 'i18next'; import { useRouter } from 'next/router'; import { Box, Text, TextErrors } from '@/components'; -import useCunninghamTheme from '@/cunningham/useCunninghamTheme'; +import { useCunninghamTheme } from '@/cunningham/'; import { useRemoveDoc } from '../api/useRemoveDoc'; import IconDoc from '../assets/icon-doc.svg';