studio/people
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(app-desk) adapt La Gaufre

Browse Source 
Adapt La Gaufre with the new configuration.
This commit is contained in:
Anthony LC
2024-05-13 16:19:48 +02:00
committed by Anthony LC
parent 76e9d58b6c
commit 46aaf7351d
7 changed files with 56 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/frontend/apps/desk/package.json
View File

@@ -15,6 +15,7 @@
"test:watch": "jest --watch" "test:watch": "jest --watch"
}, },
"dependencies": { "dependencies": {
"@gouvfr-lasuite/integration": "0.1.3",
"@openfun/cunningham-react": "2.9.0", "@openfun/cunningham-react": "2.9.0",
"@tanstack/react-query": "5.36.0", "@tanstack/react-query": "5.36.0",
"i18next": "23.11.4", "i18next": "23.11.4",

34
src/frontend/apps/desk/src/features/header/ApplicationsMenu.tsx
View File

@@ -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>
</>
);

4
src/frontend/apps/desk/src/features/header/Header.tsx
View File

@@ -5,7 +5,7 @@ import styled from 'styled-components';
import { Box, Text } from '@/components/'; import { Box, Text } from '@/components/';
import { AccountDropdown } from '@/features/header/AccountDropdown'; import { AccountDropdown } from '@/features/header/AccountDropdown';
import { ApplicationsMenu } from '@/features/header/ApplicationsMenu'; import { LaGaufre } from '@/features/header/LaGaufre';
import { LanguagePicker } from '../language/'; import { LanguagePicker } from '../language/';
@@ -65,7 +65,7 @@ export const Header = () => {
<Box $align="center" $gap="1rem" $justify="flex-end" $direction="row"> <Box $align="center" $gap="1rem" $justify="flex-end" $direction="row">
<AccountDropdown /> <AccountDropdown />
<LanguagePicker /> <LanguagePicker />
<ApplicationsMenu /> <LaGaufre />
</Box> </Box>
</Box> </Box>
</StyledHeader> </StyledHeader>

15
src/frontend/apps/desk/src/features/header/LaGaufre.tsx Normal file
View File

@@ -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 />
</>
);

13
src/frontend/apps/desk/src/pages/_document.tsx
View File

@@ -2,21 +2,10 @@ import { Head, Html, Main, NextScript } from 'next/document';
import '@/i18n/initI18n'; 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() { export default function RootLayout() {
return ( return (
<Html lang="en"> <Html lang="en">
<Head> <Head />
<link
rel="stylesheet"
href="https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/styles/gaufre-vanilla.css"
/>
</Head>
<body suppressHydrationWarning={process.env.NODE_ENV === 'development'}> <body suppressHydrationWarning={process.env.NODE_ENV === 'development'}>
<Main /> <Main />
<NextScript /> <NextScript />

33
src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
View File

@@ -28,7 +28,9 @@ test.describe('Header', () => {
); );
await expect( await expect(
header.getByText('Les applications de La Suite numérique'), header.getByRole('button', {
name: 'Les services de La Suite numérique',
}),
).toBeVisible(); ).toBeVisible();
await expect(header.getByAltText('Language Icon')).toBeVisible(); await expect(header.getByAltText('Language Icon')).toBeVisible();
@@ -52,4 +54,33 @@ test.describe('Header', () => {
await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible(); 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();
});
}); });

5
src/frontend/yarn.lock
View File

@@ -1398,6 +1398,11 @@
dependencies: dependencies:
tslib "^2.4.0" 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": "@humanwhocodes/config-array@^0.11.14":
version "0.11.14" version "0.11.14"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"