rework accountNavigation

InseeFr · Apr 23, 2024 · ace7c1d · ace7c1d
1 parent 386c9e9
commit ace7c1d
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sonor",
   "private": true,
-  "version": "2.0.33",
+  "version": "2.0.34",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/i18n-en.js b/src/i18n-en.js
@@ -7,7 +7,7 @@ export const messagesEn = {
     goToReassignment: 'Reassignment',
     goToHelp: 'HELP',
     logout: 'Logout',
-    selectFavoriteSurveys: 'Select my favorite surveys',
+    selectFavoriteSurveys: 'MY FAVORITE SURVEYS',
     resetFilters: 'Reset filters',
     searchLabel: 'Search',
     searchInterviewerPlaceholder: 'lastname, firstname',
@@ -75,4 +75,5 @@ export const messagesEn = {
     DUK: 'Definitely unavailable for a known reason',
     DUU: 'Definitely unavailable for an unknown reason',
     NOA: 'Not applicable',
+    myProfile: 'My profile'
 }
diff --git a/src/i18n-fr.js b/src/i18n-fr.js
@@ -7,7 +7,7 @@ export const messagesFr = {
     goToReassignment: 'Réaffectation', 
     goToHelp: 'AIDE',
     logout: 'Se déconnecter',
-    selectFavoriteSurveys: 'Sélectionner mes enquêtes favorites', 
+    selectFavoriteSurveys: 'MES ENQUÊTES FAVORITES', 
     resetFilters: 'Réinitialiser les filtres',
     searchLabel: 'Recherche',
     searchInterviewerPlaceholder: 'nom, prénom',
@@ -75,4 +75,5 @@ export const messagesFr = {
     DUK: 'Indisponibilité définitive pour motif connu',
     DUU: 'Indisponibilité définitive pour motif inconnu',
     NOA: 'Sans objet',
+    myProfile: 'Mon profil'
 }
diff --git a/src/theme.tsx b/src/theme.tsx
@@ -103,6 +103,7 @@ declare module "@mui/material/SvgIcon" {
     tabTitle: true;
     headerSinglePage: true;
     cardTitle: true;
+    littleIcon: true;
   }
   interface SvgIconPropsColorOverrides {
     yellow: true;
@@ -298,6 +299,12 @@ export const theme = createTheme({
             fontSize: 24,
           },
         },
+        {
+          props: { fontSize: "littleIcon" },
+          style: {
+            fontSize: 16,
+          },
+        },
       ],
     },
     MuiPaper: {

diff --git a/src/ui/AccountNavigation.tsx b/src/ui/AccountNavigation.tsx
@@ -1,6 +1,6 @@
 import MenuItem from "@mui/material/MenuItem";
 import Box from "@mui/material/Box";
-import { Button, Menu, Typography } from "@mui/material";
+import { Button, Divider, Menu, Typography } from "@mui/material";
 import { useState } from "react";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -36,7 +36,7 @@ export const AccountNavigation = () => {
         startIcon={<AccountCircleIcon fontSize="large" style={{ color: theme.palette.text.tertiary }} />}
         endIcon={<KeyboardArrowDownIcon />}
       >
-        <Typography variant="bodyMedium">{name}</Typography>
+        <Typography variant="bodyMedium">{intl.formatMessage({ id: "myProfile" })}</Typography>
       </Button>
       <Menu
         id="account-menu"
@@ -53,22 +53,37 @@ export const AccountNavigation = () => {
           horizontal: "right",
         }}
       >
-        <MenuItem key={"favorite-surveys"} value={"favorite"}>
-          {/* TODO: change link */}
-          <Link to={"/follow"} color="inherit" underline="none">
-            {intl.formatMessage({ id: "selectFavoriteSurveys" })}
-          </Link>
+        <MenuItem disabled sx={{ "&.Mui-disabled": { opacity: 1 }, typography: "titleSmall" }}>
+          {name}
         </MenuItem>
+        <Divider variant="fullWidth" sx={{ mt: "0px !important" }} />
         {/* TODO: change link */}
-        <MenuItem {...{ component: Link, to: "/", target: "_blank" }}>
+        <MenuItem
+          {...{ component: Link, to: "/follow" }}
+          sx={{
+            mt: "12px",
+            typography: "bodyMedium",
+            textDecoration: "underline",
+            color: "primary.main",
+          }}
+        >
+          {intl.formatMessage({ id: "selectFavoriteSurveys" })}
+        </MenuItem>
+        {/* TODO: change link */}
+        <MenuItem
+          {...{ component: Link, to: "/", target: "_blank" }}
+          sx={{
+            textDecoration: "underline",
+            color: "primary.main",
+          }}
+        >
           <Row gap={0.5}>
-            <OpenInNewIcon fontSize="small" />
-            <Typography> {intl.formatMessage({ id: "goToHelp" })}</Typography>
+            <OpenInNewIcon fontSize="littleIcon" />
+            <Typography variant={"bodyMedium"}>{intl.formatMessage({ id: "goToHelp" })}</Typography>
           </Row>
         </MenuItem>
         <MenuItem
-          key={"logout"}
-          value={"logout"}
+          sx={{ typography: "bodyMedium" }}
           onClick={() =>
             logout({
               redirectTo: "specific url",

diff --git a/src/ui/Header.test.tsx b/src/ui/Header.test.tsx
@@ -21,6 +21,14 @@ describe("Header component", () => {
     expect(screen.getByText("Notifier")).toBeInTheDocument();
     expect(screen.getByText("Réaffectation")).toBeInTheDocument();
     expect(screen.getByText("Organisation des collectes")).toBeInTheDocument();
+    expect(screen.getByText("Mon profil")).toBeInTheDocument();
+  });
+
+  it("should open account menu and show name", () => {
+    WrappedRender(<Header />);
+
+    fireEvent.click(screen.getByText("Mon profil"));
+
     expect(screen.getByText("John Doe")).toBeInTheDocument();
   });
 
@@ -31,7 +39,7 @@ describe("Header component", () => {
     });
     WrappedRender(<Header />);
 
-    fireEvent.click(screen.getByText("John Doe"));
+    fireEvent.click(screen.getByText("Mon profil"));
 
     const logoutButton = screen.getByText("Se déconnecter");
     expect(logoutButton).toBeInTheDocument();