✨(frontend) create generic theme

By default Docs will not be on the dsfr theme but
on the generic theme. La Gaufre is part of the dsfr
theme and is removed from the generic theme.
Same for the "beta" keyword and the "proconnect"
buttons.

Author: AntoLC

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to
 - ✨(backend) integrate maleware_detection from django-lasuite #936
 - 🏗️(frontend) Footer configurable #959
 - 🩺(CI) add lint spell mistakes #954
+- ✨(frontend) create generic theme #792
 - 🛂(frontend) block edition to not connected users #945
 - 🚸 Let loader during upload analyze #984
 

env.d/development/common.dist

@@ -61,6 +61,3 @@ COLLABORATION_BACKEND_BASE_URL=http://app-dev:8000
 COLLABORATION_SERVER_ORIGIN=http://localhost:3000
 COLLABORATION_SERVER_SECRET=my-secret
 COLLABORATION_WS_URL=ws://localhost:4444/collaboration/ws/
-
-# Frontend
-FRONTEND_THEME=default

src/frontend/apps/e2e/__tests__/app-impress/404.spec.ts

@@ -10,8 +10,6 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('404', () => {
   test('Checks all the elements are visible', async ({ page }) => {
-    await expect(page.getByLabel('Image 404')).toBeVisible();
-    await expect(page.getByText('Ouch')).toBeVisible();
     await expect(
       page.getByText(
         'It seems that the page you are looking for does not exist or cannot be displayed correctly.',

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -7,7 +7,7 @@ export const CONFIG = {
   ENVIRONMENT: 'development',
   FRONTEND_CSS_URL: null,
   FRONTEND_HOMEPAGE_FEATURE_ENABLED: true,
-  FRONTEND_THEME: 'default',
+  FRONTEND_THEME: null,
   MEDIA_BASE_URL: 'http://localhost:8083',
   LANGUAGES: [
     ['en-us', 'English'],
@@ -20,7 +20,7 @@ export const CONFIG = {
   POSTHOG_KEY: {},
   SENTRY_DSN: null,
   theme_customization: {},
-};
+} as const;
 
 export const overrideConfig = async (
   page: Page,
@@ -46,10 +46,7 @@ export const keyCloakSignIn = async (
   fromHome: boolean = true,
 ) => {
   if (fromHome) {
-    await page
-      .getByRole('button', { name: 'Proconnect Login' })
-      .first()
-      .click();
+    await page.getByRole('button', { name: 'Start Writing' }).first().click();
   }
 
   const login = `user-e2e-${browserName}`;
@@ -109,9 +106,16 @@ export const createDoc = async (
 };
 
 export const verifyDocName = async (page: Page, docName: string) => {
-  const input = page.getByRole('textbox', { name: 'doc title input' });
+  await expect(
+    page.getByLabel('It is the card information about the document.'),
+  ).toBeVisible({
+    timeout: 10000,
+  });
+
   try {
-    await expect(input).toHaveText(docName);
+    await expect(
+      page.getByRole('textbox', { name: 'doc title input' }),
+    ).toHaveText(docName);
   } catch {
     await expect(page.getByRole('heading', { name: docName })).toBeVisible();
   }

src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts

@@ -5,25 +5,6 @@ import { expect, test } from '@playwright/test';
 import { CONFIG, createDoc, overrideConfig } from './common';
 
 test.describe('Config', () => {
-  test('it checks the config api is called', 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 json = (await response.json()) as typeof CONFIG;
-    const { theme_customization, ...configApi } = json;
-    expect(theme_customization).toBeDefined();
-    const { theme_customization: _, ...CONFIG_LEFT } = CONFIG;
-
-    expect(configApi).toStrictEqual(CONFIG_LEFT);
-  });
-
   test('it checks that sentry is trying to init from config endpoint', async ({
     page,
   }) => {
@@ -143,9 +124,7 @@ test.describe('Config', () => {
 test.describe('Config: Not loggued', () => {
   test.use({ storageState: { cookies: [], origins: [] } });
 
-  test('it checks that theme is configured from config endpoint', async ({
-    page,
-  }) => {
+  test('it checks the config api is called', async ({ page }) => {
     const responsePromise = page.waitForResponse(
       (response) =>
         response.url().includes('/config/') && response.status() === 200,
@@ -156,8 +135,22 @@ test.describe('Config: Not loggued', () => {
     const response = await responsePromise;
     expect(response.ok()).toBeTruthy();
 
-    const jsonResponse = await response.json();
-    expect(jsonResponse.FRONTEND_THEME).toStrictEqual('default');
+    const json = (await response.json()) as typeof CONFIG;
+    const { theme_customization, ...configApi } = json;
+    expect(theme_customization).toBeDefined();
+    const { theme_customization: _, ...CONFIG_LEFT } = CONFIG;
+
+    expect(configApi).toStrictEqual(CONFIG_LEFT);
+  });
+
+  test('it checks that theme is configured from config endpoint', async ({
+    page,
+  }) => {
+    await overrideConfig(page, {
+      FRONTEND_THEME: 'dsfr',
+    });
+
+    await page.goto('/');
 
     const header = page.locator('header').first();
     // alt 'Gouvernement Logo' comes from the theme

src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts

@@ -208,7 +208,6 @@ test.describe('Documents filters', () => {
 
     // Initial state
     await expect(allDocs).toBeVisible();
-    await expect(allDocs).toHaveCSS('background-color', 'rgb(238, 238, 238)');
     await expect(allDocs).toHaveAttribute('aria-selected', 'true');
 
     await expect(myDocs).toBeVisible();

src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts

@@ -101,6 +101,8 @@ test.describe('Doc Visibility: Restricted', () => {
     page,
     browserName,
   }) => {
+    test.slow();
+
     await page.goto('/');
     await keyCloakSignIn(page, browserName);
 
@@ -121,14 +123,16 @@ test.describe('Doc Visibility: Restricted', () => {
     await keyCloakSignIn(page, otherBrowser!);
 
     await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs BETA' }),
+      page.getByRole('link', { name: 'Docs Logo Docs' }),
     ).toBeVisible();
 
     await page.goto(urlDoc);
 
     await expect(
       page.getByText('You do not have permission to view this document.'),
-    ).toBeVisible();
+    ).toBeVisible({
+      timeout: 10000,
+    });
   });
 
   test('A doc is accessible when member.', async ({ page, browserName }) => {
@@ -173,7 +177,7 @@ test.describe('Doc Visibility: Restricted', () => {
     await keyCloakSignIn(page, otherBrowser!);
 
     await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs BETA' }),
+      page.getByRole('link', { name: 'Docs Logo Docs' }),
     ).toBeVisible();
 
     await page.goto(urlDoc);
@@ -430,7 +434,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     await keyCloakSignIn(page, otherBrowser!);
 
     await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs BETA' }),
+      page.getByRole('link', { name: 'Docs Logo Docs' }),
     ).toBeVisible();
 
     await page.goto(urlDoc);
@@ -490,7 +494,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     await keyCloakSignIn(page, otherBrowser!);
 
     await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs BETA' }),
+      page.getByRole('link', { name: 'Docs Logo Docs' }),
     ).toBeVisible();
 
     await page.goto(urlDoc);

src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts

@@ -20,7 +20,6 @@ test.describe('Footer', () => {
 
     await expect(footer.getByAltText('Docs Logo')).toBeVisible();
     await expect(footer.getByRole('heading', { name: 'Docs' })).toBeVisible();
-    await expect(footer.getByText('BETA')).toBeVisible();
 
     await expect(footer.getByRole('link', { name: 'Github' })).toBeVisible();
     await expect(footer.getByRole('link', { name: 'DINUM' })).toBeVisible();
@@ -57,6 +56,7 @@ test.describe('Footer', () => {
 
   test('checks the footer is correctly overrided', async ({ page }) => {
     await overrideConfig(page, {
+      FRONTEND_THEME: 'dsfr',
       theme_customization: {
         footer: {
           default: {

src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts

@@ -1,20 +1,39 @@
 import { expect, test } from '@playwright/test';
 
-import { expectLoginPage, keyCloakSignIn } from './common';
+import { expectLoginPage, keyCloakSignIn, overrideConfig } from './common';
 
 test.describe('Header', () => {
-  test.beforeEach(async ({ page }) => {
+  test('checks all the elements are visible', async ({ page }) => {
     await page.goto('/');
-  });
 
-  test('checks all the elements are visible', async ({ page }) => {
     const header = page.locator('header').first();
 
     await expect(header.getByLabel('Docs Logo')).toBeVisible();
     await expect(header.locator('h2').getByText('Docs')).toHaveCSS(
-      'color',
-      'rgb(0, 0, 145)',
+      'font-family',
+      /Roboto/i,
     );
+
+    await expect(
+      header.getByRole('button', {
+        name: 'Logout',
+      }),
+    ).toBeVisible();
+
+    await expect(header.getByText('English')).toBeVisible();
+  });
+
+  test('checks all the elements are visible with DSFR theme', async ({
+    page,
+  }) => {
+    await overrideConfig(page, {
+      FRONTEND_THEME: 'dsfr',
+    });
+    await page.goto('/');
+
+    const header = page.locator('header').first();
+
+    await expect(header.getByLabel('Docs Logo')).toBeVisible();
     await expect(header.locator('h2').getByText('Docs')).toHaveCSS(
       'font-family',
       /Marianne/i,
@@ -36,6 +55,11 @@ test.describe('Header', () => {
   });
 
   test('checks La Gauffre interaction', async ({ page }) => {
+    await overrideConfig(page, {
+      FRONTEND_THEME: 'dsfr',
+    });
+    await page.goto('/');
+
     const header = page.locator('header').first();
 
     await expect(
@@ -68,11 +92,13 @@ test.describe('Header', () => {
 test.describe('Header mobile', () => {
   test.use({ viewport: { width: 500, height: 1200 } });
 
-  test.beforeEach(async ({ page }) => {
+  test('it checks the header when mobile with DSFR theme', async ({ page }) => {
+    await overrideConfig(page, {
+      FRONTEND_THEME: 'dsfr',
+    });
+
     await page.goto('/');
-  });
 
-  test('it checks the header when mobile', async ({ page }) => {
     const header = page.locator('header').first();
 
     await expect(header.getByLabel('Open the header menu')).toBeVisible();

src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts

@@ -9,6 +9,62 @@ test.beforeEach(async ({ page }) => {
 test.describe('Home page', () => {
   test.use({ storageState: { cookies: [], origins: [] } });
   test('checks all the elements are visible', async ({ page }) => {
+    await page.goto('/docs/');
+
+    // Check header content
+    const header = page.locator('header').first();
+    const footer = page.locator('footer').first();
+    await expect(header).toBeVisible();
+    await expect(
+      header.getByRole('button', { name: /Language/ }),
+    ).toBeVisible();
+    await expect(header.getByRole('img', { name: 'Docs logo' })).toBeVisible();
+    await expect(header.getByRole('heading', { name: 'Docs' })).toBeVisible();
+
+    // Check the titles
+    const h2 = page.locator('h2');
+    await expect(h2.getByText('Govs ❤️ Open Source.')).toBeVisible();
+    await expect(
+      h2.getByText('Collaborative writing, Simplified.'),
+    ).toBeVisible();
+    await expect(
+      h2.getByText('An uncompromising writing experience.'),
+    ).toBeVisible();
+    await expect(
+      h2.getByText('Simple and secure collaboration.'),
+    ).toBeVisible();
+    await expect(h2.getByText('Flexible export.')).toBeVisible();
+    await expect(
+      h2.getByText('A new way to organize knowledge.'),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Start Writing' }),
+    ).toBeVisible();
+
+    await expect(footer).toBeVisible();
+  });
+
+  test('checks all the elements are visible with dsfr theme', async ({
+    page,
+  }) => {
+    await overrideConfig(page, {
+      FRONTEND_THEME: 'dsfr',
+      theme_customization: {
+        footer: {
+          default: {
+            externalLinks: [
+              {
+                label: 'legifrance.gouv.fr',
+                href: '#',
+              },
+            ],
+          },
+        },
+      },
+    });
+
+    await page.goto('/docs/');
+
     // Check header content
     const header = page.locator('header').first();
     const footer = page.locator('footer').first();