✨(app-impress) add La Gaufre

Add La Gaufre.
It is a button to access easily to the
La Suite products.

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

@@ -35,5 +35,40 @@ test.describe('Header', () => {
         name: 'profile picture',
       }),
     ).toBeVisible();
+
+    await expect(
+      header.getByRole('button', {
+        name: 'Les services de La Suite numérique',
+      }),
+    ).toBeVisible();
+  });
+
+  test('checks La Gauffre interaction', async ({ page }) => {
+    const header = page.locator('header').first();
+
+    await expect(
+      header.getByRole('button', {
+        name: 'Les services de La Suite numérique',
+      }),
+    ).toBeVisible();
+
+    /**
+     * La gaufre load a js file from a remote server,
+     * it takes some time to load the file and have the interaction available
+     */
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(1500);
+
+    await header
+      .getByRole('button', {
+        name: 'Les services de La Suite numérique',
+      })
+      .click();
+
+    await expect(
+      page.getByRole('link', { name: 'France Transfert' }),
+    ).toBeVisible();
+
+    await expect(page.getByRole('link', { name: 'Grist' })).toBeVisible();
   });
 });

src/frontend/apps/impress/package.json

@@ -18,6 +18,7 @@
     "@blocknote/core": "0.13.2",
     "@blocknote/mantine": "0.13.2",
     "@blocknote/react": "0.13.2",
+    "@gouvfr-lasuite/integration": "0.1.3",
     "@openfun/cunningham-react": "2.9.0",
     "@tanstack/react-query": "5.36.0",
     "grapesjs-blocks-basic": "1.0.2",

src/frontend/apps/impress/src/features/header/ApplicationsMenu.tsx

@@ -1,34 +0,0 @@
-import Script from 'next/script';
-import React from 'react';
-
-/**
- * ApplicationsMenu Component
- *
- * This component is a work in progress (WIP) and serves as a proof of concept (POC) to showcase a future advanced feature.
- * The purpose of this component is to render an applications menu for La Suite, allowing users to switch between different La Suite apps seamlessly.
- * To ensure synchronized content across applications, it utilizes an iframe hosted on Scalingo.
- *
- * This PoC has been created by @manuhabitela.
- *
- * It includes external CSS and JavaScript files for styling and functionality.
- *
- * Style has to be included as well: https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/styles/gaufre-vanilla.css \
- * To respect next.js standards, the css is included using the `_document.ts` component.
- * @see https://github.com/numerique-gouv/impress/blob/main/src/frontend/apps/impress/src/pages/_document.tsx#L8
- */
-export const ApplicationsMenu = () => (
-  <>
-    <Script
-      src="https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/widget.js"
-      strategy="lazyOnload"
-    />
-    <button
-      style={{ marginLeft: '1.5rem', verticalAlign: 'center' }}
-      type="button"
-      className="lasuitenumerique-gaufre-btn lasuitenumerique-gaufre-btn--vanilla"
-      title="Les applications de La Suite numérique"
-    >
-      Les applications de La Suite numérique
-    </button>
-  </>
-);

src/frontend/apps/impress/src/features/header/Header.tsx

@@ -9,6 +9,7 @@ import { Box, StyledLink, Text } from '@/components/';
 
 import { LanguagePicker } from '../language/';
 
+import { LaGaufre } from './LaGaufre';
 import { default as IconImpress } from './assets/icon-impress.svg?url';
 import IconMyAccount from './assets/icon-my-account.png';
 
@@ -89,6 +90,7 @@ export const Header = () => {
                 src={IconMyAccount}
                 alt={t(`Profile picture`)}
               />
+              <LaGaufre />
             </Box>
           </Box>
         </Box>

src/frontend/apps/impress/src/features/header/LaGaufre.tsx

@@ -0,0 +1,15 @@
+import { Gaufre } from '@gouvfr-lasuite/integration';
+import '@gouvfr-lasuite/integration/dist/css/gaufre.css';
+import Script from 'next/script';
+import React from 'react';
+
+export const LaGaufre = () => (
+  <>
+    <Script
+      src="https://integration.lasuite.numerique.gouv.fr/api/v1/gaufre.js"
+      strategy="lazyOnload"
+      id="lasuite-gaufre-script"
+    />
+    <Gaufre />
+  </>
+);

src/frontend/apps/impress/src/pages/_document.tsx

@@ -2,12 +2,6 @@ import { Head, Html, Main, NextScript } from 'next/document';
 
 import '@/i18n/initI18n';
 
-/**
- * About the Gaufre Vanilla CSS
- * To respect next.js standards, the css is included here.
- * This css is used with features/header/ApplicationsMenu component.
- * If the ApplicationsMenu component is removed, this css can be removed as well.
- */
 export default function RootLayout() {
   return (
     <Html lang="en">