✨(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">

src/frontend/yarn.lock

@@ -1489,6 +1489,11 @@
   dependencies:
     tslib "^2.4.0"
 
+"@gouvfr-lasuite/integration@0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/integration/-/integration-0.1.3.tgz#cbf44473cd2a5b9497814faff459c3d88bc1ddce"
+  integrity sha512-WvAaMyEcNZkNX88Rbi6xo1rxFIGjsg3w8Gxi5NKVyNY0Ph2dXcGkP63ybCKD8JAsWHfxwAvs82wqXFZk5RCJ1g==
+
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -3717,7 +3722,7 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
   integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
 
-"@types/node@*":
+"@types/node@*", "@types/node@20.12.11":
   version "20.12.11"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.11.tgz#c4ef00d3507000d17690643278a60dc55a9dc9be"
   integrity sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==
@@ -3744,7 +3749,7 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
   integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
 
-"@types/react-dom@*", "@types/react-dom@^18.0.0":
+"@types/react-dom@*", "@types/react-dom@18.3.0", "@types/react-dom@^18.0.0":
   version "18.3.0"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
   integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
@@ -10721,7 +10726,7 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typescript@*, typescript@^5.0.4:
+typescript@*, typescript@5.4.5, typescript@^5.0.4:
   version "5.4.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
   integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==