♻️(frontend) get theme from config endpoint

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.

Author: AntoLC

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}
 

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();
+  });
 });

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=

src/frontend/apps/impress/.env.test

@@ -1,2 +1 @@
 NEXT_PUBLIC_API_ORIGIN=http://test.jest
-NEXT_PUBLIC_THEME=test-theme

src/frontend/apps/impress/src/core/config/ConfigProvider.tsx

@@ -1,12 +1,16 @@
+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';
 
 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 (
+      <Box $height="100vh" $width="100vw" $align="center" $justify="center">
+        <Loader />
+      </Box>
+    );
+  }
+
   return children;
 };

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;

src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx

@@ -1,12 +1,6 @@
-import useCunninghamTheme from '../useCunninghamTheme';
+import { useCunninghamTheme } from '../useCunninghamTheme';
 
 describe('<useCunninghamTheme />', () => {
-  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');

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';

src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx

@@ -6,22 +6,25 @@ import { tokens } from './cunningham-tokens';
 type Tokens = typeof tokens.themes.default & Partial<typeof tokens.themes.dsfr>;
 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<Tokens['theme']>;
   colorsTokens: () => Partial<ColorsTokens>;
   componentTokens: () => ComponentTokens;
 }
 
-const useCunninghamTheme = create<AuthStore>((set, get) => {
+export const useCunninghamTheme = create<AuthStore>((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<AuthStore>((set, get) => {
     },
   };
 });
-
-export default useCunninghamTheme;

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;
   }
 }