enh(header): reduce spacing and align user menu access buttons (#11201)

* remove switch from header * updtae userMenu style * update userMenu style * fixes * fixes * update switchMode * update * fix blocking witch mode * fixes * Update www/front_src/src/Header/SwitchThemeMode/index.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * Update www/front_src/src/Header/SwitchThemeMode/index.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * fixes * fix ut of userMenu * Update www/front_src/src/Header/SwitchThemeMode/index.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * fixes * Update www/front_src/src/Header/userMenu/index.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * fixes * fix hooks sort * fix position of anchor * replace HOC with custom hook * fixes * fixes * fixes * enh position of popper * init visual test userMenu * userMenuTest * first fix * fix names * fix test * Update www/front_src/src/Header/SwitchThemeMode/index.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * Update www/front_src/src/Header/userMenu/index.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * Update www/front_src/src/Header/userMenu/index.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * Update www/front_src/src/Header/SwitchThemeMode/index.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * Update www/front_src/src/Header/userMenu/index.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * snapshots * fix and update tests * Update www/front_src/src/Header/userMenu/index.cypress.spec.tsx Co-authored-by: Bruno d'Auria <bdauria@centreon.com> * fix spacing * Update www/front_src/src/Header/userMenu/index.cypress.spec.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * fixes Co-authored-by: Tom Darneix <tomdar87@outlook.com> Co-authored-by: Bruno d'Auria <bdauria@centreon.com>
centreon · Jul 18, 2022 · 87f3d64 · 87f3d64
1 parent b897835
commit 87f3d64
Show file tree

Hide file tree

Showing 15 changed files with 289 additions and 123 deletions.
diff --git a/cypress.json b/cypress.json
@@ -7,6 +7,6 @@
       "componentFolder": "./www/front_src/src",
       "testFiles": "./**/*.cypress.spec.{ts,tsx}"
     },
-    "viewportWidth": 720,
+    "viewportWidth": 920,
     "viewportHeight":  576
 } 
diff --git a/cypress/fixtures/userMenu.json b/cypress/fixtures/userMenu.json
@@ -0,0 +1,11 @@
+{
+"autologinkey": null,
+"fullname": "admin admin",
+"hasAccessToProfile": true,
+"locale": "en_US.UTF-8",
+"password_remaining_time": 15369910,
+"soundNotificationsEnabled": true,
+"timezone": "Europe/Paris",
+"userId": "1",
+"username": "admin"
+}
diff --git a/.../User Menu -- style change for darklight texts when switch is clicked.snap.png b/.../User Menu -- style change for darklight texts when switch is clicked.snap.png
diff --git a/...ll Specs/User Menu -- expands the popper when the user icon is clicked.snap.png b/...ll Specs/User Menu -- expands the popper when the user icon is clicked.snap.png
diff --git a/...napshots/All Specs/User Menu -- matches the current snapshot user menu.snap.png b/...napshots/All Specs/User Menu -- matches the current snapshot user menu.snap.png
diff --git a/www/front_src/src/Header/Clock/index.tsx b/www/front_src/src/Header/Clock/index.tsx
@@ -3,7 +3,7 @@ import { useRef, useState, useEffect } from 'react';
 import { Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
-import { useLocaleDateTimeFormat } from '@centreon/ui';
+import { centreonUi } from '../helpers/index';
 
 const useStyles = makeStyles((theme) => ({
   dateTime: {
@@ -20,7 +20,7 @@ const Clock = (): JSX.Element => {
     time: '',
   });
 
-  const { format, toTime } = useLocaleDateTimeFormat();
+  const { format, toTime } = centreonUi.useLocaleDateTimeFormat();
 
   const updateDateTime = (): void => {
     const now = new Date();
@@ -48,7 +48,7 @@ const Clock = (): JSX.Element => {
   const { date, time } = dateTime;
 
   return (
-    <div className={classes.dateTime}>
+    <div className={classes.dateTime} data-cy="clock">
       <Typography variant="body2">{date}</Typography>
       <Typography variant="body1">{time}</Typography>
     </div>

diff --git a/www/front_src/src/Header/SwitchThemeMode/images/moon.svg b/www/front_src/src/Header/SwitchThemeMode/images/moon.svg
diff --git a/www/front_src/src/Header/SwitchThemeMode/images/sun.svg b/www/front_src/src/Header/SwitchThemeMode/images/sun.svg
diff --git a/www/front_src/src/Header/SwitchThemeMode/index.tsx b/www/front_src/src/Header/SwitchThemeMode/index.tsx
@@ -1,105 +1,70 @@
-import { equals } from 'ramda';
-import { useAtom } from 'jotai';
+import { useState } from 'react';
+
+import clsx from 'clsx';
 import { useLocation } from 'react-router-dom';
 
-import { styled } from '@mui/material/styles';
-import Switch from '@mui/material/Switch';
+import { ListItemText, Switch } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
-import { userAtom, ThemeMode } from '@centreon/ui-context';
 import { patchData, useRequest } from '@centreon/ui';
 
-import svgSun from './images/sun.svg';
-import svgMoon from './images/moon.svg';
-
-interface StyleProps {
-  darkModeSvg?: string;
-  lightModeSvg?: string;
-}
+import useSwitchThemeMode from './useSwitchThemeMode';
 
-const ThemeModeSwitch = styled(Switch, {
-  shouldForwardProp: (prop) =>
-    !equals(prop, 'color') &&
-    !equals(prop, 'lightModeSvg') &&
-    !equals(prop, 'darkModeSvg'),
-})<StyleProps>(({ theme, darkModeSvg, lightModeSvg }) => ({
-  '& .MuiSwitch-switchBase': {
+const useStyles = makeStyles((theme) => ({
+  container: {
+    '& .MuiSwitch-thumb': {
+      backgroundColor: 'white',
+    },
+    '& .MuiSwitch-track': {
+      backgroundColor: '#aab4be',
+      opacity: 1,
+    },
+    alignItems: 'center',
+    display: 'flex',
+  },
+  containerMode: {
+    display: 'flex',
+    justifyContent: 'space-around',
+  },
+  containerSwitch: {
+    '& .MuiSwitch-switchBase': {
+      padding: theme.spacing(0.5, 0.5, 0.5, 0.75),
+    },
     '&.Mui-checked': {
-      '& + .MuiSwitch-track': {
-        backgroundColor: '#aab4be',
-        opacity: 1,
-      },
-      '& .MuiSwitch-thumb:before': {
-        backgroundImage: `url(${darkModeSvg})`,
+      '&:hover': {
+        backgroundColor: 'unset',
       },
-      color: 'transparent',
-      transform: 'translate(15px,-50%)',
     },
     '&:hover': {
-      backgroundColor: 'transparent',
+      backgroundColor: 'unset',
     },
-    color: 'black',
-    margin: 0,
-    position: 'absolute',
-    top: '50%',
-    transform: 'translate(-0.5px,-50%)',
   },
-  '& .MuiSwitch-thumb': {
-    '&:before': {
-      backgroundImage: `url(${lightModeSvg})`,
-      backgroundPosition: 'center',
-      backgroundRepeat: 'no-repeat',
-      content: "''",
-      height: '100%',
-      left: theme.spacing(0),
-      position: 'absolute',
-      top: theme.spacing(0),
-      width: '100%',
-    },
-    backgroundColor: 'white',
-    height: theme.spacing(3),
-    width: theme.spacing(3),
+  disabledMode: {
+    color: theme.palette.common.white,
+    opacity: 0.5,
   },
-  '& .MuiSwitch-track': {
-    backgroundColor: '#aab4be',
-    borderRadius: theme.spacing(10 / 8),
-    opacity: 1,
-  },
-  height: theme.spacing(32 / 8),
-  padding: theme.spacing(11 / 8, 4 / 8, 11 / 8, 9 / 8),
-  width: theme.spacing(50 / 8),
-}));
-
-const useStyles = makeStyles(() => ({
-  container: {
-    alignItems: 'center',
-    display: 'flex',
+  mode: {
+    paddingLeft: theme.spacing(1),
   },
 }));
 
 const SwitchThemeMode = (): JSX.Element => {
-  const props = {
-    darkModeSvg: svgMoon,
-    lightModeSvg: svgSun,
-  };
   const classes = useStyles();
   const { pathname } = useLocation();
+  const [isPending, isDarkMode, themeMode, updateUser] = useSwitchThemeMode();
+
+  const [isDark, setIsDark] = useState(isDarkMode);
 
   const { sendRequest } = useRequest({
     request: patchData,
   });
-  const [user, setUser] = useAtom(userAtom);
 
-  const isDarkMode = equals(user.themeMode, ThemeMode.dark);
   const switchEndPoint = './api/latest/configuration/users/current/parameters';
 
   const switchThemeMode = (): void => {
-    const themeMode = isDarkMode ? ThemeMode.light : ThemeMode.dark;
     const isCurrentPageLegacy = pathname.includes('php');
-    setUser({
-      ...user,
-      themeMode,
-    });
+    setIsDark(!isDark);
+    updateUser();
     sendRequest({
       data: { theme: themeMode },
       endpoint: switchEndPoint,
@@ -112,11 +77,29 @@ const SwitchThemeMode = (): JSX.Element => {
 
   return (
     <div className={classes.container}>
-      <ThemeModeSwitch
-        checked={isDarkMode}
-        {...props}
+      <Switch
+        checked={isDark}
+        className={classes.containerSwitch}
+        data-cy="themeSwitch"
+        disabled={isPending}
+        size="small"
         onChange={switchThemeMode}
       />
+      <div className={classes.containerMode}>
+        <ListItemText
+          className={clsx(classes.mode, { [classes.disabledMode]: isDark })}
+        >
+          Light
+        </ListItemText>
+
+        <ListItemText
+          className={clsx(classes.mode, {
+            [classes.disabledMode]: !isDark,
+          })}
+        >
+          Dark
+        </ListItemText>
+      </div>
     </div>
   );
 };

diff --git a/www/front_src/src/Header/SwitchThemeMode/useSwitchThemeMode.tsx b/www/front_src/src/Header/SwitchThemeMode/useSwitchThemeMode.tsx
@@ -0,0 +1,30 @@
+import { useTransition } from 'react';
+
+import { useAtom } from 'jotai';
+import { equals } from 'ramda';
+
+import { userAtom, ThemeMode } from '@centreon/ui-context';
+
+const useSwitchThemeMode = (): [
+  isDarkMode: boolean,
+  isPending: boolean,
+  themeMode: ThemeMode,
+  updateUser: () => void,
+] => {
+  const [user, setUser] = useAtom(userAtom);
+  const isDarkMode = equals(user.themeMode, ThemeMode.dark);
+  const [isPending, startTransition] = useTransition();
+
+  const themeMode = isDarkMode ? ThemeMode.light : ThemeMode.dark;
+  const updateUser = (): void =>
+    startTransition(() => {
+      setUser({
+        ...user,
+        themeMode,
+      });
+    });
+
+  return [isPending, isDarkMode, themeMode, updateUser];
+};
+
+export default useSwitchThemeMode;
diff --git a/www/front_src/src/Header/helpers/index.ts b/www/front_src/src/Header/helpers/index.ts
@@ -0,0 +1,5 @@
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+
+export const centreonUi = {
+  useLocaleDateTimeFormat,
+};
diff --git a/www/front_src/src/Header/index.tsx b/www/front_src/src/Header/index.tsx
@@ -1,3 +1,5 @@
+import { useRef } from 'react';
+
 import { makeStyles } from '@mui/styles';
 
 import FederatedComponent from '../components/FederatedComponents';
@@ -6,7 +8,6 @@ import PollerMenu from './PollerMenu';
 import HostStatusCounter from './RessourceStatusCounter/Host';
 import ServiceStatusCounter from './RessourceStatusCounter/Service';
 import UserMenu from './userMenu';
-import SwitchMode from './SwitchThemeMode';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -28,12 +29,12 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'center',
   },
   pollerContainer: {
-    flex: 0.5,
+    flex: 0.4,
   },
   rightContainer: {
     alignItems: 'center',
     display: 'flex',
-    flex: 1.1,
+    flex: 0.9,
   },
   serviceStatusContainer: {
     display: 'flex',
@@ -47,16 +48,17 @@ const useStyles = makeStyles((theme) => ({
   userMenuContainer: {
     alignItems: 'center',
     display: 'flex',
-    flex: 0.4,
+    flex: 0.3,
     justifyContent: 'flex-end',
   },
 }));
 
 const Header = (): JSX.Element => {
   const classes = useStyles();
+  const headerRef = useRef<HTMLElement>(null);
 
   return (
-    <header className={classes.header}>
+    <header className={classes.header} ref={headerRef}>
       <div className={classes.container}>
         <div className={classes.pollerContainer}>
           <PollerMenu />
@@ -72,10 +74,7 @@ const Header = (): JSX.Element => {
             <ServiceStatusCounter />
           </div>
           <div className={classes.userMenuContainer}>
-            <SwitchMode />
-            <div className={classes.userMenu}>
-              <UserMenu />
-            </div>
+            <UserMenu headerRef={headerRef} />
           </div>
         </div>
       </div>