From 46aaf7351d37b31f47ee7dbf3765bdf2e8b9bcb1 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 13 May 2024 16:19:48 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(app-desk)=20adapt=20La=20Gau?=
 =?UTF-8?q?fre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adapt La Gaufre with the new configuration.
---
 src/frontend/apps/desk/package.json           |  1 +
 .../src/features/header/ApplicationsMenu.tsx  | 34 -------------------
 .../apps/desk/src/features/header/Header.tsx  |  4 +--
 .../desk/src/features/header/LaGaufre.tsx     | 15 ++++++++
 .../apps/desk/src/pages/_document.tsx         | 13 +------
 .../e2e/__tests__/app-desk/header.spec.ts     | 33 +++++++++++++++++-
 src/frontend/yarn.lock                        |  5 +++
 7 files changed, 56 insertions(+), 49 deletions(-)
 delete mode 100644 src/frontend/apps/desk/src/features/header/ApplicationsMenu.tsx
 create mode 100644 src/frontend/apps/desk/src/features/header/LaGaufre.tsx

diff --git a/src/frontend/apps/desk/package.json b/src/frontend/apps/desk/package.json
index 0ccba3b..bf0a02a 100644
--- a/src/frontend/apps/desk/package.json
+++ b/src/frontend/apps/desk/package.json
@@ -15,6 +15,7 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@gouvfr-lasuite/integration": "0.1.3",
     "@openfun/cunningham-react": "2.9.0",
     "@tanstack/react-query": "5.36.0",
     "i18next": "23.11.4",
diff --git a/src/frontend/apps/desk/src/features/header/ApplicationsMenu.tsx b/src/frontend/apps/desk/src/features/header/ApplicationsMenu.tsx
deleted file mode 100644
index b8a64fa..0000000
--- a/src/frontend/apps/desk/src/features/header/ApplicationsMenu.tsx
+++ /dev/null
@@ -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/people/blob/main/src/frontend/apps/desk/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>
-  </>
-);
diff --git a/src/frontend/apps/desk/src/features/header/Header.tsx b/src/frontend/apps/desk/src/features/header/Header.tsx
index b73809a..64d9c76 100644
--- a/src/frontend/apps/desk/src/features/header/Header.tsx
+++ b/src/frontend/apps/desk/src/features/header/Header.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { Box, Text } from '@/components/';
 import { AccountDropdown } from '@/features/header/AccountDropdown';
-import { ApplicationsMenu } from '@/features/header/ApplicationsMenu';
+import { LaGaufre } from '@/features/header/LaGaufre';
 
 import { LanguagePicker } from '../language/';
 
@@ -65,7 +65,7 @@ export const Header = () => {
         <Box $align="center" $gap="1rem" $justify="flex-end" $direction="row">
           <AccountDropdown />
           <LanguagePicker />
-          <ApplicationsMenu />
+          <LaGaufre />
         </Box>
       </Box>
     </StyledHeader>
diff --git a/src/frontend/apps/desk/src/features/header/LaGaufre.tsx b/src/frontend/apps/desk/src/features/header/LaGaufre.tsx
new file mode 100644
index 0000000..58dbdef
--- /dev/null
+++ b/src/frontend/apps/desk/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 />
+  </>
+);
diff --git a/src/frontend/apps/desk/src/pages/_document.tsx b/src/frontend/apps/desk/src/pages/_document.tsx
index 9ab19cf..282e0d3 100644
--- a/src/frontend/apps/desk/src/pages/_document.tsx
+++ b/src/frontend/apps/desk/src/pages/_document.tsx
@@ -2,21 +2,10 @@ 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">
-      <Head>
-        <link
-          rel="stylesheet"
-          href="https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/styles/gaufre-vanilla.css"
-        />
-      </Head>
+      <Head />
       <body suppressHydrationWarning={process.env.NODE_ENV === 'development'}>
         <Main />
         <NextScript />
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
index 8d94763..c6b5dfd 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
@@ -28,7 +28,9 @@ test.describe('Header', () => {
     );
 
     await expect(
-      header.getByText('Les applications de La Suite numérique'),
+      header.getByRole('button', {
+        name: 'Les services de La Suite numérique',
+      }),
     ).toBeVisible();
 
     await expect(header.getByAltText('Language Icon')).toBeVisible();
@@ -52,4 +54,33 @@ test.describe('Header', () => {
 
     await expect(page.getByRole('button', { name: 'Sign in' })).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();
+  });
 });
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index 65ad31e..8a621ed 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -1398,6 +1398,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"