diff --git a/src/frontend/apps/desk/.eslintrc.js b/src/frontend/apps/desk/.eslintrc.js
index 0b947d5..d73f29c 100644
--- a/src/frontend/apps/desk/.eslintrc.js
+++ b/src/frontend/apps/desk/.eslintrc.js
@@ -16,6 +16,7 @@ module.exports = {
},
rules: {
'block-scoped-var': 'error',
+ curly: ['error', 'all'],
'import/no-duplicates': ['error', { considerQueryString: false }],
'import/order': [
'error',
@@ -48,6 +49,10 @@ module.exports = {
],
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'error',
+ 'react/jsx-curly-brace-presence': [
+ 'error',
+ { props: 'never', children: 'never', propElementValues: 'always' },
+ ],
'sort-imports': [
'error',
{
diff --git a/src/frontend/apps/desk/src/app/Header/Header.tsx b/src/frontend/apps/desk/src/app/Header/Header.tsx
new file mode 100644
index 0000000..a049632
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/Header/Header.tsx
@@ -0,0 +1,82 @@
+import { Button } from '@openfun/cunningham-react';
+import Image from 'next/image';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Box, Text } from '@/components/';
+
+import { default as IconCells } from './assets/icon-cells.svg';
+import { default as IconDesk } from './assets/icon-desk.svg';
+import { default as IconFAQ } from './assets/icon-faq.svg';
+import { default as IconGouv } from './assets/icon-gouv.svg';
+import { default as IconMarianne } from './assets/icon-marianne.svg';
+
+const RedStripe = styled.div`
+ position: absolute;
+ height: 5px;
+ width: 100%;
+ background: var(--c--theme--colors--danger-500);
+ top: 0;
+`;
+
+const Header = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ Desk
+
+
+
+
+ button {
+ padding: 0;
+ }
+ `}
+ $gap="5rem"
+ $justify="flex-end"
+ >
+
+ }
+ className="m-s c__button-no-bg p-0"
+ >
+ FAQ
+
+
+ }
+ color="tertiary"
+ className="c__button-no-bg p-0 m-0"
+ />
+
+
+
+ );
+};
+
+export default Header;
diff --git a/src/frontend/apps/desk/src/app/Header/assets/icon-cells.svg b/src/frontend/apps/desk/src/app/Header/assets/icon-cells.svg
new file mode 100644
index 0000000..64358cd
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/Header/assets/icon-cells.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/frontend/apps/desk/src/app/Header/assets/icon-desk.svg b/src/frontend/apps/desk/src/app/Header/assets/icon-desk.svg
new file mode 100644
index 0000000..06dc733
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/Header/assets/icon-desk.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/frontend/apps/desk/src/app/Header/assets/icon-faq.svg b/src/frontend/apps/desk/src/app/Header/assets/icon-faq.svg
new file mode 100644
index 0000000..acd989a
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/Header/assets/icon-faq.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/frontend/apps/desk/src/app/Header/assets/icon-gouv.svg b/src/frontend/apps/desk/src/app/Header/assets/icon-gouv.svg
new file mode 100644
index 0000000..b7445f0
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/Header/assets/icon-gouv.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/frontend/apps/desk/src/app/Header/assets/icon-marianne.svg b/src/frontend/apps/desk/src/app/Header/assets/icon-marianne.svg
new file mode 100644
index 0000000..11c4743
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/Header/assets/icon-marianne.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/frontend/apps/desk/src/app/Teams/__tests__/teams.test.tsx b/src/frontend/apps/desk/src/app/Teams/__tests__/teams.test.tsx
index 4059804..dd417dc 100644
--- a/src/frontend/apps/desk/src/app/Teams/__tests__/teams.test.tsx
+++ b/src/frontend/apps/desk/src/app/Teams/__tests__/teams.test.tsx
@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import fetchMock from 'fetch-mock';
-import { WrapperReactQuery } from '@/tests/utils';
+import { AppWrapper } from '@/tests/utils';
import { Teams } from '..';
@@ -25,7 +25,7 @@ describe('Teams', () => {
],
});
- render(, { wrapper: WrapperReactQuery });
+ render(, { wrapper: AppWrapper });
expect(screen.getByRole('status')).toBeInTheDocument();
diff --git a/src/frontend/apps/desk/src/app/Teams/index.tsx b/src/frontend/apps/desk/src/app/Teams/index.tsx
index 6b6c91a..2c42d9c 100644
--- a/src/frontend/apps/desk/src/app/Teams/index.tsx
+++ b/src/frontend/apps/desk/src/app/Teams/index.tsx
@@ -9,12 +9,13 @@ export const Teams = () => {
const { mutate: createTeam } = useCreateTeam();
const [teamName, setTeamName] = useState('');
- if (isPending)
+ if (isPending) {
return (
);
+ }
return (
<>
diff --git a/src/frontend/apps/desk/src/app/__tests__/page.test.tsx b/src/frontend/apps/desk/src/app/__tests__/page.test.tsx
index 94aaab5..dc6abfc 100644
--- a/src/frontend/apps/desk/src/app/__tests__/page.test.tsx
+++ b/src/frontend/apps/desk/src/app/__tests__/page.test.tsx
@@ -2,13 +2,13 @@ import '@testing-library/jest-dom';
import { act, render, screen } from '@testing-library/react';
import useAuthStore from '@/auth/useAuthStore';
-import { WrapperReactQuery } from '@/tests/utils';
+import { AppWrapper } from '@/tests/utils';
import Page from '../page';
describe('Page', () => {
it('checks Page rendering', () => {
- render(, { wrapper: WrapperReactQuery });
+ render(, { wrapper: AppWrapper });
expect(screen.getByRole('status')).toBeInTheDocument();
@@ -16,8 +16,6 @@ describe('Page', () => {
useAuthStore.setState({ authenticated: true });
});
- expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
- 'Hello world!',
- );
+ expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('Desk');
});
});
diff --git a/src/frontend/apps/desk/src/app/globals.css b/src/frontend/apps/desk/src/app/globals.css
index 2fde91f..67d4086 100644
--- a/src/frontend/apps/desk/src/app/globals.css
+++ b/src/frontend/apps/desk/src/app/globals.css
@@ -1 +1,6 @@
@import url('../cunningham/cunningham-style.css');
+
+body {
+ margin: 0;
+ padding: 0;
+}
diff --git a/src/frontend/apps/desk/src/app/page.module.css b/src/frontend/apps/desk/src/app/page.module.css
deleted file mode 100644
index a85c150..0000000
--- a/src/frontend/apps/desk/src/app/page.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.main {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- padding: 6rem;
-}
diff --git a/src/frontend/apps/desk/src/app/page.tsx b/src/frontend/apps/desk/src/app/page.tsx
index a367b0d..b03f20b 100644
--- a/src/frontend/apps/desk/src/app/page.tsx
+++ b/src/frontend/apps/desk/src/app/page.tsx
@@ -5,8 +5,8 @@ import { useEffect } from 'react';
import useAuthStore from '@/auth/useAuthStore';
+import Header from './Header/Header';
import { Teams } from './Teams';
-import styles from './page.module.css';
export default function Home() {
const { initAuth, authenticated, initialized } = useAuthStore();
@@ -24,8 +24,8 @@ export default function Home() {
}
return (
-
- Hello world!
+
+
);
diff --git a/src/frontend/apps/desk/src/custom-next.d.ts b/src/frontend/apps/desk/src/custom-next.d.ts
index b14e688..9a0765c 100644
--- a/src/frontend/apps/desk/src/custom-next.d.ts
+++ b/src/frontend/apps/desk/src/custom-next.d.ts
@@ -1,4 +1,8 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
+declare module '*.svg' {
+ const content: string;
+ export default content;
+}
namespace NodeJS {
interface ProcessEnv {
diff --git a/src/frontend/apps/desk/src/tests/utils.tsx b/src/frontend/apps/desk/src/tests/utils.tsx
index dd6cead..6733d0f 100644
--- a/src/frontend/apps/desk/src/tests/utils.tsx
+++ b/src/frontend/apps/desk/src/tests/utils.tsx
@@ -1,7 +1,8 @@
+import { CunninghamProvider } from '@openfun/cunningham-react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { PropsWithChildren } from 'react';
-export const WrapperReactQuery = ({ children }: PropsWithChildren) => {
+export const AppWrapper = ({ children }: PropsWithChildren) => {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
@@ -11,6 +12,8 @@ export const WrapperReactQuery = ({ children }: PropsWithChildren) => {
});
return (
- {children}
+
+ {children}
+
);
};
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/app.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/app.spec.ts
index 938a5d4..6f35472 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/app.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/app.spec.ts
@@ -7,9 +7,10 @@ test.beforeEach(async ({ page }) => {
await keyCloakSignIn(page);
});
-test.describe('App', () => {
- test('should display the homepage after keycloak login', async ({ page }) => {
- await expect(page.locator('h2')).toContainText('Hello world!');
+test.describe("App", () => {
+ test("should display the main elements", async ({ page }) => {
+ await expect(page.locator('header').first()).toContainText('Desk');
+ await expect(page.getByLabel('Team name')).toBeVisible();
});
test('creates 2 teams and displayed them', async ({ page }) => {
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
new file mode 100644
index 0000000..f0c3464
--- /dev/null
+++ b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
@@ -0,0 +1,38 @@
+import { expect, test } from "@playwright/test";
+
+import { keyCloakSignIn } from "./common";
+
+test.beforeEach(async ({ page }) => {
+ await page.goto("/");
+ await keyCloakSignIn(page);
+});
+
+test.describe("Header", () => {
+ test("checks all the elements are visible", async ({ page }) => {
+ const header = page.locator("header").first();
+
+ await expect(header.getByAltText("Marianne Logo")).toBeVisible();
+
+ await expect(
+ header.getByAltText("Freedom Equality Fraternity Logo"),
+ ).toBeVisible();
+
+ await expect(header.getByAltText("Desk Logo")).toBeVisible();
+ await expect(header.locator("h2").getByText("Desk")).toHaveCSS(
+ "color",
+ "rgb(0, 0, 145)",
+ );
+ await expect(header.locator("h2").getByText("Desk")).toHaveCSS(
+ "font-family",
+ "marianne",
+ );
+
+ await expect(
+ header.getByRole("button", { name: "Access to FAQ" }),
+ ).toBeVisible();
+ await expect(header.getByAltText("FAQ Icon")).toBeVisible();
+ await expect(header.getByText("FAQ")).toBeVisible();
+
+ await expect(header.getByAltText("Cells icon")).toBeVisible();
+ });
+});